Moushe.ru

Блог обо всём

OpenCart 1.5.3 картинка корзины



Сегодня я решил написать урок с незначительным изменением OpenCart’а. Садитесь поудобнее пододвигайте к себе поближе клавиатуру с мышкой и начнём.

1

1. Откроем папку image (../catalog/view/theme/default/image) и закинем в неё такую картинку:

basket

(или любую другую)

2. Откроем файл cart.tpl (../catalog/view/theme/default/template/module) и после этого (1):

<div id="cart">

вставим это:

<div class="basket"><img src="catalog/view/theme/default/image/basket.png" ?></div>

3. Откроем stylesheet.css (../catalog/view/theme/default/stylesheet) и после этого (137-143):

#header #cart {
position: absolute;
top: 0px;
right: 145px;
z-index: 9;
min-width: 300px;
}

вставим это:

#header #cart .basket {
display: inline-block;
float: left;
padding-top: 5px;
}

Как видим наша картинка корзины перекрывает выбор валют, значит нам нужно чуть-чуть передвинуть выбор валют влево, изменим это (116-123):

#currency {
width: 75px;
position: absolute;
top: 15px;
left: 425px;
color: #999;
line-height: 17px;
}

на это:

#currency {
width: 75px;
position: absolute;
top: 15px;
left: 360px;
color: #999;
line-height: 17px;
}

При необходимости сдвинуть немного выбор языка изменим это (104-111):

#language {
position: absolute;
top: 15px;
left: 320px;
width: 80px;
color: #999;
line-height: 17px;
}

на это:

#language {
position: absolute;
top: 15px;
left: 300px;
width: 80px;
color: #999;
line-height: 17px;
}

Результат:

1

На сегодня всё, следите за нашими новостями. Улыбка


