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?– sdaughertyJun 11, 2019 at 23:18
-
I am not sure how to add knockout to html– Jack BrooksJun 12, 2019 at 6:05
1 Answer
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 theMagento\Framework\View\Element\Template::getJsLayout()
method that every block template has. That method will contain everything specified in the blocksjsLayout
, 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;
}
});
});