How to pass data from PHP to JavaScript component

Question

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?

Answer 1

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.

Answer 2

you can achieve by two ways

Way 1)

in your phtml file

<?php 
$currentCategory = $block->getCurrentCategory();
?>
<?php if(isset($currentCategory) && $currentCategory !== "")
      {
?>
<div id="currentCategory"><?php $currentCategory ?></div>
<?php } ?>

in your js file:

require(['jquery', 'jquery/ui'], function($){ 

var categoryvalue = $("#currentCategory").val();
alert(categoryvalue);

});

Way 2)

in your phtml file

<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Catalog/js/options": {
                "isSortable":  <?php echo (int)(!$block->getReadOnly() && !$block->canManageOptionDefaultOnly()) ?>
            }
        }
    }
   </script>

in your js file

define([
'jquery',
'mage/template',
'uiRegistry',
'jquery/ui',
'prototype'
], function (jQuery, mageTemplate, rg) {
'use strict';

return function (config) {
 if (config.isSortable) {
    //do something
 }
}
});

get reference here