diff --git a/assets/global.js b/assets/global.js index 16a51cbd756..f182e8d17cf 100644 --- a/assets/global.js +++ b/assets/global.js @@ -628,6 +628,38 @@ class ModalDialog extends HTMLElement { } customElements.define('modal-dialog', ModalDialog); +class BulkModal extends HTMLElement { + constructor() { + super(); + } + + connectedCallback() { + const handleIntersection = (entries, observer) => { + if (!entries[0].isIntersecting) return; + observer.unobserve(this); + if (this.innerHTML.trim() === '') { + const productUrl = this.dataset.url.split('?')[0]; + fetch(`${productUrl}?section_id=bulk-quick-order-list`) + .then((response) => response.text()) + .then((responseText) => { + const html = new DOMParser().parseFromString(responseText, 'text/html'); + const sourceQty = html.querySelector('.quick-order-list-container').parentNode; + this.innerHTML = sourceQty.innerHTML; + }) + .catch((e) => { + console.error(e); + }); + } + }; + + new IntersectionObserver(handleIntersection.bind(this)).observe( + document.querySelector(`#QuickBulk-${this.dataset.productId}-${this.dataset.sectionId}`) + ); + } +} + +customElements.define('bulk-modal', BulkModal); + class ModalOpener extends HTMLElement { constructor() { super(); diff --git a/assets/quick-add-bulk.js b/assets/quick-add-bulk.js index 1208ffe7241..f9195e2f087 100644 --- a/assets/quick-add-bulk.js +++ b/assets/quick-add-bulk.js @@ -24,7 +24,11 @@ if (!customElements.get('quick-add-bulk')) { connectedCallback() { this.cartUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.cartUpdate, (event) => { - if (event.source === 'quick-add') { + if ( + event.source === 'quick-add' || + (event.cartData.items && !event.cartData.items.some((item) => item.id === parseInt(this.dataset.index))) || + (event.cartData.variant_id && !(event.cartData.variant_id === parseInt(this.dataset.index))) + ) { return; } // If its another section that made the update diff --git a/assets/quick-add.css b/assets/quick-add.css index 5286a986b0a..ebfe15aa58e 100644 --- a/assets/quick-add.css +++ b/assets/quick-add.css @@ -88,7 +88,17 @@ display: inline-block; } +.section-bulk-quick-order-list-padding { + padding-top: 2.7rem; + padding-bottom: 2.7rem; +} + @media screen and (min-width: 750px) { + .section-bulk-quick-order-list-padding { + padding-top: 3.6rem; + padding-bottom: 3.6rem; + } + .quick-add-modal__content-info--bulk .card__information-volume-pricing-note { padding-left: 1.6rem; } diff --git a/assets/quick-order-list.js b/assets/quick-order-list.js index 48a035e98ed..bd4e73948ef 100644 --- a/assets/quick-order-list.js +++ b/assets/quick-order-list.js @@ -72,7 +72,7 @@ if (!customElements.get('quick-order-list')) { constructor() { super(); this.cart = document.querySelector('cart-drawer'); - this.quickOrderListId = `quick-order-list-${this.dataset.productId}`; + this.quickOrderListId = `${this.dataset.section}-${this.dataset.productId}`; this.defineInputsAndQuickOrderTable(); this.variantItemStatusElement = document.getElementById('shopping-cart-variant-item-status'); @@ -114,7 +114,15 @@ if (!customElements.get('quick-order-list')) { connectedCallback() { this.cartUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.cartUpdate, (event) => { - if (event.source === this.quickOrderListId) { + const variantIds = []; + this.querySelectorAll('.variant-item').forEach((item) => { + variantIds.push(item.dataset.variantId); + }); + + if ( + event.source === this.quickOrderListId || + (event.cartData.items && variantIds.some((element) => !event.cartData.items.includes(element))) + ) { return; } // If its another section that made the update @@ -123,15 +131,16 @@ 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; + this.sectionId = this.dataset.section; } disconnectedCallback() { @@ -202,7 +211,7 @@ if (!customElements.get('quick-order-list')) { return [ { id: this.quickOrderListId, - section: document.getElementById(this.quickOrderListId).dataset.id, + section: document.getElementById(this.quickOrderListId).dataset.section, selector: `#${this.quickOrderListId} .js-contents`, }, { @@ -216,8 +225,8 @@ if (!customElements.get('quick-order-list')) { selector: '.shopify-section', }, { - id: `quick-order-list-total-${this.dataset.productId}`, - section: document.getElementById(this.quickOrderListId).dataset.id, + id: `quick-order-list-total-${this.dataset.productId}-${this.dataset.section}`, + section: document.getElementById(this.quickOrderListId).dataset.section, selector: `#${this.quickOrderListId} .quick-order-list__total`, }, { @@ -373,13 +382,12 @@ if (!customElements.get('quick-order-list')) { updateMultipleQty(items) { this.querySelector('.variant-remove-total .loading__spinner')?.classList.remove('hidden'); - const ids = Object.keys(items); const body = JSON.stringify({ updates: items, sections: this.getSectionsToRender().map((section) => section.section), - sections_url: this.getSectionsUrl(), + sections_url: this.dataset.url, }); this.updateMessage(); @@ -392,6 +400,7 @@ if (!customElements.get('quick-order-list')) { .then((state) => { const parsedState = JSON.parse(state); this.renderSections(parsedState, ids); + publish(PUB_SUB_EVENTS.cartUpdate, { source: this.quickOrderListId, cartData: parsedState }); }) .catch(() => { this.setErrorMessage(window.cartStrings.error); diff --git a/sections/bulk-quick-order-list.liquid b/sections/bulk-quick-order-list.liquid new file mode 100644 index 00000000000..321c20b93b3 --- /dev/null +++ b/sections/bulk-quick-order-list.liquid @@ -0,0 +1,15 @@ +{{ 'quick-order-list.css' | asset_url | stylesheet_tag }} + + + +{% render 'quick-order-list', product: product, show_image: true, show_sku: true, is_modal: true %} + +{% schema %} +{ + "name": "t:sections.quick-order-list.name", + "limit": 1, + "enabled_on": { + "templates": ["product"] + } +} +{% endschema %} diff --git a/snippets/card-product.liquid b/snippets/card-product.liquid index 080d897d125..18df76939e9 100644 --- a/snippets/card-product.liquid +++ b/snippets/card-product.liquid @@ -402,7 +402,10 @@ assign qty_rules = true endif -%} - +