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
    Location
    Bhavnagar, Gujarat, India
    Posts
    1,125
    Thanks
    0
    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: 356
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: https://magecomp.com/blog/create-cus...-js-magento-2/

    View more threads in the same category:


  2. #2

Tags for this Thread

Bookmarks

Posting Permissions

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