Refetch entire page on product swap

Remove unused unsubscriber function
Shopify · May 23, 2024 · 4f3b617 · 4f3b617
1 parent 45f65d3
commit 4f3b617
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 20 deletions.
diff --git a/assets/global.js b/assets/global.js
@@ -1104,10 +1104,6 @@ class ProductRecommendations extends HTMLElement {
     this.initializeRecommendations(this.dataset.productId);
   }
 
-  disconnectedCallback() {
-    this.unsubscribeFromSectionRefresh();
-  }
-
   initializeRecommendations(productId) {
     this.observer?.unobserve(this);
     this.observer = new IntersectionObserver(

diff --git a/assets/product-info.js b/assets/product-info.js
@@ -73,10 +73,12 @@ if (!customElements.get('product-info')) {
         productForm?.handleErrorMessage();
 
         let callback = () => {};
+        let productUrl = this.#getProductInfoUrl(targetUrl, variant?.id);
         if (this.dataset.url !== targetUrl) {
           this.#updateURL(targetUrl, variant?.id);
           this.#updateShareUrl(targetUrl, variant?.id);
           callback = this.#handleSwapProduct();
+          productUrl = this.#getProductInfoUrl(targetUrl, variant?.id, true);
         } else if (!variant) {
           this.#setUnavailable();
           callback = (html) => {
@@ -90,26 +92,21 @@ if (!customElements.get('product-info')) {
           callback = this.#handleUpdateProductInfo(variant);
         }
 
-        this.#renderProductInfo(targetUrl, variant?.id, target.id, callback);
+        this.#renderProductInfo(productUrl, target.id, callback);
       }
 
       #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();
+          this.swapProductUtility.viewTransition(document.querySelector('main'), html.querySelector('main'));
         };
       }
 
-      #renderProductInfo(url, variantId, targetId, callback) {
+      #renderProductInfo(productUrl, targetId, callback) {
         this.abortController?.abort();
         this.abortController = new AbortController();
 
-        fetch(this.#getProductInfoUrl(url, variantId), {
-          signal: this.abortController.signal,
-        })
+        fetch(productUrl, { signal: this.abortController.signal })
           .then((response) => response.text())
           .then((responseText) => {
             const html = new DOMParser().parseFromString(responseText, 'text/html');
@@ -121,18 +118,21 @@ if (!customElements.get('product-info')) {
           });
       }
 
-      #getProductInfoUrl(url, variantId) {
-        let params;
+      #getProductInfoUrl(url, variantId, shouldFetchFullPage = false) {
+        const params = [];
+
+        !shouldFetchFullPage && params.push(`section_id=${this.sectionId}`);
+
         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=${this.sectionId}&${params}`;
+        return `${url}?${params.join('&')}`;
       }
 
       #updateOptionValues(html) {
@@ -362,12 +362,18 @@ if (!customElements.get('product-info')) {
       }
 
       get relatedProducts() {
-        const relatedProductsSectionId = SectionId.getIdForSection(SectionId.parseId(this.sectionId), 'related-products');
+        const relatedProductsSectionId = SectionId.getIdForSection(
+          SectionId.parseId(this.sectionId),
+          'related-products'
+        );
         return document.querySelector(`product-recommendations[data-section-id^="${relatedProductsSectionId}"]`);
       }
 
       get quickOrderList() {
-        const quickOrderListSectionId = SectionId.getIdForSection(SectionId.parseId(this.sectionId), 'quick_order_list');
+        const quickOrderListSectionId = SectionId.getIdForSection(
+          SectionId.parseId(this.sectionId),
+          'quick_order_list'
+        );
         return document.querySelector(`quick-order-list[data-id^="${quickOrderListSectionId}"]`);
       }