Knockout.js and UI Components

Setting sail on the last step of our voyage in the ocean of JavaScript (JS), we now delve into the deep waters of advanced frontend development in Adobe Commerce (AC). Just as the ocean has its mysteries and hidden treasures below the surface, Adobe Commerce frontend development includes sophisticated and powerful tools that can vastly improve user experiences when properly harnessed. This chapter introduces one such treasure trove — the intricate world of user interface (UI) components, the KnockoutJS framework, and private content.

From this chapter, you’ll gain a clear understanding of Knockout.js, its role, and its significance in the Adobe Commerce ecosystem. With this knowledge, you’ll be better equipped to venture into the creation of UI components, the modular units that allow you to construct interactive user interfaces with ease. You’ll learn how to integrate these components seamlessly within the .phtml templates...

Technical requirements

For this chapter, you can find hands-on exercises, solutions, and the provided code within the Chapter 10 folder in the GitHub repository at https://github.com/PacktPublishing/Mastering-Adobe-Commerce-Frontend.

Before we dive into the exciting world of Knockout.js and UI components in Adobe Commerce, there are a few things you will need to have a good handle on. This is just to make sure you can follow along easily and get the most out of what we are going to explore together in this chapter. Let us go through them:

• XML layouts: If you have followed and completed all practical exercises from Chapter 5 and Chapter 6, you should be fine. You should know how to inject new blocks into page layouts by using XML. You also have to be proficient with assigning phtml (template) to blocks and rendering them on the page.
• Different HTTP request types and the way data is passed in these request types: Understanding the difference between GET, POST, PUT, and...

Introduction to Knockout.js

Learning Knockout.js is an exciting part of your journey in frontend development. Even though its last update was in 2019, Knockout.js holds a special place in the history of web development. Notably, when Adobe Commerce developers were building the Magento 2 Open Source platform, they chose Knockout.js as their go-to library for creating dynamic user interfaces. This choice highlights the library’s strengths and its role in shaping modern web experiences.

The main source of your knowledge about Knockout.js is the official website, https://knockoutjs.com/, but, as you already know, we will learn this by doing it on the next few pages.

Let’s begin by familiarizing ourselves with some essential terms and concepts of Knockout.js. These definitions are crucial for understanding the terminology we will frequently use throughout this chapter. By grasping these key elements, you will have a clearer understanding of Knockout.js, ensuring you...

Creating UI components

Building upon this foundational knowledge, our next focus shifts toward another pivotal aspect of Adobe Commerce—UI components. They encapsulate complex backend processes into manageable frontend interfaces, ensuring both robustness and elegance in user interaction. As we dive into this section, we’ll uncover how UI components play a transformative role in shaping the Adobe Commerce experience.

The truth is, everything we did so far in this chapter was actually related to UI components, but we haven’t fed the modules any data except the one we defined in our product calculator model.

What I’ve shown you so far represents the UI components that are using Knockout.js templates, and the components are in fact RequireJS modules.

What I’m about to explain next is heavily used in the Admin Panel interface and is hardly used for the frontend. What you’ve learned so far will make you a master of frontend UI components...

Working with private content

It is time to travel to the last sea in our JavaScript voyage: private content. Let me start with a simple explanation of what it actually is and why we need it. As you remember from the previous chapters, one of the caches in the platform is full page cache. It means that the entire HTML content rendered by the framework is being computed and persisted. This means that the HTML content of the page everyone is visiting is the same. In an e-commerce platform, we need to show unique content, such as a shopping cart or a wishlist, to each visitor browsing the page.

That is why a mechanism was developed, and it was named private content.

Private content refers to content that is specifically tailored for individual users. It is user-specific and is not shared between different online customers. Adobe Commerce uses various mechanisms, such as customer data sections and browser local storage, to manage and deliver this private content without needing to...

Summary

In this chapter, we went further into the world of Adobe Commerce frontend development. The following list includes the topics we covered:

• Knockout.js: We saw how this tool can make web pages interactive. It’s a big player in Adobe Commerce, and now you should be ready to use it to create great UI components for better web pages.
• UI components: We looked at how to create and use these to improve the way websites look and feel. They’re the building blocks you can use to shape cool user experiences.
• Private content: We talked about how to show specific content to certain users and why that’s important. We also learned why it’s essential to do this the right way to keep our websites running fast.

Remember the key lesson: always use RequireJS modules when adding JavaScript. Taking shortcuts, such as writing custom JavaScript on your own, can cause problems.

After our journey through these ten chapters, you should now feel much...

Practical exercises

1. Add local storage to retrieve and store the products added and removed in our product calculator example from this chapter.
2. Overwrite a template used for shipping method rendering in the checkout process in your local theme. Do it via the checkout page configuration handle.
3. Completing the following basic Knockout.js practice tasks:
   1. On any given page, add a template with an input field.
   2. Bind the text to the Knockout.js observable.
   3. As the user enters data into the input field, show the reverse of that text below the field.
4. Dynamic UI component, quick view: On a product listing page, add a button titled Quick View that will open a popup/modal window that will display the product name and the product price loaded from the selected product grid item.