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

Mastering Adobe Commerce Frontend

Copyright © 2024 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Aaron Tanna

Associate Publishing Product Manager: Uzma Sheerin

Senior Editor: Rounak Kulkarni

Technical Editor: Jubit Pincy

Copy Editor: Safis Editing

Associate Project Manager: Deeksha Thakkar

Indexer: Pratik Shirodkar

Production Designer: Prashant Ghare

Senior Developer Relations Marketing Executive: Deepak Kumar

Business Development Executive: Mayank Singh

First published: March 2024

Production reference: 1180324

Published by Packt Publishing Ltd.

Grosvenor House

11 St Paul’s Square

Birmingham

B3 1RB, UK.

ISBN 978-1-83763-707-2

www.packtpub.com

Contributors

About the author

Jakub Winkler, the Founder and CEO of Q-Solutions Studio, is an expert in Adobe Commerce development since 2015, and an active member of the Magento community. With a decade of experience in eCommerce theme development, he has crafted solutions to enhance developers’ workflows. Jakub is dedicated to training Magento development teams, drawing from his profound insights into merchants’ expectations. His approach ensures that developers adhere to best practices when working with the Adobe Commerce platform, thus fostering excellence in their endeavors.

About the reviewer

Bartosz Gorski is a Senior Commerce Technical Architect at Adobe, a Magento Community Maintainer, and a core code contributor. He embarked on his Magento/Adobe Commerce journey in 2012 and has since acquired all Magento 1 and Adobe Commerce certifications. Currently, he contributes as a Subject Matter Expert on Adobe Commerce certification exam workshops, where he aids in the creation and adjustment of these exams. In his professional endeavors, he focuses on maintaining good architecture in his projects to ensure cleanliness, ease of maintenance, and optimization. He firmly believes that the first step to achieving these goals is to establish automated code quality checks, uphold good quality standards, and implement proper testing strategies for the implementation team.

Outside of work, Bartosz is a devoted husband, a father of one, and a dog person - three and counting!

I would like to thank my wife for her love and support, especially on those days on which work-related activities take long evening hours, leaving me with less time for everything else.

Table of Contents

Preface

1

Setting Up the Local Environment

Technical requirements

Choosing the best operating system

Installing the required applications and services

Preparing the technology stack for AC

Installing WSL 2 on Windows

Virtualization with Docker

Installing Docker and the Docker Compose plugin

Installing Docker on Windows

Installing Docker on macOS

Installing Docker on Linux

Wrapping things up

Preparing a Docker manager

What is Warden?

Configuring DNS resolution

SSL configuration

Alternatives to a functional local environment

Summary

2

Installing the Magento/Adobe Commerce Application

Technical requirements

Getting to know the platform

Getting a copy of Adobe Commerce/Magento Open Source

Creating an Adobe ID and getting Composer keys

Installing Adobe Commerce – preparing Docker

Installing Adobe Commerce using the CLI

Installing sample data – let’s get some products!

Summary

Practical exercises

3

Introduction to Adobe Commerce Theming

Creating new themes

Adding a new theme

Caching system

Cache types

Working with cache

Basic CLI commands

Deploy commands

Admin commands

Indexing commands

Setup commands

Fallback system

CSS file generation

Grunt

Summary

Practical exercises

4

The Layout System

Technical requirements

Basic terms related to layout XML

Introduction to layout XML files

Layouts and pages

The layout merging process

Determining page layout

Layout XML instructions

Page configuration (layout handles)

Blocks, containers, and updates

Layout overrides

Summary

Practical exercises

5

Working with Templates

Technical requirements

What are templates, and how many templates are there?

What are PHTML files?

PHTML files – A double-edged sword?

Template file locations

Finding the template file

Templates and blocks

Working with template files

Getting arguments from Layout XML files into blocks

Summary

Practical exercises

6

Styling an Adobe Commerce Theme

Technical requirements

Location and compilation of CSS files

A quick introduction to LESS files

Nested syntax

Variables

Mixins

Modularity

Functions and operations

Compilation

CSS compilation types

Static content signing

Server-side compilation

Client-side compilation

Working with themes

Extending parent styles

Overriding parent styles

Summary

Practical exercises

7

Customizing Emails

Technical requirements

Email customization process

Installing the required tools to work with emails

Email template structure

Managing email templates in the Admin Panel

Creating new email templates

Conditional content rendering

Customizing Email CSS

Summary

Practical exercises

8

