(#3368) Update all sibling sections when a combined listing product s…

…election is changed to a sibling
Shopify · Mar 26, 2024 · 2a22f8a · 2a22f8a
1 parent 731a790
commit 2a22f8a
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 9 deletions.
diff --git a/assets/product-info.js b/assets/product-info.js
@@ -8,6 +8,7 @@ if (!customElements.get('product-info')) {
       cartUpdateUnsubscriber = undefined;
       swapProductUtility = undefined;
       abortController = undefined;
+      sectionRefreshAbortController = undefined;
 
       constructor() {
         super();
@@ -75,6 +76,7 @@ if (!customElements.get('product-info')) {
           this.#updateURL(targetUrl, variant?.id);
           this.#updateShareUrl(targetUrl, variant?.id);
           callback = this.#handleSwapProduct();
+          this.dataset.updateRelatedSections === 'true' && this.#updateProductSections(targetUrl, variant?.id);
         } else if (!variant) {
           this.#setUnavailable();
           callback = (html) => {
@@ -91,13 +93,34 @@ if (!customElements.get('product-info')) {
         this.#renderProductInfo(targetUrl, variant?.id, targetId, callback);
       }
 
+      // Load the product page and update sections
+      #updateProductSections(url, variantId) {
+        this.sectionRefreshAbortController?.abort();
+        this.sectionRefreshAbortController = new AbortController();
+        fetch(this.#getProductInfoUrl(url, variantId, true), {
+          signal: this.sectionRefreshAbortController.signal,
+        })
+          .then((response) => response.text())
+          .then((responseText) => {
+            const html = new DOMParser().parseFromString(responseText, 'text/html');
+            const updatedSections = Array.from(html.querySelectorAll('main > .shopify-section')).reduce(
+              (sectionsById, section) => ({ ...sectionsById, [section.id]: section }),
+              {}
+            );
+
+            document.querySelectorAll('main > .shopify-section').forEach((section) => {
+              if (!section.id.includes('__main') && updatedSections[section.id]) {
+                this.swapProductUtility.viewTransition(section, updatedSections[section.id]);
+              }
+            });
+          });
+      }
+
       #handleSwapProduct() {
         return (html) => {
           this.productModal?.remove();
           const newProduct = html.querySelector('product-info');
           this.swapProductUtility.viewTransition(this, newProduct);
-          this.relatedProducts?.initializeRecommendations(newProduct.dataset.productId);
-          this.quickOrderList?.refresh();
         };
       }
 
@@ -119,20 +142,21 @@ if (!customElements.get('product-info')) {
           });
       }
 
-      #getProductInfoUrl(url, variantId) {
-        const sectionId = this.dataset.originalSection || this.dataset.section;
+      #getProductInfoUrl(url, variantId, isLoadFullPage) {
+        const params = [];
+
+        !isLoadFullPage && params.push(`section_id=${this.dataset.originalSection || this.dataset.section}`);
 
-        let params;
         if (variantId) {
-          params = `variant=${variantId}`;
+          params.push(`variant=${variantId}`);
         } else {
           const optionValues = this.variantSelectors.selectedOptionValues;
           if (optionValues.length) {
-            params = `option_values=${optionValues.join(',')}`;
+            params.push(`option_values=${optionValues.join(',')}`);
           }
         }
 
-        return `${url}?section_id=${sectionId}&${params}`;
+        return `${url}?${params.join('&')}`;
       }
 
       #updateOptionValues(html) {

diff --git a/sections/main-product.liquid b/sections/main-product.liquid
@@ -3,7 +3,7 @@
   class="section-{{ section.id }}-padding gradient color-{{ section.settings.color_scheme }}"
   data-section="{{ section.id }}"
 >
-  <product-info data-section="{{ section.id }}" data-product-id="{{ product.id }}" data-update-url="true" data-url="{{ product.url }}">
+  <product-info data-section="{{ section.id }}" data-product-id="{{ product.id }}" data-update-url="true" data-url="{{ product.url }}" data-update-related-sections="true">
   {{ 'section-main-product.css' | asset_url | stylesheet_tag }}
   {{ 'component-accordion.css' | asset_url | stylesheet_tag }}
   {{ 'component-price.css' | asset_url | stylesheet_tag }}