Dynamically update Cart page, without refreshing anything.

[Remco112]

Hi there,

The problem is that when a product is added to the page and I have another tab open with my cart that the page itself doesn't update the quantity or the new product, but it all works if I do it manually, like subtracting etc, or when I refresh the page, but I want it to go automatically like when a product is being added it gets automatically updated in the background, I have searched different topics and most people are suggesting Ajax etc but I don't want to reconfigure my whole code to a simple process as this, I've searched around and tried some different methods but somehow it does skip other factors and I'm kinda stuck with this code, like I can't figure it out anymore, I've changed the code multiple times already:

Code that I've placed in theme.js at the bottom;

theme.UpdateRefresh = (function() {

  var refresh = document.getElementsByClassName('.product-form .product-form-product-template');
  var test = ('[data-product-form]');

  $('btn product-form__cart-submit').click(function() {
    location.reload();
});

  function update()
  {
    url: '/cart/add'
    dataType: 'json'
  }
  return { update:update}
})   ();

 product-template.liquid

<div class="product-form__error-message-wrapper product-form__error-message-wrapper--hidden{% if section.settings.enable_payment_button %} product-form__error-message-wrapper--has-payment-button{% endif %}" data-error-message-wrapper role="alert">
              <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
              {% include 'icon-error' %}
              <span class="product-form__error-message" data-error-message>{{ 'products.product.quantity_minimum_message' | t }}</span>
            </div>   
            <div class="product-form__controls-group product-form__controls-group--submit">
              <div class="product-form__item product-form__item--submit
                    {%- if section.settings.enable_payment_button %} product-form__item--payment-button {%- endif -%}
                    {%- if product.has_only_default_variant %} product-form__item--no-variants {%- endif -%}">
                <button type="submit" name="add"
                  {% unless current_variant.available %} aria-disabled="true"{% endunless %}
                  aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
                  class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"
                  data-add-to-cart>
                  <span data-add-to-cart-text>
                    {% unless current_variant.available %}
                      {{ 'products.product.sold_out' | t }}
                    {% else %}
                      {{ 'products.product.add_to_cart' | t }}
                    {% endunless %}
                  </span>
                </button>
              </div> 

I then placed theme.UpdateRefresh.update() in the AddToCart section so it gets executed but it doesn't work because I don't know what's wrong anymore, keep in mind that I'm learning and trying to figure out things a lot in order to process it and gain some knowledge in the subject.

Edit: Added YouTube link to show what I actually mean to clarify it more read below:

https://youtu.be/vVn4waf8k1E

you can see that I have two tabs open, one is just the productpage and the other is the cart page, I have then added a product to my cart which all work etc at that page where I added it, but the other tab that is still open the cart tab is not being updated to the product that just has been added to the cart, It only works if I refresh the tab page, like I want it dynamically being updated if that makes sense no matter which tab is open, like it doesn't need to refreshed.

Thanks for reading this I appreciate it.