Get config value in html using knockoutjs

Question

I am trying to get config value to html file. My aim is to check if the config value is enabled of it is show a button and if it’s continue normally with out button the button. I am not sure how to get the value to knockout js Can I pass it somehow in class or do I have to do anything else

Answer 1

Create Helper For Accessing System Configuration Values

Here you would just create a helper that has some methods for fetching the system config values you want. \Magento\Framework\App\Helper\AbstractHelper already has access to Scope Config for getting values, but you could also just inject \Magento\Framework\App\Config\ScopeConfigInterface into the block below and access that way.

Create PHP Block for Exposing Configuration to Knockout Component

<?php

namespace YourCompany\YourModule\Block;

use YourCompany\YourModule\Helper\Data as ModuleHelper;
use Magento\Catalog\Model\Product;
use Magento\Framework\Serialize\SerializerInterface;
use Magento\Framework\View\Element\Template;

class YourComponent extends Template
{
    /**
     * @var SerializerInterface
     */
    protected $serializer;

    /**
     * @var ModuleHelper
     */
    protected $moduleHelper;

    /**
     * YourComponent constructor.
     * @param Template\Context $context
     * @param SerializerInterface $serializer
     * @param ModuleHelper $moduleHelper
     * @param array $data
     */
    public function __construct(
        Template\Context $context,
        SerializerInterface $serializer,
        ModuleHelper $moduleHelper,
        array $data = []
    ) {
        parent::__construct($context, $data);
        $this->registry = $registry;
        $this->serializer = $serializer;
        $this->moduleHelper = $moduleHelper;
    }

    /**
     * Get json config for your component
     *
     * @return bool|string
     */
    public function getJsonConfig()
    {
        return $this->serializer->serialize([
            'is_enabled' => $this->moduleHelper->getIsEnabled()
            'other_value' => $this->moduleHelper->getOtherValue()
        ]);
    }
}

Pass Component Configuration via PHP Block

For brevity I'm just showing a component that's fully defined within the phtml template. The key part here is the <?= $block->getJsonConfig(); ?>, which is a method on the PHP Block that should output json encoded data, which would include your system config value.

Note: Another way to pass the config into components is to define your component hierarchy via jsLayout using layout xml for this block, then target the component and inject the config by overriding the Magento\Framework\View\Element\Template::getJsLayout() method that every block template has. That method will contain everything specified in the blocks jsLayout, giving you a chance to add/edit/modify it's contents before being used on the page.

<?php
/** @var YourCompany\YourModule\Block\YourComponentBlock $block */
?>

<div data-bind="scope: 'yourComponent'">
    <!-- ko template: getTemplate() --><!-- /ko -->
</div>

<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "yourComponent": {
                        "component": "YourCompany_YourModule/js/view/your-component",
                        "template": "YourCompany_YourModule/your-component",
                        "config": <?= $block->getJsonConfig(); ?>
                    }
                }
            }
        }
    }
</script>

Access the Configuration in the Knockout Component

define([
    'uiComponent'
], function(Component) {

    return Component.extend({
        /**
         * Initialize Component
         *
         * @param config
         */
        initialize: function(config) {
            this._super();
            this.is_enabled = config.is_enabled;
            this.other_value = config.other_value;
        }
    });
});