Book Image

Mastering Adobe Commerce Frontend

By : Jakub Winkler
Book Image

Mastering Adobe Commerce Frontend

By: Jakub Winkler

Overview of this book

Navigating the frontend realm of the Adobe Commerce platform can often feel like a labyrinth, given its multifaceted systems and intricate layering. This book demystifies Adobe Commerce frontend development, guiding you through its paths with clarity and precision. You'll learn how to set up your local environment, paving the way for a smooth development experience and navigate the platform's theming ecosystem, exploring layout XML systems and the power of templates. As you progress through the book, you'll leverage an array of JavaScript libraries and frameworks that Adobe Commerce boasts of, with special emphasis on RequireJS, jQuery, Knockout.JS, and UI Components. Additionally, you'll gain an understanding of the intricacies of Adobe Commerce CMS, explore frontend-related configurations in the admin panel, and unlock the secrets of frontend optimization. Practical exercises provided in the book will enable you to create top-notch Adobe Commerce sites that are functional, optimized, user-centric, and a step ahead in the ever-evolving frontend landscape.
Table of Contents (18 chapters)

Blocks, containers, and updates

I’ve already explained the basics of container and block nodes. As they are the most advanced, I’ve decided to give them a separate section in this chapter. So, let’s dig into these XML instructions and how they are managed and used in the merging and rendering process.

  • container: This XML node, an instruction, is used to keep and arrange other parts of the website layout, such as blocks or even other containers. While it doesn’t directly display content like blocks do, you can use it to wrap those parts in a simple HTML tag to organize them better on the page. What is worth remembering is that an empty container node is not rendered on the frontend.
  • To identify a unique container node, two attributes are used:
    • name: By default, this is not a required attribute. It is a unique identifier and must be unique for each page. If you don’t assign a name to it, the name will be auto-generated. In practice, when...