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)

Fallback system

Let’s understand how the fallback system works in Magento 2. Begin by changing the file name of logo.svg to logo.old.svg in the theme you’ve created. This action will help illustrate the process.

Once you do this, clear the static content by doing either of the following:

  • Remove the pub/static/frontend folder
  • Run the php bin/magento deploy:mode:set developer command

Now, refresh your browser cache, and you will see the default Magento 2 logo instead of the one in your theme:

Figure 3.18 – Default Logo in customized theme

Figure 3.18 – Default Logo in customized theme

So, what is going on here? This is the fallback system in work! When the browser has requested the static file https://app.packt1.test/static/frontend/packt/theme1/en_US/images/logo.svg, it looked where the file can be located in the following way:

  1. Select the theme folder
  2. See the parent theme folder
  3. See the parent’s parent theme folder (if set); this can...