Quick View

Definition

A Quick View is a popup that provides a form to add a product variant to the cart. It is usually accessible from a PLP or the home page.

QuickView section

Mark the Quick View section with a data-la-dn-quickview attribute.

Product and variant

Mark the section that renders the product with a data-la-dn-product-handle attribute to indicate the product it displays. Also, add the data-la-dn-product-variant attribute to indicate which variant is displayed. When a different variant is selected, this attribute must be updated.

Example:

data-la-dn-product-handle="my-product" data-la-dn-product-variant="123456" data-la-dn-product-dynamic

Price section

Use the following snippet to add the data-la-dn-price attribute to the price section. Also, add a data-la-dn-product-dynamic attribute to indicate the price should be updated when the data-la-dn-product-variant attribute changes.

data-la-dn-price data-la-dn-product-dynamic

Example

The following example shows how all the elements come together:

<div data-la-dn-quickview>
    ...
    <div data-la-dn-product-handle="my-product" 
         data-la-dn-product-variant="123456">
        ...
        <div class="price" data-la-dn-price data-la-dn-product-dynamic>
            ...
            <span class="money">{{ variant.price }}</span>
            <s class="money">{{ variant.compare_at_price }}</s>
            ...
        </div>
        ...
    </div>
    ...
</div>