How to get frontend cart data in Magento 2 using javascript

Today, we will show an easy way to get frontend cart data in Magento 2 by using javascript. 

We have to embed javascript to our frontend page. Here is an example based on our page.

Adding block to the cart page:

app/code/Magenest/GetFrontendCartData/view/frontend/layout/checkout_cart_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <body>
       <referenceContainer name="content">
           <block class="Magento\Framework\View\Element\Template"
                  name="custom.cart.page"
                  template="Magenest_GetFrontendCartData::custom_cart_page.phtml"/>
       </referenceContainer>
   </body>
</page>

Creating template with our component and configuration:

app/code/Magenest/GetFrontendCartData/view/frontend/templates/custom_cart_page.phtml

<div data-bind="scope: 'custom-cart-section'" id="custom-cart-section">
   <!-- ko template: getTemplate() --><!-- /ko -->
</div>

<script type="text/x-magento-init">
   {
       "*": {
           "Magento_Ui/js/core/app": {
               "components": {
                   "custom-cart-section": {
                       "component": "Magenest_GetFrontendCartData/js/custom-cart"
                   }
               }
           }
       }
   }
</script>

Creating a component itself, and it is the main section process to get frontend cart data:

app/code/Magenest/GetFrontendCartData/view/frontend/web/js/custom-cart.js

define([
   'jquery',
   'uiComponent',
   'Magento_Customer/js/customer-data'
], function ($, Component, customerData) {
   'use strict';

   return Component.extend({
       /** @inheritdoc */
       initialize: function () {
           this._super();

           console.log(customerData.get('cart')());
       }
   });
});

Here we use customer data as a source to get cart data. We print the cart data in the browser’s console when the cart page is loaded. This is the result of the frontend cart data:

the-frontend-cart-data

There is some useful data such as: cart item information (product type, product sku, product id, product price, …), store id, website id, subtotal amount,… 

You can use the custom data to get cart data not only in the cart page but also everywhere in the frontend. 

You should not use requirejs to call the script directly, 

E.g: require(‘Magento_Customer/js/customer-data’).get(‘cart’)()

Because of the way the customer data script works, the above code will throw an error in several cases and it’s not recommended.

More information about customerData: 

  • It is private content that stores private data in local storage, invalidates private data using customizable rules, and synchronizes data with the backend.
  • There is a lot of data in customerData such as: cart, checkout-data, account, captcha, directory-data,…
  • The customer section was designed to cache private data in browser storage. This means that any customer section will not be updated until proper action is made. There are some exceptions when the customer section is updated such as: Store and website switching; the section_data_lifetime is expired. 

More advancedly, you can customize the data in customerData. You can add new data in cartData by plugin the function getSectionData in vendor/magento/module-checkout/CustomerData/Cart.php

Hope this guide is useful for you. Thank you for reading our blog and see you in the upcoming articles.

Don't want to miss out on our latest insights?
Subscribe to our newsletter.

Disclaimer: By clicking submit, you agree to share your information with us to receive news, announcements, and resources when they are available.