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)

Working with template files

The time for theory is over; it’s time for practice. The first step for us, when working with templates, is to make sure we are in the developer mode and that we’ve disabled the block_html cache.

To do this, we need to run the following commands:

php bin/magento cache:disable block_html full_page
php bin/magento deploy:mode:set developer

Important note

Some, but not all, blocks can use the AC caching system. The caching of processed template files, which is in HTML code associated with blocks, is simply called block_html cache, for short.

Let’s start with the question you might have asked yourself a moment ago: So how can I change the template file if it is assigned in PHP code?

It is very simple, and there are two ways we can do it:

  1. Copy the template file from the Module directory area (frontend) into our theme directory, keeping the module name and template path the same as they are in the module. In this case...