使用AJAX更新Shopify购物车产品列表

Question

I have 'Ajaxified' my cart on Shopify, when I click the 'Add to cart' button on a product page, the price updates in the top right hand corner of the screen and the product is added to the cart without a page refresh.

When you click the price in the top right hand corner, it reveals a dropdown showing you what products are in your basket (It shows product - image, url, price & quantity).

However, when you click 'Add to cart' this list of products does not update until you refresh the page.

How do I get this list to refresh (or how do I add the product to the list in the AJAX request)??

I have tried adding this into the ajaxify cart module ( https://raw.githubusercontent.com/carolineschnapp/ajaxify-cart/master/ajaxify-cart.liquid ):

$.getJSON(_config.shopifyAjaxCartURL, function(cart) {
    $("#dropdown-cart").append('<tr><td><a href="'+PRODUCT.URL+'" class="dropdown-product-image"><img src="'+PRODUCT.IMAGE+'"  alt="'+PRODUCT.DESCRIPTION+'" /></a></td><td class="restrain-width"><a href="'+PRODUCT.URL+'" class="small">PRODUCT.NAME</a></td><td class="text-right"><span class="small">PRODUCT.QUANTITY</span></td></tr>');
});

This updates the cart with the table rows and cells, but I do not know how to call the correct variables for PRODUCT.**** . I have tried liquid ( {{ product.title }} ) variables but these do not work for me.

I also tried to use cart.item , cart.product cart.product_title , as cart. is referenced in the code already, but this just broke the script.

Does anyone know how to simply refresh this form without a page refresh after the button is clicked (this would be perfect!), or how to add products using the route i've started down above?

Answer 1

So i've finally figured out where I was going wrong, I was trying to call cart.title where it should have been cartItem.title . Then I just looped these in jQuery with each .

Here's my full code:

$.each(cart.items, function(index, cartItem) {
   $("#dropdown-cart").append('<tr><td><a href="'+cartItem.url+'" class="dropdown-product-image"><img src="'+cartItem.image+'" alt="product image"/></a></td><td class="restrain-width"><a href="'+cartItem.url+'" class="small">'+cartItem.quantity+' '+cartItem.title+'</a></td><td class="text-right"><span class="small">'+(Shopify.formatMoney(cartItem.line_price, "{{ shop.money_format | remove: "'" | remove: '"' }}"))+'</span></td></tr>');
});

Answer 2

shopify have its own ajax methods, that you can use to you ajax cart

shopify cart.js

Answer 3

This worked for me perfectly! Outdated post maybe, but for those looking where to input this code it's under:

$.getJSON(_config.shopifyAjaxCartURL, function(cart)