Magento 2: How to Get System Configuration Value Into JS

Hello Magento Folks?,

How are you all working? Welcome to How To tutorial blog for all the Magento development solutions. As always today I will guide you all Magento 2: How to Get System Configuration Value Into JS. Also go through our previously solved problem Magento 2: Regenerate Catalog Product Cache Images Programmatically. Let’s Do This?

Introduction:

Magento 2 based store which is generally pronounced as Luma store that works as a demo store where one can learn all the basic configurations. It is basically used for personal purposes or for learning purposes. Many times if there is more than one store working and to change the default configuration does not meet your requirements. When any custom field is made in System->Configuration then how to get the saved value in js. No worries here is the detailed guide for Magento 2: How to Get System Configuration Value Into JS.

Steps to Get System Configuration Value Into JS:

Step 1: First add your method in the Block:

app\code\Vendor\Extension \Block\Checkout\ Js.php

<?php
namespace Vendor\Extension\Block\Checkout;

use Magento\Framework\App\Config\ScopeConfigInterface;

class Js extends \Magento\Framework\View\Element\Template
{
      public function __construct(ScopeConfigInterface $scopeConfig)
      {
          $this->_scopeConfig = $scopeConfig;
      }

      public function getZipcodeOptionalYesNo()
      {
          return $this->_scopeConfig->getValue("section id/ group id / field id ");
      }
}

Step 2: Then set a global Js variable in your template:

app\code\Vendor\Extension\view\frontend\templates\ js.phtml

<script>
  window.valuesConfig = '<?php echo $block->getZipcodeOptionalYesNo(); ?>';
</script>

Step 3: And then, in your custom js, you can get:

app\code\ Vendor\Extension \view\frontend\web\js\ checkout_js.js

getValues: function() 
{
     return window.valuesConfig;
}

That’s how we can access a store->configurations value inside a JS file.

Final Words:

Hopefully, all are able to Get System Configuration Value Into JS by going through the above steps given. But in case of any difficulties just write down in the comment section below. If the article was helpful to you then do share with your Magento developer friends and make yourself helpful. Till then stay safe and keep developing.

Happy Coding?