YSHOP2-682 : COD themes > The price isn't updated when the variants are radio buttons

assets/product.css

@@ -243,7 +243,9 @@
   border-radius: 5px;
   transition: width 1s ease-in-out;
 }
-.yc-single-product .product-details .product-options .active {
+.yc-single-product .product-details .product-options .yc-colors-select .active,
+.yc-single-product .product-details .product-options .yc-options-list .active,
+.yc-single-product .product-details .product-options .yc-image-options-list .active {
   border: 1px solid #000000;
 }
 .yc-single-product .product-details .product-description {

assets/product.js

@@ -148,6 +148,17 @@ function setElementActive(element) {
   element.classList.add('active');
 }
 
+/**
+ * Sets the variant id in the hidden input field of the product form
+ * @param {HTMLElement} parentSection
+ * @param {String} id variant id
+ */
+function setVariant(parentSection, id) {
+  const variantIdInput = parentSection.querySelector('#variantId');
+
+  variantIdInput.value = id;
+}
+
 /**
  * Sets default options for a product
  * @param {HTMLElement} parentSection
@@ -170,7 +181,9 @@ function selectDefaultOptions(parentSection) {
         option.querySelector('.yc-options-item').classList.add('active');
         break;
       case 'radio_buttons':
-        option.querySelector('input').checked = true;
+        const radioLabel = option.querySelector('.yc-radio-buttons');
+        radioLabel.classList.add('active');
+        radioLabel.querySelector('input[type="radio"]').checked = true;
         break;
       case 'image_based_buttons':
         option.querySelector('.yc-image-options-item').classList.add('active');
@@ -215,7 +228,7 @@ function getSelectedOptions(parentSection) {
         break;
       case 'radio_buttons':
         selectedOptions[optionName] =
-          option.querySelector('input:checked')?.value;
+          option.querySelector('.yc-radio-buttons.active input[type="radio"]')?.value;
         break;
       case 'image_based_buttons':
         selectedOptions[optionName] = option.querySelector(
@@ -252,24 +265,13 @@ function getSelectedVariant(parentSection) {
   });
 }
 
-/**
- * Sets the variant id in the hidden input field of the product form
- * @param {HTMLElement} parentSection
- * @param {String} id variant id
- */
-function setVariant(parentSection, id) {
-  const variantIdInput = parentSection.querySelector('#variantId');
-
-  variantIdInput.value = id;
-}
-
 /**
  * Updates product details after variant change
  * @param {HTMLElement} parentSection
  * @param {String} image
  * @param {String} price
  */
-function updateProductDetails(parentSection, image, price, variations) {
+function updateProductDetails(parentSection, image, price) {
   if (image) {
     const mainImgs = parentSection.querySelectorAll('.main-image');
 
@@ -292,14 +294,6 @@ function updateProductDetails(parentSection, image, price, variations) {
       }
     })
   }
-
-  if(variations) {
-    const productVariations = parentSection.querySelectorAll('.product-variations');
-
-    productVariations.forEach(el => {
-      el.innerHTML = Object.values(variations).join(' - ')
-    })
-  }
 }
 
 /**
@@ -478,7 +472,7 @@ function showSelectedVariants() {
         variantOption = createAndSetText(variantName, colorBaseButton, 'colored-button').element;
         break;
       case 'radio_buttons':
-        const radioButton = variant.querySelector('input:checked')?.value;
+        const radioButton = variant.querySelector('.yc-radio-buttons.active input[type="radio"]')?.value;
         variantOption = createAndSetText(variantName, radioButton).element;
       break;
       case 'dropdown':
@@ -537,7 +531,7 @@ function setup() {
 
   singleProductSections.forEach((section) => {
     const productDetails = section.querySelector('.product-options');
-    const variant = variants[0]
+    const variant = variants[0];
 
     updateProductDetails(
       section,
@@ -549,8 +543,6 @@ function setup() {
     if (productDetails) {
       const observer = new MutationObserver(() => {
         const selectedVariant = getSelectedVariant(section);
-        const variantIdInput = section.querySelector('#variantId');
-        variantIdInput.value = selectedVariant.id;
 
         updateProductDetails(
           section,

snippets/product-variants.liquid

@@ -37,8 +37,8 @@
         {% when 'radio_buttons' %}
           <div class='yc-radio'>
             {% for item in option.values %}
-              <label class='yc-radio-buttons' for='{{ item }}'>
-                <input type='radio'  id='{{ item }}' name='{{ option.name }}' value='{{ item }}'>
+              <label class='yc-radio-buttons' for='{{ item }}' onclick='setElementActive(this)'>
+                <input type='radio' id='{{ item }}' name='{{ option.name }}' value='{{ item }}'>
                 <span class='checkmark'></span>
                 <span class='label-text'>{{ item }}</span>
               </label>

styles/product.scss

@@ -258,8 +258,13 @@
           }
         }
       }
-      .active {
-        border: 1px solid #000000;
+
+      .yc-colors-select,
+      .yc-options-list,
+      .yc-image-options-list {
+        .active {
+          border: 1px solid #000000;
+        }
       }
     }
     .product-description {