Magento 2 – How to Pass Data from PHP to JavaScript Component

jslayoutknockoutjslayoutmagento2shopping-cart

I've overridden the grand-total element in checkout_cart_index layout and in my custom component JS I need to get the data that I have in a PHP class with a specific logic.

How can I get the data returned in that PHP class from my custom JS?

checkout_cart_index.xml

<referenceBlock name="checkout.cart.totals">
<arguments>
    <argument name="jsLayout" xsi:type="array">
        <item name="components" xsi:type="array">
            <item name="block-totals" xsi:type="array">
                <item name="children" xsi:type="array">
                    <item name="grand-total" xsi:type="array">
                        <item name="component"  xsi:type="string">My_Module/js/view/summary</item>
                        <item name="config" xsi:type="array">
                            <item name="title" xsi:type="string" translate="true">Order Total</item>
                            <item name="template" xsi:type="string">My_Module/cart/totals/grand-total</item>
                        </item>
                    </item>
                </item>
            </item>
        </item>
    </argument>
</arguments>

my-module/view/frontend/web/js/view/summary.js

define([
    'Magento_Checkout/js/view/summary/abstract-total',
    'Magento_Checkout/js/model/quote'
], function (Component, quote) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'My_Module/summary/grand-total'
        },

        initialize: function () {
        this._super();
        },

        myCustomData: function () {
            // get data returned in PHP
        }
    });
});

So what I need is to get the data returned as a php array using the method myCustomData from my JS file.

I there any way to set the PHP class as an argument in the layout or something similar?

Best Answer

You can add your custom data to window.checkoutConfig object from your custom module

app/code/Anshu/Custom/etc/frontend/di.xml

<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Model\CompositeConfigProvider">
        <arguments>
            <argument name="configProviders" xsi:type="array">
                <item name="checkout_config_custom_data" xsi:type="object">Anshu\Custom\Model\CustomConfigProvider</item>
            </argument>
        </arguments>
    </type>
</config>

app/code/Anshu/Custom/Model/CustomConfigProvider.php

<?php
namespace Anshu\Custom\Model;

use Magento\Checkout\Model\ConfigProviderInterface;

class CustomConfigProvider implements ConfigProviderInterface
{       
    public function getConfig()
    {
        $config = [];
        $config['customData'] = 'My Custom Data text.';

        return $config;
    }
}

app/code/Anshu/Custom/view/frontend/web/js/custom.js

define([
    'uiComponent',
    'jquery'
], function (Component, $) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Anshu_Custom/custom'
        },

        getCustomData: function () {
            var customData = $.parseJSON(window.checkoutConfig.customData);

            return customData;
        }
    });
});

Now you can call getCustomData in the html template.

app/code/Anshu/Custom/view/frontend/web/template/custom.html

<div class="component-wrapper">
    <div data-bind="text: getCustomData()"></div>
</div>

This is sample code, you can try it and modify it according to your requirement.

Related Topic