# 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 same section that was marked `data-la-dn-quickview` 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:

```html
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.

```css
data-la-dn-price data-la-dn-product-dynamic
```

## Example

The following example shows how all the elements come together:

```html
<div data-la-dn-quickview 
     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>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developers.discountninja.io/discount-ninja-developer-hub/theme-edits/code-edits/product-list-page-plp-and-collections/quick-view.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.