Why isn't my cart price updating immediately in the popup?

Store Design
, , ,
1

Hello, I added a small snippet of code that displays the cart price in the popup when you add an item to the cart, the only problem is it doesn’t show the correct price and the page needs to be refreshed. Is there anyway to have it update the cart price and display it correctly immediately after you add an item to the cart

Screen Shot 2023-05-18 at 11.06.58 AM.png
Screen Shot 2023-05-18 at 11.06.58 AM.png824×700 138 KB

2
  1. Add the JavaScript code to fetch and update the cart price:
    • Open the JavaScript file or script tag where you have added the snippet of code.
    • Locate the section where the cart price is displayed or where you want to display it.
    • Use the Shopify AJAX API to fetch the updated cart information.
    • Extract the cart price from the response data and update the displayed price element on the page.

Here’s an example of how the JavaScript code could look like:

// Function to update the cart price
function updateCartPrice() {
  // Make an AJAX request to fetch the updated cart information
  Shopify.cart.getCart((cart) => {
    // Extract the cart price from the response data
    const cartPrice = cart.total_price;
    
    // Update the displayed price element on the page
    document.getElementById('cart-price').innerHTML = Shopify.formatMoney(cartPrice);
  });
}

// Call the updateCartPrice function after adding an item to the cart
Shopify.onItemAdded = (lineItem) => {
  // Call the function to update the cart price
  updateCartPrice();
};
3

Hello I think I understand what you are saying but I am not very good with coding.

Here is my current script for the pop up, would I add your code to this script? and if so where

{% comment %}
    Renders cart notification

    Accepts:
    - color_scheme: {String} sets the color scheme of the notification (optional)

    Usage:
    {% render 'cart-notification' %}
{% endcomment %}
 
                

{% style %}
  .cart-notification {
     display: none;
  }
{% endstyle %}
4

Here is what my code looks like now

{% comment %}
    Renders cart notification

    Accepts:
    - color_scheme: {String} sets the color scheme of the notification (optional)

    Usage:
    {% render 'cart-notification' %}
{% endcomment %}
                

{% style %}
  .cart-notification {
     display: none;
  }
{% endstyle %}