Magento 2 knockout JS
Tips & Tutorials

How to write KnockoutJs in Magento 2?

Knockout JS is a Javascript library using MVVM ( Model-View-ViewModel ) pattern to bind data with DOM elements. It is widely used in Magento 2, where implementations often include a ViewModel in javascript and an HTML template bound to the viewmodel.


In this article, we will go through the steps to create a module called Magenest_Feedback, used to collect feedback on customer about products they’ve ordered. We will use KnockoutJS in Magento 2 to :


– Get the feedback template


– Get feedback data to frontend page


– Send and store feedback and update its status


The finished module will look like this:




Initialize module


Let’s skim through the usual steps.


First, we need to create the registation.php and etc/module.xml files:

Registration.php :



Next up, we need to create a table to store the feedback. Create the file Setup/InstallSchema.php:



Create a custom frontend page Customer Page


Step 1: File routes.xml



Step 2: Create a controller



With these files, you can access  http://baseURL/feedback/customer/ with default magento layout and blank content area.



Step 3: Create a link in the Navigation tab on Customer Account Page & Update Customer Page Layout


– Add our custom link in customer’s dashboard layout customer_account.xml


Our new entry is as follow:



– Create the layout for our custom page:



Create the file customer_feedback.phtml. Here we bind a scope called ‘feedback-form’ and declare a component. KnockoutJS will handle this component and display the result on this template



Before we can write the component, we need to write the block for this template, to get product data and pass to the component.


Step 4: File block


Using this block, we get the products customers have bought, and separate between products with and without feedback and return the result to the component:



Step 5: Component


Our component using Magento 2 KnockoutJS to process data:



Template file:



Here’s a breakdown of the component and template file we’ve made:


– First, the component file needs to have a template assigned. This template will be used when we call getTempalte() from .phtml file:


– Our template uses a tabs widget. We initialize this widget after rendering the template, using: data-bind=“afterRender: initTabs” . In our components, we write a function to initialize tabs widget. In summary, to use jQuery widget on the template, we need to use afterRender to ensure the widget is applied after the template is rendered.


– Similarly, we use the modal widget to display the feedback form


– Next, we need to initialize the variables to use in the template:


– Here we define 2 variables: products – to store products the current customer have bought, and product – the current product in focus.


– We also create a function storing required variables and parameters for the component:


– To pass data to the template, we use a foreach loop and if to classify product types ( has feedback or not ).


– Variable products are defined when initializing the component, containing product parameters.


– We use function SubmitReview with ajax request to save feedback.


– The variable product is set to the product in focus, after clicking ‘Write feedback’ on a product.


Step 6: Save feedback to the database



The final touches


CSS styling for our custom page:


Plugin in di.xml to disable guests from visiting our feedback page:




I hope that this tutorial is helpful to you.


You can get the completed module here.


How to write KnockoutJs in Magento 2?
5 (100%) 10 votes
Author: Rosie Phan

Related Posts

Leave a comment

Your email address will not be published. Required fields are marked *

1 × five =

At Magenest, we help our customers thrive by offering advanced solutions and working with excellent business partners.

We’re proud to be one of the top Magento 2 developers with capability in building integration solutions with third party business systems and applications.


Please follow & like us