Skip to content

Magento_Customer/js/customer-data not returning product items data

I am in the process of upgrading magento 2.3.5 to 2.4.4

On testing the 2.4.4 version I noticed that the code customerData.get('cart')().items; does not return the customer’s cart

Refer below code on the complete code file on checkout-loader.js

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

    return function (checkoutLoader) {

        var mixin = {

            gtmEventTrigger: function() {

                console.log("Init Checkout Loader");
                var product_name = 'n/a';
                var product_sku = 'n/a';
                var product_price = 'n/a';
                var product_brand = 'n/a';
                var product_category = 'n/a';
                var product_variant = 'n/a';
                var product_market_price = 'n/a';
                var product_wow_cashback = 'n/a';
                var product_shipping_wm = 'n/a';
                var product_shipping_em = 'n/a';
                // empty
                var cart_items = customerData.get('cart')().items;
                var product_detail = {};
                var products = [];

                console.log("customer Data");
                console.log(customerData);

                // the cart_items here is empty
                $(cart_items).each(function(index,productData){

                    product_detail = {};

                    product_name = productData['product_name'];
                    product_sku = productData['product_sku'];
                    product_price = productData['product_price_value'];
                    product_brand = productData['product_brand'];
                    product_category = productData['product_category'];
                    product_variant = productData['product_variant'];
                    product_market_price = productData['product_market_price'];
                    product_wow_cashback = productData['product_wow_cashback'];
                    product_shipping_wm = productData['product_shipping_wm'];
                    product_shipping_em = productData['product_shipping_em'];

                    product_detail = {
                        'name':product_name,
                        'id':product_sku,
                        'price':product_price,
                        'brand':product_brand,
                        'category':product_category,
                        'variant':product_variant,
                        'quantity':productData['qty'],
                        'dimension17':product_price,
                        'dimension18':product_market_price,
                        'dimension19':product_wow_cashback,
                        'dimension20':product_shipping_wm,
                        'dimension21':product_shipping_em,
                    }

                    products.push(product_detail);
                })

                dataLayer.push({
                'event': 'ecommerceCheckout',
                'eventDetails.category': 'Ecommerce',
                'eventDetails.action': 'Checkout Step 1',
                'eventDetails.nonInteraction': 'false',
                'ecommerce': {
                    'currencyCode': 'MYR',
                    'checkout': {
                        'actionField': {
                            'step': 1
                        },
                        'products': products
                        }
                    }
                });

            }

        };

        mixin.gtmEventTrigger();

        return $.extend(checkoutLoader, mixin);
    };
});

This is what I get on the console tab of browser developer tools

enter image description here

notice that the product array item list is empty

the item is in the product cart as per below image

enter image description here

also I check on the browser Developer tools in Application tab and found that the data is in the localstorage, so the data is indeed there

enter image description here

I am not sure what changes happen in magento 2.4.4 that causes this data not able to be captured using the code customerData.get('cart')().items as it works fine in the magento 2.3.5

Requesting help from someone who understand and manage to found the fixture on this problem