Revert "Support Combined Listings and 2k Variants (#3246)" (#3377)

* Revert "Support Combined Listings and 2k Variants (#3246)" This reverts commit a2c6f54. * Revert stylelint changes
Shopify · Mar 28, 2024 · e488521 · e488521
1 parent 2bf1bf7
commit e488521
Show file tree

Hide file tree

Showing 15 changed files with 312 additions and 442 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -3241,7 +3241,6 @@ 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,9 +5,4 @@ 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,8 +13,6 @@ 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,7 +32,6 @@
 .quick-add-modal .scroll-trigger.scroll-trigger {
   animation: none;
   opacity: 1;
-  transform: none;
 }
 
 .quick-add-modal__content.quick-add-modal__content--bulk {
@@ -283,7 +282,6 @@ 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,85 +25,83 @@ if (!customElements.get('quick-add-modal')) {
           .then((response) => response.text())
           .then((responseText) => {
             const responseHTML = new DOMParser().parseFromString(responseText, 'text/html');
-            const productElement = responseHTML.querySelector('section[id^="MainProduct-"]');
-
-            this.preprocessHTML(productElement);
-            HTMLUpdateUtility.setInnerHTML(this.modalContent, productElement.innerHTML);
+            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);
 
             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');
           });
       }
 
-      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();
-          });
-        }
-      }
+      setInnerHTML(element, html) {
+        element.innerHTML = html;
 
-      preprocessHTML(productElement) {
-        productElement.classList.forEach((classApplied) => {
-          if (classApplied.startsWith('color-') || classApplied === 'gradient')
-            this.modalContent.classList.add(classApplied);
+        // 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);
+          });
+          newScriptTag.appendChild(document.createTextNode(oldScriptTag.innerHTML));
+          oldScriptTag.parentNode.replaceChild(newScriptTag, oldScriptTag);
         });
-        this.preventDuplicatedIDs(productElement);
-        this.removeDOMElements(productElement);
-        this.removeGalleryListSemantic(productElement);
-        this.updateImageSizes(productElement);
-        this.preventVariantURLSwitching(productElement);
       }
 
-      preventVariantURLSwitching(productElement) {
-        const variantPicker = productElement.querySelector('variant-selects');
+      preventVariantURLSwitching() {
+        const variantPicker = this.modalContent.querySelector('variant-selects');
         if (!variantPicker) return;
 
         variantPicker.setAttribute('data-update-url', 'false');
       }
 
-      removeDOMElements(productElement) {
-        const pickupAvailability = productElement.querySelector('pickup-availability');
+      removeDOMElements() {
+        const pickupAvailability = this.productElement.querySelector('pickup-availability');
         if (pickupAvailability) pickupAvailability.remove();
 
-        const productModal = productElement.querySelector('product-modal');
+        const productModal = this.productElement.querySelector('product-modal');
         if (productModal) productModal.remove();
 
-        const modalDialog = productElement.querySelectorAll('modal-dialog');
+        const modalDialog = this.productElement.querySelectorAll('modal-dialog');
         if (modalDialog) modalDialog.forEach((modal) => modal.remove());
       }
 
-      preventDuplicatedIDs(productElement) {
-        const sectionId = productElement.dataset.section;
-        productElement.innerHTML = productElement.innerHTML.replaceAll(sectionId, `quickadd-${sectionId}`);
-        productElement.querySelectorAll('variant-selects, product-info').forEach((element) => {
+      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) => {
           element.dataset.originalSection = sectionId;
         });
       }
 
-      removeGalleryListSemantic(productElement) {
-        const galleryList = productElement.querySelector('[id^="Slider-Gallery"]');
+      removeGalleryListSemantic() {
+        const galleryList = this.modalContent.querySelector('[id^="Slider-Gallery"]');
         if (!galleryList) return;
 
         galleryList.setAttribute('role', 'presentation');
         galleryList.querySelectorAll('[id^="Slide-"]').forEach((li) => li.setAttribute('role', 'presentation'));
       }
 
-      updateImageSizes(productElement) {
-        const product = productElement.querySelector('.product');
+      updateImageSizes() {
+        const product = this.modalContent.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
@@ -108,7 +108,6 @@ if (!customElements.get('quick-order-list')) {
       }
 
       cartUpdateUnsubscriber = undefined;
-      sectionRefreshUnsubscriber = undefined;
 
       onSubmit(event) {
         event.preventDefault();
@@ -125,20 +124,11 @@ 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
@@ -501,9 +501,7 @@
               {%- 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 }}?limit={{ block.settings.product_list_limit }}&intent=complementary"
-                  data-section-id="{{ section.id }}"
-                  data-product-id="{{ product.id }}"
+                  data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&limit={{ block.settings.product_list_limit }}&intent=complementary"
                 >
                   {%- if recommendations.performed and recommendations.products_count > 0 -%}
                     <aside
@@ -2275,4 +2273,4 @@
     }
   ]
 }
-{% endschema %}
+{% endschema %}
diff --git a/sections/related-products.liquid b/sections/related-products.liquid
@@ -23,9 +23,7 @@
 <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 }}?limit={{ section.settings.products_to_show }}"
-    data-section-id="{{ section.id }}"
-    data-product-id="{{ product.id }}"
+    data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&limit={{ section.settings.products_to_show }}"
   >
     {% 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,10 +55,7 @@
           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
-            or product.selected_or_first_available_variant == nil
-          %}
+          {% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
             disabled
           {% endif %}
           class="product-variant-id"
@@ -83,10 +80,7 @@
             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
-              or product.selected_or_first_available_variant == nil
-            %}
+            {% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
               disabled
             {% endif %}
           >

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