Magento 2 : Getting PHP variable in js extended template

Question

I added a step in Magento 2 checkout process. by extending a template using .js file

return Component.extend({
            defaults: {
                template: 'vendor_module/mytemplate.phtml'
            },

And it is working fine. but i need to add some dynamic content to the page, fetching data from a custom table in db and display them in the template.

How can I achieve that. Adding My code bellow

Js File

define(
[
'ko',
'uiComponent',
'underscore',
'Magento_Checkout/js/model/step-navigator',
'Magento_Customer/js/model/customer'
],
function (
    ko,
    Component,
    _,
    stepNavigator,
    customer
    ) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'vendor_module/template_file.phtml'
        },


         isVisible: ko.observable(true),
        isLogedIn: customer.isLoggedIn(),
         stepCode: 'stepCode',
         stepTitle: 'stepTitle',

        initialize: function () {
            this._super();
            stepNavigator.registerStep(
                this.stepCode,
                null,
                this.stepTitle,
                this.isVisible,

                _.bind(this.navigate, this),


                15
                );

            return this;
        },

        navigate: function () {

        },


        navigateToNextStep: function () {
            stepNavigator.next();
        },

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


            return customData;
        },
    });
}
);

PHP File

    <?php

namespace vendor\module\Model;

use Magento\Checkout\Model\ConfigProviderInterface;

class CustomConfigProvider implements ConfigProviderInterface
{       
    public function getConfig()
    {
        $config = [];
        $config['customData'] = 'Your text.';
        return $config;
    }
}

template_file.phtml

<!--Use 'stepCode' as id attribute-->
<li data-bind="fadeVisible: isVisible, attr: { id: stepCode }">
  <div class="step-title" data-bind="i18n: stepTitle" data-role="title"></div>
  <div id="checkout-step-title"
  class="step-content"
  data-role="content">

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

<!--   other html contents -->
<!--   other html contents -->
<!--   other html contents -->


</div>
</li> 

Answer 1

You can't use PHP code directly in js file want to override ConfigProvider follow this link

https://webkul.com/blog/adding-additional-variables-in-window-checkoutconfig-on-magento-2-checkout-page/

then after you can use window.checkoutConfig in js file

Answer 2

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

app/code/Mage/Cool/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">Mage\Cool\Model\CustomConfigProvider</item>
            </argument>
        </arguments>
    </type>
</config>

app/code/Mage/Cool/Model/CustomConfigProvider.php

<?php
namespace Mage\Cool\Model;

use Magento\Checkout\Model\ConfigProviderInterface;

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

        return $config;
    }
}

app/code/Mage/Cool/view/frontend/web/js/custom.js

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

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

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

            return customData;
        }
    });
});

Now you can call getCustomData in the html template.

<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.

Any Query let me know...