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 UI components

Building upon this foundational knowledge, our next focus shifts toward another pivotal aspect of Adobe Commerce—UI components. They encapsulate complex backend processes into manageable frontend interfaces, ensuring both robustness and elegance in user interaction. As we dive into this section, we’ll uncover how UI components play a transformative role in shaping the Adobe Commerce experience.

The truth is, everything we did so far in this chapter was actually related to UI components, but we haven’t fed the modules any data except the one we defined in our product calculator model.

What I’ve shown you so far represents the UI components that are using Knockout.js templates, and the components are in fact RequireJS modules.

What I’m about to explain next is heavily used in the Admin Panel interface and is hardly used for the frontend. What you’ve learned so far will make you a master of frontend UI components...

Previous Section
End of Section 4
Next Section