How can I automatically see my updated cart, without refreshing the cart page.

Highlighted
Excursionist
35 4 1

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,

Thanks for reading this I appreciate it.

Edit: added product-template.liquid code.

1 Like
Highlighted
Shopify Partner
7500 1036 2600

@Remco112 

https://community.shopify.com/c/Shopify-Design/Product-pages-Stay-on-the-product-page-after-adding-p...

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Excursionist
35 4 1

Hi there,

Thanks for answering but this is not what I meant though;

I have made a short video about it:

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.

0 Likes
Highlighted
Excursionist
35 4 1

Please Remove this thread, I have made a new topic with better explanation: https://community.shopify.com/c/Shopify-Design/Dynamically-update-Cart-page-without-refreshing-anyth...

0 Likes