3.7 KiB
3.7 KiB
post_title | menu_title | tags |
---|---|---|
DOM Events sent from product collection block | DOM Events | how-to |
Product Collection - DOM Events
wc-blocks_product_list_rendered
This event is triggered when Product Collection block was rendered or re-rendered (e.g. due to page change).
detail
parameters
Parameter | Type | Default value | Description |
---|---|---|---|
collection |
string | undefined |
Collection type. It's undefined for "create your own" collections as the type is not specified. For other Core collections it can be one of type: woocommerce/product-collection/best-sellers , woocommerce/product-collection/featured , woocommerce/product-collection/new-arrivals , woocommerce/product-collection/on-sale , woocommerce/product-collection/top-rated . For custom collections it will hold their name. |
Example usage
window.document.addEventListener(
'wc-blocks_product_list_rendered',
( e ) => {
const { collection } = e.detail;
console.log( collection ) // -> collection name, e.g. woocommerce/product-collection/on-sale
}
);
Event: wc-blocks_viewed_product
This event is triggered when some blocks are clicked in order to view product (redirect to product page).
detail
parameters
Parameter | Type | Default value | Description |
---|---|---|---|
collection |
string | undefined |
Collection type. It's undefined for "create your own" collections as the type is not specified. For other Core collections it can be one of type: woocommerce/product-collection/best-sellers , woocommerce/product-collection/featured , woocommerce/product-collection/new-arrivals , woocommerce/product-collection/on-sale , woocommerce/product-collection/top-rated . For custom collections it will hold their name. |
productId |
number | Product ID |
Example usage
window.document.addEventListener(
'wc-blocks_viewed_product',
( e ) => {
const { collection, productId } = e.detail;
console.log( collection ) // -> collection name, e.g. "woocommerce/product-collection/featured" or undefined for default one
console.log( productId ) // -> product ID, e.g. 34
}
);