0

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

  • Depends on how you are adding the component to the page. How are you adding the knockout component? – floorz Jun 11 at 23:18
  • I am not sure how to add knockout to html – Jack Brooks Jun 12 at 6:05
0

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;
        }
    });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.