Shopping cart module for JoomShopping 5. Made on Bootstrap 5.
The shopping cart module for the JoomShopping 5 and Joomla 4 online store has 6 output layouts:
badge
. It is convenient to place such a module in the header of the site or the mobile version of the site in the lower or upper panels.
), but by a button (tag <button>
). Learn more about goals and settings below.You want to display the basket as a panel floating out from the edge of the screen. According to Bootstrap 5.2 documentation to open or hide this panel, you need a toggler button (switch). It can be either a link (tag <a>
) or a button (tag <button>
).You can create such a button yourself in an HTML code type module and place it in the right place, or create a menu item with the necessary attributes.
However, if you would like to show the number of products near the basket icon and at the same time use it to open the basket module in Offcanvas - use the layoutbootstrap5-icon-btn.
You create 2 modules with different layouts: one with the layout bootstrap5-offcanvas (you need to remember its ID), the second with the layout bootstrap5-icon-btn. In the settings of the second module, you need to specify the parameter"ID of the module with the offcanvas layout", so that when you click on the button with the basket, the first offcanvas module appears.This parameter is used to set the data-bs-target attribute of the button.
A module with the bootstrap5-offcanvas layout is recommended to be published in the debug
position or similar so that the content of the module has the body
tag as the parent element. This is due to the peculiarities of the CSS property z-index
.