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-li...
| Otros Autores: | |
|---|---|
| Formato: | Libro electrónico |
| Idioma: | Inglés |
| Publicado: |
Birmingham, England :
Packt Publishing Ltd
[2024]
|
| Edición: | First edition |
| Materias: | |
| Ver en Biblioteca Universitat Ramon Llull: | https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009810644006719 |
Tabla de Contenidos:
- Cover
- Title Page
- Copyright and Credits
- Contributors
- Table of Contents
- Preface
- Chapter 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
- Chapter 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
- Chapter 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
- Chapter 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
- Chapter 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
- Chapter 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
- 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
- Creating new email templates
- Conditional content rendering
- Customizing Email CSS
- Summary
- Practical exercises
- Chapter 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
- Chapter 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.
- Chapter 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
- Chapter 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
- Chapter 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
- Chapter 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
- Chapter 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
- Chapter 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.
