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)

JavaScript customization

Customizing AC JavaScript without breaking its native functionality requires a more careful approach and can be done in multiple ways. I will describe each approach and provide some examples to give you a clear understanding of this process. Now, before I jump into the customization process, I would like to introduce and clarify the terminology used in the AC framework and where the modules are placed. AC core modules use three types of modules (returned by the RequireJS factory method):

  • functions, which are also called actions, and are placed under the web/js/actions folder in the module-related area (frontend/backend)
  • objects, which are used as models and are placed under the web/js/models folder in the module-related area (frontend/backend)
  • uiComponents, which are called also views and are placed under the web/js/view folder inside module related area

Overriding a file

AC uses RequireJS for JavaScript file loading and dependencies...