[OLD] Quick Add Bulk - add to cart vs live picker

assets/dynamic-add-button.js

@@ -0,0 +1,144 @@
+
+class DynamicAddButton extends HTMLElement {
+  constructor() {
+    super();
+    this.button = this.querySelector('button')
+    this.button.addEventListener('click', (event) => {
+     event.preventDefault();
+     this.addToCart();
+    });
+
+    const debouncedOnChange = debounce((event) => {
+      this.updateCart(event);
+    }, ON_CHANGE_DEBOUNCE_TIMER);
+    this.addEventListener('change', debouncedOnChange.bind(this));
+  }
+
+  connectedCallback() {
+   // Update if it's another section
+  }
+
+  disconnectedCallback() {
+    // if (this.cartUpdateUnsubscriber) {
+    //   this.cartUpdateUnsubscriber();
+    // }
+  }
+
+  updateCart(event) {
+    this.quantity = this.querySelector('quantity-input')
+    this.quantity.classList.add('loading');
+    this.querySelector('.loading__spinner').classList.remove('hidden');
+    const body = JSON.stringify({
+      quantity: event.target.value,
+      id: event.target.getAttribute('data-index'),
+      sections: this.getSectionsToRender().map((section) => section.section)
+    });
+
+    fetch(`${routes.cart_change_url}`, { ...fetchConfig('javascript'), ...{ body } })
+      .then((response) => {
+        return response.text();
+      })
+      .then((state) => {
+        const parsedState = JSON.parse(state);
+
+        if (parsedState.description || parsedState.errors) {
+          const errorElement = document.querySelector(`#Quick-add-bulk-item-error-desktop-${event.target.getAttribute('data-index')}`)
+          errorElement.classList.remove('hidden')
+          errorElement.querySelector('.variant-bulk__error-text').innerHTML = parsedState.description
+         // Update errors 
+          return;
+        }
+
+
+        this.renderSections(parsedState);
+
+        if (event.target.value == 0) {
+          this.button = this.querySelector('button')
+          this.button.addEventListener('click', (event) => {
+          event.preventDefault();
+          this.addToCart();
+         });
+
+        }
+        publish(PUB_SUB_EVENTS.cartUpdate, { source: `quick-change-${event.target.getAttribute('data-index')}`, cartData: parsedState });
+
+      }).catch((error) => {
+        console.log(error, 'error')
+      })
+  }
+
+  addToCart() {
+    this.button.classList.add('loading');
+    this.querySelector('.loading__spinner').classList.remove('hidden');
+    const body = JSON.stringify({
+      items: [
+        {
+          quantity: parseInt(this.dataset.min),
+          id: parseInt(this.dataset.id)
+        }
+      ],
+      sections: this.getSectionsToRender().map((section) => section.section)
+    });
+
+    fetch(`${routes.cart_add_url}`, { ...fetchConfig('javascript'), ...{ body } })
+      .then((response) => {
+        return response.text();
+      })
+      .then((state) => {
+        const parsedState = JSON.parse(state);
+
+        if (parsedState.description || parsedState.errors) {
+          console.log('error', parsedState)
+          // Error handling
+          return;
+        }
+
+        this.renderSections(parsedState);
+
+        publish(PUB_SUB_EVENTS.cartUpdate, { source: 'quick-add', cartData: parsedState });
+
+      }).catch((error) => {
+        console.error(error);
+      })
+  }
+
+  getSectionsToRender() {
+    return [
+      {
+        id: `dynamic-button-${this.dataset.id}`,
+        section: 'main-collection-product-grid',
+        selector: `#dynamic-button-${this.dataset.id}:not(.hidden)`
+      },
+      {
+        id: 'cart-icon-bubble',
+        section: 'cart-icon-bubble',
+        selector: '.cart-count-bubble'
+      },
+      {
+        id: 'CartDrawer',
+        selector: '#CartDrawer',
+        section: 'cart-drawer'
+      }
+    ];
+  }
+
+  getSectionInnerHTML(html, selector) {
+    return new DOMParser()
+      .parseFromString(html, 'text/html')
+      .querySelector(selector).innerHTML;
+  }
+
+  renderSections(parsedState) {
+    this.getSectionsToRender().forEach((section => {
+      const sectionElement = document.querySelector(section.selector);
+      const elementToReplace = sectionElement && sectionElement.querySelector(section.selector) ? sectionElement.querySelector(section.selector) : sectionElement;
+      if (elementToReplace) {
+        elementToReplace.innerHTML =
+          this.getSectionInnerHTML(parsedState.sections[section.section], section.selector);
+      }
+    }));
+
+  }
+
+}
+customElements.define('dynamic-add-button', DynamicAddButton);

