[Онлайн-обучение] Создаём интернет-магазин с нуля для 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 ищет региональных представителей.
Обязанности, выгоды и условия сотрудничества - здесь.