Introduction to JavaScript Libraries and Frameworks

Technical requirements

Exploring the main JavaScript libraries/frameworks/modules embedded in the platform

RequireJS

Knockout JS

jQuery

Underscore JS

The location of JavaScript resources

The challenges associated with JavaScript libraries

Summary

9

RequireJS and jQuery

Technical requirements

RequireJS and AC

The shortest RequireJS course on the planet

JavaScript initialization in template files

Wrapping up

jQuery

Using jQuery inside your scripts

jQuery UI and jQuery Widgets

JavaScript customization

Overriding a file

Extending modules with mixins

Summary

Practical exercises

10

Knockout.js and UI Components

Technical requirements

Introduction to Knockout.js

Using Knockout.js in Adobe Commerce

Knockout.js bindings

Creating UI components

Working with private content

Browser local storage

Customer data sections

Private content versions

Private content versus blocks

Summary

Practical exercises

11

Commonly Used Libraries Bundled with Adobe Commerce

Technical requirements

Introduction to bundled libraries

List of commonly used libraries

Accordion widgets

Tabs widget

Prompt widget

List of all the widgets embedded into the platform

Summary

Practical exercises

12

Storefront-Related Configuration in the Admin Panel

Exploring the Design configuration section

Scheduling theme changes

The AC Content Staging feature

Category-level customizations

Category-related settings in the Admin Panel

Category pages and layout XML

Product-level customizations

Product-related storefront configuration

Product pages and layout XML

Summary

Practical exercises

13

Working with Magento CMS

A quick introduction to Adobe Commerce CMS

Creating and working with CMS blocks

Adding new Blocks

Displaying CMS blocks on the storefront

Injecting CMS blocks via Layout XML

Working with widgets

Creating and working with CMS pages

Adding new pages

Working with CMS pages via Layout XML

CMS directives

Adobe Commerce Page Builder

Page Builder templates

Summary

Practical exercises

14

Frontend Optimization Techniques

Technical requirements

An introduction to frontend optimization

Google Lighthouse

Google Core Web Vitals (CWVs)

Google PageSpeed Insights (PSI)

Indexes and asynchronous processing

The minification, merging, and bundling of CSS, JS, and HTML

CSS merging and minification

JS merging, minification, and bundling

Magepack

Working with Magepack

Fastly

Summary

Practical exercises

15

Common Tools that Help with Local Development

Why are third-party tools important?

ESLint – JavaScript coding standards

Community tools for better development

Mage2.TV Cache Cleaner

Magento Chrome Toolbar

Summary

Index

Other Books You May Enjoy

Preface

In today’s fast-paced e-commerce landscape, crafting exceptional user experiences is paramount. Mastering Adobe Commerce Frontend serves as your compass in navigating the intricate world of Adobe Commerce frontend development, empowering you to create sites that stand out amidst the digital noise.

From setting up your local environment for seamless development to mastering the platform’s theming ecosystem, each chapter is meticulously crafted to provide clarity and actionable insights. Through practical exercises and in-depth discussions, you’ll unlock the full potential of Adobe Commerce’s frontend capabilities.

Embark on this journey with us as we delve into customizing templates, leveraging JavaScript frameworks, and optimizing frontend performance. Whether you’re a seasoned developer or a newcomer to Adobe Commerce, this book equips you with the tools and knowledge needed to build high-performance e-commerce sites that delight customers and drive conversions.

Prepare to elevate your Adobe Commerce frontend skills and embark on a transformative journey towards mastering the art of creating exceptional online shopping experiences.

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.

What this book covers

Chapter 1

, Setting Up the Local Environment, guides readers through the process of setting up their local environment on macOS, Windows, or Linux. This chapter covers the key steps required to install and configure your system to run the Adobe Commerce (AC) application on Docker-based environments

Chapter 2

, Installing the Magento/Adobe Commerce Application, shows how to apply the knowledge from the previous chapter to successfully install Adobe Commerce or its open source alternative, Magento Open Source, as a prerequisite for the frontend development course in subsequent chapters.

Chapter 3

, Introduction to Adobe Commerce Theming, provides valuable insights and practical tips for creating custom themes that meet business demands. Readers will learn what types of themes Adobe Commerce can work with, what’s available on the market, and how to start creating their own custom theme based on a theme that’s shipped with the base Magento installation.

Chapter 4

