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:

 

Conclusion

 

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.

Categories

Please follow & like us

Facebook
Facebook
Google+
Google+
https://store.magenest.com/blog/write-knockoutjs-magento-2">
YouTube
YouTube