diff --git a/blocks/commerce-cart/commerce-cart.js b/blocks/commerce-cart/commerce-cart.js index 2313fc52ee..73ed6979cf 100644 --- a/blocks/commerce-cart/commerce-cart.js +++ b/blocks/commerce-cart/commerce-cart.js @@ -9,6 +9,9 @@ import EstimateShipping from '@dropins/storefront-cart/containers/EstimateShippi import EmptyCart from '@dropins/storefront-cart/containers/EmptyCart.js'; import Coupons from '@dropins/storefront-cart/containers/Coupons.js'; +// API +import { publishShoppingCartViewEvent } from '@dropins/storefront-cart/api.js'; + // Initializers import '../../scripts/initializers/cart.js'; @@ -107,9 +110,15 @@ export default async function decorate(block) { })($emptyCart), ]); + let cartViewEventPublished = false; // Events events.on('cart/data', (payload) => { toggleEmptyCart(isCartEmpty(payload)); + + if(!cartViewEventPublished) { + cartViewEventPublished = true; + publishShoppingCartViewEvent(); + } }, { eager: true }); return Promise.resolve(); diff --git a/blocks/header/header.js b/blocks/header/header.js index dc019b1bb4..091befd48e 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -10,6 +10,9 @@ import { loadFragment } from '../fragment/fragment.js'; import renderAuthCombine from './renderAuthCombine.js'; import { renderAuthDropdown } from './renderAuthDropdown.js'; +// Cart dropin +import { publishShoppingCartViewEvent } from '@dropins/storefront-cart/api.js'; + // media query match that indicates mobile/tablet width const isDesktop = window.matchMedia('(min-width: 900px)'); @@ -190,7 +193,12 @@ export default async function decorate(block) { async function toggleMiniCart(state) { const show = state ?? !minicartPanel.classList.contains('nav-tools-panel--show'); + const stateChanged = show !== minicartPanel.classList.contains('nav-tools-panel--show'); minicartPanel.classList.toggle('nav-tools-panel--show', show); + + if(stateChanged && show) { + publishShoppingCartViewEvent(); + } } cartButton.addEventListener('click', () => toggleMiniCart());