Support Combined Listings and 2k Variants

assets/base.css

@@ -3240,6 +3240,7 @@ details-disclosure > details {
     opacity: 1;
     animation: none;
     transition: none;
+    transform: none;
   }
 
   .scroll-trigger.scroll-trigger--design-mode.animate--slide-in {

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',
 };

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 + '/';

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 {
@@ -170,6 +171,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);

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;
 

assets/quick-order-list.js

@@ -57,7 +57,6 @@ class QuickOrderListRemoveAllButton extends HTMLElement {
 
 customElements.define('quick-order-list-remove-all-button', QuickOrderListRemoveAllButton);
 
-
 class QuickOrderList extends HTMLElement {
   constructor() {
     super();
@@ -97,6 +96,7 @@ class QuickOrderList extends HTMLElement {
   }
 
   cartUpdateUnsubscriber = undefined;
+  sectionRefreshUnsubscriber = undefined;
 
   onSubmit(event) {
     event.preventDefault();
@@ -108,15 +108,24 @@ class QuickOrderList extends HTMLElement {
         return;
       }
       // If its another section that made the update
-      this.onCartUpdate();
+      this.refresh();
     });
+
+    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() {
-    if (this.cartUpdateUnsubscriber) {
-      this.cartUpdateUnsubscriber();
-    }
+    this.cartUpdateUnsubscriber?.();
+    this.sectionRefreshUnsubscriber?.();
   }
 
   defineInputsAndQuickOrderTable() {
@@ -140,7 +149,7 @@ class QuickOrderList extends HTMLElement {
     }
   }
 
-  onCartUpdate() {
+  refresh() {
     fetch(`${window.location.pathname}?section_id=${this.sectionId}`)
       .then((response) => response.text())
       .then((responseText) => {

sections/main-product.liquid

@@ -451,7 +451,7 @@
                 %}
 
               {%- when 'variant_picker' -%}
                 {% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}
               {%- when 'buy_buttons' -%}
                 {%- render 'buy-buttons',
                   block: block,
@@ -501,7 +501,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
@@ -2273,4 +2275,4 @@
     }
   ]
 }
-{% endschema %}
+{% endschema %}

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 }}">

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,7 +83,10 @@
             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 %}
           >

snippets/price.liquid

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