Ajax-модуль корзины для интернет-магазина JoomShopping 5 и Joomla 4/5/6. Шесть макетов вывода: от стандартного вывода корзины JoomShopping до иконки в шапке и плавающей панели Bootstrap 5 Offcanvas.
Макеты модуля
- default — стандартный вывод корзины JoomShopping, никак не связан с Bootstrap.
- bootstrap5-icon — модуль выводится ссылкой-кнопкой с иконкой корзины и количеством товаров в виде бейджа. Удобно размещать в шапке сайта или в мобильной версии в нижней/верхней панели.
- bootstrap5-icon-and-text — ссылка-кнопка, как bootstrap5-icon, но со словом «корзина» и суммой товаров в корзине.
- bootstrap5-list-group — корзина выводится как компонент Bootstrap 5 List Group. Можно размещать в правой или левой колонке сайта. В этом макете можно выводить атрибуты и вес товаров.
- bootstrap5-offcanvas — корзина выводится как компонент Bootstrap 5 Offcanvas: выезжающая вправо или влево панель. По сути, макет bootstrap5-list-group, завёрнутый в Offcanvas. Атрибуты и вес товаров тоже доступны.
- bootstrap5-icon-btn — копия макета bootstrap5-icon с одним отличием: модуль выводится не ссылкой (тег
<a>), а кнопкой (тег<button>). Подробнее о целях и настройках ниже.
Настройка модуля с Bootstrap 5 Offcanvas
Допустим, вы хотите показывать корзину как панель, выезжающую из края экрана. По документации Bootstrap 5.2 для открытия и скрытия этой панели нужна кнопка-переключатель: это может быть и ссылка (тег <a>), и кнопка (тег <button>). Такую кнопку можно создать самому в модуле типа «Произвольный HTML-код» и разместить в нужном месте либо создать пункт меню с нужными атрибутами.
Если же хотите показывать количество товаров у иконки корзины и одновременно открывать модуль корзины в Offcanvas — используйте макет bootstrap5-icon-btn.
Создайте два модуля с разными макетами: один с макетом bootstrap5-offcanvas (запомните его ID), второй — с макетом bootstrap5-icon-btn. В настройках второго модуля укажите параметр «ID модуля с макетом offcanvas», чтобы при клике по кнопке с корзиной появлялся первый модуль offcanvas. Этот параметр задаёт атрибут data-bs-target кнопки.
Модуль с макетом bootstrap5-offcanvas рекомендуется публиковать в позиции debug или подобной, чтобы родительским элементом содержимого был тег body — это связано с особенностями CSS-свойства z-index.