53 Комментария

  1. Игорь

    22.10.2012 at 15:15

    2. Откроем файл header.tpl (../catalog/view/theme/default/template/module) и после этого (1):
    нет такого файла в этой папке

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      22.10.2012 at 22:27

      Статья исправлена, файл cart.tpl, а не header.tpl опечатался.

  2. Я вот модифицировал по вашим урокам http://droidpit.ru

    Ищу как, сделать вот так http://clip2net.com/s/2qj1w:
    Строку поиска поместить над меню категорий.
    Центровать в главном меню ссылки
    «Войти или зарегистрироваться» поместить в правый верхний угол
    «Корзина покупок» под «Войти или зарегистрироваться»
    Поместить в центре в Header контакты.

    Думаю такой урок будет популярным! Сделайте плиз? Могу даже доступ на фтп дать 🙂

    • Научился двигать элементы. При помощи Firebug и Web Developer — узнаем что и как двигать. И потом правим stylesheet.css

      Кстати у меня такой глюк в chrome http://clip2net.com/s/2qm4w (он был изначально когда я картинку корзины добавил)

      У вас он тоже есть — посмотрите в Chrome.

    • Ok разобрался — нужно было
      margin-right править в div class=»heading»

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      23.10.2012 at 21:24

      Урок возможно сделаю, а доступ по фтп к чужому сайту мне без надобности. Косяк с Хромом исправил, нужно было задать картинке позицию — float: left;. Статью подправил. Спасибо за найденный глюк.

  3. Валерий

    23.10.2012 at 14:51

    Спасибо.

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      23.10.2012 at 23:35

      Пожалуйста.

  4. Большое спасибо! Очень полезный урок!

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      23.10.2012 at 23:25

      Пожалуйста. 🙂

  5. Александр

    12.11.2012 at 00:55

    Добрый вечер. Подскажите пожалуйста:
    1. Как убрать поднятие корзины, при нажатии на ней.
    2. Как сделать чтобы при добавление в корзину она меняла свою картинку.
    P.S. Заранее спасибо.

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      12.11.2012 at 20:59

      1. Размер картинки какой? Больше чем в уроке?
      2. Не знаю, нужно возиться.

  6. Святослав

    17.12.2012 at 21:22

    Здравствуйте! Поставил, но корзина расположилась сверху надписи «Корзина покупок» и весь модуль съехал вниз перекрыв горизонтальное меню. Как можно исправить? Спасибо.

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      17.12.2012 at 22:24

      css стиль отображает картинку и надпись корзины на одной строке.

  7. Владислав Храмцов
    vkontakte.ru Владислав Храмцов

    18.12.2012 at 22:15

    У корзины фиксированное положение, меняйте цифры у top и right

  8. Святослав

    18.12.2012 at 22:22

    Да, сделал все как у Вас. Но остается также. Отправлю скрины на почту. Посмотрите, пожалуйста.

  9. Святослав

    18.12.2012 at 22:32

    Владислав.

    Все нормально. Перезагрузил браузер все стало на место.

    Спасибо.

  10. А имя файла и примерные строки, где находится код корзины не подскажите пожалуйста? 🙁 Что то еще у меня проблема после какого то урока стала, товары сбились когда выбираю сетку все нормально, а вот когда список все товары криво стоят, извините что не по теме, надеюсь вы поможете, заранее очень вам благодарен! Вот скрин: http://imageshost.ru/photo/91320/id2632334.html

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      19.12.2012 at 22:31

      Вы бы в первом посте хотя бы обьяснили что вопрос не по уроку, а по кнопке купить… Я ж не медиум…
      Вот под этой надписью — /* button */ (у меня это 534-585 строки)

  11. Новичек

    23.12.2012 at 20:06

    Здравствуйте, помогите пожалуйста, проблема заключается в том, что изменил цвет фона в верхней части, и теперь надпись «корзина покупок» и «Товаров: 0 ($0)» имеет белый квадрат под текстом, как сделать что бы под текстом был фон который я изменил, а не белый квадрат, т. е. что бы текст был как картинка в формате png, надеюсь вы меня правильно поймете)))) Заранее очень вам благодарен за помощь.

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      23.12.2012 at 21:29

      header cart .heading имеет фон — background: #FFF; просто удалите его.

  12. Михаил

    27.12.2012 at 07:06

    Здравствуйте! Ваши уроки очень помогли, узнал много чего.
    Вот только в этом уроке запарка:
    Не могу вывести изображение корзины.. Сделал всё, как вы и написали, но никаких изменений на сайте не происходит. Тема не стандартная. и ещё — не могу найти строчку:
    #header #cart {
    position: absolute;
    top: 0px;
    right: 145px;
    z-index: 9;
    min-width: 300px;
    }
    Надеюсь на ваш ответ. Заранее благодарен.

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      27.12.2012 at 21:09

      Вот в вашем css файле строки 152-158:

      #header #cart {
      min-width: 350px;
      position: absolute;
      right: -150px;
      top: 18px;
      z-index: 9;
      }

      Правьте стили и всё будет отображаться.

  13. Дмитрий

    06.01.2013 at 14:02

    Здравствуйте, помогите пожалуйста, проблема заключается в том, что как добавил корзину, при нажатие на надпись «Войти» под «Поиском» засвечивается иконка корзины.
    Только если нажать под надписью Войти на полосочку, попадаю в меню аккаунт.
    Заранее очень вам благодарен

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      06.01.2013 at 15:42

      Нужно настроить отступы от иконки, дайте ссылку на сайт.

    • Дмитрий

      06.01.2013 at 17:31

      Сделал так:
      #header #cart {
      position: absolute;
      top: 0px;
      right: 145px;
      z-index: 5;
      min-width: 300px;
      В роди все нормально работает.
      Сайт пока что на Denwer, доделываем.
      Если можешь подскажи, с моими изменениями оно будет нормально работать?

      Впервые встречаю таких людей как Ты!
      Спасибо тебе за статьи и за помощь!!!

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      06.01.2013 at 18:43

      А почему не будет то. 🙂

  14. Здравствуйте, подскажите пожалуйста как сделать изображение корзины выше надписи «корзина покупок», а не слева, и как саму картинку корзины сделать вместе с надписью ссылкой? а то сейчас картинка стоит слева слишком далеко от надписи, если ее подвинуть ближе, то при добавлении товара картинка сдвигается, и не красиво получается( Заранее вам спасибо, очень надеюсь на вашу помощь…

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      29.01.2013 at 12:30

      Пишите на почту — hruhru.87@mail.ru, в комментах не отображает код.

  15. Здравствуйте, Владислав! присоединяюсь к предыдущему вопрошателю. сложно ли сделать саму картинку корзины тоже ссылкой?
    Большое Вам спасибо! Очень актуальные уроки!

  16. Владислав Храмцов
    vkontakte.ru Владислав Храмцов

    12.04.2013 at 21:02

    ../catalog/view/theme/default/template/module/cart.tpl вместо строки *h4*< ?php echo $heading_title; ?>*/h4* (* — скобки) вставляем ссылку с картинкой.

  17. Андрей

    03.11.2013 at 01:20

    Корзина встала над количеством товара а не слева от него, можно ли как то прописать в css возможность свободной манипуляции по всему хэдеру этой самой картинки?

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      03.11.2013 at 21:45

      Задайте position absolute и положение с помощью top, left

  18. Все сделала по пунктам, но иконка так и не появилась((((. Что делать теперь? Версия OpenCart 1.5.4.1. Заранее спасибо за ответ!

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      27.11.2013 at 12:29

      Проверьте свои труды на ошибки. Статья не содержит ошибок и результат виден не на одном интернет магазине.

  19. Добрый день ! Подскажите, пожалуйста, как красиво оформить выбор валюты (типа две иконки флага без текста) и задать вывод цены по умолчанию в гривнах, если в настройках по умолчанию указан доллар и цены заносятся именно в долларе ?? Заранее благодарен

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      24.05.2014 at 23:44

      Проблему ещё не исправили? Был в отпуске.

  20. facebook.com Владимир Бончев

    30.05.2014 at 15:46

    Все добавил и все получилось. Теперь вот какой вопрос интересует: как изображению карты добавить ссылку на покупки, чтобы при нажатии на корзинку открывалась реальная корзина где указаны все товары положенные в корзину как при нажатии на 0 штук(и) — 0.00. Спасибо.

  21. facebook.com Владимир Бончев

    30.05.2014 at 16:39

    Какой быстрый ответ! … Не могу найти указанную строчку. У меня из похожего только: <a href="»><img src="» title=»» alt=»» /> и <!—<a href="»><a href="»><a href="»><a href="»>—> а <img нет

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      30.05.2014 at 21:50

      Вы картинку куда прописали? (cart.tpl) В этом файле и добавляйте.

  22. facebook.com Владимир Бончев

    02.06.2014 at 16:59

    Все верно, я картинку прописывал в cart.tpl по Вашему уроку http://moushe.ru/nashi-stati/web-dizajn-2/opencart-1-5-3-kartinka-korziny/ но у меня нет тех строчек что указаны в пункте 4 из Вашей ссылки. Из похожего только

  23. facebook.com Владимир Бончев

    02.06.2014 at 17:04

    Может подскажете заодно…? Как убрать ограничение в 100 знаков в кратком описании товара в отображении list. Все найденный сотни изменил на 300 и все равно ничего не меняется. При первоначальной загрузке страницы вроде и покажет на секунду больше знаков и опять пропадет и покажет как было.. Ничего не могу понять…

  24. Доброго дня! У меня почему-то обтекание не слева происходит, а сверху. То есть картинка над надписью «корзина» находится. Подскажи пожалуйста, в чём может быть проблема и как можно исправить?
    Вот мой ресурс, если нужно — taidar.ru

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      22.06.2014 at 12:11

      Вы первую часть 3 шага по вставке Css кода сделали? Я к примеру не вижу в ваших стилях #header #cart .basket, а в статье мы вставляем этот код.

  25. конечно все хорошо, но не очень понятно так как я новичок и нас таких много.

  26. Добрый день,
    Картинку в корзину вставить удалось, всё ок, но в процессе «юзанья» магазина заметил недостаток по этой картинке. Если название товара очень длинное, то при добавлении его в корзину, а затем при «клацанье на этой корзине, картинка установленной в этом уроке корзины съезжает влево, поскольку её двигает длинное название товара.

  27. Григорий

    05.02.2016 at 10:43

    исправьте название картинки (убрать thumb) или добавить его в код

Добавить комментарий

Your email address will not be published.

*

CAPTCHA image
*

© 2016 Moushe.ru При копировании материалов, ссылка на нас обязательна!

Вверх ↑



Яндекс.Метрика