[Онлайн-обучение] Создаём интернет-магазин с нуля для slon21veka! Этап 11: Корзина покупателя.

Ссылки на предыдущие уроки:


Итак, с созданием и выводом категорий и товаров более-менее разобрались. Следующий обязательный этап - создание покупательской корзины. Точнее она уже существует внутри компонента VirtueMart - нам осталось только отобразить её на сайте.

К примеру, это можно сделать стандартными средствами. Добавим в главное меню пункт "Корзина" и выберем для него тип Корзина из списка типов VirtueMart

Просто, но примитивно. А хотите полноценную корзину с выпадающим при наведении списком лежащих в ней товаров и отображением общей суммы? В этом случае нам предстоит скачать дополнительный модуль.

Для VirtueMart создано очень большое количество расширений, дополнений и модулей. Но, к сожалению, большинство из них платные...
В рамках данного курса мы постараемся обойтись только бесплатными средствами.

В этот раз нам повезло - существует бесплатный модуль корзины, отвечающий нашим требованиям! Посмотреть описание и скачать его можно здесь. Обратите внимание, что этот модуль представлен в 2х версиях: 1.5 для virtuemart ниже 3.2.0 и 1.6 - для virtuemart 3.2.0 и выше.
Скачайте нужную вам версию. Посмотреть какая версия VirtueMart у вас установлена можно в Панели управление VirtueMart в меню слева. У меня установлена последняя версия - 3.2.12

Далее, установим модуль (Расширения - Менеджер расширений - Установка) и найдём его в списке модулей (Расширения - Модули) под названием Корзина VirtueMart

Займёмся настройкой. Справа:

  • выберем Скрыть заголовок
  • Определимся с позицией в которой будет отображаться наш модуль.
    О позициях модулей мы подробно говорили на 5м этапе. Поэкспериментируйте с установкой модуля в разные позиции, чтобы определиться с наилучшей для вас.
  • Состояние - опубликовано.

Слева мы видим настройки отображения корзины. Здесь можно:

  • Задать цвет корзины в шестнадцатеричном формате
  • Выбрать изображение корзины из 10 различных вариантов.
  • Выбрать вариант анимации появления выпадающего списка товаров, при наведении курсора на корзину.
  • "Положение" - указывает место изображения корзины, относительно общей цены.
  • Ну и 2 последних пункта определяют нужно ли показывать список товаров и их изображения.

После этого, не забудьте на второй вкладке настроить привязку модуля к пунктам меню. У меня он будет отображаться на всех страницах.


По поводу задания цвета расскажу отдельно. Здесь цвет задаётся с помощью кода в, так называемом, HEX формате. Чтобы определить какой код соответствует нужному вам цвету, воспользуемся онлайн конвертером цветов.

Просто выберете нужный вам цвет и скопируйте код из поля HEX. Код обязательно должен начитаться с символа решётки. Например: #11с223.


Посмотрим что получилось у нас на сайте:

В целом неплохо!

А в следующий раз мы заглянем внутрь корзины и сделаем необходимые настройки там.

Автор поста Михаил, @manavendra
Скриншоты из личного архива автора


Платформа Pokupo.ru ищет региональных представителей.
Обязанности, выгоды и условия сотрудничества - здесь.

vp-pedsovetvox-populiонлайнкурсpsk11с223
25%
2
219
33.180 GOLOS
0
В избранное
ПЕДСОВЕТ
Сообщество педагогов, воспитателей, руководителей кружков, тренеров ДЮСШ, студентов, учащихся и их родителей
219
0

Зарегистрируйтесь, чтобы проголосовать за пост или написать комментарий

Авторы получают вознаграждение, когда пользователи голосуют за их посты. Голосующие читатели также получают вознаграждение за свои голоса.

Зарегистрироваться
Комментарии (1)
Сортировать по:
Сначала старые