, The Layout System, explores the Magento 2 layout system in detail and covers the basic concepts behind it [in short, layout eXtensible Markup Language (XML)], including its structure and the role of the layout files. We will examine the various types of blocks and containers that make up the layout system, and how they can be used to build custom pages.

Chapter 5

, Working with Templates, shows how to provide the HTML content for page elements and gain a final understanding of the page rendering process, the server-side part, and templates.

Chapter 6

, Styling an Adobe Commerce Theme, furthers the learnings from Chapter 3

regarding the CSS compilation process by using Grunt. It covers key topics of CSS and LESS files.

Chapter 7

, Customizing Emails, teaches how to customize emails sent by the platform since they’re an essential part of a custom theme. It also reiterates why using Warden (Docker manager) for our local environment was a great choice.

Chapter 8

, Introduction to JavaScript Libraries and Frameworks, introduces readers to JavaScript in Adobe Commerce. They will learn what libraries and frameworks are used and where to look for existing JavaScript files.

Chapter 9

, RequireJS and jQuery, explores the most important JavaScript library used by Adobe Commerce – RequireJS. Readers will learn about its features, how to create RequireJS-powered scripts, and finally how to utilize the power of jQuery in those scripts.

Chapter 10

, Knockout.JS and UI Components, delves into advanced JavaScript topics – UI Components and Private content, both of them powered by the Knockout.js framework. Readers will get to know how to create UI Components from scratch and how to use them in .phtml templates they already learned to create in previous chapters.

Chapter 11

, Commonly Used Libraries Bundled with Adobe Commerce, presents a list of commonly used JS libraries bundled with Adobe Commerce / Magento. Every library will have a brief explanation of what it does and how to use it.

Chapter 12

, Storefront-Related Configuration in the Admin Panel, guides readers through all configuration options available in the Admin Panel that is relevant to Adobe Commerce / Magento frontend developers for them to know that there are frontend-related things that can be changed without having to create customizations in their theme directories.

Chapter 13

, Working with Magento CMS, teaches how to work with the Content Management System available in Adobe Commerce. Readers will understand how to create new pages and fill them with content. They will also learn what are blocks, how to utilize them on pages, and how to work with the Page Builder editor to create content.

Chapter 14

, Frontend Optimization Techniques, covers the basic techniques about how to perform frontend optimization. Readers will learn what to do and what to avoid to speed up the frontend.

Chapter 15

, Common Tools That Help with Local Development, explores third-party tools that are commonly used by the Adobe Commerce community to help with local development.

To get the most out of this book

You will need to have an understanding of frontend technologies such as HTML, CSS, and JavaScript.

If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book’s GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

Download the example code files

You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/Mastering-Adobe-Commerce-Frontend

. If there’s an update to the code, it will be updated in the GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/

. Check them out!

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: The related XML file is default.xml.

A block of code is set as follows:

        css/my.css rel=stylesheet type=text/css  />

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

.round-icon-yellow {

  .round-icon(

@undefined-color

);

}

Any command-line input or output is written as follows:

Running less:blank (less) task

>> pub/static/frontend/Magento/blank/en_US/PacktPub_FrontendCourse/css/source/_module.less: [L37:C14] variable @undefined-color is undefined

Warning: Error compiling pub/static/frontend/Magento/blank/en_US/css/styles-m.less Use --force to continue.

Bold: Indicates a new term, an important word, or words that you see onscreen. For instance, words in menus or dialog boxes appear in bold. Here is an example: Go to your IDE (PhpStorm | Visual Studio Code) and open the vendor/magento/module-theme/view/frontend/page_layout folder.

Tips or important notes

Appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, email us at [email protected]

and mention the book title in the subject of your message.

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata

and fill in the form.

Share Your Thoughts

Once you’ve read Mastering Adobe Commerce Frontend, we’d love to hear your thoughts! Please click here to go straight to the Amazon review page

for this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we’re delivering excellent quality content.

Download a free PDF copy of this book

Thanks for purchasing this book!

Do you like to read on the go but are unable to carry your print books everywhere?

Is your eBook purchase not compatible with the device of your choice?

Don’t worry, now with every Packt book you get a DRM-free PDF version of that book at no cost.

Read anywhere, any place, on any device. Search, copy, and paste code from your favorite technical books directly into your application.

The perks don’t stop there, you can get exclusive access to discounts, newsletters, and great free content in your inbox daily

Follow these simple steps to get the benefits:

Scan the QR code or visit the link below

https://packt.link/free-ebook/978-1-83763-707-2

Submit your proof of purchase

