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)

Templates and blocks

Before we dive into the template files, it’s crucial to understand the relationship between blocks and these files. This is primarily because most blocks utilize template files. Recalling our previous discussion on the importance of practice and familiarity, let’s first tackle the blocks that are linked with templates. Afterward, I’ll shed light on those blocks that do not use templates at the close of this section.

In all the Layout XML files you’ve seen and browsed so far in your local environment, you can see that almost all <block> nodes (layout instructions) have an additional attribute class defined next to them.

This class attribute specifies the PHP class that the block node is associated with. This class typically contains the methods (functions) that the block uses to fetch, manipulate, and render data.

Let’s take a look at how the customer login form template is defined in the XML files:

<block...