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

I have prepared some backend modules for you to do some practical work. Please download this book’s GitHub repository from https://github.com/PacktPublishing/Mastering-Adobe-Commerce-Frontend, open the Chapter 4 folder, and add the files located there to the app/code folder in your project files. Once you’ve copied the files, you should see the following file structure:

Figure 4.19 – Module installation

Figure 4.19 – Module installation

Once your file structure looks like this, we need to tell AC about the module. We need to enable it, like this:

php bin/magento module:enable PacktPub_FrontendCourse

Clear the cache after this procedure:

php bin/magento cache:flush

Now, try to access https://app.packt1.test/packtpub.

The URL should work and add two new columns to the page:

Figure 4.20 – Practical exercise

Figure 4.20 – Practical exercise

Here’s a list of exercises for you to tackle based on what you’ve learned in this...