@ordergroove/offers 2.27.19 → 2.27.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.27.19",
+  "version": "2.27.21",
   "description": "offer state component",
   "author": "Eugenio Lattanzio <eugenio63@gmail.com>",
   "homepage": "https://github.com/ordergroove/plush-toys#readme",
@@ -45,5 +45,5 @@
   "devDependencies": {
     "@ordergroove/offers-templates": "^0.4.15"
   },
-  "gitHead": "a2212dedd4f9967228b5ee7043e844ba675ed0e2"
+  "gitHead": "e2b5d12965378f8ce62ea66be35de68ac7338e9c"
 }

package/src/shopify/__tests__/shopifyMiddleware.spec.js

@@ -112,15 +112,27 @@ describe('synchronizeCartOptin', () => {
     expect(called).toBeTruthy();
   });
 
-  it('should pass closest section to shopify api', async () => {
+  it('should pass closest section cart-items to shopify api to ajax refresh', async () => {
     const sectionDiv = document.createElement('div');
-    sectionDiv.id = 'shopify-section-123456789';
+    sectionDiv.id = 'shopify-section-123456789__cart-items';
     sectionDiv.classList.add('shopify-section');
     sectionDiv.appendChild(offer);
     document.body.appendChild(sectionDiv);
 
     await synchronizeCartOptin({ type: OPTIN_PRODUCT, payload: { offer, frequency, product } }, store);
-    expect(fetchMock.lastOptions().body).toContain('"sections":["123456789"]');
+    expect(fetchMock.lastOptions().body).toContain('"sections":["123456789__cart-items"]');
+    sectionDiv.remove();
+  });
+
+  it('should pass closest section cart-footer to shopify api to ajax refresh', async () => {
+    const sectionDiv = document.createElement('div');
+    sectionDiv.id = 'shopify-section-123456789__cart-footer';
+    sectionDiv.classList.add('shopify-section');
+    sectionDiv.appendChild(offer);
+    document.body.appendChild(sectionDiv);
+
+    await synchronizeCartOptin({ type: OPTIN_PRODUCT, payload: { offer, frequency, product } }, store);
+    expect(fetchMock.lastOptions().body).toContain('"sections":["123456789__cart-footer"]');
     sectionDiv.remove();
   });
 });

package/src/shopify/shopifyMiddleware.ts

@@ -20,6 +20,11 @@ const CART_PAGE_URL = '/cart';
 const CART_JS_URL = `${SHOPIFY_ROOT}cart.js`;
 const PRODUCTS_URL = `${SHOPIFY_ROOT}products/`;
 
+/**
+ * List of section DOM elements to update via section-rendering api https://shopify.dev/api/section-rendering
+ */
+const DEFAULT_SHOPIFY_CART_AJAX_SECTIONS =
+  '[id^="shopify-section-"][id$=__cart-items], [id^="shopify-section-"][id$="__cart-footer"],#cart-live-region-text,#cart-icon-bubble';
 const syncProductId = debounce(100, false, function(form, offer) {
   const { id } = Object.fromEntries([...new FormData(form).entries()]);
   if (id) {
@@ -147,8 +152,7 @@ export async function synchronizeCartOptin(action: any, store: any) {
     offerElement.style.pointerEvents = 'none';
     offerElement.style.opacity = '.7';
 
-    const closestSection = offerElement.closest('.shopify-section');
-    const closestSectionId = (closestSection?.id.match(/^shopify-section-(.+)/) || [])[1];
+    const sectionsToUpdate = Array.from(document.querySelectorAll(DEFAULT_SHOPIFY_CART_AJAX_SECTIONS));
 
     const key = action.payload.product.id; // shopify cart.item.key
     const cart = await getCart();
@@ -167,7 +171,7 @@ export async function synchronizeCartOptin(action: any, store: any) {
         attributes: Object.fromEntries([trackingEvent]),
         properties: item.properties,
         selling_plan: selling_plan || null,
-        sections: closestSectionId ? [closestSectionId] : undefined
+        sections: sectionsToUpdate.map((el: HTMLElement) => el.id.replace(/^shopify-section-/, ''))
       })
     });
 
@@ -203,15 +207,20 @@ export async function synchronizeCartOptin(action: any, store: any) {
 
     const sections = newCart.sections;
 
-    if (sections && closestSectionId in sections) {
-      const sectionRawHtml = sections[closestSectionId];
+    if (Object.values(sections).length) {
+      sectionsToUpdate.forEach((sectionElement: HTMLElement) => {
+        const sectionId = sectionElement.id.replace(/^shopify-section-/, '');
+        if (!(sectionId in sections)) return;
 
-      const el = new DOMParser()
-        .parseFromString(sectionRawHtml.toString() || '', 'text/html')
-        .getElementById('shopify-section-' + closestSectionId);
-      if (el) {
-        closestSection.innerHTML = el.innerHTML;
-      }
+        const sectionRawHtml = sections[sectionId];
+
+        const el = new DOMParser()
+          .parseFromString(sectionRawHtml.toString() || '', 'text/html')
+          .getElementById(sectionElement.id);
+        if (el) {
+          sectionElement.innerHTML = el.innerHTML;
+        }
+      });
     } else if (window.location.pathname.startsWith(CART_PAGE_URL)) {
       // only do if we are on the cart page
       window.location.reload();