assets/global.js

@@ -155,6 +155,7 @@ function onKeyUpEscape(event) {
 class QuantityInput extends HTMLElement {
   constructor() {
     super();
+    this.loader = this.dataset.loader
     this.input = this.querySelector('input');
     this.changeEvent = new Event('change', { bubbles: true });
     this.input.addEventListener('change', this.onInputChange.bind(this));
@@ -177,6 +178,9 @@ class QuantityInput extends HTMLElement {
   }
 
   onInputChange(event) {
+    if (this.loader) {
+      this.classList.add('loading')
+    }
     this.validateQtyRules();
   }
 
@@ -191,9 +195,9 @@ 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);
+      // const min = parseInt(this.input.min);
+      // const buttonMinus = this.querySelector(".quantity__button[name='minus']");
+      // buttonMinus.classList.toggle('disabled', value <= min);
     }
     if (this.input.max) {
       const max = parseInt(this.input.max);

assets/quick-add.css

@@ -69,8 +69,16 @@
   }
 }
 
+.variant-modal__image-container {
+  width: 100%;
+  height: 100%;
+}
+
 .quick-add-modal__content img {
   max-width: 100%;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
 }
 
 .quick-add-modal__content-info {
@@ -224,3 +232,72 @@ quick-add-modal .product-media-container.constrain-height {
     --constrained-min-height: 400px;
   }
 }
+
+.quick-add-modal__content--bulk {
+  width: 50%;
+}
+
+.quick-add-modal__content--bulk .quick-add__content-info__media {
+  width: auto;
+}
+
+.quick-add-modal__content--bulk .quick-add__product-container {
+  width: 20rem;
+  height: 20rem;
+}
+
+.quick-add-modal__content--bulk .quick-add__product-container img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+dynamic-add-button {
+  position: relative;
+  grid-row-start: 4;
+  margin: 0 0 1rem;
+  z-index: 1;
+}
+
+.card__content dynamic-add-button .quantity {
+  width: 100%;
+}
+
+.variant-modal__inner {
+  display: flex;
+}
+
+.variant-modal__inner div:nth-of-type(2) {
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+}
+
+.variant-modal__media {
+  width: 4.5rem;
+  height: 4.5rem;
+  margin-right: 1.2rem;
+}
+
+.variant-modal {
+  display: flex;
+  justify-content: space-between;
+}
+
+dynamic-add-button .loading__spinner {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  position: absolute;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+dynamic-add-button quantity-input.loading {
+  color: transparent;
+}
+
+.variant-bulk__error {
+  display: none;
+}

sections/main-collection-product-grid.liquid

@@ -6,11 +6,11 @@
   {{ 'mask-blobs.css' | asset_url | stylesheet_tag }}
 {%- endif -%}
 
-{%- if section.settings.enable_quick_add -%}
+{%- unless section.settings.quick_add == 'none' -%}
   {{ 'quick-add.css' | asset_url | stylesheet_tag }}
   <script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
   <script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
-{%- endif -%}
+{%- endunless -%}
 
 {%- style -%}
   .section-{{ section.id }}-padding {
@@ -162,7 +162,7 @@
                     show_vendor: section.settings.show_vendor,
                     show_rating: section.settings.show_rating,
                     lazy_load: lazy_load,
-                    show_quick_add: section.settings.enable_quick_add,
+                    quick_add: section.settings.quick_add,
                     section_id: section.id
                   %}
                 </li>
@@ -297,10 +297,24 @@
       "info": "t:sections.main-collection-product-grid.settings.show_rating.info"
     },
     {
-      "type": "checkbox",
-      "id": "enable_quick_add",
-      "default": false,
-      "label": "t:sections.main-collection-product-grid.settings.enable_quick_buy.label"
+      "type": "select",
+      "id": "quick_add",
+      "default": "none",
+      "label": "Quick add",
+      "options": [
+        {
+          "value": "none",
+          "label": "None"
+        },
+        {
+          "value": "standard",
+          "label": "Standard"
+        },
+        {
+          "value": "bulk",
+          "label": "Bulk"
+        }
+      ]
     },
     {
       "type": "header",