Fixed bug when reading selected option values. Removed unused script …

…tag containing variant json. (#3520)
Shopify · Jul 3, 2024 · 4331aed · 4331aed
1 parent afbbaf9
commit 4331aed
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 16 deletions.
diff --git 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
@@ -117,8 +117,4 @@
       {%- endif %}
     </option>
   {%- endif -%}
-
-  <script type="application/json" data-resource="{{ input_id }}">
-    {{ value.variant | json }}
-  </script>
 {%- endfor -%}