Combined listings bugfixes

Shopify · May 29, 2024 · a42e562 · a42e562
1 parent bcd1850
commit a42e562
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 25 deletions.
diff --git a/assets/component-volume-pricing.css b/assets/component-volume-pricing.css
@@ -19,7 +19,7 @@ volume-pricing li {
   justify-content: space-between;
 }
 
-.volume-pricing-note {
+div.volume-pricing-note {
   margin-top: -2.6rem;
 }
 

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;
+      inflightRequestProductUrl = null;
 
       constructor() {
         super();
@@ -71,39 +72,40 @@ if (!customElements.get('product-info')) {
       handleOptionValueChange({ data: { event, target, variant } }) {
         if (!this.contains(event.target)) return;
 
-        const targetUrl = target.dataset.productUrl || this.dataset.url;
+        const baseUrl = target.dataset.productUrl || this.inflightRequestProductUrl || this.dataset.url;
+        this.inflightRequestProductUrl = baseUrl;
 
         const productForm = this.productForm;
         productForm?.toggleSubmitButton(true);
         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);
+        let productUrl = this.getProductInfoUrl(baseUrl, variant?.id);
+        if (this.dataset.url !== baseUrl) {
+          callback = this.handleSwapProduct(baseUrl, variant);
+          productUrl = this.getProductInfoUrl(baseUrl, variant?.id, true);
         } else if (!variant) {
           this.setUnavailable();
           callback = (html) => {
             this.pickupAvailability?.update(variant);
             this.updateOptionValues(html);
           };
         } else {
-          this.updateURL(targetUrl, variant.id);
-          this.updateShareUrl(targetUrl, variant.id);
           this.updateVariantInputs(variant.id);
-          callback = this.handleUpdateProductInfo(variant);
+          callback = this.handleUpdateProductInfo(baseUrl, variant);
         }
 
         this.renderProductInfo(productUrl, target.id, callback);
       }
 
-      handleSwapProduct() {
+      handleSwapProduct(baseUrl, variant) {
         return (html) => {
           this.productModal?.remove();
 
+          this.updateURL(baseUrl, variant?.id);
+
+          document.querySelector('head title').innerHTML = html.querySelector('head title').innerHTML;
+
           // If we are in an embedded context (quick add, featured product, etc), only swap product info.
           // Otherwise, refresh the entire page content and sibling sections.
           if (this.dataset.updateUrl === 'false') {
@@ -121,12 +123,20 @@ if (!customElements.get('product-info')) {
         fetch(productUrl, { signal: this.abortController.signal })
           .then((response) => response.text())
           .then((responseText) => {
+            this.inflightRequestProductUrl = null;
             const html = new DOMParser().parseFromString(responseText, 'text/html');
             callback(html);
           })
           .then(() => {
             // set focus to last clicked option value
             document.querySelector(`#${targetId}`)?.focus();
+          })
+          .catch((error) => {
+            if (error.name === 'AbortError') {
+              console.log('Fetch aborted by user');
+            } else {
+              console.error(error);
+            }
           });
       }
 
@@ -135,13 +145,9 @@ if (!customElements.get('product-info')) {
 
         !shouldFetchFullPage && params.push(`section_id=${this.sectionId}`);
 
-        if (variantId) {
-          params.push(`variant=${variantId}`);
-        } else {
-          const optionValues = this.variantSelectors.selectedOptionValues;
-          if (optionValues.length) {
-            params.push(`option_values=${optionValues.join(',')}`);
-          }
+        const optionValues = this.variantSelectors.selectedOptionValues;
+        if (optionValues.length) {
+          params.push(`option_values=${optionValues.join(',')}`);
         }
 
         return `${url}?${params.join('&')}`;
@@ -152,11 +158,12 @@ if (!customElements.get('product-info')) {
         if (variantSelects) this.variantSelectors.innerHTML = variantSelects.innerHTML;
       }
 
-      handleUpdateProductInfo(variant) {
+      handleUpdateProductInfo(baseUrl, variant) {
         return (html) => {
           this.pickupAvailability?.update(variant);
           this.updateMedia(html, variant?.featured_media?.id);
           this.updateOptionValues(html);
+          this.updateURL(baseUrl, variant?.id);
 
           const updateSourceFromDestination = (id, shouldHide = (source) => false) => {
             const source = html.getElementById(`${id}-${this.sectionId}`);
@@ -203,14 +210,12 @@ if (!customElements.get('product-info')) {
       }
 
       updateURL(url, variantId) {
-        if (this.dataset.updateUrl === 'false') return;
-        window.history.replaceState({}, '', `${url}${variantId ? `?variant=${variantId}` : ''}`);
-      }
-
-      updateShareUrl(url, variantId) {
         this.querySelector('share-url')?.updateUrl(
           `${window.shopUrl}${url}${variantId ? `?variant=${variantId}` : ''}`
         );
+
+        if (this.dataset.updateUrl === 'false') return;
+        window.history.replaceState({}, '', `${url}${variantId ? `?variant=${variantId}` : ''}`);
       }
 
       setUnavailable() {