ProductQuickView

A vanilla JavaScript class for dynamic product quick view and cart interactions on e-commerce product listings.

Description

This module enables users to quickly view product details, select sizes or versions, and add items to their basket—all in an interactive sidebar overlay. It handles async product data fetching, updates basket state, and manages UI transitions without any external dependencies.

How to use

Important Just copy this code and paste into new blank component in "Układ" at the Top of the section "Górna część zawartości strony" (it's just second section)

1. Ensure HTML structure:
   Your page should include sections as in XSLT.

2. Instantiate and initialize:
   const quickView = new ProductQuickView();
   quickView.init();

3. Requirements:
   Relies on a global app_shop.vars.basket object for cart state. Requires a working /graphql/v1/ backend endpoint. Product cards in the DOM need a "product" class and a data-product_id attribute.

Key Features

Displays product images, variants, prices (including crossed, promo, and "omnibus" pricing). Handles size and version selection with live updates. Adds to basket with real-time basket and shipping bar update. Designed for integration with both desktop and mobile product grids.

Notes

All HTML/CSS classes must match those expected in the script. The script does not bundle any external libraries; it is fully ES6+ JavaScript.