{"id":64998,"date":"2016-11-19T06:57:20","date_gmt":"2016-11-19T06:57:20","guid":{"rendered":"http:\/\/webkul.com\/blog\/?p=64998"},"modified":"2024-02-26T04:34:06","modified_gmt":"2024-02-26T04:34:06","slug":"use-knockout-js-custom-template-magento2","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/use-knockout-js-custom-template-magento2\/","title":{"rendered":"How to Use Knockout JS on Custom Template in Magento 2"},"content":{"rendered":"\n<p><strong>Knockout Javascript in Magento 2<\/strong>&#8211; In  this blog, we will learn about Knockout JS integration with <a href=\"https:\/\/store.webkul.com\/Magento-2.html\" target=\"_blank\" rel=\"noreferrer noopener\">Magento 2<\/a>. <\/p>\n\n\n\n<p>Magento 2 (adobe commerce) uses Knockout JS heavily on various front-end component. Cart management is the best example of The Knockout JS implementation.&nbsp;<\/p>\n\n\n\n<p>At the shopping cart there are multiple level of changes are happening. Example&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>price calculation<\/li>\n\n\n\n<li>quantity based price manipulation<\/li>\n\n\n\n<li>coupon management<\/li>\n\n\n\n<li>taxes calculation<\/li>\n\n\n\n<li>and shipping&nbsp; rate calculation<\/li>\n<\/ul>\n\n\n\n<p>All is happening in one single screen.&nbsp; Knockout.js manages all those manipulation using a standard MVVM(model view view-model )concept.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to use Knockout JS on the custom template in Magento 2<\/h3>\n\n\n\n<p>In Magento 2 main chunk of Knockout JS is in use on the checkout page. However, you have no restriction to use knockout JS on the Checkout page only. As a developer, we can Initialize Knockout JS on our custom module&#8217;s template files.<\/p>\n\n\n\n<p><strong>1. Create a template phtml file.<\/strong><\/p>\n\n\n\n<p>File:\/\/ Webkul\/Knockout\/view\/frontend\/templates\/account\/knockout.phtml<br>Create XML file to load this phtml file.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;?xml version=&quot;1.0&quot;?&gt;\n&lt;!--\n\/**\n * Webkul Software.\n *\n * @category  Webkul\n * @package   Webkul_Knockout\n * @author    Webkul\n * @copyright Copyright (c) 2010-2023 Webkul Software Private Limited (https:\/\/webkul.com)\n * @license   https:\/\/store.webkul.com\/license.html\n *\/\n--&gt;\n&lt;page xmlns:xsi=&quot;http:\/\/www.w3.org\/2001\/XMLSchema-instance&quot; xsi:noNamespaceSchemaLocation=&quot;urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd&quot;&gt;\n    &lt;update handle=&quot;customer_account&quot;\/&gt;\n    &lt;body&gt;\n        &lt;referenceContainer name=&quot;content&quot;&gt;\n            &lt;block class=&quot;Magento\\Framework\\View\\Element\\Template&quot; name=&quot;customer_account_knockout_test&quot; template=&quot;Webkul_Knockout::account\/knockout.phtml&quot; cacheable=&quot;false&quot;\/&gt;\n        &lt;\/referenceContainer&gt;\n    &lt;\/body&gt;\n&lt;\/page&gt;<\/pre>\n\n\n\n<p>Now open the phtml file, Webkul\/Knockout\/view\/frontend\/templates\/account\/knockout.phtml to define KO initialization.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;div id=&quot;custom-component&quot; data-bind=&quot;scope:&#039;customcomponent&#039;&quot;&gt;\n    &lt;!-- ko template: getTemplate() --&gt;&lt;!-- \/ko --&gt;\n    &lt;script type=&quot;text\/x-magento-init&quot;&gt;\n    {\n        &quot;#custom-component&quot;: {\n            &quot;Magento_Ui\/js\/core\/app&quot;: {\n               &quot;components&quot;: {\n                    &quot;customcomponent&quot;: {\n                        &quot;component&quot;: &quot;Webkul_Knockout\/js\/custom-component&quot;\n                    }\n                }\n            }\n        }\n    }\n    &lt;\/script&gt;\n&lt;\/div&gt;<\/pre>\n\n\n\n<p>Now take a closer look at above defined code.<br>M2 Initialize Js components by<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;script type=&quot;text\/x-magento-init&quot;&gt;<\/pre>\n\n\n\n<p>When M2 initialize component, it first looks for the component id (which id <strong>#custom-component<\/strong> in our case.).<br>Next you can see <strong>div<\/strong> element has attribute <strong>data-bind=&#8221;scope:&#8217;customcomponent'&#8221;<\/strong> Its shows that all the components initialized will load within this scope. you can find the key <strong>customcomponent<\/strong> with the same name within<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;div id=&quot;custom-component&quot; data-bind=&quot;scope:&#039;customcomponent&#039;&quot;&gt;&lt;\/div&gt;<\/pre>\n\n\n\n<p>Now create component js file which we have defined in our <strong>&#8220;component&#8221;: key<\/strong><\/p>\n\n\n\n<p>File:\/\/ Webkul\/Knockout\/view\/frontend\/web\/js\/custom-component.js<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">define(&#091;&#039;jquery&#039;, &#039;uiComponent&#039;, &#039;ko&#039;], function ($, Component, ko) {\n        &#039;use strict&#039;;\n        return Component.extend({\n        \tdefaults: {\n                template: &#039;Webkul_Knockout\/knockout-test&#039;\n            },\n            initialize: function () {\n                this._super();\n            }\n        });\n    }\n);<\/pre>\n\n\n\n<p>We can see above <strong>View-Model<\/strong> has a dependency, which extends all the KO components. uiCompoent file is Magento_Ui\/js\/lib\/core\/collection.js.<\/p>\n\n\n\n<p>Now Create template file which we have defined in our custom-component.js View-Model.<\/p>\n\n\n\n<p>File:\/\/ Webkul\/Knockout\/view\/frontend\/web\/template\/knockout-test.html<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;div class=&quot;component-wrapper&quot;&gt;\n    &lt;div data-bind=&quot;text: &#039;Knockout Works&#039;&quot;&gt;&lt;\/div&gt;\n&lt;\/div&gt;<\/pre>\n\n\n\n<p>Now clear the cache, run the M2 static-content: deploy command, and hit this phtml template you will see a text <strong>Knockout Works<\/strong>.<\/p>\n\n\n\n<p><strong>Let&#8217;s use some observable data binding<\/strong><\/p>\n\n\n\n<p>Open the Model file which we created before Webkul\/Knockout\/view\/frontend\/web\/js\/custom-component.js<\/p>\n\n\n\n<p>Update it with the below code:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">define(&#091;&#039;jquery&#039;, &#039;uiComponent&#039;, &#039;ko&#039;], function ($, Component, ko) {\n        &#039;use strict&#039;;\n        return Component.extend({\n        \tdefaults: {\n                template: &#039;Webkul_Knockout\/knockout-test&#039;\n            },\n            initialize: function () {\n               this.customerName = ko.observableArray(&#091;]);\n               this.customerData = ko.observable(&#039;&#039;);\n                this._super();\n            },\n\n            addNewCustomer: function () {\n                this.customerName.push({name:this.customerData()});\n                this.customerData(&#039;&#039;);\n            }\n        });\n    }\n);<\/pre>\n\n\n\n<p>Now open html template file Webkul\/Knockout\/view\/frontend\/web\/template\/knockout-test.html<\/p>\n\n\n\n<p>Update it with the below code.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;div class=&quot;component-wrapper&quot;&gt;\n    &lt;div class=&quot;field&quot;&gt;\n        &lt;label class=&quot;label&quot; for=&quot;email&quot;&gt;&lt;span data-bind=&quot;i18n: &#039;New Customer&#039;&quot;&gt;&lt;\/span&gt;&lt;\/label&gt;\n        &lt;div class=&quot;control&quot;&gt;\n            &lt;input name=&quot;customername&quot;\n                   id=&quot;customername&quot;\n                   type=&quot;text&quot;\n                   class=&quot;input-text&quot;\n                   data-bind=&quot;value: customerData&quot;&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;primary&quot;&gt;\n        &lt;button type=&quot;button&quot; class=&quot;action action-login secondary&quot; data-bind=&quot;click: addNewCustomer&quot;&gt;\n            &lt;span data-bind=&quot;i18n: &#039;Save&#039;&quot;&gt;&lt;\/span&gt;\n        &lt;\/button&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=&quot;customer-list&quot; style=&quot;width: 20%;background: gray;margin-top: 10px;&quot; data-bind=&quot;foreach: customerName&quot;&gt;\n    \t&lt;li data-bind=&quot;text: name&quot;&gt;&lt;\/li&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/pre>\n\n\n\n<p>Again refresh cache and check.<\/p>\n\n\n\n<p>Now you will see a text box for Enter Customer Name, and Button. When add a customer it will be listed below.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1015\" height=\"462\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Screenshot.png\" alt=\"KnockoutJS magento 2\" class=\"wp-image-65008\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Screenshot.png 1015w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Screenshot-250x114.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Screenshot-300x137.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Screenshot-768x350.png 768w\" sizes=\"(max-width: 1015px) 100vw, 1015px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>In JS model we use <a href=\"http:\/\/knockoutjs.com\/documentation\/observableArrays.html\">ko.ObservableArray([])<\/a> &amp; <a href=\"http:\/\/knockoutjs.com\/documentation\/observables.html\">ko.obervable()<\/a> , both uses to update UI automatically if they detect changes in the view model.<\/p>\n\n\n\n<p>In our example when you press the save button obervableArray&#8217;s value gets updated and in revert List of Customers gets update.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Knockout Javascript in Magento 2&#8211; In this blog, we will learn about Knockout JS integration with Magento 2. Magento 2 (adobe commerce) uses Knockout JS heavily on various front-end component. Cart management is the best example of The Knockout JS implementation.&nbsp; At the shopping cart there are multiple level of changes are happening. Example&nbsp; All <a href=\"https:\/\/webkul.com\/blog\/use-knockout-js-custom-template-magento2\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":69,"featured_media":61510,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[302],"tags":[4029,4028,4027],"class_list":["post-64998","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento2","tag-intitalize-knockout-js-in-magento2","tag-knockout-js","tag-magento2-knockout"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Use KnockoutJS in Magento 2<\/title>\n<meta name=\"description\" content=\"In Magento 2 main chunk of Knockout JS is used at checkout page. You are not bound to use knockout JS on Checkout page only.\" \/>\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\/use-knockout-js-custom-template-magento2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use KnockoutJS in Magento 2\" \/>\n<meta property=\"og:description\" content=\"In Magento 2 main chunk of Knockout JS is used at checkout page. You are not bound to use knockout JS on Checkout page only.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/use-knockout-js-custom-template-magento2\/\" \/>\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-11-19T06:57:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-26T04:34:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/10\/Magneto-Code-Snippet-1.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\/use-knockout-js-custom-template-magento2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/use-knockout-js-custom-template-magento2\/\"},\"author\":{\"name\":\"Mahesh Singh\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/53d3b977a0ab5adcf32aef9f97e595bd\"},\"headline\":\"How to Use Knockout JS on Custom Template in Magento 2\",\"datePublished\":\"2016-11-19T06:57:20+00:00\",\"dateModified\":\"2024-02-26T04:34:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/use-knockout-js-custom-template-magento2\/\"},\"wordCount\":466,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/use-knockout-js-custom-template-magento2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/10\/Magneto-Code-Snippet-1.png\",\"keywords\":[\"Intitalize Knockout Js in Magento2\",\"Knockout Js\",\"Magento2 Knockout\"],\"articleSection\":[\"Magento2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/use-knockout-js-custom-template-magento2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/use-knockout-js-custom-template-magento2\/\",\"url\":\"https:\/\/webkul.com\/blog\/use-knockout-js-custom-template-magento2\/\",\"name\":\"How to Use KnockoutJS in Magento 2\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/use-knockout-js-custom-template-magento2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/use-knockout-js-custom-template-magento2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/10\/Magneto-Code-Snippet-1.png\",\"datePublished\":\"2016-11-19T06:57:20+00:00\",\"dateModified\":\"2024-02-26T04:34:06+00:00\",\"description\":\"In Magento 2 main chunk of Knockout JS is used at checkout page. You are not bound to use knockout JS on Checkout page only.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/use-knockout-js-custom-template-magento2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/use-knockout-js-custom-template-magento2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/use-knockout-js-custom-template-magento2\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/10\/Magneto-Code-Snippet-1.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/10\/Magneto-Code-Snippet-1.png\",\"width\":825,\"height\":260,\"caption\":\"Ui Component Form\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/use-knockout-js-custom-template-magento2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Use Knockout JS on Custom Template 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 Use KnockoutJS in Magento 2","description":"In Magento 2 main chunk of Knockout JS is used at checkout page. You are not bound to use knockout JS on Checkout page only.","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\/use-knockout-js-custom-template-magento2\/","og_locale":"en_US","og_type":"article","og_title":"How to Use KnockoutJS in Magento 2","og_description":"In Magento 2 main chunk of Knockout JS is used at checkout page. You are not bound to use knockout JS on Checkout page only.","og_url":"https:\/\/webkul.com\/blog\/use-knockout-js-custom-template-magento2\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2016-11-19T06:57:20+00:00","article_modified_time":"2024-02-26T04:34:06+00:00","og_image":[{"width":825,"height":260,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/10\/Magneto-Code-Snippet-1.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\/use-knockout-js-custom-template-magento2\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/use-knockout-js-custom-template-magento2\/"},"author":{"name":"Mahesh Singh","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/53d3b977a0ab5adcf32aef9f97e595bd"},"headline":"How to Use Knockout JS on Custom Template in Magento 2","datePublished":"2016-11-19T06:57:20+00:00","dateModified":"2024-02-26T04:34:06+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/use-knockout-js-custom-template-magento2\/"},"wordCount":466,"commentCount":3,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/use-knockout-js-custom-template-magento2\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/10\/Magneto-Code-Snippet-1.png","keywords":["Intitalize Knockout Js in Magento2","Knockout Js","Magento2 Knockout"],"articleSection":["Magento2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/use-knockout-js-custom-template-magento2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/use-knockout-js-custom-template-magento2\/","url":"https:\/\/webkul.com\/blog\/use-knockout-js-custom-template-magento2\/","name":"How to Use KnockoutJS in Magento 2","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/use-knockout-js-custom-template-magento2\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/use-knockout-js-custom-template-magento2\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/10\/Magneto-Code-Snippet-1.png","datePublished":"2016-11-19T06:57:20+00:00","dateModified":"2024-02-26T04:34:06+00:00","description":"In Magento 2 main chunk of Knockout JS is used at checkout page. You are not bound to use knockout JS on Checkout page only.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/use-knockout-js-custom-template-magento2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/use-knockout-js-custom-template-magento2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/use-knockout-js-custom-template-magento2\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/10\/Magneto-Code-Snippet-1.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/10\/Magneto-Code-Snippet-1.png","width":825,"height":260,"caption":"Ui Component Form"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/use-knockout-js-custom-template-magento2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Use Knockout JS on Custom Template 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\/64998","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=64998"}],"version-history":[{"count":21,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/64998\/revisions"}],"predecessor-version":[{"id":424304,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/64998\/revisions\/424304"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/61510"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=64998"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=64998"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=64998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}