Mastering Adobe Commerce Frontend: Build optimized, user-centric e-commerce sites with tailored theme design and enhanced interactivity

A comprehensive guide to Adobe Commerce storefront development covering theme creation, customization, JavaScript usage, and optimization techniques for optimal customer satisfaction

Key Features

• Learn techniques for customizing templates and layouts for an optimal user experience
• Use the command-line interface for efficient and streamlined theme development and deployment
• Implement best practices for using JavaScript and frontend optimization techniques for improved performance and customer satisfaction
• Purchase of the print or Kindle book includes a free PDF eBook

Book Description

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, unlock the secrets of frontend optimization, and explore the HYVA to enrich user experiences.

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.

What you will learn

• Set up your own Dockerized environment in the Adobe Commerce platform
• Customize page structure using Layout XML, templates, and a fallback system
• Build and personalize system emails to match website themes
• Work with various JavaScript frameworks and libraries in the project
• Create and manage content using the Adobe Commerce CMS system
• Discover how HYVA was a game changer for many frontend developers
• Validate your solutions with the practical examples provided

Who this book is for

The book is ideal for storefront developers proficient in frontend technologies such as HTML, CSS, and JavaScript, aiming to broaden their knowledge of Adobe Commerce and Magento Open Source applications. If you’ve encountered challenges with frontend development for Adobe Commerce and struggled to find solutions online, this book is tailored to assist you.

Table of Contents

1. Setting Up the Local Environment
2. Installing the Magento/Adobe Commerce Application
3. Introduction to Adobe Commerce Theming
4. The Layout System
5. Working with Templates
6. Styling an Adobe Commerce Theme
7. Customizing Emails
8. Introduction to JavaScript Libraries and Frameworks
9. RequireJS and jQuery
10. Knockout.JS and UI Components
11. Commonly Used Libraries Bundled with Adobe Commerce
12. Storefront-Related Configuration in the Admin Panel
13. Working with Magento CMS
14. Frontend Optimization Techniques
15. Common Tools That Help with Local Development
16. Solutions to Practical Exercises