Magento Expert Forum - Improve your Magento experience

Results 1 to 2 of 2

How to create Custom UI Component using knockout.js in Magento 2

  1. #1
    Junior Member
    Join Date
    Jun 2016
    Bhavnagar, Gujarat, India
    Thanked 2 Times in 2 Posts

    Post How to create Custom UI Component using knockout.js in Magento 2

    Hello, Magento folks,

    Last time, we talked about how you can remove disabled products from the cart page in Magento 2. Today we are going to learn about how to create custom UI components using knockout.js in Magento 2.

    Name:  How-to-create-Custom-UI-Component-using-knockoutjs-in-Magento-2.png
Views: 51
Size:  98.8 KB

    Knockout or KO is a library of JavaScript files. It is mostly used in the frontend part of the Magento 2 especially in checkout pages. With the introduction of this library, it has been made possible to create responsive frontend components like date picker, popup, and other UI components.

    UI components are a large and complex topic in Magento 2. They are used to create elements like tables, buttons, tabs, dialogs, and more. Let me be more specific, a UI component is used to implement a part of the MVVM model. For today, I will let you know how we can create a custom UI Component template with the help of codes.

    First, let’s look at the Flow:

    Step 1: We will create one PHTML file

    Step 2: Create custom component over there using “Magento_UI/js/core/app”

    Step 3: Register New Component within Components

    Step 4: Call out custom component template file and pass the variable.

    Step 5: In js file, we will put the KO library for knockout js.

    Step 6: Return function is compulsory, so we put it and put our logic out there

    Step 7: Now, data will bind with our HTML tag with the help of the “data-bind” attribute.

    Let us see an example.

    1. First, create PHTML file at the below path,

    app\code\Vendor\Extension\view\frontend\templates\ uicomponent.phtml

    for more:

    View more threads in the same category:

  2. #2
    Junior Member kajal's Avatar
    Join Date
    Sep 2014
    Thanked 16 Times in 16 Posts


    Hi Friends,
    Thanks for sharing valuable info.

Tags for this Thread


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts