2

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?

  • why don't you use web/templates/html to render the data ( using ko data objects ) ? – Naveed Asim Oct 17 '18 at 18:49
5

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.

  • I am looking for similar thing but need to customer data on the payment page to display some text around place order button. Would I be able to use the same approach and get customer session data inside the Model class for display on the page? The payment is using a .html template, not .phtml template. – cnu Apr 9 '19 at 4:09
  • @cnu Yes, you can use the same approach. – Anshu Mishra Apr 9 '19 at 7:45
  • @AnshuMishra, I am doing almost same as you mentioned here but extended existing vendor specific ConfigProvider class, can you see see magento.stackexchange.com/questions/269261/… – cnu Apr 10 '19 at 12:03
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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