Shopify get cart information inside checkout.liquid

Question

I am using shopify buy button js to create and add items to the cart on my website, and it redirects the user to my shopify site on checkout.

Now, on the checkout page, I want to retrieve information about the cart and its lineitems inside checkout.liquid but the cart is always empty when I tried by calling /cart.js and also Shopify.getCart() with their jquery wrapper.

Below are what I have tried:

Inside checkout.liquid

Attempt 1:

{{ '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' | script_tag }}
{{ 'api.jquery.js' | shopify_asset_url | script_tag }}
<script type="text/javascript">
  $(function() {
      console.log(Shopify.getCart());
  });
</script>

Attempt 2:

<script type = "text/javascript" >
    $(function() {
        $.getJSON('/cart.js', function(cart) {
            console.log(cart);
        });
    }); 
</script>

Any ideas on how to get those information? Thanks

overloading overloading · Accepted Answer · 2019-12-17T16:41:21

It appears that there is no direct way to retrieve these values on the client side. I ended up rendering the data on server side and parse them using jQuery instead.

<div class="data" style="display:none;">
  <span class="taxAmount">{{ checkout.tax_price | money_without_currency | remove: ',' }}</span>
  <span class="grandTotal">{{ checkout.total_price | money_without_currency | remove: ',' }}</span>
  <span class="currency">{{ shop.currency }}</span>

  {% for line_item in checkout.line_items %}
        <div class="lineItem">
          <span class="name">{{ line_item.product.title }}</span>
          <span class="sku">{{ line_item.sku }}</span>
          <span class="quantity">{{ line_item.quantity }}</span>
          <span class="unitPrice">{{ line_item.price | money_without_currency | remove: ',' }}</span>
          <span class="salePrice">{{ line_item.price | money_without_currency | remove: ',' }}</span>
          <span class="totalPrice">{{ line_item.price | times: line_item.quantity | money_without_currency | remove: ',' }}</span>
          <span class="imageUrl">{{ line_item.image | image_url }}</span>
        </div>
  {% endfor %}
</div>

<script type="text/javascript">
  $(function() {
        $('.data .lineItem').each(function() {
            "sku": $(this).find('.sku').text(),
            "name": $(this).find('.name').text()
            // do my stuff
        });
  });

Shopify get cart information inside checkout.liquid

1 Answers