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. Change the template of the customer registration page to two columns and move the entire registration form to the left column, placing a random block with a template inside the right column with an image inside it.
  2. Change the main page header (below the dark gray bar) into a three-column grid and make the following changes:
    1. Move the search bar to the left column
    2. Move the logo to the middle column
    3. Move the “sign in” element into the right column

    It should look like this:

Gray bar

Search block

Logo block

Sign in link block

Assign each block a new template in your theme.

  1. By using Layout XML, move the newsletter sign up block above the footer links and assign it a new template inside your theme directory.
  2. Remove...