[Bugfix]: Shopping Cart View event published too often

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';
 
@@ -71,7 +74,7 @@ export default async function decorate(block) {
     // Cart List
     provider.render(CartSummaryList, {
       hideHeading: hideHeading === 'true',
-      routeProduct: (product) => `/products/${product.url.urlKey}/${product.sku}`,
+      routeProduct: (product) => `/products/${product.url.urlKey}/${product.topLevelSku}`,
       routeEmptyCartCTA: startShoppingURL ? () => startShoppingURL : undefined,
       maxItems: parseInt(maxItems, 10) || undefined,
       attributesToHide: hideAttributes.split(',').map((attr) => attr.trim().toLowerCase()),
@@ -81,7 +84,7 @@ export default async function decorate(block) {
 
     // Order Summary
     provider.render(OrderSummary, {
-      routeProduct: (product) => `/products/${product.url.urlKey}/${product.sku}`,
+      routeProduct: (product) => `/products/${product.url.urlKey}/${product.topLevelSku}`,
       routeCheckout: checkoutURL ? () => checkoutURL : undefined,
       slots: {
         EstimateShipping: async (ctx) => {
@@ -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();

blocks/commerce-mini-cart/commerce-mini-cart.js

@@ -19,6 +19,6 @@ export default async function decorate(block) {
     routeEmptyCartCTA: startShoppingURL ? () => startShoppingURL : undefined,
     routeCart: cartURL ? () => cartURL : undefined,
     routeCheckout: checkoutURL ? () => checkoutURL : undefined,
-    routeProduct: (product) => `/products/${product.url.urlKey}/${product.sku}`,
+    routeProduct: (product) => `/products/${product.url.urlKey}/${product.topLevelSku}`,
   })(block);
 }

blocks/header/header.js

@@ -3,6 +3,9 @@
 // Drop-in Tools
 import { events } from '@dropins/tools/event-bus.js';
 
+// Cart dropin
+import { publishShoppingCartViewEvent } from '@dropins/storefront-cart/api.js';
+
 import { getMetadata } from '../../scripts/aem.js';
 import { loadFragment } from '../fragment/fragment.js';
 
@@ -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());

package.json

@@ -37,7 +37,7 @@
     "@adobe/magento-storefront-events-sdk": "^1.8.0",
     "@dropins/storefront-account": "1.0.0-beta3",
     "@dropins/storefront-auth": "1.0.0-beta2",
-    "@dropins/storefront-cart": "1.0.0-beta1",
+    "@dropins/storefront-cart": "1.0.0-beta2",
     "@dropins/storefront-checkout": "0.1.0-alpha61",
     "@dropins/storefront-order": "1.0.0-beta2",
     "@dropins/storefront-pdp": "1.0.0-beta3",

scripts/__dropins__/storefront-cart/api.js

@@ -1,10 +1,10 @@
 /*! Copyright 2024 Adobe
 All Rights Reserved. */
-import{s as o,f as d,h as T}from"./chunks/resetCart.js";import{g as $,r as Q,d as H,a as k,b as z,c as V}from"./chunks/resetCart.js";import{C as l,t as g,c as f}from"./chunks/refreshCart.js";import{g as q,b as B,d as J,e as K,i as L,a as W,r as X}from"./chunks/refreshCart.js";import{events as C}from"@dropins/tools/event-bus.js";import{CART_FRAGMENT as h}from"./fragments.js";import{b as A,a as I,c as _}from"./chunks/acdl.js";import{u as Z}from"./chunks/updateProductsFromCart.js";import{g as rt,b as at,a as et}from"./chunks/getEstimateShipping.js";import{g as ot}from"./chunks/getEstimatedTotals.js";import{g as E}from"./chunks/persisted-data.js";import{A as it,a as ct}from"./chunks/applyCouponsToCart.js";import"@dropins/tools/fetch-graphql.js";import"@dropins/tools/lib.js";const G=`
+import{s as o,f as d,h as l}from"./chunks/resetCart.js";import{g as $,r as Q,d as H,a as k,b as z,c as V}from"./chunks/resetCart.js";import{C as T,t as g,c as f}from"./chunks/refreshCart.js";import{g as j,b as q,d as B,e as J,i as K,a as W,r as X}from"./chunks/refreshCart.js";import{events as C}from"@dropins/tools/event-bus.js";import{CART_FRAGMENT as h}from"./fragments.js";import{b as A,a as I,c as _}from"./chunks/acdl.js";import{u as Z}from"./chunks/updateProductsFromCart.js";import{g as rt,b as at,a as et}from"./chunks/getEstimateShipping.js";import{g as ot}from"./chunks/getEstimatedTotals.js";import{g as E}from"./chunks/persisted-data.js";import{A as it,a as ct}from"./chunks/applyCouponsToCart.js";import"@dropins/tools/fetch-graphql.js";import"@dropins/tools/lib.js";const S=`
   mutation ADD_PRODUCTS_TO_CART_MUTATION(
       $cartId: String!, 
       $cartItems: [CartItemInput!]!,
-      ${l}
+      ${T}
     ) {
     addProductsToCart(
       cartId: $cartId
@@ -21,12 +21,12 @@ import{s as o,f as d,h as T}from"./chunks/resetCart.js";import{g as $,r as Q,d a
   }
 
   ${h}
-`,M=async a=>{let r=!1;const n=o.cartId||await R().then(s=>(r=!0,s));return d(G,{variables:{cartId:n,cartItems:a.map(({sku:s,parentSku:e,quantity:i,optionsUIDs:t,enteredOptions:c})=>({sku:s,parent_sku:e,quantity:i,selected_options:t,entered_options:c}))}}).then(({errors:s,data:e})=>{var c;const i=[...((c=e==null?void 0:e.addProductsToCart)==null?void 0:c.user_errors)??[],...s??[]];if(i.length>0)return T(i);const t=g(e.addProductsToCart.cart);if(C.emit("cart/updated",t),C.emit("cart/data",t),t){const p=t.items.filter(m=>a.some(({sku:u})=>u===m.sku));r?A(t,p,o.locale??"en-US"):I(t,p,o.locale??"en-US")}return t})},S=`
+`,F=async a=>{let r=!1;const n=o.cartId||await R().then(s=>(r=!0,s));return d(S,{variables:{cartId:n,cartItems:a.map(({sku:s,parentSku:e,quantity:i,optionsUIDs:t,enteredOptions:c})=>({sku:s,parent_sku:e,quantity:i,selected_options:t,entered_options:c}))}}).then(({errors:s,data:e})=>{var c;const i=[...((c=e==null?void 0:e.addProductsToCart)==null?void 0:c.user_errors)??[],...s??[]];if(i.length>0)return l(i);const t=g(e.addProductsToCart.cart);if(C.emit("cart/updated",t),C.emit("cart/data",t),t){const p=t.items.filter(m=>a.some(({sku:u})=>u===m.topLevelSku));r?A(t,p,o.locale??"en-US"):I(t,p,o.locale??"en-US")}return t})},G=`
     mutation CREATE_GUEST_CART_MUTATION {
         createGuestCart {
           cart {
             id
           }
         }
     }
-`,R=async()=>{const{disableGuestCart:a}=f.getConfig();if(a)throw new Error("Guest cart is disabled");return await d(S).then(({data:r})=>{const n=r.createGuestCart.cart.id;return o.cartId=n,n})},v=()=>{const a=o.locale??"en-US",r=E();r&&_(r,a)};export{it as ApplyCouponsStrategy,M as addProductsToCart,ct as applyCouponsToCart,f as config,R as createGuestCart,d as fetchGraphQl,q as getCartData,E as getCartDataFromCache,$ as getConfig,rt as getCountries,B as getCustomerCartPayload,at as getEstimateShipping,ot as getEstimatedTotals,J as getGuestCartPayload,et as getRegions,K as getStoreConfig,L as initialize,W as initializeCart,v as publishShoppingCartViewEvent,X as refreshCart,Q as removeFetchGraphQlHeader,H as resetCart,k as setEndpoint,z as setFetchGraphQlHeader,V as setFetchGraphQlHeaders,Z as updateProductsFromCart};
+`,R=async()=>{const{disableGuestCart:a}=f.getConfig();if(a)throw new Error("Guest cart is disabled");return await d(G).then(({data:r})=>{const n=r.createGuestCart.cart.id;return o.cartId=n,n})},M=()=>{const a=o.locale??"en-US",r=E();r&&_(r,a)};export{it as ApplyCouponsStrategy,F as addProductsToCart,ct as applyCouponsToCart,f as config,R as createGuestCart,d as fetchGraphQl,j as getCartData,E as getCartDataFromCache,$ as getConfig,rt as getCountries,q as getCustomerCartPayload,at as getEstimateShipping,ot as getEstimatedTotals,B as getGuestCartPayload,et as getRegions,J as getStoreConfig,K as initialize,W as initializeCart,M as publishShoppingCartViewEvent,X as refreshCart,Q as removeFetchGraphQlHeader,H as resetCart,k as setEndpoint,z as setFetchGraphQlHeader,V as setFetchGraphQlHeaders,Z as updateProductsFromCart};