Combined listings and 2k variants (Shopify#3378)

* (Shopify#3378) Add support for combined listings and 2k variants
Rabter1 · May 22, 2024 · a2f5a98 · a2f5a98
1 parent 080ff5b
commit a2f5a98
Show file tree

Hide file tree

Showing 15 changed files with 430 additions and 290 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -3257,6 +3257,7 @@ details-disclosure > details {
     opacity: 1;
     animation: none;
     transition: none;
+    transform: none;
   }
 
   .scroll-trigger.scroll-trigger--design-mode.animate--slide-in {

diff --git a/assets/constants.js b/assets/constants.js
@@ -5,4 +5,9 @@ const PUB_SUB_EVENTS = {
   quantityUpdate: 'quantity-update',
   variantChange: 'variant-change',
   cartError: 'cart-error',
+  sectionRefreshed: 'section-refreshed',
+};
+
+const SECTION_REFRESH_RESOURCE_TYPE = {
+  product: 'product',
 };
diff --git a/assets/global.js b/assets/global.js
diff --git a/assets/pickup-availability.js b/assets/pickup-availability.js
@@ -13,6 +13,8 @@ if (!customElements.get('pickup-availability')) {
       }
 
       fetchAvailability(variantId) {
+        if (!variantId) return;
+
         let rootUrl = this.dataset.rootUrl;
         if (!rootUrl.endsWith('/')) {
           rootUrl = rootUrl + '/';

diff --git a/assets/quick-add.css b/assets/quick-add.css
@@ -32,6 +32,7 @@
 .quick-add-modal .scroll-trigger.scroll-trigger {
   animation: none;
   opacity: 1;
+  transform: none;
 }
 
 .quick-add-modal__content.quick-add-modal__content--bulk {
@@ -282,6 +283,7 @@ quick-add-modal .product__column-sticky {
   }
 
   quick-add-modal .product:not(.product--no-media) .product__info-wrapper {
+    padding-top: 2rem;
     padding-left: 4rem;
     max-width: 54%;
     width: calc(54% - var(--grid-desktop-horizontal-spacing) / 2);

diff --git a/assets/quick-add.js b/assets/quick-add.js
@@ -25,83 +25,85 @@ if (!customElements.get('quick-add-modal')) {
           .then((response) => response.text())
           .then((responseText) => {
             const responseHTML = new DOMParser().parseFromString(responseText, 'text/html');
-            this.productElement = responseHTML.querySelector('section[id^="MainProduct-"]');
-            this.productElement.classList.forEach((classApplied) => {
-              if (classApplied.startsWith('color-') || classApplied === 'gradient')
-                this.modalContent.classList.add(classApplied);
-            });
-            this.preventDuplicatedIDs();
-            this.removeDOMElements();
-            this.setInnerHTML(this.modalContent, this.productElement.innerHTML);
+            const productElement = responseHTML.querySelector('section[id^="MainProduct-"]');
+
+            this.preprocessHTML(productElement);
+            HTMLUpdateUtility.setInnerHTML(this.modalContent, productElement.innerHTML);
 
             if (window.Shopify && Shopify.PaymentButton) {
               Shopify.PaymentButton.init();
             }
-
             if (window.ProductModel) window.ProductModel.loadShopifyXR();
 
-            this.removeGalleryListSemantic();
-            this.updateImageSizes();
-            this.preventVariantURLSwitching();
             super.show(opener);
           })
           .finally(() => {
+            this.bindProductChangeCallbacks();
             opener.removeAttribute('aria-disabled');
             opener.classList.remove('loading');
             opener.querySelector('.loading__spinner').classList.add('hidden');
           });
       }
 
-      setInnerHTML(element, html) {
-        element.innerHTML = html;
-
-        // Reinjects the script tags to allow execution. By default, scripts are disabled when using element.innerHTML.
-        element.querySelectorAll('script').forEach((oldScriptTag) => {
-          const newScriptTag = document.createElement('script');
-          Array.from(oldScriptTag.attributes).forEach((attribute) => {
-            newScriptTag.setAttribute(attribute.name, attribute.value);
+      bindProductChangeCallbacks() {
+        const swapProductUtility = this.querySelector('variant-selects')?.swapProductUtility;
+        if (swapProductUtility) {
+          swapProductUtility.addPreProcessCallback(this.preprocessHTML.bind(this));
+          swapProductUtility.addPostProcessCallback(() => {
+            this.modalContent = this.querySelector('[id^="QuickAddInfo-"]');
+            this.bindProductChangeCallbacks();
           });
-          newScriptTag.appendChild(document.createTextNode(oldScriptTag.innerHTML));
-          oldScriptTag.parentNode.replaceChild(newScriptTag, oldScriptTag);
+        }
+      }
+
+      preprocessHTML(productElement) {
+        productElement.classList.forEach((classApplied) => {
+          if (classApplied.startsWith('color-') || classApplied === 'gradient')
+            this.modalContent.classList.add(classApplied);
         });
+        this.preventDuplicatedIDs(productElement);
+        this.removeDOMElements(productElement);
+        this.removeGalleryListSemantic(productElement);
+        this.updateImageSizes(productElement);
+        this.preventVariantURLSwitching(productElement);
       }
 
-      preventVariantURLSwitching() {
-        const variantPicker = this.modalContent.querySelector('variant-selects');
+      preventVariantURLSwitching(productElement) {
+        const variantPicker = productElement.querySelector('variant-selects');
         if (!variantPicker) return;
 
         variantPicker.setAttribute('data-update-url', 'false');
       }
 
-      removeDOMElements() {
-        const pickupAvailability = this.productElement.querySelector('pickup-availability');
+      removeDOMElements(productElement) {
+        const pickupAvailability = productElement.querySelector('pickup-availability');
         if (pickupAvailability) pickupAvailability.remove();
 
-        const productModal = this.productElement.querySelector('product-modal');
+        const productModal = productElement.querySelector('product-modal');
         if (productModal) productModal.remove();
 
-        const modalDialog = this.productElement.querySelectorAll('modal-dialog');
+        const modalDialog = productElement.querySelectorAll('modal-dialog');
         if (modalDialog) modalDialog.forEach((modal) => modal.remove());
       }
 
-      preventDuplicatedIDs() {
-        const sectionId = this.productElement.dataset.section;
-        this.productElement.innerHTML = this.productElement.innerHTML.replaceAll(sectionId, `quickadd-${sectionId}`);
-        this.productElement.querySelectorAll('variant-selects, product-info').forEach((element) => {
+      preventDuplicatedIDs(productElement) {
+        const sectionId = productElement.dataset.section;
+        productElement.innerHTML = productElement.innerHTML.replaceAll(sectionId, `quickadd-${sectionId}`);
+        productElement.querySelectorAll('variant-selects, product-info').forEach((element) => {
           element.dataset.originalSection = sectionId;
         });
       }
 
-      removeGalleryListSemantic() {
-        const galleryList = this.modalContent.querySelector('[id^="Slider-Gallery"]');
+      removeGalleryListSemantic(productElement) {
+        const galleryList = productElement.querySelector('[id^="Slider-Gallery"]');
         if (!galleryList) return;
 
         galleryList.setAttribute('role', 'presentation');
         galleryList.querySelectorAll('[id^="Slide-"]').forEach((li) => li.setAttribute('role', 'presentation'));
       }
 
-      updateImageSizes() {
-        const product = this.modalContent.querySelector('.product');
+      updateImageSizes(productElement) {
+        const product = productElement.querySelector('.product');
         const desktopColumns = product.classList.contains('product--columns');
         if (!desktopColumns) return;
 

diff --git a/assets/quick-order-list.js b/assets/quick-order-list.js
@@ -106,6 +106,7 @@ if (!customElements.get('quick-order-list')) {
       }
 
       cartUpdateUnsubscriber = undefined;
+      sectionRefreshUnsubscriber = undefined;
 
       onSubmit(event) {
         event.preventDefault();
@@ -122,11 +123,20 @@ if (!customElements.get('quick-order-list')) {
             this.addMultipleDebounce();
           });
         });
+        this.sectionRefreshUnsubscriber = subscribe(PUB_SUB_EVENTS.sectionRefreshed, (event) => {
+          const isParentSectionUpdated =
+            this.sectionId && (event.data?.sectionId ?? '') === `${this.sectionId.split('__')[0]}__main`;
+
+          if (isParentSectionUpdated) {
+            this.refresh();
+          }
+        });
         this.sectionId = this.dataset.id;
       }
 
       disconnectedCallback() {
         this.cartUpdateUnsubscriber?.();
+        this.sectionRefreshUnsubscriber?.();
       }
 
       defineInputsAndQuickOrderTable() {

diff --git a/sections/main-product.liquid b/sections/main-product.liquid
@@ -502,7 +502,9 @@
               {%- when 'complementary' -%}
                 <product-recommendations
                   class="complementary-products quick-add-hidden{% if block.settings.make_collapsible_row %} is-accordion{% endif %}{% if block.settings.enable_quick_add %} complementary-products-contains-quick-add{% endif %}"
-                  data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&limit={{ block.settings.product_list_limit }}&intent=complementary"
+                  data-url="{{ routes.product_recommendations_url }}?limit={{ block.settings.product_list_limit }}&intent=complementary"
+                  data-section-id="{{ section.id }}"
+                  data-product-id="{{ product.id }}"
                 >
                   {%- if recommendations.performed and recommendations.products_count > 0 -%}
                     <aside

diff --git a/sections/related-products.liquid b/sections/related-products.liquid
@@ -23,7 +23,9 @@
 <div class="color-{{ section.settings.color_scheme }} gradient">
   <product-recommendations
     class="related-products page-width section-{{ section.id }}-padding isolate{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
-    data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&limit={{ section.settings.products_to_show }}"
+    data-url="{{ routes.product_recommendations_url }}?limit={{ section.settings.products_to_show }}"
+    data-section-id="{{ section.id }}"
+    data-product-id="{{ product.id }}"
   >
     {% if recommendations.performed and recommendations.products_count > 0 %}
       <h2 class="related-products__heading inline-richtext {{ section.settings.heading_size }}">

diff --git a/snippets/buy-buttons.liquid b/snippets/buy-buttons.liquid
@@ -55,7 +55,10 @@
           type="hidden"
           name="id"
           value="{{ product.selected_or_first_available_variant.id }}"
-          {% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
+          {% if product.selected_or_first_available_variant.available == false
+            or quantity_rule_soldout
+            or product.selected_or_first_available_variant == nil
+          %}
             disabled
           {% endif %}
           class="product-variant-id"
@@ -80,12 +83,17 @@
             type="submit"
             name="add"
             class="product-form__submit button button--full-width {% if show_dynamic_checkout %}button--secondary{% else %}button--primary{% endif %}"
-            {% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
+            {% if product.selected_or_first_available_variant.available == false
+              or quantity_rule_soldout
+              or product.selected_or_first_available_variant == nil
+            %}
               disabled
             {% endif %}
           >
             <span>
-              {%- if product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
+              {%- if product.selected_or_first_available_variant == nil -%}
+                {{ 'products.product.unavailable' | t }}
+              {%- elsif product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
                 {{ 'products.product.sold_out' | t }}
               {%- else -%}
                 {{ 'products.product.add_to_cart' | t }}

diff --git a/snippets/price.liquid b/snippets/price.liquid
@@ -37,6 +37,7 @@
   endif
 -%}
 
+{%- unless target == nil -%}
 <div
   class="
     price
@@ -126,3 +127,4 @@
     </span>
   {%- endif -%}
 </div>
+{% endunless %}