That’s it! We’ll send your free PDF and other benefits to your email directly

1

Setting Up the Local Environment

In this chapter, I will guide you through the process of setting up your local environment, regardless of whether you are working on macOS, Windows, or Linux. We will cover the key steps required to install and configure your system to run the Adobe Commerce (AC) application on Docker-based environments.

Whether you are an experienced developer or a newcomer to the field, this chapter will equip you with the most efficient tools to work with AC.

Note

You can download a complete working environment for VirtualBox. It was created in the same way as it is explained in this chapter.

Now, before we start our adventure with AC frontend development, there are a few things we have to learn about and focus on. Feel free to skip this chapter and the next one if you are familiar with environments, Docker containers, and so on.

In the best scenario, you are given everything on a silver platter and all you need to do is start the environment with a few simple instructions.

This is your first step and is where our AC theme development journey begins, so let’s start.

You’re probably wondering or thinking, "Why do I need to focus on/know these things about environment setup?" and you are absolutely right to ask these questions. If you have worked on enterprise-class projects in larger teams before, you might be used to a situation where a complete fully working environment is given to you with a set of instructions on how to set it up – a silver platter, if you will. I truly wish that all AC projects you will be working on in the future will be like that, but as we all know, the world is not that perfect. Knowing this will also make you a great asset to the team you will be working with.

What if you are a freelancer and someone asks you to take over AC project theme development and you’re all on your own? Wouldn’t it be nice to be able to show some skills, win the contract, and be able to do everything by yourself? It’s the little things that matter the most.

So, heads up – our road (one of many) to set up the local environment starts now and it will be a bumpy one!! Our journey starts with setting up our forge, where we will travel through the command-line interface (CLI), Composer (not a musician) package installation, and AC commands.

In this chapter, we will cover the following topics:

Hardware and technical requirements

Preparing the technology stack for AC

Virtualization with Docker

Preparing a Docker manager

Technical requirements

The code for this chapter, as well as other chapters, can be found in this book’s GitHub repository: https://github.com/PacktPublishing/Mastering-Adobe-Commerce-Frontend

It is possible to run AC on a Raspberry Pi 4 device and, trust me, it can run smoothly as a platform, but it is not the best choice for the development itself.

While it is possible to run the platform on any computer, in my experience, the following setup is the best:

A CPU with at least four cores, or at least eight threads.

