0

I am building a custom shopify templet for my client using shopify partners. I am stuck on the product page templet. I have two variant selection options one is color and other is size. I noticed that when i load any shopify product page it loads on the default product and its compare_at_price and its product price. but when i change the size or the color variant the product price is not updated. I also read abt the shopify working so i added js for that so it updates the price dynamically but is is also not helping.

I tried adding js snippets ill add the code below for my page but it is still not updating the price

this is my html code for that.

<div class="main-product-prices">
        <p class="main-product-compare {% unless product.selected_or_first_available_variant.compare_at_price > product.selected_or_first_available_variant.price %}hide{% endunless %}">
          {{ product.selected_or_first_available_variant.compare_at_price | money }}
        </p>

        <p class="main-product-price">
          {{ product.selected_or_first_available_variant.price | money }}
        </p>
      </div>

function updateDisplayedPrice(variant){
    root.querySelector('.main-product-price').textContent = formatMoney(variant.price, "{{ shop.money_format }}");
    root.quesySelector('.main-product-compare').textContent = formatMoney(variant.compare_at_price, "{{ shop.money_format }}");

    if(variant.compare_at_price > variant.price){
      root.querySelector('.main-product-compare').classList.remove('hide');
    }else {
      root.querySelector('.main-product-compare').classList.add('hide');
    }
  }

  //call the funtion when the page is loaded to initialize the displayed price with the default variant
  updateDisplayedPrice(product.selected_or_first_available_variant);

this is the js code that I added.

but it still doesn't updates the price as the variant us

Ishu Popatia
  • 1
  • 1
  • Rather than a complete snippet, please provide a [mre] which will help both us and yourself find the root of whatever you need – Can O' Spam Aug 02 '23 at 16:16
  • hi sorry for the inconvinience

    {{ product.selected_or_first_available_variant.compare_at_price | money }}

    {{ product.selected_or_first_available_variant.price | money }}

    in the above code if you see there is a product price and a compare at price for shopify liquid.     – Ishu Popatia Aug 02 '23 at 16:40
  • i wanted to update it as the variant is selected which is done in '{% form 'product', product %}' section. for that I added a js code – Ishu Popatia Aug 02 '23 at 16:43
  • 'function updateDisplayedPrice(variant){ root.querySelector('.main-product-price').textContent = formatMoney(variant.price, "{{ shop.money_format }}"); root.quesySelector('.main-product-compare').textContent = formatMoney(variant.compare_at_price, "{{ shop.money_format }}"); if(variant.compare_at_price > variant.price){ root.querySelector('.main-product-compare').classList.remove('hide'); }else { root.querySelector('.main-product-compare').classList.add('hide'); } } updateDisplayedPrice(product.selected_or_first_available_variant);' this is js – Ishu Popatia Aug 02 '23 at 16:44

0 Answers0