Add to cart Button Collection Pages

[mircomartin]

@EvgeniyMukhamedjanov I would like to add the button my products grid! How can i do that? I've just createad this scripts, works fine, but the carts wont update until the refresh of browser.

const productsCard = document.querySelectorAll('.product-card.grids');

if ( productsCard.length > 0) {
		
	for (let i = 0; i < productsCard.length; i++) {

		const element = productsCard[i];
		const buttonAddToCart = element.querySelector('#addtocartGrid')
		
			buttonAddToCart.addEventListener('submit', e => {
				e.preventDefault()
				
				const idProductElement = element.querySelector('[name="id"]');
				const idProduct = idProductElement.getAttribute('value')
	
				let formData = {
					'items': [{
					 'id': idProduct,
					 'quantity': 1
					 }]
				 };
				 fetch(window.Shopify.routes.root + 'cart/add.js', {
					 method: 'POST',
					 headers: {
						 'Content-Type': 'application/json'
					 },
					 body: JSON.stringify(formData)
				 })
				 .then(response => {
					 return response.json();
				 })
				 .catch((error) => {
					 console.error('Error:', error);
				 });

			})

		}

}

[EvgeniyMukhamedjanov]

As I mentioned here, if you want to add a product to the cart using JavaScript, you should use the Liquid Ajax Cart API rather than fetch in order to simultaneously update all the cart related elements on the page.

[mircomartin]

@EvgeniyMukhamedjanov what is the best place for put the cart tags? in the head? or before close body? what is your recomendation?

[EvgeniyMukhamedjanov]

Somewhere after the footer is good

[mircomartin]

@EvgeniyMukhamedjanov for example if the add to cart fail because i don have stock, how can i show a message? I mean how can i get the error?
For example here in the function of shopify have error, but here liquidAjaxCart.cartRequestAdd() im really lost!

fetch('/cart/add.js', {
     method: 'POST',
     credentials: 'same-origin',
     headers: {
       'Content-Type': 'application/json',
       'X-Requested-With': 'XMLHttpRequest'
     },
     body: JSON.stringify(addData)
   }).then(function (data) {
     if (data.status == 200) {
       window.location.reload;
       return
     }
     else {
       console.log('Request returned an error', data)
     };
   })
   .catch(function (error) {
     console.log('Request failed', error);
   });

[EvgeniyMukhamedjanov]

You can use the lastComplete callback as described here: https://liquid-ajax-cart.js.org/reference/cartRequestAdd/

liquidAjaxCart.cartRequestAdd({ 
  items: [
    {
      id: Number(plus),
      quantity: 1
    }
  ]  
}, {
  lastComplete: requestState => {
    console.log(requestState.responseData)
  }
})

[mircomartin]

@EvgeniyMukhamedjanov I have a gift wrapping in the cart, the problem is i need not count that product, i've just hide in the cart with liquid loop, but the quantiy is there. can you test it here https://shl2gj87tf7vb6tu-29614735444.shopifypreview.com, right now i dont use the ajax cart count for the numner, i use without ajax.