16 GB of RAM (I recommend at least 32 GB of RAM as the virtual machines we will use to run AC will use a lot of memory.

An SSD drive, though it will be even better if your PC/laptop has an NVMe drive. It just speeds things up when you work with the platform or do any development.

A good internet connection – you’ll be downloading a lot of data once we start.

Choosing the best operating system

I only work on Linux and macOS since I find using UNIX-based operating systems for development is much, much faster, and, in my humble opinion, Linux and macOS simply have better applications to work with code.

What is your preferred operating system of choice? Is it Windows as it has most applications? Or maybe it’s macOS because of its unique and consistent ecosystem across multiple devices? How about Linux and one of its many, many distributions?

Well, I’m happy to tell you that it does not matter as we will cover all of these systems so that you can set up your local environment and work with AC.

Installing the required applications and services

We’ll start with a few words about the AC technology stack first before we start installing and configuring everything over the next 400 pages! If you don’t have access to AC, you can use the open source version, called Magento 2 Open Source; this is something you might have heard about before somewhere. I’ll explain more about the history behind Adobe and Magento in Chapter 2

.

The platform is written in PHP and requires a bunch of services to run locally (or on a server), so let’s focus on the most important ones and explain what they are.

What is a service?

A service is a type of software (application) that runs continuously in the background on a computer or network and provides a specific functionality or set of functionalities to other applications. An email server is an example of a service; can you think of some other examples? I bet you can.

Next, I’ll explain what sort of services are required to run AC; I’ll try to illustrate this with a few comparisons to a restaurant (if you are completely new to frontend development, this might be handy). So, to run AC, you need the following:

A web (HTTP) server: This is a piece of software that accepts HTTP(S) requests – that is, it is an application that your browser connects to and communicates with when rendering a web page.

You can treat the HTTP/web server as a butler in a restaurant. They take your order (a request) and come back to you with your order (a response) based on what you (or your internet browser) asked for or picked up from the menu.

For AC, it is recommended to go with Apache 2 or Nginx.

The order (a request) is being sent to the kitchen to be processed and in our case, the kitchen is PHP.

PHP and PHP-FPM: Regarding a simple technical definition of PHP, it is a scripting language that is used to create dynamic web pages. For us, it is the kitchen of our restaurant (along with PHP-FPM) that’s run on the local or remote server and is responsible for generating HTML content that our butler will send back to us (a response).

The technical difference between PHP and PHP-PFM is very simple: you can treat PHP as the main chef of the restaurant and PHP-FPM as the manager who oversees if everything in the kitchen works as it should. If needed, they hire or fire extra staff to process multiple orders at the same time. In a real restaurant, it’s the chef who can fire or hire their subordinates, but I hope that this analogy is pretty clear.

MySQL/MariaDB database: Now that our kitchen is ready to prepare meals for our customers, we need a place to store ingredients (data). In our case, this is a database. It’s like Excel, but you must use over 400 spreadsheet files with over 100 columns each, and the values of the rows and columns from one file need to match some columns and rows in other files. This is the heart of your entire data in the platform. Have I mentioned that a single piece of product information is stored in over seven database tables? I’m sure I have. Luckily for you, you don’t need to know much about the entire database structure.

Think of MySQL as a giant fridge that contains all the required ingredients (data) to prepare a meal for our restaurant guests.

Due to the large number of database tables, the process of merging data to be presented on the frontend can cause slow performance. As a solution, the Adobe team has incorporated an extra non-relational database known as Elasticsearch (ES).

Note

Elasticsearch has been replaced with OpenSearch by Adobe

ES: This might be the first time you’ve seen this name or you might be new to it or haven’t worked with it before. Most developers don’t know how it works and that’s fine. Imagine ES as a black box in your project that you feed product data with. Or, if you’ve worked with REST API/GraphQL, ES is the API you connect to to feed and retrieve the data.

In the end, thanks to ES, data is retrieved must faster, making your eCommerce store run swiftly. ES is a required part of the platform and is responsible for the following, among other things:

Product listing on category pages

Product listing on search result pages

Search suggestions

ES can be thought of as the restaurant’s menu or search system that allows customers to search for and find and retrieve already prepared dishes (datasets).

Important

At the time of authoring this book, the new version of Magento 2 will replace ES with OpenSearch.

Varnish Cache: Varnish is primarily used as a wood finish or a protective coating, but that is not the way we use it in AC. In this instance, we’re talking about Varnish Cache, which, not diving into much detail, is an extra caching layer on top of AC that reduces the load on the database and the application itself by serving HTML-prepared content straight from RAM. This is called a full-page cache.

It is hard to find a way to compare Varnish Cache to our restaurant business, but let’s give it a try! Imagine that you have a 3D instant copier for every completed dish you’ve prepared. Once a dish is ready to be served to the first customer, its exact copy is stored in your 3D copier’s memory. If the next customer orders the same dish/meal, the 3D copier prints the same dish in an instant and the waiter (the HTTP server) can bring it to the customer (browser).

I’m afraid that the preceding list is not complete, so to make sure nobody points out that something is missing, let’s add the remaining ones. Two more services can be used but are not required for frontend development:

Redis Cache: Redis is just another database that allows you to store information based on the key-value system. It is very fast as the data is stored in memory. You can (and probably should do so on production instances) use Redis cache for the following things:

Session storage

Cache storage (I’ll explain the Magento caching system in more detail in Chapter 3

)

RabbitMQ: I’ll use a very huge oversimplification here, so let me apologize to all backend developers in advance: it is simply a messaging system to provide and allow asynchronous tasks to be run by Magento 2 code. Message queues, and why and when they should be used, are much more of a backend thing, but I’ll give you an example so that you know why they have been added to the framework in the first place.

Imagine that a merchant has requested that their store communicate with their internal system via some sort of API. This communication needs to take place every time a customer places an order in their AC store.

There are a lot of ways you could do this in AC:

Plugins

Preference

Observer

I don’t want to describe the differences between these approaches, but each of these places might encounter the same serious problem: "What happens if the merchant’s third-party API is not responding?"

If the customization, as stated earlier, was modified in one of the three ways described previously, the merchant’s API might stop responding, in which case we might be looking into serious checkout issues on our eCommerce platform. We don’t want that.

By utilizing a messaging system, we can push communication to a queue and process it asynchronously, ensuring a seamless and reliable experience for our merchants and their online customers.

As a frontend developer, you don’t need to know much about this, but you should be aware that a lot of AC-based eCommerce systems might have some customizations or additional queues