{"id":69129,"date":"2016-12-23T08:17:12","date_gmt":"2016-12-23T08:17:12","guid":{"rendered":"http:\/\/webkul.com\/blog\/?p=69129"},"modified":"2025-12-11T09:02:38","modified_gmt":"2025-12-11T09:02:38","slug":"create-custom-js-window-configproviders-magento-2","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/create-custom-js-window-configproviders-magento-2\/","title":{"rendered":"How to create custom Js window configProviders in Magento 2"},"content":{"rendered":"\n

We\u2019ll explore how to Create Custom JS Window ConfigProviders in Magento 2 and learn the simplest way to extend JavaScript configuration data.<\/p>\n\n\n\n

In Magento 2 all required data saved in window.checkoutConfig
so at the time of checkout it can be fetched by js models easily.
We can also save our custom required data in window.checkoutConfig providers by using frontend\/di.xml<\/strong><\/p>\n\n\n\n

Here is an image, see how data stored in window.checkoutConfig.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

So, now lets create our own Config Provider, we can use it in our Module as well as in dependent Modules.<\/p>\n\n\n\n

1.<\/strong> Create di.xml file Webkul\/Knockout\/etc\/frontend\/di.xml<\/strong><\/p>\n\n\n\n

<?xml version="1.0"?>\n<!-- \n\/**\n * Webkul Software.\n *\n * @category  Webkul\n * @package   Webkul_Knockout\n * @author    Webkul\n * @copyright Webkul Software Private Limited (https:\/\/webkul.com)\n * @license   https:\/\/store.webkul.com\/license.html\n *\/\n -->\n<config xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager\/etc\/config.xsd">\n    <type name="Webkul\\Knockout\\Model\\CustomConfigProvider">\n        <arguments>\n            <argument name="configProviders" xsi:type="array">\n                <item name="custom_config_provider" xsi:type="object">Webkul\\Knockout\\Model\\DefaultConfigProvider<\/item>\n            <\/argument>\n        <\/arguments>\n    <\/type>\n<\/config><\/pre>\n\n\n\n
2.<\/strong> Now create Config Provider Interface Webkul\/Knockout\/Model\/ConfigProviderInterface.php<\/strong><\/p>\n\n\n\n
<?php\n\/**\n * Webkul Software.\n *\n * @category  Webkul\n * @package   Webkul_Knockout\n * @author    Webkul\n * @copyright Webkul Software Private Limited (https:\/\/webkul.com)\n * @license   https:\/\/store.webkul.com\/license.html\n *\/\nnamespace Webkul\\Knockout\\Model;\n\n\/**\n * Interface ConfigProviderInterface\n * @api\n *\/\ninterface ConfigProviderInterface\n{\n\n    \/**\n     * Retrieve assoc array of checkout configuration\n     *\n     * @return array\n     *\/\n    public function getConfig();\n}<\/pre>\n\n\n\n
3.<\/strong> Create Webkul\\Knockout\\Model\\CustomConfigProvider.php<\/strong> which will be used to
collect all Child Config Providers data and merge them.<\/p>\n\n\n\n
<?php\n\/**\n * Webkul Software.\n *\n * @category  Webkul\n * @package   Webkul_Knockout\n * @author    Webkul\n * @copyright Webkul Software Private Limited (https:\/\/webkul.com)\n * @license   https:\/\/store.webkul.com\/license.html\n *\/\nnamespace Webkul\\Knockout\\Model;\n\nclass CustomConfigProvider implements ConfigProviderInterface\n{\n    \/**\n     * @var ConfigProviderInterface[]\n     *\/\n    private $configProviders;\n\n    \/**\n     * @param ConfigProviderInterface[] $configProviders\n     *\/\n    public function __construct(\n        array $configProviders\n    ) {\n        $this->configProviders = $configProviders;\n    }\n\n    \/**\n     * @inheritdoc\n     *\/\n    public function getConfig()\n    {\n        $config = [];\n        foreach ($this->configProviders as $configProvider) {\n            $config = array_merge_recursive($config, $configProvider->getConfig());\n        }\n        return $config;\n    }\n}<\/pre>\n\n\n\n
Now see in the di.xml file, we have passed a DefaultConfigProvider as an argument for CustomConfigProvider.<\/p>\n\n\n\n
4.<\/strong> Finally Create Webkul\/Knockout\/Model\/DefaultConfigProvider.php<\/strong><\/p>\n\n\n\n
<?php\n\/**\n * Webkul Software.\n *\n * @category  Webkul\n * @package   Webkul_Knockout\n * @author    Webkul\n * @copyright Webkul Software Private Limited (https:\/\/webkul.com)\n * @license   https:\/\/store.webkul.com\/license.html\n *\/\nnamespace Webkul\\Knockout\\Model;\n\nclass DefaultConfigProvider implements ConfigProviderInterface\n{\n    \/**\n     * @inheritdoc\n     *\/\n    public function getConfig()\n    {\n        $config = [\n            'name' => 'John Doe',\n            'Email' => 'john@webkul.com',\n            'DOB' => '08\/05\/1990',\n        ];\n\n        return $config;\n    }\n}<\/pre>\n\n\n\n
Example: how to use our custom js provider.<\/strong><\/p>\n\n\n\n
I am going to call our custom phtml file on customer account, you call according to your requirement.<\/p>\n\n\n\n
a)<\/strong> Create Webkul\/Knockout\/view\/frontend\/layout\/knockout_account_index.xml<\/strong><\/p>\n\n\n\n
<?xml version="1.0"?>\n\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n    <update handle="customer_account"\/>\n    <body>\n        <referenceContainer name="content">\n            <block class="Webkul\\Knockout\\Block\\Account" name="customer_account_knockout_test" template="Webkul_Knockout::account\/knockout.phtml" cacheable="false">\n                <arguments>\n                    <argument name="jsLayout" xsi:type="array">\n                        <item name="components" xsi:type="array">\n                            <item name="customcomponent" xsi:type="array">\n                                <item name="component" xsi:type="string">Webkul_Knockout\/js\/custom-component<\/item>\n                            <\/item>\n                        <\/item>\n                    <\/argument>\n                <\/arguments>\n            <\/block>\n        <\/referenceContainer>\n    <\/body>\n<\/page><\/pre>\n\n\n\n
In this xml, i have load out phtml file knockout.phtml<\/strong> with Block Webkul\\Knockout\\Block\\Account<\/strong><\/p>\n\n\n\n
And what about other things in this xml file ? I already explained about it blog: How to Intialize Js Component Using Layout XML in Magento2<\/a> , you can read it.<\/p>\n\n\n\n
b) Ok, now create knockout.phtml<\/strong> and Block Webkul\\Knockout\\Block\\Account<\/strong>.
Phtml file:<\/strong> Webkul\/Knockout\/view\/frontend\/templates\/account\/knockout.phtml<\/strong><\/p>\n\n\n\n
<script>\n    window.customConfig = <?php \/* @escapeNotVerified *\/ echo \\Zend_Json::encode($block->getCustomConfig()); ?>;\n<\/script>\n\n<div id="custom-component" data-bind="scope:'customcomponent'">\n    <!-- ko template: getTemplate() --><!-- \/ko -->\n    <script type="text\/x-magento-init">\n    {\n        "#custom-component": {\n            "Magento_Ui\/js\/core\/app":  <?php \/* @escapeNotVerified *\/ echo $block->getJsLayout();?>\n        }\n    }\n    <\/script>\n<\/div><\/pre>\n\n\n\n
Block File:<\/strong> Webkul\/Knockout\/Block\/Account.php<\/strong><\/p>\n\n\n\n
<?php\n\/**\n * Webkul Software.\n *\n * @category  Webkul\n * @package   Webkul_Knockout\n * @author    Webkul\n * @copyright Webkul Software Private Limited (https:\/\/webkul.com)\n * @license   https:\/\/store.webkul.com\/license.html\n *\/\nnamespace Webkul\\Knockout\\Block;\n\nclass Account extends \\Magento\\Framework\\View\\Element\\Template\n{\n    \/**\n     * @var array\n     *\/\n    protected $jsLayout;\n\n    \/**\n     * @var \\Webkul\\Knockout\\Model\\CustomConfigProvider\n     *\/\n    protected $configProvider;\n\n    \/**\n     * @param \\Magento\\Framework\\View\\Element\\Template\\Context $context\n     * @param array $data\n     *\/\n    public function __construct(\n        \\Magento\\Framework\\View\\Element\\Template\\Context $context,\n        \\Webkul\\Knockout\\Model\\CustomConfigProvider $configProvider,\n        array $data = []\n    ) {\n        parent::__construct($context, $data);\n        $this->jsLayout = isset($data['jsLayout']) && is_array($data['jsLayout']) ? $data['jsLayout'] : [];\n        $this->configProvider = $configProvider;\n    }\n\n    \/**\n     * @return string\n     *\/\n    public function getJsLayout()\n    {\n        return \\Zend_Json::encode($this->jsLayout);\n    }\n\n    public function getCustomConfig()\n    {\n        return $this->configProvider->getConfig();\n    }\n}<\/pre>\n\n\n\n
Now refresh the page, and press F12 find for our window.customConfig<\/strong><\/p>\n\n\n\n
You will see,
\"configproviders\"<\/p>\n\n\n\n
How we can use data from window.customConfig?
Here is an another example.<\/p>\n\n\n\n
As you can see i have loaded js component as well on our knockout.phtml file.<\/p>\n\n\n\n
So let’s create Webkul\/Knockout\/view\/frontend\/web\/js\/custom-component.js<\/strong><\/p>\n\n\n\n
define([\n    'jquery',\n    'uiComponent',\n    'ko',\n    ], function ($, Component, ko) {\n        'use strict';\n        var customData = window.customConfig;\n        return Component.extend({\n            defaults: {\n                template: 'Webkul_Knockout\/knockout-test'\n            },\n\n            initialize: function () {\n                this._super();\n                console.log(customData);\n            },\n        });\n    }\n);<\/pre>\n\n\n\n
Open Console and check, you will see the data as object.
\"console-data\"<\/p>\n\n\n\n
You can have your own custom code in the Webkul\/Knockout\/view\/frontend\/web\/template\/knockout-test.html<\/strong> file. As an example, you can check the following code:<\/p>\n\n\n\n
<div class="component-wrapper">\n    <div data-bind="text: 'Knockout Works'"><\/div>\n<\/div><\/pre>\n\n\n\n
That’s It.<\/p>\n\n\n\n
I hope it will help you to create Js Based Project.<\/p>\n\n\n\n
Thanks.<\/p>\n","protected":false},"excerpt":{"rendered":"
We\u2019ll explore how to Create Custom JS Window ConfigProviders in Magento 2 and learn the simplest way to extend JavaScript configuration data. In Magento 2 all required data saved in window.checkoutConfigso at the time of checkout it can be fetched by js models easily.We can also save our custom required data in window.checkoutConfig providers by […]<\/a><\/p>\n","protected":false},"author":69,"featured_media":66844,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2518,302],"tags":[4235,4234,4233],"class_list":["post-69129","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-knockoutjs","category-magento2","tag-custom-js-component-magento2","tag-js-config-provider-in-magento2","tag-magento2-config-provider"],"yoast_head":"\nHow to create custom Js window configProviders in Magento 2<\/title>\n<meta name=\"description\" content=\"How to create custom Js window configProviders as Magento's window.checkoutConfig provider. In Magento 2 all required data saved in window.checkoutConfig\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/create-custom-js-window-configproviders-magento-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create custom Js window configProviders in Magento 2\" \/>\n<meta property=\"og:description\" content=\"How to create custom Js window configProviders as Magento's window.checkoutConfig provider. In Magento 2 all required data saved in window.checkoutConfig\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/create-custom-js-window-configproviders-magento-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-12-23T08:17:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-11T09:02:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Magneto-Code-Snippet.png\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Mahesh Singh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mahesh Singh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/create-custom-js-window-configproviders-magento-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-custom-js-window-configproviders-magento-2\/\"},\"author\":{\"name\":\"Mahesh Singh\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/53d3b977a0ab5adcf32aef9f97e595bd\"},\"headline\":\"How to create custom Js window configProviders in Magento 2\",\"datePublished\":\"2016-12-23T08:17:12+00:00\",\"dateModified\":\"2025-12-11T09:02:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-custom-js-window-configproviders-magento-2\/\"},\"wordCount\":384,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-custom-js-window-configproviders-magento-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Magneto-Code-Snippet.png\",\"keywords\":[\"Custom Js Component Magento2\",\"Js Config Provider in Magento2\",\"Magento2 Config Provider\"],\"articleSection\":[\"knockoutJs\",\"Magento2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/create-custom-js-window-configproviders-magento-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/create-custom-js-window-configproviders-magento-2\/\",\"url\":\"https:\/\/webkul.com\/blog\/create-custom-js-window-configproviders-magento-2\/\",\"name\":\"How to create custom Js window configProviders in Magento 2\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-custom-js-window-configproviders-magento-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-custom-js-window-configproviders-magento-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Magneto-Code-Snippet.png\",\"datePublished\":\"2016-12-23T08:17:12+00:00\",\"dateModified\":\"2025-12-11T09:02:38+00:00\",\"description\":\"How to create custom Js window configProviders as Magento's window.checkoutConfig provider. In Magento 2 all required data saved in window.checkoutConfig\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-custom-js-window-configproviders-magento-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/create-custom-js-window-configproviders-magento-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/create-custom-js-window-configproviders-magento-2\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Magneto-Code-Snippet.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Magneto-Code-Snippet.png\",\"width\":825,\"height\":260},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/create-custom-js-window-configproviders-magento-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create custom Js window configProviders in Magento 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/53d3b977a0ab5adcf32aef9f97e595bd\",\"name\":\"Mahesh Singh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f4c013ebf7008223382b8a49203e6d354677e8baff0eca373e6e4266efa762da?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f4c013ebf7008223382b8a49203e6d354677e8baff0eca373e6e4266efa762da?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Mahesh Singh\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/mahesh721\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create custom Js window configProviders in Magento 2","description":"How to create custom Js window configProviders as Magento's window.checkoutConfig provider. In Magento 2 all required data saved in window.checkoutConfig","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/create-custom-js-window-configproviders-magento-2\/","og_locale":"en_US","og_type":"article","og_title":"How to create custom Js window configProviders in Magento 2","og_description":"How to create custom Js window configProviders as Magento's window.checkoutConfig provider. In Magento 2 all required data saved in window.checkoutConfig","og_url":"https:\/\/webkul.com\/blog\/create-custom-js-window-configproviders-magento-2\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2016-12-23T08:17:12+00:00","article_modified_time":"2025-12-11T09:02:38+00:00","og_image":[{"width":825,"height":260,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Magneto-Code-Snippet.png","type":"image\/png"}],"author":"Mahesh Singh","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Mahesh Singh","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/create-custom-js-window-configproviders-magento-2\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/create-custom-js-window-configproviders-magento-2\/"},"author":{"name":"Mahesh Singh","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/53d3b977a0ab5adcf32aef9f97e595bd"},"headline":"How to create custom Js window configProviders in Magento 2","datePublished":"2016-12-23T08:17:12+00:00","dateModified":"2025-12-11T09:02:38+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/create-custom-js-window-configproviders-magento-2\/"},"wordCount":384,"commentCount":2,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/create-custom-js-window-configproviders-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Magneto-Code-Snippet.png","keywords":["Custom Js Component Magento2","Js Config Provider in Magento2","Magento2 Config Provider"],"articleSection":["knockoutJs","Magento2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/create-custom-js-window-configproviders-magento-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/create-custom-js-window-configproviders-magento-2\/","url":"https:\/\/webkul.com\/blog\/create-custom-js-window-configproviders-magento-2\/","name":"How to create custom Js window configProviders in Magento 2","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/create-custom-js-window-configproviders-magento-2\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/create-custom-js-window-configproviders-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Magneto-Code-Snippet.png","datePublished":"2016-12-23T08:17:12+00:00","dateModified":"2025-12-11T09:02:38+00:00","description":"How to create custom Js window configProviders as Magento's window.checkoutConfig provider. In Magento 2 all required data saved in window.checkoutConfig","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/create-custom-js-window-configproviders-magento-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/create-custom-js-window-configproviders-magento-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/create-custom-js-window-configproviders-magento-2\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Magneto-Code-Snippet.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Magneto-Code-Snippet.png","width":825,"height":260},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/create-custom-js-window-configproviders-magento-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to create custom Js window configProviders in Magento 2"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/53d3b977a0ab5adcf32aef9f97e595bd","name":"Mahesh Singh","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f4c013ebf7008223382b8a49203e6d354677e8baff0eca373e6e4266efa762da?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f4c013ebf7008223382b8a49203e6d354677e8baff0eca373e6e4266efa762da?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Mahesh Singh"},"url":"https:\/\/webkul.com\/blog\/author\/mahesh721\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/69129","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/69"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=69129"}],"version-history":[{"count":8,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/69129\/revisions"}],"predecessor-version":[{"id":516449,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/69129\/revisions\/516449"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/66844"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=69129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=69129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=69129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}