4 (79.71%) 70 votes

How to write a page Using Magento 2 knockout js ?

In this topic, we will create a page to show list customer in magento.

magento 2 knockout js

So we will know how to use the knockout js in magento 2. The first, I will create a module Magestore_Webpos and the page will have the url {domain}/webpos. Maybe you know that you need to create some files:

1 File layout
2 File block
3 File template of block
4 Now we will write the view model in Magento 2 knockout js
5 We will show the content of the page in the template of the knockout

 

  1. File layout:

    webpos_index_index.xml:

 

Note: In this file, you will see:

The file  block: Magestore\Webpos\Block\Customer\Lists

– The file templte: customer/list.phtml

– The view model of knockout js  Magestore_Webpos/js/view/customer/list

– The file template of knockout js: Magestore_Webpos/customer/list

 

  1. File block

    Magestore\Webpos\Block\Customer\Lists :

Note:

it needs to have the function getJsLayout. We will call it in the template file.

 

  1. File template of block:

 

Note:

the scope customer-list” is in the file layout webpos_index_index.xml

 

  1. Now we will write the view model in Magento 2 knockout js:

 

  1. We will show the content of the page in the template of the knockout:

 

 

You can get the example code here : list-customer-knockout-js .

 

Hope you find this Tutorial is helpful. If you want to try Magento 2 Demo before practice, click here.

If you want to try our plugins, check here 

If you want to try our Magento 2 plugins , find here

Please support us for more Magento 2 Tutorials by Experts.

[bctt tweet=”Full steps-to-steps Tutorial on how to create a Page using Magento 2 knockout js. Also with Example code HERE ! ” username=”Magestore”]

Your Magento website needs a powerful Magento ERP for stock control.

DON'T MISS THE CHANCE!

magento erp

Magento 2 Tutorial: How to Rewrite (Custom) Javascript - Magento 2.3
Querying with filtering Indexeddb using library DB.js - Magento 2.3

Leave a Reply

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