Need Help with Dynamic Liquid Code Update for Variant Switching

Store Design
2

Hi @Constantine00 ,

Hope you are doing well.

Please use the below js code which help you to change the price through the AJAX call.

document.addEventListener('DOMContentLoaded', function() {
  
  var variantSelector = document.getElementById('variant-selector');
  var priceDisplay = document.getElementById('product-price');
  var initialVariant = variantSelector.options[variantSelector.selectedIndex];
  var initialPrice = parseFloat(initialVariant.getAttribute('data-price'));

  priceDisplay.textContent = '$' + initialPrice.toFixed(2)
  
  variantSelector.addEventListener('change', function() {
    var variantId = variantSelector.value;
    var selectedOption = variantSelector.options[variantSelector.selectedIndex];
    var newPrice = parseFloat(selectedOption.getAttribute('data-price'));

    fetch('/products/' + {{ product.handle }} + '.js')
      .then(function(response) {
        return response.json();
      })
      .then(function(productData) {
        
        var selectedVariant = productData.variants.find(function(variant) {
          return variant.id == variantId;
        });      
        priceDisplay.textContent = '$' + selectedVariant.price.toFixed(2);
      })
      .catch(function(error) {
        console.error('Error fetching product data: ', error);
      });
  });
});

Please use your own ID attribute and class as per your HTML structure.