openQuickView( )

Opens the Quick View modal of a specified product.

Description

The openQuickView() function returns a Promise that is resolved when the Quick View modal is opened.

The quantity input field in the Quick View will be pre-populated with 1, unless otherwise specified in the options.quantity field.

If the product has different options or variants, they will be displayed for selection in the opened Quick View.

Note: This API will fail when viewing the site on mobile because there is no Quick View on the mobile site.

Syntax

function openQuickView(productId: string, [options: QuickViewOptions]): Promise<void>

openQuickView Parameters

NAME

TYPE

DESCRIPTION

productId

string

ID of the product to be displayed in the Quick View.

options

Optional

QuickViewOptions

Quick View options.

Returns

Fulfilled - When the Quick View modal is opened.

Return Type:

Promise<void>

Was this helpful?

Open Quick View modal

Copy Code

1import { product } from 'wix-stores-frontend';
2
3// ...
4
5$w('#myButton').onclick(() => {
6  const productId = "c329246b-d521-feb4-85f5-539ca992d73a";
7
8  product.openQuickView(productId)
9    .then(() => {
10      console.log('Opening Quick View...');
11    })
12    .catch((error) => {
13      console.error(error);
14      // Handle the error
15    });
16});

Open Quick View modal with options

Copy Code

1import { product } from 'wix-stores-frontend';
2
3// ...
4
5$w('#myButton').onclick(() => {
6  const productId = "c329246b-d521-feb4-85f5-539ca992d73a";
7  const options = {
8    quantity: 13
9  };
10
11  product.openQuickView(productId, options)
12    .then(() => {
13      console.log('Opening Quick View...');
14    })
15    .catch((error) => {
16      console.error(error);
17      // Handle the error
18    });
19});