Shopify Question posted in
The Shopify help center can be found here.

How to get cart object in my app js file – Shopify

Hi I am working on shopify app.
Using the script_tag I added custom.js for shopify store front end.
When look in view source I can see custom to js added successfully

Basically I need a function or object if we have in shopify that i can use in my custom.js file remember I am not talking about theme file that return me complete info of cart like how many product added etc because that particular object I need to send with my ajax request to php file
Is there a way i can get cart detail in my app js file ?

Tags:

2

Answers


  1. 0

    Since you are using (.js) file you cannot directly access cart object. Instead you can use (.js.liquid) file type to access cart object. Both (.js) and (.js.liqud) works similarly. But by using (.js.liquid) file format you will be able to access all shopify objects.

    Code…

    For (.js.liquid) file type
    refer cart object of shopify

    But still if you want to access cart object in (.js) file you can access in json format by GET call.

    $.ajax({
        type: 'GET',
        url: '/cart.js',
        cache: false,
        dataType: 'json',
        success: function(cart) {
          // whatever you want to do with the cart obj
        }
    });
    Login or Signup to reply.
  2. 0

    Though Shopify offers a .js.liquid file format for the asset files, Shopify prevents accessing any information that might be dynamic (which would break the ability to cache the assets). So while it may be intuitive to try and use {{ cart | json }} to dump the cart into the asset, carts are very dynamic and definitely not something you can liquid-dump into your code.

    Fortunately, there are other ways to get this info! If want to have the cart immediately on page load, you can use a snippet file to set a global javascript variable which would then be accessed by your asset file. However, that would only get the cart as it existed at page load, and if you’re using javascript to add/remove/modify items in the cart you’ll want to be able to get the current cart when needed.

    Which brings us to using AJAX to hit your store’s cart.js endpoint. If you’re using a theme that has a full suite of Shopify helper functions, you might already have a function named Shopify.getCart – this is a function that grabs the current cart from the above endpoint, and if you pass a function as a parameter into this function your function be called with the current cart object once the asynchronous call is complete.

    If your theme doesn’t have a built-in getCart function, it’s very easy to write your own. For example, if you are already using jQuery in your theme, you could make a function like this:

    function getCart(callback){
  jQuery.getJSON('/cart.js', callback);
}

    To get the cart and do something with it, simply make a function that does stuff with the cart data and use that function as a parameter in your getCart function.

    Example:

    function updateTotalPriceOnTheScreen(cart){
//This example assumes that there's a DOM element on the page that has the ID cart-total-price
  document.getElementById('cart-total-price').innerHTML = Shopify.formatMoney(cart.total_price, '${{ amount }}');
}

getCart(updateTotalPriceOnTheScreen);

    Further, it’s worth noting that Shopify’s response object when you change or update the cart (through the /cart/change.js or /cart.update.js endpoints, respectively) will pass the updated cart object to any success function that’s been supplied. So you could, for example, re-use your update function:

    function changeItem(line, quantity, success_callback, error_callback){
  jQuery.ajax({
    url:'/cart/change.js',
    type:'post',
    dataType:'json',
    data:{
      line:line,
      quantity:quantity
    },
    success:success_callback,
    error:error_callback
  })
}
//Test case: requires at least one item in the cart. Will update the quantity of line 1 to 50 units, then update the 'total price' element on the page
var line=1, qty=50;
changeItem(line, qty, updateTotalPriceOnTheScreen)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search