0

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

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

| improve this answer | |
0

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

| improve this answer | |
  • Tried the same, but results in the following 2 exception(s): Exception #0 (Magento\Framework\Exception\LocalizedException): Invalid block type: Magento\Checkout\Block\shipping Exception #1 (ReflectionException): Class vendor\module\Model\CustomConfigProvider does not exist – Sangeetha Mar 16 at 6:35
  • you try this command : - php bin/magento setup:di:compile – Mohit Patel Mar 16 at 6:47
  • php bin/magento setup:upgrade php bin/magento setup:di:compile php bin/magento setup:static-content:deploy -f php bin/magento indexer:reindex php bin/magento cache:flush tried all this .Still 2 exception(s): Exception #0 (Magento\Framework\Exception\LocalizedException): Invalid block type: Magento\Checkout\Block\Cart\Shipping Exception #1 (ReflectionException): Class vendor\module\Model\CustomConfigProvider does not exist – Sangeetha Mar 16 at 8:07
  • you refer this link :- magento.stackexchange.com/questions/163822/… And you are not understand so let me know.. – Mohit Patel Mar 17 at 6:36
  • Tried, and now I didnt have any error . But variable is still not showinh in frontend. Edited my question and added my current code. All static html content shows in frontend, but the <div data-bind="text: getCustomData()"></div> didnt show anythin. Please have a look – Sangeetha Mar 17 at 7:14

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.