WT JShopping Cart

WT JShopping Cart заменяет стандартный модуль корзины JoomShopping модулем с набором макетов на Bootstrap 5. Корзину можно показать иконкой с числом товаров в шапке или мобильной панели, списком в боковой колонке или панелью, которая выезжает из края экрана. Ajax-корзина — макет bootstrap5-offcanvas.

Макеты модуля

• default — стандартный вывод корзины JoomShopping, без Bootstrap.
• bootstrap5-icon — ссылка-кнопка с иконкой корзины и количеством товаров в бейдже. Подходит для шапки сайта и для верхней или нижней панели мобильной версии.
• bootstrap5-icon-and-text — такая же ссылка-кнопка, но со словом «корзина» и суммой товаров.
• bootstrap5-list-group — корзина в виде компонента Bootstrap 5 List Group для правой или левой колонки. Можно выводить атрибуты и вес товаров.
• bootstrap5-offcanvas — корзина в виде компонента Bootstrap 5 Offcanvas: панель, выезжающая справа или слева. По сути это макет bootstrap5-list-group внутри Offcanvas, атрибуты и вес товаров тоже доступны.
• bootstrap5-icon-btn — копия bootstrap5-icon, но модуль выводится кнопкой (тег <button>), а не ссылкой (тег <a>). Нужен, чтобы открывать корзину в Offcanvas.

Установка и настройка корзины в Offcanvas

По документации Bootstrap 5.2 панель Offcanvas открывается и закрывается кнопкой-переключателем — ссылкой или кнопкой. Её можно сделать самостоятельно в модуле «HTML-код» или пунктом меню с нужными атрибутами. Если же у иконки корзины должно быть видно количество товаров и по клику должна открываться панель, используется связка из двух модулей:

1. Установить модуль через менеджер расширений Joomla.
2. Создать модуль с макетом bootstrap5-offcanvas и запомнить его ID. Публиковать его рекомендуется в позиции debug или похожей, чтобы родительским элементом содержимого был тег body, — это связано с особенностями CSS-свойства z-index.
3. Создать второй модуль с макетом bootstrap5-icon-btn и в параметре «ID модуля с макетом offcanvas» указать ID первого модуля. Параметр задаёт атрибут data-bs-target кнопки, и по клику на иконку открывается панель с корзиной.

Ссылки на корзину и оформление заказа

Чтобы ссылки на корзину и оформление заказа в модуле были человекопонятными (ЧПУ), нужно создать пункты меню JoomShopping обоих типов — «Корзина» и «Оформить заказ». Обычно их делают скрытыми в настройках пункта меню.

Совместимость и требования

• Joomla 4 и 5.
• JoomShopping 5.
• Для макетов bootstrap5-* — стили Bootstrap 5 в шаблоне сайта; скрипт Offcanvas макет bootstrap5-offcanvas подключает сам через Web Asset Manager Joomla.