diff --git a/assets/global.js b/assets/global.js index 1c962415bca..ce13bf6514a 100644 --- a/assets/global.js +++ b/assets/global.js @@ -1059,8 +1059,7 @@ class VariantSelects extends HTMLElement { connectedCallback() { this.addEventListener('change', (event) => { const target = this.getInputForEventTarget(event.target); - this.currentVariant = this.getVariantData(target.id); - this.updateSelectedSwatchValue(event); + this.updateSelectionMetadata(event); publish(PUB_SUB_EVENTS.optionValueSelectionChange, { data: { @@ -1072,10 +1071,15 @@ class VariantSelects extends HTMLElement { }); } - updateSelectedSwatchValue({ target }) { + updateSelectionMetadata({ target }) { const { value, tagName } = target; if (tagName === 'SELECT' && target.selectedOptions.length) { + Array.from(target.options) + .find((option) => option.getAttribute('selected')) + .removeAttribute('selected'); + target.selectedOptions[0].setAttribute('selected', 'selected'); + const swatchValue = target.selectedOptions[0].dataset.optionSwatchValue; const selectedDropdownSwatchValue = target .closest('.product-form__input') @@ -1103,16 +1107,8 @@ class VariantSelects extends HTMLElement { return target.tagName === 'SELECT' ? target.selectedOptions[0] : target; } - getVariantData(inputId) { - return JSON.parse(this.getVariantDataElement(inputId).textContent); - } - - getVariantDataElement(inputId) { - return this.querySelector(`script[type="application/json"][data-resource="${inputId}"]`); - } - get selectedOptionValues() { - return Array.from(this.querySelectorAll('select, fieldset input:checked')).map( + return Array.from(this.querySelectorAll('select option[selected], fieldset input:checked')).map( ({ dataset }) => dataset.optionValueId ); } diff --git a/snippets/product-variant-options.liquid b/snippets/product-variant-options.liquid index 42a8c938e78..a932f448273 100644 --- a/snippets/product-variant-options.liquid +++ b/snippets/product-variant-options.liquid @@ -117,8 +117,4 @@ {%- endif %} {%- endif -%} - - {%- endfor -%}