Overview
JB Advanced Cart is a premium AJAX-powered shopping cart module for VirtueMart that enhances the e-commerce functionality of your Joomla website. Developed by JoomBoost, this paid extension offers multiple display templates, customizable styling, and interactive features that improve the shopping experience for your customers.
Features
- Three display templates: Overlay, Dropdown, and Plain List
- AJAX-powered cart updates (no page refresh required)
- Product quantity updates directly from the cart
- Product removal functionality
- Empty cart option
- Customizable styling and colors
- Responsive design
System Requirements
Minimum Requirements
- Joomla 4.4.x or 5.x+
- PHP 7.2 or higher (recommended: PHP 8.0+)
- MySQL 5.6 or higher
- VirtueMart 4.0 or higher
- JavaScript enabled in the browser
- Bootstrap compatible Joomla template
Installation
New Installation
- Purchase the JB Advanced Cart extension from the product page
- Download the extension from your JoomBoost account
- Log in to your Joomla administrator panel
- Go to Extensions → Manage → Install
- Select the "Upload Package File" tab
- Drag and drop the downloaded zip file or use the "Choose File" button to select it
- Click "Upload & Install"
- Go to Extensions → Modules → Site
- Find and open the JB Advanced Cart module
- Configure the module settings and position
- Set "Status" to "Published"
- Assign the module to your desired menu items in the "Menu Assignment" tab
- Save & Close
For detailed instructions on installing Joomla extensions, refer to the official Joomla documentation.
Adding and Managing the Module
After installation, you'll need to add and configure the module for display on your website:
- Log in to your Joomla administrator panel
- Navigate to Content → Site Modules
- Locate the JB Advanced Cart module in the list or click New to add it if it's not listed
- If creating new, select "JB Advanced Cart for VirtueMart" from the available modules list
Module Positioning and Display
- Set a descriptive Title for the module (e.g., "Shopping Cart")
- Select a Position from the drop-down list (common positions for cart modules include: header, top, position-7, etc.)
- Set Status to "Published"
- Configure Menu Assignment to control which pages the module appears on:
- On all pages: The module will appear on every page
- No pages: The module won't be displayed
- Only on the pages selected: Choose specific pages
- On all pages except those selected: Exclude specific pages
- Set the Access level to control which user groups can see the module
Module Ordering
To change the order of modules in the same position:
- In the Modules list, select the Order Symbol in the column headings
- Use the drag handle for the JB Advanced Cart module to move it up or down within its assigned position
- Alternatively, use the ordering numbers and save to reorder modules
For more detailed instructions on adding and managing Joomla modules, refer to the Joomla documentation on adding a module.
Update Procedure
Manual Update
- Download the latest version of JB Advanced Cart
- Log in to your Joomla administrator panel
- Go to Extensions → Manage → Install
- Select the "Upload Package File" tab
- Drag and drop the new version zip file or use the "Choose File" button to select it
- Click "Upload & Install"
- The system will automatically update the existing module
Automatic Updates
JB Advanced Cart supports Joomla's automatic update system when used with a valid download key from JoomBoost. To set up automatic updates:
- Obtain your Download Key from your JoomBoost account
- Log in to your Joomla administrator panel
- Go to Components → JoomBoost → Dashboard
- Click on the "Download Key" button
- Enter your Download Key in the field provided
- Click "Save"
Once configured, your JB Advanced Cart module can be updated automatically when:
- You check for updates in Joomla's Update System (Extensions → Manage → Update)
- Joomla's automatic update notification system detects a new version
For detailed instructions on adding your JoomBoost download key, refer to the JoomBoost documentation.
Important Update Notes
- Always back up your website before updating any extensions
- Check the changelog for any breaking changes
- Check and compare your override files
- After updating, verify that the module works correctly
- If you've made custom modifications to the module files and you didn't use overrides features, they may be overwritten during the update
Module Configuration
Basic Settings (Module Tab)
-
Title: Set the module title (e.g., "Cart")
-
Choose Template: Select from three display options:
- Overlay: Displays cart content in a popup overlay
- Dropdown: Shows cart content in a dropdown panel
- Plain List: Displays cart content as a standard list
-
Cart's icon: Choose the FontAwesome icon for the cart (default: fa-shopping-bag)
-
Common Display Options:
- Show cart's icon: Toggle cart icon visibility
- Show cart's title: Toggle title visibility
- Show cart's summary: Toggle the summary line showing item count and total
- Show Update Quantity: Enable/disable quantity update controls
- Show Delete Item: Enable/disable item removal buttons
- Show Empty Cart: Show/hide the "Empty Cart" button
- Show Show Cart: Show/hide the "Show Cart" button
- Show Product Custom Data: Display custom product fields
Template-Specific Settings
Overlay Template
The Overlay template displays the cart content in a popup when clicked or hovered.
Dropdown Template
Additional settings for the Dropdown template:
- Cart Width: Set width in pixels (e.g., 250)
- Dropdown Position: Choose between Left or Right alignment
- Dropdown On: Select trigger method (Hover or Click)
- Dropdown when cart empty: Control dropdown behavior for empty cart
Plain List Template
The Plain List template shows cart items in a standard list format.
Designer Tab
The Designer tab allows you to customize the colors and appearance of various cart elements:
- Header Title: Color for the cart title
- Summary: Color for the summary text
- Cart Count Background: Background color for the item count badge
- Cart Count: Text color for the item count
- Name: Product name text color
- Name Hover: Product name hover color
- Quantity: Quantity text color
- Price: Price text color
- Total Price: Total price text color
- Button Text: Color for button text
- Button background: Button background color
- Button Background Hover: Button hover background color
- List Background: Background color for the item list
- Icon Button: Color for icon buttons
- Icon Hover: Color for icon buttons on hover
Advanced Tab
The Advanced tab contains additional configuration options for module caching and advanced parameters.
Permissions Tab
Control which user groups can view and edit the module.
Usage Examples
Standard Cart Display
The default cart display shows:
- Cart icon (customizable via FontAwesome)
- "SHOPPING CART" title
- Summary showing number of items and total cost
Expanded Cart View
When expanded (via click or hover depending on settings), the cart shows:
- Product details including name, attributes
- Quantity with update controls
- Individual and total prices
- Action buttons (Empty Cart, Show Cart)
Integration with VirtueMart
JB Advanced Cart automatically integrates with your VirtueMart store, displaying products added to the cart in real-time through AJAX. The module reflects updates immediately when:
- Products are added to cart
- Quantities are changed
- Products are removed
- Cart is emptied
Common Issues & Troubleshooting
Cart Not Updating
If the cart doesn't update when products are added:
- Check that the module is published
- Verify that JavaScript is enabled in the browser
- Check for JavaScript conflicts with other extensions
Styling Issues
If the cart doesn't match your site's design:
- Use the Designer tab to adjust colors
- Check your template's CSS for potential conflicts
- Consider adding custom CSS through your template
Support Resources
For additional help:
- Click the "Documentation" button in the module interface
- View the official changelog through the "ChangeLog" button or visit the JB Advanced Cart Changelog
- Contact support via the "Support" button
- Visit the JoomBoost website for the latest updates and additional extensions
- Refer to official Joomla resources:
Best Practices
-
Choose the appropriate template based on your site design:
- Overlay works well for clean, modern interfaces
- Dropdown is ideal for sites with limited header space
- Plain List offers a traditional e-commerce experience
-
Optimize for mobile users by ensuring the cart is easily accessible on smaller screens
-
Use consistent colors that match your site's design by configuring the Designer options
-
Place the module strategically in a position that's visible throughout the shopping experience (typically header or top of sidebar)