Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Mastering Adobe Commerce Frontend
  • Table Of Contents Toc
  • Feedback & Rating feedback
Mastering Adobe Commerce Frontend

Mastering Adobe Commerce Frontend

By : Winkler
4.9 (10)
Buy this Book
close
close
Mastering Adobe Commerce Frontend

Mastering Adobe Commerce Frontend

4.9 (10)
By: Winkler
Buy this Book

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)
close
close
close
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
chevron up
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

A quick introduction to LESS files

LESS is one of two popular ways of creating CSS files for web pages. The other one is SASS. They have different strengths and characteristics. The AC core team picked LESS files with Grunt (and PHP) as the tool for compilation when the platform was created. The following are the main benefits of using LESS files over CSS files:

  • Nested syntax
  • Variables
  • Mixins
  • Modularity
  • Functions and operations
  • Compilation

Let’s look at each of these in a bit more detail.

Nested syntax

Let me start with the one that makes the code clear and easy to read. Let us look at the CSS first:

@media print {
    div.main .container .left-column {
        width: 20%;
    }
    div.main .container .left-column .product-wishlist {
        border: 1px solid silver;
    &...

Unlock full access

Continue reading for free

A Packt free trial gives you instant online access to our library of over 7000 practical eBooks and videos, constantly updated with the latest in tech
Start a 7-day FREE trial
End of Section 4
Next Section
bookmark search playlist download
font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY