0

I have this code as below in a custom module

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");

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

                $(cart_items).each(function(index,productData){

                    product_detail = {};

                    product_name = productData['product_name'];

                    product_detail = {
                        'item_name':product_name,
                    }

                    products.push(product_detail);
                })

                dataLayer.push({
                'event': 'begin_checkout',
                'ecommerce': {
                    'currency': 'MYR',
                    'value': grand_total,                
                    'items': products
                    }
                });

            }

        };

        mixin.gtmEventTrigger();

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

I would like to know what is causing the customer cart data unable to be retrieved through the code console.log(customerData.get('cart')); , when I console.log I receive undefined value

Appreciate if someone can advise what is the correct way to write the codes to retrieve this customer cart data through a .js file

The location of the file is as follows

app/code/SR/ModifiedCheckout/view/frontend/web/js/checkout-loader.js

in which the checkout-loader.js is loaded like this

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/checkout-loader': {
                'SR_ModifiedCheckout/js/checkout-loader': true
            }
        }
    }
};

in the file path app/code/SR/ModifiedCheckout/view/frontend/requirejs-config.js

2
  • are you want information of current cart data? or Customer Data? Mar 19 at 10:43
  • Hi, this issue has been solved ya, I put in the js code inside shipping.js file, app/design/frontend/MageBig/martfury/ecommerce/Magento_Checkout/web/js/view/shipping.js Mar 20 at 2:06

2 Answers 2

1
  1. You was not able to retrieve the cart info in the checkout-loader mixin file, because the customer data was not actually loaded at that moment. So in this case something like this should work:

    customerData.get('cart').subscribe(function (cartData) {
        console.log(cartData);
    });
    
  2. The solution that you decided to use is also not perfect. Mainly because this will not work when you have only virtual products in cart. Because shipping.js will not be loaded in this case.

  3. Since you trying to push 'begin_checkout' event to GTM, I believe that you should follow a much easier approach. Just add your script right before body end. E.g.:

    view/frontend/layout/checkout_index_index.xml:

    <?xml version="1.0"?>
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <body>
        <referenceContainer name="before.body.end">
            <block name="gtm-begin-checkout" template="Vendor_Module::gtm_begin_checkout.phtml" />
        </referenceContainer>
        </body>
    </page>
    

    view/frontent/templates/gtm_begin_checkout.phtml:

    <script type="text/javascript">
        require([
            'Magento_Checkout/js/model/quote'
        ], function (quote) {
            let items = [];
            quote.getItems().forEach(function (cartItem) {
                items.push({
                    item_name: cartItem.name,
                    price: cartItem.price
                });
            });
    
            dataLayer.push({
                'event': 'begin_checkout',
                'ecommerce': {
                    'currency': 'MYR',
                    'value': quote.totals().subtotal,
                    'items': items
                }
            });
        });
    </script>
    
2
  • Thank you for this, its easy to understand, have tried the fix you give and its working great! tysm Mar 22 at 0:20
  • Hi @MagestyApps, I would like to ask, do you know how to retrieve info whether customer is logged in or not in a customer js script Apr 26 at 2:08
0

For some reason in my code I need to put the source code in

app/design/frontend/MageBig/martfury/layout01/Magento_Checkout/web/js/view/shipping.js

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

define([
    'jquery',
    'underscore',
    'Magento_Ui/js/form/form',
    'ko',
    'Magento_Customer/js/model/customer',
    'Magento_Customer/js/model/address-list',
    'Magento_Checkout/js/model/address-converter',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/action/create-shipping-address',
    'Magento_Checkout/js/action/select-shipping-address',
    'Magento_Checkout/js/model/shipping-rates-validator',
    'Magento_Checkout/js/model/shipping-address/form-popup-state',
    'Magento_Checkout/js/model/shipping-service',
    'Magento_Checkout/js/action/select-shipping-method',
    'Magento_Checkout/js/model/shipping-rate-registry',
    'Magento_Checkout/js/action/set-shipping-information',
    'Magento_Checkout/js/model/step-navigator',
    'Magento_Ui/js/modal/modal',
    'Magento_Checkout/js/model/checkout-data-resolver',
    'Magento_Checkout/js/checkout-data',
    'uiRegistry',
    'mage/translate',
    'Magento_Checkout/js/model/shipping-rate-service',
    'Magento_Ui/js/model/messageList',
    'Magento_Customer/js/customer-data'
], function (
    $,
    _,
    Component,
    ko,
    customer,
    addressList,
    addressConverter,
    quote,
    createShippingAddress,
    selectShippingAddress,
    shippingRatesValidator,
    formPopUpState,
    shippingService,
    selectShippingMethodAction,
    rateRegistry,
    setShippingInformationAction,
    stepNavigator,
    modal,
    checkoutDataResolver,
    checkoutData,
    registry,
    $t,
    $srs,
    messageList,
    customerData
) {
    'use strict';

    var popUp = null;

    return Component.extend({
        defaults: {
            template: 'Magento_Checkout/shipping',
            shippingFormTemplate: 'Magento_Checkout/shipping-address/form',
            shippingMethodListTemplate: 'Magento_Checkout/shipping-address/shipping-method-list',
            shippingMethodItemTemplate: 'Magento_Checkout/shipping-address/shipping-method-item'
        },
        visible: ko.observable(!quote.isVirtual()),
        errorValidationMessage: ko.observable(false),
        isCustomerLoggedIn: customer.isLoggedIn,
        isFormPopUpVisible: formPopUpState.isVisible,
        isFormInline: addressList().length === 0,
        isNewAddressAdded: ko.observable(false),
        saveInAddressBook: 1,
        quoteIsVirtual: quote.isVirtual(),

        /**
         * @return {exports}
         */
        initialize: function () {

            console.log("initialize shipping js");

            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';
            var cart_items = customerData.get('cart')().items;
            var product_detail = {};
            var products = [];
            var product_price_total = 0.00;
            var grand_total = 0.00;

            $(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_price_total = product_price * productData['qty'];
                grand_total = grand_total + product_price_total;

                product_detail = {
                    'item_name':product_name,
                    'item_id':product_sku,
                    'price':product_price,
                    'item_brand':product_brand,
                    'item_category':product_category,
                    'item_variant':product_variant,
                    'quantity':productData['qty'],
                    'salePrice':product_price,
                    'marketPrice':product_market_price,
                    'wowCashback':product_wow_cashback,
                    'shipping_west_malaysia_hit':product_shipping_wm,
                    'shipping_east_malaysia_hit':product_shipping_em,
                }

                products.push(product_detail);
            })

            dataLayer.push({
            'event': 'begin_checkout',
            'ecommerce': {
                'currency': 'MYR',
                'value': grand_total,                
                'items': products
                }
            });

            return this;
        },

    });
});

the cart in the customerData is readable through here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.