From 62432507f43680fce72ebef35be4e29a5c55a415 Mon Sep 17 00:00:00 2001 From: Ludo Date: Tue, 16 Apr 2024 17:51:30 +0200 Subject: [PATCH] run linter in updates files for the latest release --- assets/base.css | 20 ++- assets/cart.js | 7 +- assets/component-card.css | 99 ++++++++----- assets/component-menu-drawer.css | 2 +- assets/global.js | 54 ++++--- assets/product-info.js | 8 +- assets/quantity-popover.css | 3 +- assets/quantity-popover.js | 14 +- assets/quick-add-bulk.js | 89 ++++++----- assets/quick-add.css | 18 +-- assets/quick-order-list.css | 20 +-- assets/quick-order-list.js | 206 ++++++++++++++++---------- sections/collapsible-content.liquid | 5 +- sections/contact-form.liquid | 5 +- sections/email-signup-banner.liquid | 4 +- sections/image-banner.liquid | 5 +- sections/image-with-text.liquid | 5 +- sections/main-product.liquid | 2 +- sections/multirow.liquid | 5 +- sections/newsletter.liquid | 4 +- sections/page.liquid | 5 +- sections/rich-text.liquid | 5 +- snippets/product-media-gallery.liquid | 16 +- snippets/product-thumbnail.liquid | 119 ++++++++------- 24 files changed, 409 insertions(+), 311 deletions(-) diff --git a/assets/base.css b/assets/base.css index 34188cf5452..5c3a813b4fa 100644 --- a/assets/base.css +++ b/assets/base.css @@ -2263,13 +2263,25 @@ product-info .loading__spinner:not(.hidden) ~ *, } @keyframes translateAnnouncementSlideIn { - 0% {opacity: 0; transform: translateX(var(--announcement-translate-from))} - 100% {opacity: 1; transform: translateX(0)} + 0% { + opacity: 0; + transform: translateX(var(--announcement-translate-from)); + } + 100% { + opacity: 1; + transform: translateX(0); + } } @keyframes translateAnnouncementSlideOut { - 0% {opacity: 1; transform: translateX(0)} - 100% {opacity: 0; transform: translateX(var(--announcement-translate-to))} + 0% { + opacity: 1; + transform: translateX(0); + } + 100% { + opacity: 0; + transform: translateX(var(--announcement-translate-to)); + } } /* section-header */ diff --git a/assets/cart.js b/assets/cart.js index 7727d7ec629..c9bcc076431 100644 --- a/assets/cart.js +++ b/assets/cart.js @@ -43,7 +43,12 @@ class CartItems extends HTMLElement { } onChange(event) { - this.updateQuantity(event.target.dataset.index, event.target.value, document.activeElement.getAttribute('name'), event.target.dataset.quantityVariantId); + this.updateQuantity( + event.target.dataset.index, + event.target.value, + document.activeElement.getAttribute('name'), + event.target.dataset.quantityVariantId + ); } onCartUpdate() { diff --git a/assets/component-card.css b/assets/component-card.css index 4c6ff1236e3..c72491d8d59 100644 --- a/assets/component-card.css +++ b/assets/component-card.css @@ -58,7 +58,8 @@ top: calc(var(--border-width) * -1); left: calc(var(--border-width) * -1); border-radius: var(--border-radius); - box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow), var(--shadow-opacity)); + box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) + rgba(var(--color-shadow), var(--shadow-opacity)); } /* Needed for gradient continuity with or without animation, the transform scopes the gradient to its container which happens already when animation are turned on */ @@ -138,17 +139,18 @@ padding: 1.3rem 1rem; } -.card:not(.ratio)>.card__content { +.card:not(.ratio) > .card__content { grid-template-rows: max-content minmax(0, 1fr) max-content auto; } .card-information .card__information-volume-pricing-note { margin-top: 0.6rem; - line-height: calc(0.5 + .4 / var(--font-body-scale)); + line-height: calc(0.5 + 0.4 / var(--font-body-scale)); color: rgba(var(--color-foreground), 0.75); } -.card__information-volume-pricing-note--button, .card__information-volume-pricing-note--button.quantity-popover__info-button--icon-with-label { +.card__information-volume-pricing-note--button, +.card__information-volume-pricing-note--button.quantity-popover__info-button--icon-with-label { position: relative; z-index: 1; cursor: pointer; @@ -203,7 +205,10 @@ width: calc(100% + var(--border-width) + 3.5rem); } - .grid--6-col-desktop .card--standard .card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info { + .grid--6-col-desktop + .card--standard + .card__information-volume-pricing-note--button + + .global-settings-popup.quantity-popover__info { width: calc(100% + var(--border-width) + 1rem); } } @@ -213,16 +218,29 @@ width: calc(3.5rem / var(--font-body-scale)); } - .grid--2-col-tablet-down .card--card .card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info, .grid--2-col-tablet-down .card--standard .card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info { + .grid--2-col-tablet-down + .card--card + .card__information-volume-pricing-note--button + + .global-settings-popup.quantity-popover__info, + .grid--2-col-tablet-down + .card--standard + .card__information-volume-pricing-note--button + + .global-settings-popup.quantity-popover__info { left: 50%; transform: translate(-50%); } - .grid--2-col-tablet-down .card--standard .card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info { + .grid--2-col-tablet-down + .card--standard + .card__information-volume-pricing-note--button + + .global-settings-popup.quantity-popover__info { width: 100%; } - .grid--2-col-tablet-down .card--card .card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info { + .grid--2-col-tablet-down + .card--card + .card__information-volume-pricing-note--button + + .global-settings-popup.quantity-popover__info { width: calc(100% + var(--border-width) + 4rem); } @@ -237,10 +255,10 @@ @media screen and (max-width: 989px) { .card-information quantity-popover .quantity__rules ~ volume-pricing { - margin-top: 0; + margin-top: 0; } - .card-information quantity-popover volume-pricing { + .card-information quantity-popover volume-pricing { margin-top: 4.2rem; } } @@ -267,7 +285,7 @@ justify-self: flex-end; } -.card:not(.card--horizontal)>.card__content>.card__badge { +.card:not(.card--horizontal) > .card__content > .card__badge { margin: 1.3rem; } @@ -278,7 +296,7 @@ width: 100%; } -.card__inner:not(.ratio)>.card__content { +.card__inner:not(.ratio) > .card__content { height: 100%; } @@ -297,7 +315,10 @@ font-size: calc(var(--font-heading-scale) * 1.2rem); } -.card--horizontal .card-information>*:not(.visually-hidden:first-child)+*:not(.rating):not(.card__information-volume-pricing-note) { +.card--horizontal + .card-information + > *:not(.visually-hidden:first-child) + + *:not(.rating):not(.card__information-volume-pricing-note) { margin-top: 0; } @@ -306,7 +327,6 @@ } @media only screen and (min-width: 750px) { - .card--horizontal .card__heading, .card--horizontal .price__container .price-item, .card--horizontal__quick-add { @@ -314,7 +334,7 @@ } } -.card--card.card--media>.card__content { +.card--card.card--media > .card__content { margin-top: calc(0rem - var(--image-padding)); } @@ -361,22 +381,21 @@ } @media screen and (min-width: 990px) { - - .card .media.media--hover-effect>img:only-child, - .card-wrapper .media.media--hover-effect>img:only-child { + .card .media.media--hover-effect > img:only-child, + .card-wrapper .media.media--hover-effect > img:only-child { transition: transform var(--duration-long) ease; } - .card:hover .media.media--hover-effect>img:first-child:only-child, - .card-wrapper:hover .media.media--hover-effect>img:first-child:only-child { + .card:hover .media.media--hover-effect > img:first-child:only-child, + .card-wrapper:hover .media.media--hover-effect > img:first-child:only-child { transform: scale(1.03); } - .card-wrapper:hover .media.media--hover-effect>img:first-child:not(:only-child) { + .card-wrapper:hover .media.media--hover-effect > img:first-child:not(:only-child) { opacity: 0; } - .card-wrapper:hover .media.media--hover-effect>img+img { + .card-wrapper:hover .media.media--hover-effect > img + img { opacity: 1; transition: transform var(--duration-long) ease; transform: scale(1.03); @@ -389,10 +408,10 @@ } .card--standard.card--media .card__inner .card__information, -.card--standard.card--text:not(.card--horizontal)>.card__content .card__heading:not(.card__heading--placeholder), -.card--standard:not(.card--horizontal)>.card__content .card__badge, -.card--standard.card--text.article-card>.card__content .card__information, -.card--standard>.card__content .card__caption { +.card--standard.card--text:not(.card--horizontal) > .card__content .card__heading:not(.card__heading--placeholder), +.card--standard:not(.card--horizontal) > .card__content .card__badge, +.card--standard.card--text.article-card > .card__content .card__information, +.card--standard > .card__content .card__caption { display: none; } @@ -400,18 +419,18 @@ width: 100%; } -.card--standard>.card__content { +.card--standard > .card__content { padding: 0; } -.card--standard>.card__content .card__information { +.card--standard > .card__content .card__information { padding-left: 0; padding-right: 0; } .card--card.card--media .card__inner .card__information, .card--card.card--text .card__inner, -.card--card.card--media>.card__content .card__badge { +.card--card.card--media > .card__content .card__badge { display: none; } @@ -442,7 +461,7 @@ overflow: hidden; } -.card-information>*+* { +.card-information > * + * { margin-top: 0.5rem; } @@ -450,29 +469,32 @@ width: 100%; } -.card-information>* { +.card-information > * { line-height: calc(1 + 0.4 / var(--font-body-scale)); color: rgb(var(--color-foreground)); } -.card-information>.price { +.card-information > .price { color: rgb(var(--color-foreground)); } -.card--horizontal .card-information>.price { +.card--horizontal .card-information > .price { color: rgba(var(--color-foreground), 0.75); } -.card-information>.rating { +.card-information > .rating { margin-top: 0.4rem; } /* Specificity needed due to the changes below */ -.card-information > *:not(.visually-hidden:first-child) + quantity-popover:not(.rating):not(.card__information-volume-pricing-note), .card-information .card__information-volume-pricing-note.card__information-volume-pricing-note--button { +.card-information + > *:not(.visually-hidden:first-child) + + quantity-popover:not(.rating):not(.card__information-volume-pricing-note), +.card-information .card__information-volume-pricing-note.card__information-volume-pricing-note--button { margin-top: 0; } -.card-information>*:not(.visually-hidden:first-child)+*:not(.rating):not(.card__information-volume-pricing-note) { +.card-information > *:not(.visually-hidden:first-child) + *:not(.rating):not(.card__information-volume-pricing-note) { margin-top: 0.7rem; } @@ -494,7 +516,10 @@ border: 0; /* Border is not currently compatible with image shapes for standard cards. */ background-color: transparent; - filter: drop-shadow(var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow), var(--shadow-opacity))); + filter: drop-shadow( + var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) + rgba(var(--color-shadow), var(--shadow-opacity)) + ); } .card--shape.card--standard:not(.card--text) .card__inner:after { diff --git a/assets/component-menu-drawer.css b/assets/component-menu-drawer.css index 4b5c2659051..2fc887dd153 100644 --- a/assets/component-menu-drawer.css +++ b/assets/component-menu-drawer.css @@ -221,7 +221,7 @@ details[open].menu-opening > .menu-drawer__submenu { .menu-drawer .list-social { justify-content: flex-start; - margin-left: -1.25rem + margin-left: -1.25rem; } .menu-drawer .list-social:empty { diff --git a/assets/global.js b/assets/global.js index 6221e726628..86f20390035 100644 --- a/assets/global.js +++ b/assets/global.js @@ -185,18 +185,18 @@ class QuantityInput extends HTMLElement { const previousValue = this.input.value; if (event.target.name === 'plus') { - if ((parseInt(this.input.dataset.min) > parseInt(this.input.step)) && this.input.value == 0) { + if (parseInt(this.input.dataset.min) > parseInt(this.input.step) && this.input.value == 0) { this.input.value = this.input.dataset.min; } else { - this.input.stepUp() - } + this.input.stepUp(); + } } else { this.input.stepDown(); } - + if (previousValue !== this.input.value) this.input.dispatchEvent(this.changeEvent); - if ((this.input.dataset.min === previousValue) && event.target.name === 'minus') { + if (this.input.dataset.min === previousValue && event.target.name === 'minus') { this.input.value = parseInt(this.input.min); } } @@ -373,8 +373,7 @@ class MenuDrawer extends HTMLElement { ); this.querySelectorAll( 'button:not(.localization-selector):not(.country-selector__close-button):not(.country-filter__reset-button)' - ).forEach((button) => button.addEventListener('click', this.onCloseButtonClick.bind(this)) - ); + ).forEach((button) => button.addEventListener('click', this.onCloseButtonClick.bind(this))); } onKeyUp(event) { @@ -779,9 +778,7 @@ class SlideshowComponent extends SliderComponent { this.autoplayButtonIsSetToPlay = true; this.play(); } else { - this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked - ? this.pause() - : this.play(); + this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play(); } } @@ -845,10 +842,7 @@ class SlideshowComponent extends SliderComponent { event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play(); - } else if ( - !this.reducedMotion.matches && - !this.announcementBarArrowButtonWasClicked - ) { + } else if (!this.reducedMotion.matches && !this.announcementBarArrowButtonWasClicked) { this.play(); } } @@ -890,9 +884,7 @@ class SlideshowComponent extends SliderComponent { autoRotateSlides() { const slideScrollPosition = - this.currentPage === this.sliderItems.length - ? 0 - : this.slider.scrollLeft + this.sliderItemOffset; + this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition); this.applyAnimationToAnnouncementBar(); @@ -956,7 +948,7 @@ class SlideshowComponent extends SliderComponent { const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * - (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); + (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition, }); @@ -1110,22 +1102,21 @@ class VariantSelects extends HTMLElement { if (productForm) productForm.handleErrorMessage(); } - updateMedia(html) { const mediaGallerySource = document.querySelector(`[id^="MediaGallery-${this.dataset.section}"] ul`); const mediaGalleryDestination = html.querySelector(`[id^="MediaGallery-${this.dataset.section}"] ul`); const refreshSourceData = () => { const mediaGallerySourceItems = Array.from(mediaGallerySource.querySelectorAll('li[data-media-id]')); - const sourceSet = new Set(mediaGallerySourceItems.map(item => item.dataset.mediaId)); - const sourceMap = new Map(mediaGallerySourceItems.map((item, index) => [item.dataset.mediaId, {item, index}])); + const sourceSet = new Set(mediaGallerySourceItems.map((item) => item.dataset.mediaId)); + const sourceMap = new Map(mediaGallerySourceItems.map((item, index) => [item.dataset.mediaId, { item, index }])); return [mediaGallerySourceItems, sourceSet, sourceMap]; }; if (mediaGallerySource && mediaGalleryDestination) { let [mediaGallerySourceItems, sourceSet, sourceMap] = refreshSourceData(); const mediaGalleryDestinationItems = Array.from(mediaGalleryDestination.querySelectorAll('li[data-media-id]')); - const destinationSet = new Set(mediaGalleryDestinationItems.map(({dataset}) => dataset.mediaId)); + const destinationSet = new Set(mediaGalleryDestinationItems.map(({ dataset }) => dataset.mediaId)); let shouldRefresh = false; // add items from new data not present in DOM @@ -1152,7 +1143,10 @@ class VariantSelects extends HTMLElement { const sourceData = sourceMap.get(destinationItem.dataset.mediaId); if (sourceData && sourceData.index !== destinationIndex) { - mediaGallerySource.insertBefore(sourceData.item, mediaGallerySource.querySelector(`li:nth-of-type(${destinationIndex + 1})`)); + mediaGallerySource.insertBefore( + sourceData.item, + mediaGallerySource.querySelector(`li:nth-of-type(${destinationIndex + 1})`) + ); // refresh source now that it has been modified [mediaGallerySourceItems, sourceSet, sourceMap] = refreshSourceData(); @@ -1160,7 +1154,9 @@ class VariantSelects extends HTMLElement { }); } - document.querySelector(`[id^="MediaGallery-${this.dataset.section}"]`).setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media?.id}`); + document + .querySelector(`[id^="MediaGallery-${this.dataset.section}"]`) + .setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media?.id}`); // update media modal const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); @@ -1173,7 +1169,8 @@ class VariantSelects extends HTMLElement { const sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch( - `${this.dataset.url}?variant=${requestedVariantId}§ion_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section + `${this.dataset.url}?variant=${requestedVariantId}§ion_id=${ + this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section }` ) .then((response) => response.text()) @@ -1202,7 +1199,9 @@ class VariantSelects extends HTMLElement { this.updateMedia(html); const pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`); - const pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`); + const pricePerItemSource = html.getElementById( + `Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}` + ); const volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); const qtyRules = document.getElementById(`Quantity-Rules-${this.dataset.section}`); @@ -1232,8 +1231,7 @@ class VariantSelects extends HTMLElement { if (price) price.classList.remove('hidden'); - if (inventoryDestination) - inventoryDestination.classList.toggle('hidden', inventorySource.innerText === ''); + if (inventoryDestination) inventoryDestination.classList.toggle('hidden', inventorySource.innerText === ''); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton( diff --git a/assets/product-info.js b/assets/product-info.js index 913c179145e..1fa35239125 100644 --- a/assets/product-info.js +++ b/assets/product-info.js @@ -54,7 +54,7 @@ if (!customElements.get('product-info')) { if (max) { this.input.max = max; } else { - this.input.removeAttribute('max') + this.input.removeAttribute('max'); } this.input.value = min; publish(PUB_SUB_EVENTS.quantityUpdate, undefined); @@ -91,10 +91,10 @@ if (!customElements.get('product-info')) { const attributes = ['data-cart-quantity', 'data-min', 'data-max', 'step']; for (let attribute of attributes) { const valueUpdated = updated.getAttribute(attribute); - if (valueUpdated !== null) { - current.setAttribute(attribute, valueUpdated) + if (valueUpdated !== null) { + current.setAttribute(attribute, valueUpdated); } else { - current.removeAttribute(attribute) + current.removeAttribute(attribute); } } } else { diff --git a/assets/quantity-popover.css b/assets/quantity-popover.css index 1aaa4976a7a..617923a2d22 100644 --- a/assets/quantity-popover.css +++ b/assets/quantity-popover.css @@ -100,7 +100,7 @@ quantity-popover quick-order-list-remove-button .button { justify-content: flex-end; } -.quantity-popover__info .volume-pricing-label~.button { +.quantity-popover__info .volume-pricing-label ~ .button { top: -0.2rem; } @@ -163,4 +163,3 @@ quantity-popover .quantity__button:not(:focus-visible):not(.focused), quantity-popover .quantity__input:not(:focus-visible):not(.focused) { background-color: initial; } - diff --git a/assets/quantity-popover.js b/assets/quantity-popover.js index 4795a78b954..af45660bbfa 100644 --- a/assets/quantity-popover.js +++ b/assets/quantity-popover.js @@ -48,12 +48,12 @@ if (!customElements.get('quantity-popover')) { if ((this.mql.matches && !isExpanded) || event.type === 'click') { button.setAttribute('aria-expanded', !isExpanded); - + this.popoverInfo.toggleAttribute('hidden'); - + button.classList.toggle('quantity-popover__info-button--open'); - this.infoButtonDesktop.classList.add('quantity-popover__info-button--icon-only--animation') + this.infoButtonDesktop.classList.add('quantity-popover__info-button--icon-only--animation'); } const isOpen = button.getAttribute('aria-expanded') === 'true'; @@ -62,16 +62,16 @@ if (!customElements.get('quantity-popover')) { button.focus(); button.addEventListener('keyup', (e) => { if (e.key === 'Escape') { - this.closePopover(e) + this.closePopover(e); } - }) + }); } } closePopover(event) { event.preventDefault(); const isButtonChild = this.infoButtonDesktop.contains(event.relatedTarget); - const isPopoverChild = this.popoverInfo.contains(event.relatedTarget) + const isPopoverChild = this.popoverInfo.contains(event.relatedTarget); const button = this.infoButtonDesktop && this.mql.matches ? this.infoButtonDesktop : this.infoButtonMobile; @@ -79,7 +79,7 @@ if (!customElements.get('quantity-popover')) { button.setAttribute('aria-expanded', 'false'); button.classList.remove('quantity-popover__info-button--open'); this.popoverInfo.setAttribute('hidden', ''); - this.infoButtonDesktop.classList.remove('quantity-popover__info-button--icon-only--animation') + this.infoButtonDesktop.classList.remove('quantity-popover__info-button--icon-only--animation'); } this.eventMouseEnterHappened = false; diff --git a/assets/quick-add-bulk.js b/assets/quick-add-bulk.js index 52e2334a396..b0aec8767ba 100644 --- a/assets/quick-add-bulk.js +++ b/assets/quick-add-bulk.js @@ -1,4 +1,3 @@ - if (!customElements.get('quick-add-bulk')) { customElements.define( 'quick-add-bulk', @@ -21,10 +20,9 @@ if (!customElements.get('quick-add-bulk')) { window.pageNumber = decodeURIComponent(pageParams.get('page') || ''); } - connectedCallback() { this.cartUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.cartUpdate, (event) => { - if (event.source === "quick-add") { + if (event.source === 'quick-add') { return; } // If its another section that made the update @@ -72,9 +70,13 @@ if (!customElements.get('quick-add-bulk')) { } cleanErrorMessageOnType(event) { - event.target.addEventListener('keypress', () => { - event.target.setCustomValidity(''); - }, { once: true }); + event.target.addEventListener( + 'keypress', + () => { + event.target.setCustomValidity(''); + }, + { once: true } + ); } onCartUpdate() { @@ -83,13 +85,15 @@ if (!customElements.get('quick-add-bulk')) { .then((response) => response.text()) .then((responseText) => { const html = new DOMParser().parseFromString(responseText, 'text/html'); - const sourceQty = html.querySelector(`#quick-add-bulk-${this.dataset.id}-${this.closest('.collection').dataset.id}`); + const sourceQty = html.querySelector( + `#quick-add-bulk-${this.dataset.id}-${this.closest('.collection').dataset.id}` + ); if (sourceQty) { this.innerHTML = sourceQty.innerHTML; } resolve(); }) - .catch(e => { + .catch((e) => { console.error(e); reject(e); }); @@ -98,14 +102,14 @@ if (!customElements.get('quick-add-bulk')) { updateCart(event) { this.lastActiveInputId = event.target.getAttribute('data-index'); - this.quantity = this.querySelector('quantity-input') + this.quantity = this.querySelector('quantity-input'); this.quantity.classList.add('quantity__input-disabled'); this.selectProgressBar().classList.remove('hidden'); const body = JSON.stringify({ quantity: event.target.value, id: event.target.getAttribute('data-index'), sections: this.getSectionsToRender().map((section) => section.section), - sections_url: this.getSectionsUrl() + sections_url: this.getSectionsUrl(), }); fetch(`${routes.cart_change_url}`, { ...fetchConfig('javascript'), ...{ body } }) @@ -127,11 +131,11 @@ if (!customElements.get('quick-add-bulk')) { this.renderSections(parsedState); - publish(PUB_SUB_EVENTS.cartUpdate, { source: "quick-add", cartData: parsedState }); - - }).catch((error) => { - console.log(error, 'error') + publish(PUB_SUB_EVENTS.cartUpdate, { source: 'quick-add', cartData: parsedState }); }) + .catch((error) => { + console.log(error, 'error'); + }); } addToCart(event) { @@ -141,10 +145,10 @@ if (!customElements.get('quick-add-bulk')) { items: [ { quantity: parseInt(event.target.value), - id: parseInt(this.dataset.id) - } + id: parseInt(this.dataset.id), + }, ], - sections: this.getSectionsToRender().map((section) => section.section) + sections: this.getSectionsToRender().map((section) => section.section), }); fetch(`${routes.cart_add_url}`, { ...fetchConfig('javascript'), ...{ body } }) @@ -168,10 +172,10 @@ if (!customElements.get('quick-add-bulk')) { this.renderSections(parsedState); publish(PUB_SUB_EVENTS.cartUpdate, { source: 'quick-add', cartData: parsedState }); - - }).catch((error) => { - console.error(error); }) + .catch((error) => { + console.error(error); + }); } getSectionsToRender() { @@ -179,51 +183,60 @@ if (!customElements.get('quick-add-bulk')) { { id: `quick-add-bulk-${this.dataset.id}-${this.closest('.collection-quick-add-bulk').dataset.id}`, section: this.closest('.collection-quick-add-bulk').dataset.id, - selector: `#quick-add-bulk-${this.dataset.id}-${this.closest('.collection-quick-add-bulk').dataset.id}` + selector: `#quick-add-bulk-${this.dataset.id}-${this.closest('.collection-quick-add-bulk').dataset.id}`, }, { id: 'cart-icon-bubble', section: 'cart-icon-bubble', - selector: '.shopify-section' + selector: '.shopify-section', }, { id: 'CartDrawer', selector: '#CartDrawer', - section: 'cart-drawer' - } + section: 'cart-drawer', + }, ]; } getSectionsUrl() { if (window.pageNumber) { - return `${window.location.pathname}?page=${window.pageNumber}` + return `${window.location.pathname}?page=${window.pageNumber}`; } else { - return `${window.location.pathname}` - } + return `${window.location.pathname}`; + } } getSectionInnerHTML(html, selector) { - return new DOMParser() - .parseFromString(html, 'text/html') - .querySelector(selector).innerHTML; + return new DOMParser().parseFromString(html, 'text/html').querySelector(selector).innerHTML; } renderSections(parsedState) { - this.getSectionsToRender().forEach((section => { + this.getSectionsToRender().forEach((section) => { const sectionElement = document.getElementById(section.id); - if (sectionElement && sectionElement.parentElement && sectionElement.parentElement.classList.contains('drawer')) { - parsedState.items.length > 0 ? sectionElement.parentElement.classList.remove('is-empty') : sectionElement.parentElement.classList.add('is-empty'); + if ( + sectionElement && + sectionElement.parentElement && + sectionElement.parentElement.classList.contains('drawer') + ) { + parsedState.items.length > 0 + ? sectionElement.parentElement.classList.remove('is-empty') + : sectionElement.parentElement.classList.add('is-empty'); setTimeout(() => { document.querySelector('#CartDrawer-Overlay').addEventListener('click', this.cart.close.bind(this.cart)); }); } - const elementToReplace = sectionElement && sectionElement.querySelector(section.selector) ? sectionElement.querySelector(section.selector) : sectionElement; + const elementToReplace = + sectionElement && sectionElement.querySelector(section.selector) + ? sectionElement.querySelector(section.selector) + : sectionElement; if (elementToReplace) { - elementToReplace.innerHTML = - this.getSectionInnerHTML(parsedState.sections[section.section], section.selector); + elementToReplace.innerHTML = this.getSectionInnerHTML( + parsedState.sections[section.section], + section.selector + ); } - })); + }); if (this.isEnterPressed) { this.querySelector(`#Quantity-${this.lastActiveInputId}`).select(); @@ -233,5 +246,5 @@ if (!customElements.get('quick-add-bulk')) { this.listenForKeydown(); } } -); + ); } diff --git a/assets/quick-add.css b/assets/quick-add.css index a4eb968f10a..b9d889ad5a9 100644 --- a/assets/quick-add.css +++ b/assets/quick-add.css @@ -82,7 +82,8 @@ margin-top: 0; } -.quick-add-modal__content-info--bulk .price, .quick-add-modal__content-info--bulk .card__information-volume-pricing-note { +.quick-add-modal__content-info--bulk .price, +.quick-add-modal__content-info--bulk .card__information-volume-pricing-note { display: inline-block; } @@ -111,7 +112,7 @@ .quick-add-modal__content-info--bulk .quick-add__product-media, .quick-add-modal__content-info--bulk .quick-add__product-container, -.quick-add-modal__content-info--bulk .quick-add__info { +.quick-add-modal__content-info--bulk .quick-add__info { width: 4.8rem; height: 7rem; } @@ -123,12 +124,12 @@ @media screen and (min-width: 990px) { .quick-add-modal__content-info--bulk .quick-add__product-media, .quick-add-modal__content-info--bulk .quick-add__product-container, - .quick-add-modal__content-info--bulk .quick-add__info { + .quick-add-modal__content-info--bulk .quick-add__info { width: 17rem; height: 22rem; } - .quick-add-modal__content-info--bulk-details, + .quick-add-modal__content-info--bulk-details, .quick-add-modal__content-info--bulk quick-order-list { padding: 0 2.5rem; } @@ -144,7 +145,7 @@ object-fit: cover; } -.quick-add-modal__content-info--bulk .quick-add__info { +.quick-add-modal__content-info--bulk .quick-add__info { display: flex; } @@ -169,18 +170,17 @@ } @media screen and (min-width: 989px) { - .quick-add-modal__content-info--bulk .quick-add__info { + .quick-add-modal__content-info--bulk .quick-add__info { flex-direction: column; position: sticky; top: 0; margin-top: -2.5rem; - padding-top: 2.5rem + padding-top: 2.5rem; } } - @media screen and (max-width: 990px) { - .quick-add-modal__content-info--bulk { + .quick-add-modal__content-info--bulk { flex-direction: column; } } diff --git a/assets/quick-order-list.css b/assets/quick-order-list.css index be0ba2c33f0..e2a3c010ab9 100644 --- a/assets/quick-order-list.css +++ b/assets/quick-order-list.css @@ -25,7 +25,7 @@ quick-order-list .quantity__button { .quick-order-list__total { padding-top: 2rem; - border-top: 0.1rem solid rgba(var(--color-foreground), .08); + border-top: 0.1rem solid rgba(var(--color-foreground), 0.08); } .variant-item__quantity .quantity:before { @@ -139,7 +139,7 @@ quick-order-list .quantity__button { line-height: calc(1 + 0.4 / var(--font-body-scale)); } -.variant-item__details>* { +.variant-item__details > * { margin: 0; max-width: 30rem; } @@ -153,7 +153,7 @@ quick-order-list .quantity__button { display: block; font-size: 1.6rem; letter-spacing: 0.06rem; - line-height: calc(1 + .5 / var(--font-body-scale)); + line-height: calc(1 + 0.5 / var(--font-body-scale)); } .variant-item__sku { @@ -321,8 +321,8 @@ quick-order-list-remove-button:hover .icon-remove { align-self: center; } -.variant-item .loading__spinner:not(.hidden)~*, -.variant-remove-total .loading__spinner:not(.hidden)~* { +.variant-item .loading__spinner:not(.hidden) ~ *, +.variant-remove-total .loading__spinner:not(.hidden) ~ * { visibility: hidden; } @@ -340,14 +340,14 @@ quick-order-list-remove-button:hover .icon-remove { order: 1; } -.variant-item__error-text+svg { +.variant-item__error-text + svg { flex-shrink: 0; width: 1.2rem; margin-right: 0.5rem; margin-top: 0.1rem; } -.variant-item__error-text:empty+svg { +.variant-item__error-text:empty + svg { display: none; } @@ -404,7 +404,7 @@ quick-order-list-remove-button:hover .icon-remove { grid-column: 5 / 3; } - .variant-item--no-media .variant-item__inner~.variant-item__quantity { + .variant-item--no-media .variant-item__inner ~ .variant-item__quantity { grid-column: 1 / 5; } @@ -462,11 +462,11 @@ quick-order-list-remove-button:hover .icon-remove { border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08); } - .quick-order-list__table th+th { + .quick-order-list__table th + th { padding-left: 5.4rem; } - .quick-order-list__table .quick-order-list__table-heading--wide+.quick-order-list__table-heading--wide { + .quick-order-list__table .quick-order-list__table-heading--wide + .quick-order-list__table-heading--wide { padding-left: 10rem; text-align: right; } diff --git a/assets/quick-order-list.js b/assets/quick-order-list.js index 38d4a15ca0f..bc4d6d0843f 100644 --- a/assets/quick-order-list.js +++ b/assets/quick-order-list.js @@ -22,7 +22,7 @@ if (!customElements.get('quick-order-list-remove-all-button')) { super(); this.quickOrderList = this.closest('quick-order-list'); const allVariants = this.quickOrderList.querySelectorAll('[data-quantity-variant-id]'); - const items = {} + const items = {}; let hasVariantsInCart = false; allVariants.forEach((variant) => { @@ -40,8 +40,8 @@ if (!customElements.get('quick-order-list-remove-all-button')) { this.actions = { confirm: 'confirm', remove: 'remove', - cancel: 'cancel' - } + cancel: 'cancel', + }; this.addEventListener('click', (event) => { event.preventDefault(); @@ -57,12 +57,14 @@ if (!customElements.get('quick-order-list-remove-all-button')) { } toggleConfirmation(showConfirmation, showInfo) { - this.quickOrderList.querySelector('.quick-order-list-total__confirmation').classList.toggle('hidden', showConfirmation); - this.quickOrderList.querySelector('.quick-order-list-total__info').classList.toggle('hidden', showInfo) + this.quickOrderList + .querySelector('.quick-order-list-total__confirmation') + .classList.toggle('hidden', showConfirmation); + this.quickOrderList.querySelector('.quick-order-list-total__info').classList.toggle('hidden', showInfo); } } ); -}; +} if (!customElements.get('quick-order-list')) { customElements.define( @@ -73,10 +75,10 @@ if (!customElements.get('quick-order-list')) { this.cart = document.querySelector('cart-drawer'); this.actions = { add: 'ADD', - update: 'UPDATE' - } + update: 'UPDATE', + }; - this.quickOrderListId = `quick-order-list-${this.dataset.productId}` + this.quickOrderListId = `quick-order-list-${this.dataset.productId}`; this.defineInputsAndQuickOrderTable(); this.variantItemStatusElement = document.getElementById('shopping-cart-variant-item-status'); @@ -90,7 +92,7 @@ if (!customElements.get('quick-order-list')) { if (this.stickyHeaderElement) { this.stickyHeader = { height: this.stickyHeaderElement.offsetHeight, - type: `${this.stickyHeaderElement.getAttribute('data-sticky-type')}` + type: `${this.stickyHeaderElement.getAttribute('data-sticky-type')}`, }; } @@ -99,14 +101,14 @@ if (!customElements.get('quick-order-list')) { window.addEventListener('resize', () => { this.totalBarPosition = window.innerHeight - this.getTotalBar().offsetHeight; - this.stickyHeader.height = this.stickyHeaderElement ? this.stickyHeaderElement.offsetHeight: 0; + this.stickyHeader.height = this.stickyHeaderElement ? this.stickyHeaderElement.offsetHeight : 0; }); } const pageParams = new URLSearchParams(window.location.search); window.pageNumber = decodeURIComponent(pageParams.get('page') || ''); form.addEventListener('submit', this.onSubmit.bind(this)); - this.addMultipleDebounce() + this.addMultipleDebounce(); } cartUpdateUnsubscriber = undefined; @@ -121,9 +123,9 @@ if (!customElements.get('quick-order-list')) { return; } // If its another section that made the update - this.refresh().then(()=> { + this.refresh().then(() => { this.defineInputsAndQuickOrderTable(); - this.addMultipleDebounce() + this.addMultipleDebounce(); }); }); this.sectionId = this.dataset.id; @@ -163,11 +165,15 @@ if (!customElements.get('quick-order-list')) { validateQuantity(event, name, index, inputValue, cartQuantity, quantity) { if (inputValue < event.target.dataset.min) { - this.setValidity(event, index, window.quickOrderListStrings.min_error.replace('[min]', event.target.dataset.min)) + this.setValidity( + event, + index, + window.quickOrderListStrings.min_error.replace('[min]', event.target.dataset.min) + ); } else if (inputValue > parseInt(event.target.max)) { - this.setValidity(event, index, window.quickOrderListStrings.max_error.replace('[max]', event.target.max)) + this.setValidity(event, index, window.quickOrderListStrings.max_error.replace('[max]', event.target.max)); } else if (inputValue % parseInt(event.target.step) != 0) { - this.setValidity(event, index, window.quickOrderListStrings.step_error.replace('[step]', event.target.step)) + this.setValidity(event, index, window.quickOrderListStrings.step_error.replace('[step]', event.target.step)); } else { event.target.setCustomValidity(''); event.target.reportValidity(); @@ -176,21 +182,30 @@ if (!customElements.get('quick-order-list')) { } else { this.updateQuantity(index, quantity, name, this.actions.add); } - } + } } setValidity(event, index, message) { event.target.setCustomValidity(message); event.target.reportValidity(); this.resetQuantityInput(index); - event.target.select() + event.target.select(); } validateInput(target) { if (target.max) { - return parseInt(target.value) == 0 || (parseInt(target.value) >= parseInt(target.dataset.min) && parseInt(target.value) <= parseInt(target.max) && parseInt(target.value) % parseInt(target.step) == 0); + return ( + parseInt(target.value) == 0 || + (parseInt(target.value) >= parseInt(target.dataset.min) && + parseInt(target.value) <= parseInt(target.max) && + parseInt(target.value) % parseInt(target.step) == 0) + ); } else { - return parseInt(target.value) == 0 || (parseInt(target.value) >= parseInt(target.dataset.min) && parseInt(target.value) % parseInt(target.step) == 0); + return ( + parseInt(target.value) == 0 || + (parseInt(target.value) >= parseInt(target.dataset.min) && + parseInt(target.value) % parseInt(target.step) == 0) + ); } } @@ -206,7 +221,7 @@ if (!customElements.get('quick-order-list')) { } resolve(); }) - .catch(e => { + .catch((e) => { console.error(e); reject(e); }); @@ -218,28 +233,28 @@ if (!customElements.get('quick-order-list')) { { id: this.quickOrderListId, section: document.getElementById(this.quickOrderListId).dataset.id, - selector: `#${this.quickOrderListId} .js-contents` + selector: `#${this.quickOrderListId} .js-contents`, }, { id: 'cart-icon-bubble', section: 'cart-icon-bubble', - selector: '.shopify-section' + selector: '.shopify-section', }, { id: `quick-order-list-live-region-text-${this.dataset.productId}`, section: 'cart-live-region-text', - selector: '.shopify-section' + selector: '.shopify-section', }, { id: `quick-order-list-total-${this.dataset.productId}`, section: document.getElementById(this.quickOrderListId).dataset.id, - selector: `#${this.quickOrderListId} .quick-order-list__total` + selector: `#${this.quickOrderListId} .quick-order-list__total`, }, { id: 'CartDrawer', selector: '#CartDrawer', - section: 'cart-drawer' - } + section: 'cart-drawer', + }, ]; } @@ -249,11 +264,11 @@ if (!customElements.get('quick-order-list')) { this.onChange(event); }, ON_CHANGE_DEBOUNCE_TIMER); qty.addEventListener('change', debouncedOnChange.bind(this)); - }) + }); } addDebounce(id) { - const element = this.querySelector(`#Variant-${id} quantity-input`) + const element = this.querySelector(`#Variant-${id} quantity-input`); const debouncedOnChange = debounce((event) => { this.onChange(event); }, ON_CHANGE_DEBOUNCE_TIMER); @@ -261,29 +276,43 @@ if (!customElements.get('quick-order-list')) { } renderSections(parsedState, id) { - this.getSectionsToRender().forEach((section => { + this.getSectionsToRender().forEach((section) => { const sectionElement = document.getElementById(section.id); - if (sectionElement && sectionElement.parentElement && sectionElement.parentElement.classList.contains('drawer')) { - parsedState.items.length > 0 ? sectionElement.parentElement.classList.remove('is-empty') : sectionElement.parentElement.classList.add('is-empty'); + if ( + sectionElement && + sectionElement.parentElement && + sectionElement.parentElement.classList.contains('drawer') + ) { + parsedState.items.length > 0 + ? sectionElement.parentElement.classList.remove('is-empty') + : sectionElement.parentElement.classList.add('is-empty'); setTimeout(() => { document.querySelector('#CartDrawer-Overlay').addEventListener('click', this.cart.close.bind(this.cart)); }); } - const elementToReplace = sectionElement && sectionElement.querySelector(section.selector) ? sectionElement.querySelector(section.selector) : sectionElement; + const elementToReplace = + sectionElement && sectionElement.querySelector(section.selector) + ? sectionElement.querySelector(section.selector) + : sectionElement; if (elementToReplace) { if (section.selector === `#${this.quickOrderListId} .js-contents` && id !== undefined) { - elementToReplace.querySelector(`#Variant-${id}`).innerHTML = - this.getSectionInnerHTML(parsedState.sections[section.section], `#Variant-${id}`); + elementToReplace.querySelector(`#Variant-${id}`).innerHTML = this.getSectionInnerHTML( + parsedState.sections[section.section], + `#Variant-${id}` + ); } else { - elementToReplace.innerHTML = this.getSectionInnerHTML(parsedState.sections[section.section], section.selector); + elementToReplace.innerHTML = this.getSectionInnerHTML( + parsedState.sections[section.section], + section.selector + ); } } - })); + }); this.defineInputsAndQuickOrderTable(); if (id) { this.addDebounce(id); } else { - this.addMultipleDebounce() + this.addMultipleDebounce(); } } @@ -307,13 +336,26 @@ if (!customElements.get('quick-order-list')) { this.scrollToCenter(); } } else { - const stickyHeaderBottomBorder = this.stickyHeaderElement && this.stickyHeaderElement.getBoundingClientRect().bottom; + const stickyHeaderBottomBorder = + this.stickyHeaderElement && this.stickyHeaderElement.getBoundingClientRect().bottom; const totalBarCrossesInput = inputBottomBorder > this.totalBarPosition; const inputOutsideOfViewPort = inputBottomBorder < this.inputFieldHeight; - const stickyHeaderCrossesInput = this.stickyHeaderElement && this.stickyHeader.type !== 'on-scroll-up' && this.stickyHeader.height > inputTopBorder; - const stickyHeaderScrollupCrossesInput = this.stickyHeaderElement && this.stickyHeader.type === 'on-scroll-up' && this.stickyHeader.height > inputTopBorder && stickyHeaderBottomBorder > 0; - - if (totalBarCrossesInput || inputOutsideOfViewPort || stickyHeaderCrossesInput || stickyHeaderScrollupCrossesInput) { + const stickyHeaderCrossesInput = + this.stickyHeaderElement && + this.stickyHeader.type !== 'on-scroll-up' && + this.stickyHeader.height > inputTopBorder; + const stickyHeaderScrollupCrossesInput = + this.stickyHeaderElement && + this.stickyHeader.type === 'on-scroll-up' && + this.stickyHeader.height > inputTopBorder && + stickyHeaderBottomBorder > 0; + + if ( + totalBarCrossesInput || + inputOutsideOfViewPort || + stickyHeaderCrossesInput || + stickyHeaderScrollupCrossesInput + ) { this.scrollToCenter(); } } @@ -329,7 +371,7 @@ if (!customElements.get('quick-order-list')) { } this.variantListInput = event.target; - this.variantListInput.select() + this.variantListInput.select(); if (this.allInputsArray.length !== 1) { this.variantListInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') { @@ -337,15 +379,16 @@ if (!customElements.get('quick-order-list')) { e.target.blur(); if (this.validateInput(e.target)) { const currentIndex = this.allInputsArray.indexOf(e.target); - this.lastKey = e.shiftKey + this.lastKey = e.shiftKey; if (!e.shiftKey) { const nextIndex = currentIndex + 1; const nextVariant = this.allInputsArray[nextIndex] || this.allInputsArray[0]; nextVariant.select(); } else { const previousIndex = currentIndex - 1; - const previousVariant = this.allInputsArray[previousIndex] || this.allInputsArray[this.allInputsArray.length - 1]; - this.lastElement = previousVariant.dataset.index + const previousVariant = + this.allInputsArray[previousIndex] || this.allInputsArray[this.allInputsArray.length - 1]; + this.lastElement = previousVariant.dataset.index; previousVariant.select(); } } @@ -353,7 +396,6 @@ if (!customElements.get('quick-order-list')) { }); this.scrollQuickOrderListTable(); - } else { this.variantListInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') { @@ -370,7 +412,7 @@ if (!customElements.get('quick-order-list')) { const body = JSON.stringify({ updates: items, sections: this.getSectionsToRender().map((section) => section.section), - sections_url: this.getSectionsUrl() + sections_url: this.getSectionsUrl(), }); this.updateMessage(); @@ -383,7 +425,8 @@ if (!customElements.get('quick-order-list')) { .then((state) => { const parsedState = JSON.parse(state); this.renderSections(parsedState); - }).catch(() => { + }) + .catch(() => { this.setErrorMessage(window.cartStrings.error); }) .finally(() => { @@ -393,9 +436,9 @@ if (!customElements.get('quick-order-list')) { getSectionsUrl() { if (window.pageNumber) { - return `${window.location.pathname}?page=${window.pageNumber}` + return `${window.location.pathname}?page=${window.pageNumber}`; } else { - return `${window.location.pathname}` + return `${window.location.pathname}`; } } @@ -408,7 +451,7 @@ if (!customElements.get('quick-order-list')) { quantity, id, sections: this.getSectionsToRender().map((section) => section.section), - sections_url: this.getSectionsUrl() + sections_url: this.getSectionsUrl(), }); let fetchConfigType; if (action === this.actions.add) { @@ -418,11 +461,11 @@ if (!customElements.get('quick-order-list')) { items: [ { quantity: parseInt(quantity), - id: parseInt(id) - } + id: parseInt(id), + }, ], sections: this.getSectionsToRender().map((section) => section.section), - sections_url: this.getSectionsUrl() + sections_url: this.getSectionsUrl(), }); } @@ -439,7 +482,9 @@ if (!customElements.get('quick-order-list')) { const items = document.querySelectorAll('.variant-item'); if (parsedState.description || parsedState.errors) { - const variantItem = document.querySelector(`[id^="Variant-${id}"] .variant-item__totals.small-hide .loading__spinner`); + const variantItem = document.querySelector( + `[id^="Variant-${id}"] .variant-item__totals.small-hide .loading__spinner` + ); variantItem.classList.add('loading__spinner--error'); this.resetQuantityInput(id, quantityElement); if (parsedState.errors) { @@ -468,13 +513,14 @@ if (!customElements.get('quick-order-list')) { if (hasError) { this.updateMessage(); } else if (action === this.actions.add) { - this.updateMessage(parseInt(quantity)) + this.updateMessage(parseInt(quantity)); } else if (action === this.actions.update) { - this.updateMessage(parseInt(quantity - quantityElement.dataset.cartQuantity)) + this.updateMessage(parseInt(quantity - quantityElement.dataset.cartQuantity)); } else { - this.updateMessage(-parseInt(quantityElement.dataset.cartQuantity)) + this.updateMessage(-parseInt(quantityElement.dataset.cartQuantity)); } - }).catch((error) => { + }) + .catch((error) => { this.querySelectorAll('.loading__spinner').forEach((overlay) => overlay.classList.add('hidden')); this.resetQuantityInput(id); console.error(error); @@ -482,8 +528,8 @@ if (!customElements.get('quick-order-list')) { }) .finally(() => { this.toggleLoading(id); - if (this.lastKey && (this.lastElement === id)) { - this.querySelector(`#Variant-${id} input`).select() + if (this.lastKey && this.lastElement === id) { + this.querySelector(`#Variant-${id} input`).select(); } }); } @@ -494,7 +540,9 @@ if (!customElements.get('quick-order-list')) { } setErrorMessage(message = null) { - this.errorMessageTemplate = this.errorMessageTemplate ?? document.getElementById(`QuickOrderListErrorTemplate-${this.dataset.productId}`).cloneNode(true); + this.errorMessageTemplate = + this.errorMessageTemplate ?? + document.getElementById(`QuickOrderListErrorTemplate-${this.dataset.productId}`).cloneNode(true); const errorElements = document.querySelectorAll('.quick-order-list-error'); errorElements.forEach((errorElement) => { @@ -511,8 +559,8 @@ if (!customElements.get('quick-order-list')) { const icons = this.querySelectorAll('.quick-order-list__message-icon'); if (quantity === null || isNaN(quantity)) { - messages.forEach(message => message.innerHTML = ''); - icons.forEach(icon => icon.classList.add('hidden')); + messages.forEach((message) => (message.innerHTML = '')); + icons.forEach((icon) => icon.classList.add('hidden')); return; } @@ -520,15 +568,18 @@ if (!customElements.get('quick-order-list')) { const absQuantity = Math.abs(quantity); const textTemplate = isQuantityNegative - ? (absQuantity === 1 ? window.quickOrderListStrings.itemRemoved : window.quickOrderListStrings.itemsRemoved) - : (quantity === 1 ? window.quickOrderListStrings.itemAdded : window.quickOrderListStrings.itemsAdded); + ? absQuantity === 1 + ? window.quickOrderListStrings.itemRemoved + : window.quickOrderListStrings.itemsRemoved + : quantity === 1 + ? window.quickOrderListStrings.itemAdded + : window.quickOrderListStrings.itemsAdded; - messages.forEach((msg) => msg.innerHTML = textTemplate.replace('[quantity]', absQuantity)); + messages.forEach((msg) => (msg.innerHTML = textTemplate.replace('[quantity]', absQuantity))); if (!isQuantityNegative) { icons.forEach((i) => i.classList.remove('hidden')); } - } updateError(updatedValue, id) { @@ -543,7 +594,7 @@ if (!customElements.get('quick-order-list')) { cleanErrors() { this.querySelectorAll('.desktop-row-error').forEach((error) => error.classList.add('hidden')); - this.querySelectorAll(`.variant-item__error-text`).forEach((error) => error.innerHTML = ''); + this.querySelectorAll(`.variant-item__error-text`).forEach((error) => (error.innerHTML = '')); } updateLiveRegions(id, message) { @@ -553,7 +604,8 @@ if (!customElements.get('quick-order-list')) { variantItemErrorDesktop.querySelector('.variant-item__error-text').innerHTML = message; variantItemErrorDesktop.closest('tr').classList.remove('hidden'); } - if (variantItemErrorMobile) variantItemErrorMobile.querySelector('.variant-item__error-text').innerHTML = message; + if (variantItemErrorMobile) + variantItemErrorMobile.querySelector('.variant-item__error-text').innerHTML = message; this.variantItemStatusElement.setAttribute('aria-hidden', true); @@ -566,9 +618,7 @@ if (!customElements.get('quick-order-list')) { } getSectionInnerHTML(html, selector) { - return new DOMParser() - .parseFromString(html, 'text/html') - .querySelector(selector).innerHTML; + return new DOMParser().parseFromString(html, 'text/html').querySelector(selector).innerHTML; } toggleLoading(id, enable) { @@ -580,10 +630,10 @@ if (!customElements.get('quick-order-list')) { [...quickOrderListItems].forEach((overlay) => overlay.classList.remove('hidden')); this.variantItemStatusElement.setAttribute('aria-hidden', false); } else { - quickOrderListItem.classList.remove('quick-order-list__container--disabled'); + quickOrderListItem.classList.remove('quick-order-list__container--disabled'); quickOrderListItems.forEach((overlay) => overlay.classList.add('hidden')); } } } ); -} \ No newline at end of file +} diff --git a/sections/collapsible-content.liquid b/sections/collapsible-content.liquid index 7018f1a679e..d1ada25f5de 100644 --- a/sections/collapsible-content.liquid +++ b/sections/collapsible-content.liquid @@ -112,10 +112,7 @@ "tag": "section", "class": "section", "disabled_on": { - "groups": [ - "header", - "footer" - ] + "groups": ["header", "footer"] }, "settings": [ { diff --git a/sections/contact-form.liquid b/sections/contact-form.liquid index 1c04f0c1dfe..e545933c533 100644 --- a/sections/contact-form.liquid +++ b/sections/contact-form.liquid @@ -139,10 +139,7 @@ "tag": "section", "class": "section", "disabled_on": { - "groups": [ - "header", - "footer" - ] + "groups": ["header", "footer"] }, "settings": [ { diff --git a/sections/email-signup-banner.liquid b/sections/email-signup-banner.liquid index 143d08a99be..464637c9ea2 100644 --- a/sections/email-signup-banner.liquid +++ b/sections/email-signup-banner.liquid @@ -385,8 +385,6 @@ ] } ], - "templates": [ - "password" - ] + "templates": ["password"] } {% endschema %} diff --git a/sections/image-banner.liquid b/sections/image-banner.liquid index 50f4bbf7151..126dad84f85 100644 --- a/sections/image-banner.liquid +++ b/sections/image-banner.liquid @@ -172,10 +172,7 @@ "tag": "section", "class": "section", "disabled_on": { - "groups": [ - "header", - "footer" - ] + "groups": ["header", "footer"] }, "settings": [ { diff --git a/sections/image-with-text.liquid b/sections/image-with-text.liquid index 5064234ef84..0a24e48a351 100644 --- a/sections/image-with-text.liquid +++ b/sections/image-with-text.liquid @@ -112,10 +112,7 @@ "name": "t:sections.image-with-text.name", "class": "section", "disabled_on": { - "groups": [ - "header", - "footer" - ] + "groups": ["header", "footer"] }, "settings": [ { diff --git a/sections/main-product.liquid b/sections/main-product.liquid index d3663e1dc5e..1e1573b513f 100644 --- a/sections/main-product.liquid +++ b/sections/main-product.liquid @@ -2273,4 +2273,4 @@ } ] } -{% endschema %} \ No newline at end of file +{% endschema %} diff --git a/sections/multirow.liquid b/sections/multirow.liquid index d7053efcd8a..2d242bd05a4 100644 --- a/sections/multirow.liquid +++ b/sections/multirow.liquid @@ -112,10 +112,7 @@ "name": "t:sections.multirow.name", "class": "section", "disabled_on": { - "groups": [ - "header", - "footer" - ] + "groups": ["header", "footer"] }, "settings": [ { diff --git a/sections/newsletter.liquid b/sections/newsletter.liquid index 90013a57d62..d9e510dc6e1 100644 --- a/sections/newsletter.liquid +++ b/sections/newsletter.liquid @@ -120,9 +120,7 @@ "tag": "section", "class": "section", "disabled_on": { - "groups": [ - "header" - ] + "groups": ["header"] }, "settings": [ { diff --git a/sections/page.liquid b/sections/page.liquid index 5bdddaa6095..24eccbc68b0 100644 --- a/sections/page.liquid +++ b/sections/page.liquid @@ -41,10 +41,7 @@ "tag": "section", "class": "section", "disabled_on": { - "groups": [ - "header", - "footer" - ] + "groups": ["header", "footer"] }, "settings": [ { diff --git a/sections/rich-text.liquid b/sections/rich-text.liquid index 60fc6fc5775..4a2914ce57b 100644 --- a/sections/rich-text.liquid +++ b/sections/rich-text.liquid @@ -100,10 +100,7 @@ "tag": "section", "class": "section", "disabled_on": { - "groups": [ - "header", - "footer" - ] + "groups": ["header", "footer"] }, "settings": [ { diff --git a/snippets/product-media-gallery.liquid b/snippets/product-media-gallery.liquid index 0eebcdf1dbb..d151c529c08 100644 --- a/snippets/product-media-gallery.liquid +++ b/snippets/product-media-gallery.liquid @@ -61,7 +61,7 @@ class="product__media-list contains-media grid grid--peek list-unstyled slider slider--mobile" role="list" > - {%- if product.selected_or_first_available_variant.featured_media != nil -%} + {%- if product.selected_or_first_available_variant.featured_media != null -%} {%- assign featured_media = product.selected_or_first_available_variant.featured_media -%}