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)

Introduction to layout XML files

XML files have had a main role in AC since Magento 1. Files related to the layout system, known as layout XML files, determine the structure of each rendered page, arrangement of blocks, containers, and even UiComponents (in AC; this was not present in Magento 1).

You must understand that the Magento 2 framework is modular and highly flexible, and layout XML files are responsible for how the final page HTML output is composed. To make things even more interesting, in AC, each module can have its own layout files, which can modify the shape of any page in the entire framework.

There are hundreds of layout files in AC, so let’s start with a basic explanation of the main file types of the layout XML system. We’ll look at this from a storefront perspective. I will share all the details on this in the Layout and pages section of this chapter.

For now, let’s see what types of files are used to determine a page structure:

    ...