Magento2 : How to display custom values in checkout page

Question

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.

on which section of payment method you want to show your data? — Amit Bera
– Amit Bera ♦, Commented Aug 17, 2018 at 14:27

Kazim Noorani · Accepted Answer · 2020-12-29 03:47:29Z

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>

check my updated question.

Suresh Chikani
– Suresh Chikani

2018-08-17 13:52:09 +00:00
Commented Aug 17, 2018 at 13:52 — Suresh Chikani
– Suresh Chikani, Commented Aug 17, 2018 at 13:52
I have follow same but not working.

Suresh Chikani
– Suresh Chikani

2018-08-20 05:32:21 +00:00
Commented Aug 20, 2018 at 5:32 — Suresh Chikani
– Suresh Chikani, Commented Aug 20, 2018 at 5:32

Stack Exchange Network

Magento2 : How to display custom values in checkout page

1 Answer 1

Your Answer

Hot Network Questions

Magento2 : How to display custom values in checkout page

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions