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.

Related Content you might be interested in

Current Title:

Small book image
Mastering Adobe Commerce Frontend
Jakub Winkler
Mar, 2024 | 402 pages
Small book image
Magento 2 Development Quick Start Guide
Branko Ajzele
Sep, 2018 | 218 pages
Small book image
Magento 2 Beginners Guide
Gabriel Guarino
Mar, 2017 | 442 pages
Small book image
Oracle JET for Developers
Raja Malleswara Rao Malleswara Rao Pattamsetti
Dec, 2017 | 282 pages
Table of Contents (18 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Conventions used
Get in touch
Share Your Thoughts
Download a free PDF copy of this book
Free Chapter
1
Chapter 1: Setting Up the Local Environment
Chapter 1: Setting Up the Local Environment
Technical requirements
Preparing the technology stack for AC
Virtualization with Docker
Preparing a Docker manager
Alternatives to a functional local environment
Summary
2
Chapter 2: Installing the Magento/Adobe Commerce Application
Chapter 2: Installing the Magento/Adobe Commerce Application
Technical requirements
Getting to know the platform
Getting a copy of Adobe Commerce/Magento Open Source
Installing Adobe Commerce – preparing Docker
Installing Adobe Commerce using the CLI
Summary
Practical exercises
3
Chapter 3: Introduction to Adobe Commerce Theming
Chapter 3: Introduction to Adobe Commerce Theming
Creating new themes
Caching system
Basic CLI commands
Fallback system
CSS file generation
Summary
Practical exercises
4
Chapter 4: The Layout System
Chapter 4: The Layout System
Technical requirements
Basic terms related to layout XML
Introduction to layout XML files
Layouts and pages
Blocks, containers, and updates
Layout overrides
Summary
Practical exercises
5
Chapter 5: Working with Templates
Chapter 5: Working with Templates
Technical requirements
What are templates, and how many templates are there?
Template file locations
Templates and blocks
Working with template files
Summary
Practical exercises
6
Chapter 6: Styling an Adobe Commerce Theme
Chapter 6: Styling an Adobe Commerce Theme
Technical requirements
Location and compilation of CSS files
A quick introduction to LESS files
CSS compilation types
Working with themes
Summary
Practical exercises
7
Chapter 7: Customizing Emails
Chapter 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
Customizing Email CSS
Summary
Practical exercises
8
Chapter 8: Introduction to JavaScript Libraries and Frameworks
Chapter 8: Introduction to JavaScript Libraries and Frameworks
Technical requirements
Exploring the main JavaScript libraries/frameworks/modules embedded in the platform
The location of JavaScript resources
The challenges associated with JavaScript libraries
Summary
9
Chapter 9: RequireJS and jQuery
Chapter 9: RequireJS and jQuery
Technical requirements
RequireJS and AC
jQuery
JavaScript customization
Summary
Practical exercises
10
Chapter 10: Knockout.js and UI Components
Chapter 10: Knockout.js and UI Components
Technical requirements
Introduction to Knockout.js
Creating UI components
Working with private content
Summary
Practical exercises
11
Chapter 11: Commonly Used Libraries Bundled with Adobe Commerce
Chapter 11: Commonly Used Libraries Bundled with Adobe Commerce
Technical requirements
Introduction to bundled libraries
List of commonly used libraries
Summary
Practical exercises
12
Chapter 12: Storefront-Related Configuration in the Admin Panel
Chapter 12: Storefront-Related Configuration in the Admin Panel
Exploring the Design configuration section
Scheduling theme changes
Category-level customizations
Product-level customizations
Summary
Practical exercises
13
Chapter 13: Working with Magento CMS
Chapter 13: Working with Magento CMS
A quick introduction to Adobe Commerce CMS
Creating and working with CMS blocks
Working with widgets
Creating and working with CMS pages
CMS directives
Adobe Commerce Page Builder
Summary
Practical exercises
14
Chapter 14: Frontend Optimization Techniques
Chapter 14: Frontend Optimization Techniques
Technical requirements
An introduction to frontend optimization
Indexes and asynchronous processing
The minification, merging, and bundling of CSS, JS, and HTML
Magepack
Fastly
Summary
Practical exercises
15
Chapter 15: Common Tools that Help with Local Development
Chapter 15: Common Tools that Help with Local Development
Why are third-party tools important?
ESLint – JavaScript coding standards
Community tools for better development
Summary
16
Index
Index
Why subscribe?
17
Other Books You May Enjoy
Other Books You May Enjoy
Packt is searching for authors like you
Share Your Thoughts
Download a free PDF copy of this book

Creating new themes

At this point, you should have a working environment on warden. So far, we’ve only used one CLI command related to the Magento platform: we’ve disabled two-factor authentication, so we don’t have to use our phones and authorization apps while coding.

We are beginning our journey with practical frontend development on the Adobe Commerce platform. Without further ado, let’s get started and create a new theme!

Adding a new theme

Open your project directory in the integrated development environment (IDE) of your choice:

  • PhpStorm
  • VSCode
  • NetBeans
  • Other

I work on PhpStorm; however, if you decide to use another IDE, make sure you have PHP support enabled, as we will need it later in this Adobe Commerce frontend development guide once we start working with phtml files.

The themes are located in the folder app/design/frontend/*. There should be an empty folder called Magento; go ahead and remove it.

Create...

Previous Section
End of Section 2
Next Section