Quick View Module for PrestaShop 8/9 — Documentation

Overview

DF Quick View replaces your PrestaShop theme’s native quick view with a modern modal: full image gallery, live combination picker, stock indicator, quantity selector and AJAX add-to-cart. Thanks to hover preloading, the modal opens instantly and the customer stays on the category page throughout.

The module overrides no theme template: it hooks into the standard actionFrontControllerSetMedia hook and works client-side on your existing product miniatures. The JavaScript is vanilla, with no jQuery and no external dependency.

Requirements

• PrestaShop 8.0 to 9.x
• PHP 7.4 or higher
• A theme displaying product miniatures on listing pages (the Classic theme and its child themes work with no configuration)

Installation

1. Download the dfquickview-1.0.0.zip archive from your DataFirefly customer account.
2. In the back office, go to Modules > Module Manager, click Upload a module and drop the archive.
3. Click Install, then Configure.

No database table is created: the module only stores its settings in PrestaShop’s configuration table. Uninstalling is clean and removes every key.

Configuration

Trigger mode

Three modes determine how the modal opens:

• Intercept — the module captures your theme’s quick view links (elements carrying the .quick-view or .js-quick-view classes, or the data-link-action="quickview" attribute) and opens its own modal instead. The native behaviour is neutralised.
• Inject — the module adds its own overlay button on every product miniature. Useful if your theme offers no quick view at all.
• Both (recommended, default) — both mechanisms are active.

Product miniature CSS selector

The module needs to know which page elements are product miniatures. The default value, .product-miniature, .js-product-miniature, covers the Classic theme and the vast majority of child themes.

If your theme uses a different structure, open a category page, inspect a product container in your browser’s developer tools and enter its class here. The module then looks for the product ID in the data-id-product attribute inside the miniature, and falls back to deducing it from the product link URL.

Smart preloading

Enabled by default. As soon as the cursor lingers on a product miniature for the length of the preload delay (120 ms by default), the module fetches the product data in the background and preloads its first image. On click, everything is already in memory: the modal opens with no latency.

On mobile, preloading fires on the first touch on the miniature.

Only one request is sent per product, even if the visitor hovers the same miniature several times. If you are concerned about server load, raise the delay (300 to 500 ms filters out accidental hovers) or disable it: the modal will then load on click, showing an animated skeleton.

Client cache lifetime

Fetched product data is kept in the browser session for the configured duration (300 seconds by default). A visitor reopening the same modal triggers no new request.

The cache is scoped by language, currency, shop and customer group: a visitor can never see a price computed for another group. Set the value to 0 to disable the session cache entirely (the in-page memory cache stays active).

Displayed content

• Show short description — displays the product summary in the modal (hidden on mobile to save space).
• Show product reference — displays the product reference, or the selected combination’s reference when it has one.
• Show “View full product details” link — adds a link to the full product page under the add-to-cart button.

Load on all pages

By default, the module’s assets are only loaded on listing pages: home, categories, search, brands, suppliers, price drops, new products and best sales. Enable this option if you display product miniatures elsewhere — CMS pages, custom blocks, third-party modules.

Accent colour

Determines the colour of buttons, selection outlines and active states in the modal. Enter a hexadecimal colour matching your brand.

How the modal works

Gallery

The modal shows every product image: main image, clickable thumbnails below, previous and next arrows. Keyboard navigation is supported (left and right arrows to change image, Escape to close) and touch swipe works on mobile.

If the selected combination has images associated with it in PrestaShop, the gallery automatically narrows down to those images. Otherwise, the full set of product images stays visible.

Combinations

Attribute groups are rendered according to their type as configured in PrestaShop:

• Colour swatch — groups flagged as colour groups display a round swatch, using the texture file if one exists for the attribute, otherwise the hexadecimal colour.
• Dropdown — groups of type “dropdown list” display a select menu.
• Button — every other group displays clickable rectangular pills.

On every selection change, the module resolves the matching combination and updates the price, crossed-out price, discount percentage, reference, stock, minimum quantity and images.

Two visual states signal dead ends:

• Greyed out — the attribute, combined with the current selection, matches no existing combination.
• Dimmed — the combination exists but is out of stock, and the product does not allow ordering when out of stock.

Stock and quantity

Three states are shown depending on the selected combination’s availability: in stock, available on backorder (out-of-stock ordering allowed) or out of stock (the add button is then disabled).

The quantity picker honours the minimum quantity set on the product or the combination: it starts at that value and prevents going below it.

Add to cart

The addition is sent over AJAX to PrestaShop’s native cart controller. On success, the module emits the front-office framework’s updateCart event: your header cart block refreshes automatically, with no reload.

Errors returned by the shop — out of stock, minimum quantity not reached, product unavailable — are displayed inside the modal, under the button.

Products with required customization fields cannot be added to the cart from a modal: the module shows a message and invites the customer to open the full product page.

Faceted search compatibility

When a customer applies a filter, PrestaShop replaces the product list without reloading the page. The module listens for the updateProductList event and also watches the document for changes: its buttons are re-injected automatically on the new miniatures, with nothing for you to do.

Troubleshooting

No button appears on the miniatures

First check that the trigger mode includes injection (“Inject” or “Both”). Then check the miniature CSS selector: open a category page, inspect a product container and confirm it matches the configured selector. Finally, make sure the miniature carries a data-id-product attribute or a link to the product page.

The modal doesn’t open when clicking the theme’s quick view

The trigger mode must include interception (“Intercept” or “Both”). Some themes use non-standard classes for their button: in that case, switch to “Inject” mode and hide your theme’s native button with a CSS rule in your custom stylesheet.

Assets don’t load on a specific page

The module only loads its assets on standard listing pages. If you display product miniatures on a CMS page or inside a third-party module, enable the Load on all pages option.

Configuration changes are not visible

Clear the PrestaShop cache (Advanced Parameters > Performance > Clear cache) and hard-refresh the page in your browser. If you changed the client cache lifetime, visitors already in session keep their data until it expires.

The price in the modal differs from the one in the listing

Modal prices are computed server-side with the same method as the product page, taking the customer group, currency and taxes into account. If a discrepancy persists, check that your theme doesn’t apply a custom price display on miniatures, and flush the client cache by temporarily setting its lifetime to 0.

Uninstalling

From the module manager, choose Uninstall. Every configuration key of the module is removed. No product or order data is affected.