WT JShopping Cart

WT JShopping Cart replaces the standard JoomShopping cart module with a module that has a set of Bootstrap 5 layouts. The cart can be shown as an icon with the item count in the header or a mobile bar, as a list in a sidebar, or as a panel that slides in from the edge of the screen. The Ajax cart is the bootstrap5-offcanvas layout.

Module layouts

• default: the standard JoomShopping cart output, not related to Bootstrap.
• bootstrap5-icon: a link button with a cart icon and the number of items in a badge. Suits the site header and the top or bottom bar of the mobile version.
• bootstrap5-icon-and-text: the same link button, but with the word "cart" and the cart total.
• bootstrap5-list-group: the cart as a Bootstrap 5 List group component for the left or right column. Product attributes and weight can be shown.
• bootstrap5-offcanvas: the cart as a Bootstrap 5 Offcanvas component, a panel sliding in from the right or left. It is essentially the bootstrap5-list-group layout inside Offcanvas, with product attributes and weight available as well.
• bootstrap5-icon-btn: a copy of bootstrap5-icon, except the module is output as a button (<button> tag) rather than a link (<a> tag). It is used to open the cart in Offcanvas.

Installation and setting up the Offcanvas cart

According to the Bootstrap 5.2 documentation, an Offcanvas panel is opened and closed by a toggler, either a link or a button. It can be made by hand in a Custom HTML module or as a menu item with the required attributes. If the cart icon should show the item count and open the panel on click, a pair of modules is used:

1. Install the module through the Joomla Extension Manager.
2. Create a module with the bootstrap5-offcanvas layout and note its ID. It is best published in the debug position or a similar one, so that the module content has the body tag as its parent; this is due to how the CSS z-index property works.
3. Create a second module with the bootstrap5-icon-btn layout and enter the first module's ID in the "ID of the module with the offcanvas layout" parameter. The parameter sets the button's data-bs-target attribute, and clicking the icon opens the cart panel.

Links to the cart and checkout

For SEF links to the cart and checkout in the module, create JoomShopping menu items of both types, Basket (the cart) and Checkout. They are usually hidden in the menu item settings.

Compatibility and requirements

• Joomla 4 and 5.
• JoomShopping 5.
• Bootstrap 5 styles in the site template for the bootstrap5-* layouts; the bootstrap5-offcanvas layout loads the Offcanvas script itself through the Joomla Web Asset Manager.