diff --git a/assets/component-volume-pricing.css b/assets/component-volume-pricing.css index 2729866c343..f23c9b21d68 100644 --- a/assets/component-volume-pricing.css +++ b/assets/component-volume-pricing.css @@ -19,7 +19,7 @@ volume-pricing li { justify-content: space-between; } -.volume-pricing-note { +div.volume-pricing-note { margin-top: -2.6rem; } diff --git a/assets/global.js b/assets/global.js index 50c82a4accb..58552e82c34 100644 --- a/assets/global.js +++ b/assets/global.js @@ -51,8 +51,6 @@ class HTMLUpdateUtility { const newNodeWrapper = document.createElement('div'); HTMLUpdateUtility.setInnerHTML(newNodeWrapper, newContent.outerHTML); const newNode = newNodeWrapper.firstChild; - oldNode.parentNode.insertBefore(newNode, oldNode); - oldNode.style.display = 'none'; // dedupe IDs const uniqueKey = Date.now(); @@ -61,6 +59,9 @@ class HTMLUpdateUtility { element.form && element.setAttribute('form', `${element.form.getAttribute('id')}-${uniqueKey}`); }); + oldNode.parentNode.insertBefore(newNode, oldNode); + oldNode.style.display = 'none'; + this.#postProcessCallbacks.forEach((callback) => callback(newNode)); setTimeout(() => oldNode.remove(), 500); diff --git a/assets/product-info.js b/assets/product-info.js index 7c7c8d8282a..25a079dc4ca 100644 --- a/assets/product-info.js +++ b/assets/product-info.js @@ -80,9 +80,7 @@ if (!customElements.get('product-info')) { let callback = () => {}; let productUrl = this.getProductInfoUrl(targetUrl, variant?.id); if (this.dataset.url !== targetUrl) { - this.updateURL(targetUrl, variant?.id); - this.updateShareUrl(targetUrl, variant?.id); - callback = this.handleSwapProduct(); + callback = this.handleSwapProduct(targetUrl, variant); productUrl = this.getProductInfoUrl(targetUrl, variant?.id, true); } else if (!variant) { this.setUnavailable(); @@ -91,24 +89,24 @@ if (!customElements.get('product-info')) { this.updateOptionValues(html); }; } else { - this.updateURL(targetUrl, variant.id); - this.updateShareUrl(targetUrl, variant.id); this.updateVariantInputs(variant.id); - callback = this.handleUpdateProductInfo(variant); + callback = this.handleUpdateProductInfo(targetUrl, variant); } this.renderProductInfo(productUrl, target.id, callback); } - handleSwapProduct() { + handleSwapProduct(baseUrl, variant) { return (html) => { this.productModal?.remove(); + this.updateURL(baseUrl, variant?.id); // If we are in an embedded context (quick add, featured product, etc), only swap product info. // Otherwise, refresh the entire page content and sibling sections. if (this.dataset.updateUrl === 'false') { this.swapProductUtility.viewTransition(this, html.querySelector('product-info')); } else { + document.querySelector('head title').innerHTML = html.querySelector('head title').innerHTML; this.swapProductUtility.viewTransition(document.querySelector('main'), html.querySelector('main')); } }; @@ -127,6 +125,13 @@ if (!customElements.get('product-info')) { .then(() => { // set focus to last clicked option value document.querySelector(`#${targetId}`)?.focus(); + }) + .catch((error) => { + if (error.name === 'AbortError') { + console.log('Fetch aborted by user'); + } else { + console.error(error); + } }); } @@ -152,11 +157,12 @@ if (!customElements.get('product-info')) { if (variantSelects) this.variantSelectors.innerHTML = variantSelects.innerHTML; } - handleUpdateProductInfo(variant) { + handleUpdateProductInfo(baseUrl, variant) { return (html) => { this.pickupAvailability?.update(variant); this.updateMedia(html, variant?.featured_media?.id); this.updateOptionValues(html); + this.updateURL(baseUrl, variant?.id); const updateSourceFromDestination = (id, shouldHide = (source) => false) => { const source = html.getElementById(`${id}-${this.sectionId}`); @@ -203,14 +209,12 @@ if (!customElements.get('product-info')) { } updateURL(url, variantId) { - if (this.dataset.updateUrl === 'false') return; - window.history.replaceState({}, '', `${url}${variantId ? `?variant=${variantId}` : ''}`); - } - - updateShareUrl(url, variantId) { this.querySelector('share-url')?.updateUrl( `${window.shopUrl}${url}${variantId ? `?variant=${variantId}` : ''}` ); + + if (this.dataset.updateUrl === 'false') return; + window.history.replaceState({}, '', `${url}${variantId ? `?variant=${variantId}` : ''}`); } setUnavailable() { diff --git a/assets/quick-add.js b/assets/quick-add.js index 641014d694b..dbbcdb0d3fc 100644 --- a/assets/quick-add.js +++ b/assets/quick-add.js @@ -77,7 +77,16 @@ if (!customElements.get('quick-add-modal')) { preventDuplicatedIDs(productElement) { const sectionId = productElement.dataset.section; - productElement.outerHTML = productElement.outerHTML.replaceAll(sectionId, `quickadd-${sectionId}`); + + const oldId = sectionId; + const newId = `quickadd-${sectionId}`; + productElement.innerHTML = productElement.innerHTML.replaceAll(oldId, newId); + Array.from(productElement.attributes).forEach((attribute) => { + if (attribute.value.includes(oldId)) { + productElement.setAttribute(attribute.name, attribute.value.replace(oldId, newId)); + } + }); + productElement.dataset.originalSection = sectionId; }