>How to get shipping estimate information from cart quote in Magento 2

How to get shipping estimate information from cart quote in Magento 2

Magento 2 is currently using the frontend processing library, Knockout JS (KO). Cart page KO will be used to render HTML block with data in JSON format, including block totals.

In many cases, you need to get full information of cart quote to resolve a problem such as:

    • Send current cart page information to customer (if customer isn’t ready to place order)
    • Customize interface of the cart page basing on some information of cart quote, etc.

With the simple way as below, you can take full data of the quote which focuses on block shipping estimate data.

To know where save value of “Estimate shipping” block, you can use the Chrome browser to debug.

Step 1: On the Cart page (http://yourdomain.com/checkout/cart), press F12 to show debug tab.

Step 2: Navigate to Application -> Local storage (yourdomain.com) -> Value column (right col).

Step 3: Copy text in Value column (from step 2) and paste into left column on website http://json.parser.online.fr/ (to read the Json structure data easily).

You will see all of the quote information stored in this json text. But I just focus on the main data of “Estimate shipping”, block.

There are 2 main objects which you need to focus, are “checkout-data” and “cart-data” (please check screenshot below for detail data of these objects).

In which:

Checkout-data: save the value when you have any actions during checkout: change shipping method, switch values in country field, postcode, address, city…

Cart-data: save the overview information of your quote (more details information that the quote is storing, you can expand the “cart-data” section and see more).

Depending on the specific case, you can get the data accordingly.

Once you have the data from Json (string), I will guide how to take the data and process your requirement.

Create JS file in your module which is created by yourself.

Example: app/code/Bss/QuoteData/view/frontend/web/js/quote-data.js.

define([
    'jquery',
    "Magento_Customer/js/customer-data",
    'Magento_Checkout/js/checkout-data',
], function ($, customerData, checkoutData) {
    'use strict';
    $.widget('bss.quote_data', {
        _create: function () {
            $("#click-button").on('click', function(){
                var cartData = customerData.get('cart-data')(); // Data from "cart-data"
                var checkout = checkoutData.getShippingAddressFromData(); // data from "checkout-data"
                var selectedShippingMethod = checkoutData.getSelectedShippingRate(); // your selected shipping method from "checkout-data"
               /*Log data in console tab of browser*/
               console.log(cartData); // you can remove this after check
               console.log(checkout); // you can remove this after check
               console.log(selectedShippingMethod); // you can remove this after check
               /* Log data in console tab of browser */
                return false;
            });
        }
    });
    return $.bss.quote_data;
});

Hope that this article will be useful to you when you work on “quote” data.

< Previous Post
Next Post >