Magento – Magento2 : How to display custom values in checkout page

knockoutknockoutjsmagento2

I am working on checkout page, I have pass some array values to checkout config provider.

How to get those values in knockout JS and display by knockout html.

Want to display all applied codes in checkout payment step.

I have passed values to config provider by below code

public function getConfig()
    {
        return $this->getAppliedGiftCards();
    }

    public function getAppliedGiftCards()
    {
        $quoteId = $this->checkoutSession->getQuote()->getId();
        $giftcardCodes = $this->quoteFactory->getGiftCardCollection($quoteId);
        $config = [];
        foreach ($giftcardCodes as $giftcardCode){
            $config['payment']['applied_giftcard'][$giftcardCode->getCode()] = $giftcardCode->getCode();
        }
        return $config;
    }

Get values in Js by below code

var configValues = window.checkoutConfig.payment;
var applied_giftcard = ko.observable(configValues.applied_giftcard);

How to render passed config array value to knockout template.

Best Answer

You want to add window.checkoutConfig then you need to create a plugin on Magento\Checkout\Model\DefaultConfigProvider.

Create after method on getConfig() afterGetConfig and add pass you array as json value.

Create di.xml at app/code/{Vendor}/{Module}/etc.

<?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\DefaultConfigProvider">
        <plugin name="add_new_variable_checkout_config" type="{VendorName}{ModuleName}\Plugin\DefaultConfigProviderPlugin" sortOrder="1" />
    </type>
</config>

Plugin class

namespace {VendorName}\{ModuleName}\Plugin;

class DefaultConfigProviderPlugin
{

 
    public function afterGetConfig(
        \Magento\Checkout\Model\DefaultConfigProvider $subject,
    $output     
    ) {
        $output['my_custom_data'] = json_encode(array('name'=> 'john', 'age' => '10'));
    return $output;
    }
 
}

Now, you want to render this data to payment section then ,Please copy

vendor/magento/module-checkout/view/frontend/web/js/view/payment.js

to your theme level

app/design/frontend/{Venoder}/{Themename}/Magento_Checkout/web/js/view/payment.js

OR Rewrite module-checkout/view/frontend/web/js/view/payment.js

and new function getmyCustomdata name for getting value from the config value

    ......
    getmyCustomdata: function () {
        return window.checkoutConfig.my_custom_data;
    }

Now, you have to print getmyCustomdata value to knockjs HTML template vendor/magento/module-checkout/view/frontend/web/template/payment.html

So, copy this file to to your theme level.

app/design/frontend/{Venoder}/{Themename}/Magento_Checkout/web/template/payment.html

At this payment.html bind data using <span data-bind="text: getmyCustomdata()"></span>

Related Solutions

Magento 2 – How is Product Data Passed from Block to Knockout Template?

Well I spent a lot of hours looking how templates and other stuffs are related with knockout.js, i will try to explain how subtotal price format is displayed to order summary at checkout module, but is same to other things too. My current version is Magento ver. 2.0.4.

First if you navigate to the corresponding layout file for checkout at

vendor/magento/module-checkout/view/frontend/layout/checkout_index_index.xml

you will see at line 392 inside cart_items block the subtotal block like this:

As you can see , Magento calls a js template to display subtotal of product right after product details.

If you navigate to

vendor/magento/module-checkout/view/frontend/web/js/view/summary/subtotal.js

you will see at line 15 is called subtotal template , and a function called getValue(),

 getValue: function () {
    return this.getFormattedPrice(this.getPureValue());
  }

which later i saw it is called in subtotal template , which is located to

vendor/magento/module-checkout/view/frontend/web/template/summary/subtotal.html

with this code:

Subtotal.js file uses

Magento_Checkout/view/frontend/web/js/view/summary/abstract-total.js getFormattedPrice()

function, while this file uses

Magento_Checkout/view/frontend/web/js/model/quote.js getPriceFormat()

function read about require.js dependencies , which returns a price format, and here i saw that this variable is populated like this,

var priceFormat = window.checkoutConfig.priceFormat;

So where does window.checkoutConfig.priceFormat comes from?

Magento 2 did this:

If you navigate to

/vendor/magento/module-checkout/view/frontend/templates/onepage.phtml

at line 26 is initialized window.checkoutConfig with $block->getCheckoutConfig(), which function is at

/vendor/magento/module-checkout/Block/Onepage.php

line 89, here it takes all config providers and returns them.

Where are config providers defined?

They are defined at

vendor/magento/module-checkout/etc/frontend/di.xml

at line 46, at sends us to

Magento\Checkout\Model\DefaultConfigProvider.php

which has getConfig() function, at line 254 you can see getConfig() function and at line 271 is priceFormat populated like this:

 $output['priceFormat'] = $this->localeFormat->getPriceFormat(
            null,
            $this->checkoutSession->getQuote()->getQuoteCurrencyCode()
        );

This means priceFormat is declared at populated here at getConfig() function, so you can later use it with window.checkouConfig.priceFormat.

Magento2 Module – Fix ‘main.CRITICAL: Plugin Class Doesn’t Exist’

I couldn't reproduce your error, but I got an other one.

Then I did some minor adjustments to your code and it worked.
First drop the InstallSchema.php file. It does nothing so it is useless.

Then make sure that your plugin file is in Amaj/CorePlugin/Model/Currency/Plugin.php and it looks like this:

<?php

namespace Amaj\CorePlugin\Model\Currency;

class Plugin
{
    protected $logger;

    public function __construct(\Psr\Log\LoggerInterface $logger) {
        $this->logger = $logger;
    }

    /**
     * @param $subject
     * @param \Closure $proceed
     * @param $price
     * @param array $options
     * @return string
     */
    public function aroundFormatTxt(
        $subject,
        \Closure $proceed,
        $price,
        $options = []
    )
    {
        $this->logger->info('Amaj aroundFormatTxt');
        return '2';
    }

}

you don't need parent::__construct(); in the constructor because there is no parent class.
And I replaced $logger->info with $this->logger->info because there is no $logger variable.