Why is my Shopify Cart API updating product price one click behind?

Cory13
Tourist
9 0 2

Hello!

I'm trying to get my product price to update in my cart based on a selected quantity. I have a script working to discount the price 5% when you order 5+ items and 10% when you order 9+ items. I'm just wanting to reflect this on the product price. The total price works perfect. It updates the price but it always seems to be one click behind.

 

Test product base price is 2.25

I can load the page with say 6 quantity selected and it will show the price as 2.14 properly, but when I change it to say 1 quantity, my product price should automatically change to 2.25 but it doesn't.  It will show the same price until I change the select again. I hope I'm explaining this correctly..

 

Load page, 1 selected, price expected: 2.25, price: 2.25

Change select to 6, price expected: 2.14, price: 2.25

Change select to 7, price expected: 2.14, price: 2.14

Change select to 1, price expected: 2.25, price:2.14

Change select to 9, price expected: 2.03, price:2.25

Change select to 1, price expected: 2.25, price 2.03

It always seems to be one index behind?

 

I use this liquid to set the price on page load and it seems to work fine

		{% if item.quantity <= 5 %}
          <span id="price-span" class="money" data-line-index="{{ forloop.index0 }}">
            {{ price | money }}
          </span>
        {% elsif item.quantity <= 10 %}
          <span id="price-span" class="money" data-line-index="{{ forloop.index0 }}">
            {% assign fivepercent = price  | times: 0.05 %}
            {% assign fiveprice = price  | minus: fivepercent %}
            {{ fiveprice | money }}
          </span>
        {% else %}
          <span id="price-span" class="money" data-line-index="{{ forloop.index0 }}">
            {% assign tenpercent = price  | times: 0.1 %}
            {% assign tenprice = price  | minus: tenpercent %}
            {{ tenprice | money}}
          </span>
        {% endif %}

 

I use this ajax to attempt to change the span based on the select

<script>
  var selectId = document.querySelector("select").id;
  var select = document.getElementById(selectId)
  
  var inputId = document.querySelector('input[name="updates[]"]').id;
  var input = document.getElementById(inputId)
  
  var span = document.getElementById("price-span");
  
  input.addEventListener("change", function(){
    var request = new XMLHttpRequest();
    request.open('Get', "/cart.js" )
    request.onload = function() {
      var data =JSON.parse(request.responseText);
      console.log(data.items[0].discounted_price);
      console.log(data.items);
      span.textContent = "$" + insertDecimal(data.items[0].discounted_price) + " CAD";
    };
    request.send();
  });
  
  select.addEventListener("change", async function(){
    var request = new XMLHttpRequest();
    request.open('GET', "/cart.js" )
    request.onload = function() {
      var data =JSON.parse(request.responseText);
      console.log(data.items);
 	  console.log(data.items[0].discounted_price)
      render(data);
    };
    request.send();
  });
  
  function insertDecimal(num) {
   return Number((num / 100).toFixed(2));
  }
  
  function render(data) {
  	span.textContent = "$" + insertDecimal(data.items[0].discounted_price) + " CAD";
  }

</script>

 

Reply 1 (1)

Cory13
Tourist
9 0 2

refactored with fetch but it still has the same issue, showing the previous call data.

 //Call to cart API
  async function start() {
    console.log('start', Date.now());
    const response = await fetch('/cart.js', {
      method: 'GET'                       
	})
    .then(response => response.json())
    .then(data => render(data))
  }
  
  //Helper Functions  
  async function render(data) {
  	span.textContent = "$" + insertDecimal(data.items[0].discounted_price) + " CAD";
    console.log(data.items[0].discounted_price)
  }
  
  async function insertDecimal(num) {
   return Number((num / 100).toFixed(2));
  }