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)

Practical exercises

  1. Create two new CMS blocks with some random HTML content. Once this is done, create two containers on a product page below the product descriptions and inject those CMS blocks into those containers using Layout XML.
  2. Remove the search block on a 404 page using Layout XML.
  3. By using Widgets, place a link to an “about us” page above the page footer using Layout Update on the category pages without filters.
  4. Create a new CMS page with three columns (use the three-column layout):
    1. Place a recently viewed product list Widget in the left column.
    2. Place a recently compared product list Widget in the right column.
  5. By using Layout XML, add a new Product tab on a product page and place a CMS block inside it with a YouTube video. You will have to create a YouTube API key.
  6. By using Page Builder, create a CMS page that will display a new product collection.
  7. By using Layout XML, add a new CSS file on the “enable-cookies” CMS page...