Update Shopify cart product list using AJAX

0
votes

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?

3
jqueryajaxshopify
You're asking for someone to do your work for you. They wont. You also need to understand jquery (at least a little) in order to do this. Anyway cart.js returns a json object that you can iterate over and to access all the products loop through (you can use jquery's each() method for that). docs.shopify.com/support/your-website/themes/… You can also refer to this since your question is a more or less a duplcate stackoverflow.com/questions/26379057/… – Funk Doc
Thanks for the help @FunkDoc - I'm absolutely not asking for someone to 'do the work for me' however, I just wanted some light shining on why I can't call the variables. As far as I can see, i'm calling cart.js, then trying to call something like cart.title (in the question you linked to they call cart.item_count for example) but then it errors, I just wanted to know if i'm using the wrong naming convention or something, or if i'm completely off the mark. – Jon Kyte

3 Answers

1
votes

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>');
});
0
votes

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

shopify cart.js

0
votes

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)