Ensure section updates if another section changes qty

Shopify · Feb 5, 2024 · be24401 · be24401
1 parent 7bb7e11
commit be24401
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 17 deletions.
diff --git a/assets/global.js b/assets/global.js
@@ -190,11 +190,10 @@ class QuantityInput extends HTMLElement {
 
   validateQtyRules() {
     const value = parseInt(this.input.value);
-    // if (this.input.min) {
-    //   const min = parseInt(this.input.min);
-    //   const buttonMinus = this.querySelector(".quantity__button[name='minus']");
-    //   buttonMinus.classList.toggle('disabled', value <= min);
-    // }
+    if (this.input.min) {
+      const buttonMinus = this.querySelector(".quantity__button[name='minus']");
+      buttonMinus.classList.toggle('disabled', parseInt(value) <= 0);
+    }
     if (this.input.max) {
       const max = parseInt(this.input.max);
       const buttonPlus = this.querySelector(".quantity__button[name='plus']");

diff --git a/assets/quick-add-bulk.js b/assets/quick-add-bulk.js
@@ -3,9 +3,7 @@ class QuickAddBulk extends HTMLElement {
   constructor() {
     super();
     const debouncedOnChange = debounce((event) => {
-      console.log(event.target.value,'event', event.target.dataset.cartQuantity)
       if (parseInt(event.target.dataset.cartQuantity) === 0) {
-        console.log('add to cart')
         this.addToCart();
       } else {
         this.updateCart(event);
@@ -14,14 +12,34 @@ class QuickAddBulk extends HTMLElement {
     this.addEventListener('change', debouncedOnChange.bind(this));
   }
 
+
   connectedCallback() {
-   // Update if it's another section
+    this.cartUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.cartUpdate, (event) => {
+      if (event.source === "quick-add") {
+        return;
+      }
+      // If its another section that made the update
+      this.onCartUpdate();
+    });
   }
 
   disconnectedCallback() {
-    // if (this.cartUpdateUnsubscriber) {
-    //   this.cartUpdateUnsubscriber();
-    // }
+    if (this.cartUpdateUnsubscriber) {
+      this.cartUpdateUnsubscriber();
+    }
+  }
+
+  onCartUpdate() {
+    fetch(`${window.location.pathname}?section_id=main-collection-product-grid`)
+      .then((response) => response.text())
+      .then((responseText) => {
+        const html = new DOMParser().parseFromString(responseText, 'text/html');
+        const sourceQty = html.querySelector(`#quick-add-bulk-${this.dataset.id}:not(.hidden)`);
+        this.innerHTML = sourceQty.innerHTML;
+      })
+      .catch(e => {
+        console.error(e);
+      });
   }
 
   updateCart(event) {
@@ -52,7 +70,7 @@ class QuickAddBulk extends HTMLElement {
 
         this.renderSections(parsedState);
 
-        publish(PUB_SUB_EVENTS.cartUpdate, { source: `quick-change-${event.target.getAttribute('data-index')}`, cartData: parsedState });
+        publish(PUB_SUB_EVENTS.cartUpdate, { source: "quick-add", cartData: parsedState });
 
       }).catch((error) => {
         console.log(error, 'error')

diff --git a/assets/quick-add.css b/assets/quick-add.css
@@ -90,6 +90,12 @@
   height: 100%;
 }
 
+@media screen and (max-width: 749px) {
+  .quick-add-modal__content-info {
+    flex-direction: column;
+  }
+}
+
 .quick-add-modal__content-info > * {
   height: auto;
   margin: 0 auto;
@@ -233,10 +239,6 @@ quick-add-modal .product-media-container.constrain-height {
   }
 }
 
-.quick-add-modal__content--bulk {
-  width: 50%;
-}
-
 .quick-add-modal__content--bulk .quick-add__content-info__media {
   width: auto;
 }

diff --git a/snippets/card-product.liquid b/snippets/card-product.liquid
@@ -393,7 +393,7 @@
                   </div>
                 </div>
                 <div>
-                  <div class="page-width small-hide medium-hide">
+                  <div class="page-width">
                     {% for variant in card_product.variants %}
                       <div class="variant-modal">
                         <div class="variant-modal__inner">

diff --git a/snippets/quantity-input.liquid b/snippets/quantity-input.liquid
@@ -27,6 +27,7 @@
     {% if variant.quantity_rule.max != null %}
       max="{{ variant.quantity_rule.max }}"
     {% endif %}
+    min="0"
     step="{{ variant.quantity_rule.increment }}"
     {% # theme-check-enable %}
     aria-label="{{ 'products.product.quantity.input_label' | t: product: variant.title | escape }}"