Magento 2: Pass data in checkout

Question

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);

Answer 1

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);

Answer 2

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.