Cart Upsell Product Ajax - Need Refresh after add.

[mircomartin]

Hi! I would like to know, how can i refresh the cart after ajax cart/add.js . The ajax works perfectly but i have to refresh to see the product in the cart.

<script>
    $(document).ready(function () {
        $('.product_recommendation1-plus').click(function(e) {
            e.preventDefault()
            var plus = this.id;
            
            let formData = {
                'items': [{
                    'id': plus,
                    'quantity': 1
                }]
            };
            
            fetch(window.Shopify.routes.root + 'cart/add.js', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With':'xmlhttprequest'
            },
            body: JSON.stringify(formData),
            credentials: 'same-origin',
            })
            .then(response => {
                
            return response.json();
            })
            .catch((error) => {
            console.error('Error:', error);
            });
            
        });
    });
</script>

[EvgeniyMukhamedjanov]

Hey, just use Liquid Ajax Cart API for adding a product to the cart:

<script>
    $(document).ready(function () {
        $('.product_recommendation1-plus').click(function(e) {
            e.preventDefault()
            var plus = this.id;
            
            liquidAjaxCart.cartRequestAdd({ 
              items: [
                {
                  id: Number(plus),
                  quantity: 1
                }
              ]  
            }, {} )
            
        });
    });
</script>

[mircomartin]

@EvgeniyMukhamedjanov Thanks!

I have some problems maybe you can helpme!
1- I can add one product, after that i have to refresh to add the other product upsell.
2- For example if delete a product of cart I cant add a product upsell.

In generally is when the cart is modify i cant add again.

I let you a video.

https://share.vidyard.com/watch/dYgr9AbH4GX4BgMySnY8gr?

[mircomartin]

@EvgeniyMukhamedjanov Can you see this? sorry because the shop it's almost finish, this is the only problem.

[EvgeniyMukhamedjanov]

@mircomartin
Try modifying your code like this:

<script>
function clickHandler(e) {
  e.preventDefault()
  var plus = this.id;
  
  liquidAjaxCart.cartRequestAdd({ 
    items: [
      {
        id: Number(plus),
        quantity: 1
      }
    ]  
  }, {} )
}

$(document).ready(function () {
  $('.product_recommendation1-plus').click(clickHandler);
  liquidAjaxCart.subscribeToCartSectionsUpdate(sections => {
    sections.forEach(section => {
      section.elements.forEach(element => {
        element.querySelectorAll('.product_recommendation1-plus').forEach(plus => {
          plus.addEventListener('click', clickHandler);
        })
      })
    })
  })
});
</script>

Make sure that this code is run after the Liquid Ajax Cart library is connected.

[mircomartin]

@EvgeniyMukhamedjanov Thanks! work fine! but i have this error in the console. Can you help me?

[EvgeniyMukhamedjanov]

It means that sometimes your HTML, that is generated from liquid, has different amount the data-ajax-cart-section elements. Usually Liquid Ajax Cart updates HTML of only data-ajax-cart-section elements, but if their amount is different -- the whole section will be updated.

[mircomartin]

@EvgeniyMukhamedjanov Thanks! we have duplicate the in bottom of the cart! also in top!.

I have another question, is possible when the customer reach amoun of total cart? add a specific product automatically? can you help me with that?
Also for example if the cart reach an amount show a popup with two products.

When the shop will be ready i will share you the url if you like to put in the site of cart ajax.

[EvgeniyMukhamedjanov]

Hey, I have an example of the script that can add another product when the customer reaches a specific amount:
https://liquid-ajax-cart.js.org/examples/#add-a-product-to-the-cart-automatically-if-the-total-price-is-100-or-higher

You should adjust this script to your needs.

[mircomartin]

@EvgeniyMukhamedjanov Thanks! works! but when reach the amount the free product add inifinite loop, i let you a video https://share.vidyard.com/watch/d6dGh8grsFE3gN3aEynCdo?

[EvgeniyMukhamedjanov]

@mircomartin
Yeah, as I mentioned, you need to adjust this script to your needs as it is just an example.

[mircomartin]

@EvgeniyMukhamedjanov oh i understand, Im frontend, can you help me? It's add one gift when you reach the amount.

[mircomartin]

@EvgeniyMukhamedjanov I have a new question about the first question add to cart ajax, if the ajax for example because we dont have more product,