How to Pass the System Configuration Value to Knockout?

0

As you know sometime Knockout Component is quite difficult to understand and in Magento 2 Knockout JS is on almost every page which used mostly on the checkout page.

Now, many developers want to pass system configuration value in the knockout component but they don’t know the correct way after finding many solutions so I have just shared with you little logic which helps you in the many different cases.

In this logic, I assume you have already created the module and just follow below simple steps that show you the value which held on the configuration.

Step 1: First, create getConfigurationValue.js file in the following location

app/code/[Namespace]/[Module]/view/frontend/web/js/view/payment/method-renderer/

define(
    [
        'Magento_Checkout/js/view/payment/default',
        'mage/storage',
        'mage/url',
        'jquery',
    ],
    function (Component,storage,url,jquery) {
        'use strict';

        return Component.extend({
            getInstructions: function() {
                var serviceUrl = url.build('[Module-name]/custom/storeconfig');
                storage.get(serviceUrl).done(
                    function (response) {
                        if (response.success) {
                            return jQuery('.instructions').text(response.value);
                        }
                    }
                ).fail(
                    function (response) {
                        return jQuery('.instructions').text(response.value);
                    }
                );
            }
        });
    }
);

In the above JS file, as you can see we create one function “getInstructions” which calls one controller that returns the system configuration value and that value we can show in specific tag via jquery.

Quick Tip:- Learn to Set Rest API with Example in Magento 1

Step 2: Create Storeconfig.php controller file in the following location

app/code/[Namespace]/[Module]/Controller/Custom/

<?php
namespace [Namespace]\[Module]\Controller\Custom;

class Storeconfig extends \Magento\Framework\App\Action\Action
{
    protected $resultJsonFactory;

    protected $storeManager;

    protected $scopeConfig;

    public function __construct(
        \Magento\Framework\App\Action\Context $context,
        \Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory,
        \Magento\Store\Model\StoreManagerInterface $storeManager,
        \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
    ) {
        $this->resultJsonFactory = $resultJsonFactory;
        $this->storeManager = $storeManager;
        $this->scopeConfig = $scopeConfig;
        parent::__construct($context);
    }

    /**
     * Execute view action
     *
     * @return \Magento\Framework\Controller\ResultInterface
     */
    public function execute()
    {
        $response = [];
        try {
            $configValue = $this->scopeConfig->getValue(
                'custom/data/instructions',
                \Magento\Store\Model\ScopeInterface::SCOPE_STORE
            );
            $response = [
                'success' => true,
                'value' => __($configValue)
            ];

        } catch (\Exception $e) {
            $response = [
                'success' => false,
                'value' => __($e->getMessage())
            ];
            $this->messageManager->addError($e->getMessage());
        }
        $resultJson = $this->resultJsonFactory->create();
        return $resultJson->setData($response);
    }
}

As you can see in the above code, we have already created one system configuration field via system.xml and it stores one value or text that we will get it and put in response name array and that response return in JSON.

Step 3: Create custom.html file in the following location

app/code/[Namespace]/[Module]/view/frontend/web/template/payment/

Example HTML:
<p class="instructions" data-bind="html: getInstructions()"></p>

In this file, we will just bind our created function “getInstructions()” in the “P” tag. When that function will call it will get the configuration value and as per our jquery code, it will show the value on the P tag which has “instructions” class.

Thanks for reading this post!

About the author

I’m Magento Certified Developer having quite 5 years of commercial development expertise in Magento as well as in Shopify. I’ve worked primarily with the Magento and Shopify e-commerce platform, managing the complexities concerned in building e-commerce solutions tailored to a client’s specific desires.

Related Posts

6 Responses
  1. You really make it seem so easy with your presentation but I find this matter to be really something
    which I think I would never understand. It seems too complicated and extremely broad for me.
    I’m looking forward for your next post, I’ll try to get
    the hang of it!

Leave a Reply