How to use the system configuration value in Knockout JS

In this post, we will learn how to get the Magento configuration value used in knockout Js file.

As you know in magento 2 sometimes the Knockout component is quite difficult to understand and Knockout JS is used on many pages which are used mostly on the checkout page.

Let’s start to learn to use the System Configuration Value to Knockout JS step by step.

Step 1: To create  config.js at the path app/code/Mageclues/StoreConfig/view/frontend/web/js/config.js

    function (Component,storage,url,jquery) {
        'use strict';
        return Component.extend({
            getConfigValue: function() {
                    function (response) {
                        if (response.success) {
                            return jQuery('.selecter_element').text(response.value);
                    function (response) {
                        return jQuery('.selecter_element').text(response.value);

Step 2: To create Config.php controller file at the path


namespace Mageclues\StoreConfig\Controller\Custom;
class Config 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;
     * Execute view action
     * @return \Magento\Framework\Controller\ResultInterface
    public function execute()
        $response = [];
        try {
            $configValue = $this->scopeConfig->getValue(
            $response = [
                'success' => true,
                'value' => __($configValue)
        } catch (\Exception $e) {
            $response = [
                'success' => false,
                'value' => __($e->getMessage())
        $resultJson = $this->resultJsonFactory->create();
        return $resultJson->setData($response);

Step 3: To create config.html file at the path

<p class="selecter_element" data-bind="html: getConfigValue()"></p>

I hope this blog is useful for you. Please leave a comment for the query and review.

Thank you!

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *