Sticky Add to Cart for PrestaShop — Complete guide

Overview

DataFirefly Sticky Add to Cart displays a persistent “Add to Cart” bar on the product pages of your PrestaShop 8 or 9 store. On mobile, a compact bar docks to the bottom of the screen. On desktop, a floating sidebar slides in from the right (or, alternatively, a bottom bar identical to the mobile one). The bar includes a compact variant selector, a quantity selector and a real-time price display.

The cart addition is performed through a direct AJAX request to PrestaShop’s cart controller: the module never manipulates your theme’s form or native button, guaranteeing conflict-free coexistence.

Installation

1. In your PrestaShop back office, open Modules > Module Manager.
2. Click Upload a module and select the dfstickyaddtocart.zip file.
3. Once the module is installed, click Configure.
4. Clear the PrestaShop cache: Advanced Parameters > Performance > Clear cache.

Configuration

All settings live in Modules > Module Manager > DataFirefly Sticky Add to Cart > Configure.

Display

• Enable module — global switch.
• Show on mobile — enables the bottom bar on screens under 992 px.
• Show on desktop — enables display on screens of 992 px and above.
• Desktop layout — two modes: Floating sidebar (right), a 320 px card sliding in from the right edge, or Bottom bar, identical to the mobile rendering but centered at 1280 px.
• Desktop top offset (px) — distance between the top of the viewport and the floating sidebar. Increase this value if your theme has a sticky header (90 px by default).

Bar content

• Show product image — cover image thumbnail.
• Show variant selector — compact dropdown of combinations (automatically hidden when the product has none).
• Show quantity selector — minus / plus buttons (shown on desktop; on mobile the quantity stays at 1 to preserve compactness).
• Hide when main button visible — the bar only appears once the original “Add to Cart” button leaves the viewport (recommended). Disable it for an always-visible bar.

Colors

• Background color — bar background (white by default).
• Button color — add-to-cart button (teal #2fb5d2 by default).
• Button text color — button label.
• Text color — product name and labels.
• Price color — optional; when empty, the button color is used.

How it works

Visibility detection

The module observes the original “Add to Cart” block with the browser’s IntersectionObserver API. As soon as this block leaves the viewport (the user has scrolled), the sticky bar appears with a slide animation. As soon as it comes back into view, the bar disappears. This mechanism is native to the browser and adds zero performance cost to scrolling.

Variant selector

For products with combinations, the compact selector lists each variant with its price and availability (out-of-stock variants are disabled). The selection is local to the sticky bar: it does not modify the main page’s variant UI. When the customer changes variant from the main page, the sticky bar syncs automatically via PrestaShop’s updatedProduct event.

Add to cart

Clicking the sticky button sends an AJAX POST request directly to PrestaShop’s cart controller (the same endpoint the theme uses), with the variant and quantity chosen in the bar. On success, the module emits the updateCart event: the cart counter in the header and your theme’s cart preview update normally, and the sticky button shows a confirmation check mark.

Mobile display

On mobile, the bar adapts automatically:

• Product without variants — a single row: thumbnail, name, price and button. Under 600 px the button label gives way to the cart icon; under 380 px the thumbnail is hidden.
• Product with variants — two rows: thumbnail, name, price and button on the first; full-width variant selector on the second.

The bar respects the safe-area-inset-bottom zone of notched iPhones and the prefers-reduced-motion preference of users sensitive to animations.

Theme compatibility

The module targets the standard CSS selectors of the Classic theme and its derivatives: .product-add-to-cart, .add-to-cart, button[data-button-action="add-to-cart"], form#add-to-cart-or-refresh. The vast majority of market themes follow these conventions.

If your theme uses different classes, two functions to adapt are located at the top of the views/js/dfstickyaddtocart.js file: getMainBtn() (native button selector) and getMainForm() (product form selector). These are the only two points of contact with your theme.

Troubleshooting

The bar does not appear

1. Check that the module is enabled in its configuration and that display is active for the device you are testing (mobile / desktop).
2. Clear the PrestaShop cache (Advanced Parameters > Performance) then reload the page with Ctrl+Shift+R.
3. If the “Hide when main button visible” option is on, the bar only appears after scrolling past the original button — this is the expected behavior.
4. Check the browser console for JavaScript errors from other modules that could block page execution.

Add to cart does not work

1. Open the browser console: the module logs its errors with the [dfsticky] prefix.
2. Check the POST request to the cart controller in the Network tab: the HTTP status and response body indicate the exact cause (out of stock, minimum quantity, etc.).
3. The module tolerates PHP warnings in development environments (it extracts the JSON even when warnings precede it), but a clean production environment remains recommended.

The sidebar overlaps the theme header

Increase the Desktop top offset (px) value in the configuration until the sidebar sits below your sticky header.

Technical FAQ

Does the module slow pages down?

No. The assets (around 7 KB of CSS and 12 KB of JavaScript) load only on the product controller. No external library, no scroll listener: visibility is handled by IntersectionObserver.

Is it multistore compatible?

Yes. All values are stored via PrestaShop’s Configuration class with the native multistore context: each shop can have its own colors and settings.

Which hooks are used?

actionFrontControllerSetMedia (asset registration), displayFooterProduct (markup rendering) and displayHeader (critical anti-flash micro-CSS).

Are the strings translatable?

Yes. All strings go through the PrestaShop translation system. The module ships in French, English, Spanish and German; add more languages via International > Translations.

Changelog

1.0.3

• Tolerant parsing of cart controller responses: the JSON is correctly extracted even when PHP warnings precede it (development environments).
• URL-encoded request body, identical to the theme’s native serialization, for maximum compatibility.
• Complete removal of any programmatic triggering of the native button: both buttons are now fully independent.

1.0.2

• Removed rendering of the confirmation modal returned by the cart controller, which could leave an invisible overlay blocking clicks on some pages. Confirmation now goes through the updateCart event and the sticky button’s check mark.
• Defensive cleanup of orphaned modals at page load.

1.0.1

• Switched to direct AJAX add-to-cart: the module no longer modifies the product form and no longer depends on the theme’s DOM state.
• DOM references resolved on the fly to survive form replacement by the combinations engine.
• Safety reset of the loading indicator.

1.0.0

• Initial release: mobile and desktop sticky bar, compact variant selector, quantity selector, color customization, ARIA accessibility, multistore, FR/EN/ES/DE.