Why is my Cart API always one step behind in updating product prices?

Technical Q&A
1

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 %}
          
            {{ price | money }}
          
        {% elsif item.quantity <= 10 %}
          
            {% assign fivepercent = price  | times: 0.05 %}
            {% assign fiveprice = price  | minus: fivepercent %}
            {{ fiveprice | money }}
          
        {% else %}
          
            {% assign tenpercent = price  | times: 0.1 %}
            {% assign tenprice = price  | minus: tenpercent %}
            {{ tenprice | money}}
          
        {% endif %}

I use this ajax to attempt to change the span based on the select
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));
  }