8

I found that all knockout JS config data are coming from window.checkoutConfig.

Then I check onepage.phtml and found that they used this code to store data in window.checkoutConfig

window.checkoutConfig = <?php /* @escapeNotVerified */ echo \Zend_Json::encode($block->getCheckoutConfig()); ?>;

So my question is that how we add our custom data in window.checkoutConfig and use in checkout knockout js like this

var customData = window.checkoutConfig.myCustomData;

alert(customData);
1
  • How to check item has gift wrap on checkout page M2 - EE? Apr 14, 2020 at 12:28

2 Answers 2

22

You have to just override getConfig() function of checkout module.

app/code/Packagename/Checkout/etc/frontend/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <!-- pass custom variable to checkout page -->
    <type name="Magento\Checkout\Model\CompositeConfigProvider">
        <arguments>
            <argument name="configProviders" xsi:type="array">
                <item name="checkout_custom_shipping_block" xsi:type="object">Packagename\Checkout\Model\CustomConfigProvider</item>
            </argument>
        </arguments>
    </type>
</config>

app/code/Packagename/Checkout/Model/CustomConfigProvider.php file,

<?php
namespace Packagename\Checkout\Model;

use Magento\Checkout\Model\ConfigProviderInterface;

class CustomConfigProvider implements ConfigProviderInterface
{
    public function getConfig()
    {
        $config = [];
        $config['myCustomData'] = 'your custom value';

        return $config;
    }
}

Clear Cache and remove var/generation folder,

Inside your knockout js file, You can get value like,

var customData = window.checkoutConfig.myCustomData;

alert(customData);
6
  • 2
    Thanks... It working like charm. You are a master of checkout. May 17, 2017 at 6:40
  • 1
    Does this approach update the "window.checkoutConfig" variable even if you are right in the checkout? My background: I am adding a product to cart if you click on a checkbox in onepagecheckout. The minicart gets updated, but the quote items in the summary don't. They pull their information from this variable. That's why I am asking.
    – hallleron
    Nov 9, 2017 at 7:51
  • 2
    important here is to put it really into the di.xml in frontend folder !!
    – roman204
    May 11, 2018 at 7:44
  • I could worship you rn, thank you so much @roman204
    – medmek
    Jul 20, 2020 at 0:33
  • But this is just hardcoding your custom value to the config isnt it? Can I change the value to another value which I first have to generate?
    – Black
    Oct 19, 2020 at 15:59
0

Overriding methods is bad practice, this is best achieved with the use of a plugin as seen below.

app/code/Packagename/Checkout/etc/frontend/di.xml

<?xml version="1.0"?>
<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">
        <plugin name="Packagename_Checkout::checkout_configprovider"
                type="Packagename\Checkout\Plugin\Checkout\CompositeConfigProvider" />
    </type>

</config>

app/code/Packagename/Checkout/Plugin/Checkout/CompositeConfigProvider

<?php
namespace Packagename\Checkout\Plugin\Checkout;

use Magento\Checkout\Model\ConfigProviderInterface;
use \Psr\Log\LoggerInterface;

class CompositeConfigProvider
{

    /**
     * @var LoggerInterface
     */
    private $logger;

    /**
     * @param LoggerInterface $logger
     */
    public function __construct(
        LoggerInterface $logger
    ) {
        $this->logger = $logger;
    }


    public function afterGetConfig(
        ConfigProviderInterface $subject,
        $result
    ) {
        $this->logger->debug('IT WORKS!');

        $result['myCustomData'] = 'your custom value';

        return $result;
    }

}

To answer a question from the previous answer, to insert dynamic information rather than hard coded values simply use the __construct method to instantiate the appropriate classes to render your desired dynamic content.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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