Storefront Development Guide
Storefront Development Guide
Content
Storefront Development Guide
Accessibility
Accessibility Compliance
Core Theme Accessibility
Keyboard Accessibility
Screen Reader Accessibility
Media Accessibility
Other Accessibility Conformance
Accessibility Best Practices
Accessibility Compliance
Common Keyboard Interactions
Web Browser Setup for Keyboard Navigation
Enabling Tabbing in Firefox
Enabling Tabbing in Safari
Keyboard Accessibility
HTML Attributes and Events
Focus Management
CSS Styles
Keyboard Focus
Visible Focus
Avoiding Visible Focus
Implementation
Persist Focus
Escape Focus
Auto Focus
Default Behavior
Trap Focus
Configuration
Extensibility
Lock Focus
Composable Storefront API
Generating Composable Storefront API Documentation
Architecture
Configurable Routing
Adding and Customizing Routes
Page Types and Page Labels
Adding a Content Page Route
Customizing a Product or Category Page Route
Adding a Content Page with Dynamic Parameters
Adding Angular Child Routes for a Content Page
Configuring the Category Name in the Product Page Route (Advanced)
Backwards Compatibility with Accelerators
Avoiding Static URL Segments in the Product Page URL (Advanced)
Expected CMS Page Labels for Content Pages
Route Configuration
Working with Angular Routes
Configurable Router Links
Router Links
Linking to Nested Routes
Mapping Parameters
Programmatic API
Disabling Standard Routes
Route Aliases
Wrong Order of Aliases
External Routes
Using composable storefront and Another System to Run a Single Storefront
Configuration the Angular Service Worker
Redirecting to a Different Domain
Advanced Cases
Early Login
Protecting Most Routes
Configuring Public Routes
Protecting Individual Routes
Configuring the Base URL
Extending Built-In Models
Augmenting Modules
Augmentation in Feature Libraries
Augmenting Enums
Global Configuration in Composable Storefront
Providing Global Configurations in Composable Storefront
Modifying the Configuration at Runtime
Default Values
Overriding Values
Config Validators
Implementing Configuration in New Features
Global Messages
Configuration
HTTP Error Handling
Status Codes
Providing Custom Error Handlers
Commands and Queries
Commands Overview
Command Definition
Exposing Commands in Facade Services
Subscribing to Commands
Queries Overview
Query Definition
Exposing Queries in Facade Services
Launch Dialog Service
Launch Dialog Service Properties
Launch Dialog Service Methods
Customization
Logging
CSS Variables and Classes for Styling Modal Components
Lazy Loading
Composable Storefront Approach to Lazy Loading
General Concepts
Lazy Loading of CMS Components
Lazy Loading of Modules
Customizing Lazy Loaded Feature Modules
Preparing Libraries to Work with Lazy Loading
Proxy Facades
Feature Modules
Defining Proxy Facades
Implementation Details
Default Approach in Composable Storefront
Extending and Customizing Facades Behind the Proxy
Multi-Site Configuration
Automatic Multi-Site Configuration
Mitigating the Initial Back End Call
Important Notes
Local Development
Adding a Custom Context
Automatic Context Configuration
Static Context Configuration
Updating the Context Services Mapping
Theme Configuration
Automatic Theme Configuration
Static Theme Configuration
Static Multi-Site Configuration
Context Properties
Enabling Context in the Storefront URL
Progressive Web Application Support
Adding PWA Support to Composable Storefront
Setting up PWA in Composable Storefront
Limitations
Hash Mismatch When Using Auto API Injection in SAP Commerce Cloud
Adding the Composable Storefront App to the Home Screen
Search Engine Optimization
SEO Capabilities
Stateful URLs
Configurable URLs
Indexable Pages
Structured Data (schema.org)
HTML Tags
HTML Tags
Structured Data (schema.org)
Supported Meta Tags
Customizing Meta Tags
Structured Data
Tag Managers
Schema Types
Implementation of JSON-LD Schemas in Composable Storefront
Schema Builders
JSON-LD Directive
Session Management
Client Authentication and User Authentication
User Authentication
Assisted Service Module
Complementary Components to the AuthModule
Configuring OpenId
Configuring Authorization Code Flow or Implicit Flow
State Management
Loader Meta Reducer
Applying the Meta Reducer
Defining the State Interface
Creating Actions
Working With Selectors
State Persistence
Implementing Complete State Persistence for a Feature
State Synchronization in Action
State Synchronization Example
SSR Transfer State
Customizing and Extending Composable Storefront
Customizing CMS Components
Configuring Custom Components
Customizing Services
Guarding Components
Controlling Server-Side Rendering
Placeholder Components
Handling Nested CMS Components
Creating New Pages and Components
Creating a New Page
Creating a New Component
Static Pages
Extending Checkout
Routing and Configuration
Components
Protecting Routes
CheckoutStepsSetGuard
CheckoutStepsSetGuard Example
CheckoutGuard
CheckoutAuthGuard
CartNotEmptyGuard
NotCheckoutAuthGuard
Configuring Where Guards Redirect To
CMS Catalog Content and Default Template
Extensibility
Changing the Order of the Checkout Flow
Adding Another Checkout Step
Combining Checkout Steps
Express Checkout
B2B Checkout
Known Issues
Internationalization (i18n)
Dependencies
Getting Started
Adding Translations for Other Languages
Overwriting Individual Translations
Fallback Language
Lazy Loading
Handling Translations in HTML
Using Translations in TypeScript Code
Upgrading
Extending Translations
Localizing and Formatting Dates
Product Details Page
Configuring the PDP Page
Composable Storefront Components
Banner Component
CMS Component Binding
Adaptive and Responsive Images
Component Data
Component Logic
Component Styling
Adding a New Banner Using ImpEx
Known Limitations
Carousel Component
Flexible Template for Carousel Items
Slides
Responsive Calculation of Items in Each Slide
Configuring Slide Actions
Media Component
Responsive Media
Localized Media
Implementation Details
Missing Media
Image Lazy Loading
SEO
Pagination Component
Pagination Structure
Pagination Configuration
Pagination Styling
Component Usage
Password Visibility Component
Adding a Password Visibility Toggle to a Password Input Field
Enabling the Password Visibility Toggle
Extending the Password Visibility Toggle
Popover Component
Adding a Popover to a UI Element
Configuration
Events
Auto Positioning
Accessibility
Known Limitations
Searchbox Component
Component Mapping
Component Configuration
Component Styling
Known Limitations
Split View Component
Components
Component Interaction
Styling
Split View Animation
Configuring the Column Size
Gutter
Table Component
Table Cell Configuration
Table Layout Configuration
Responsive Table Configuration
Cell Renderers
Cell Outlets
Localized Table Headers
Customizing Back End Communication
Connecting to Other Systems
Component Data Binding
Connector Logic
Connector
Adapter
Converter
Providing Custom Converters
Extending the UI Model
Configuring Endpoints
Loading Scopes
Using Default Product Scopes
Configuring the Payload for Scopes
Defining Custom Loading Scopes
Merging Scopes
Scope Inclusions
Keeping Scope Data Up To Date
Reloading Triggers
Performance Optimizations
Above-the-Fold Loading
Page Fold Configuration
CSS Configuration
Deferred Loading
Enable Deferred Loading
Component Loading Strategy
Related Techniques
Performance Best Practices
General Recommendations
Caching Recommendations
Additional Recommendations
SEO
Accessibility
PWA
Security Best Practices
Secure Authentication
Content Security Policy
Target Policy
Working with Scripts
Using the onClick Method
Using the setInterval Method
Using the setTimeout Method
Protection Against Denial of Service Attacks
Token Revocation
Requirements
Enabling Token Revocation
Configuring
Extending
Server-Side Rendering
Deciding Which Pages to Render With SSR
Recommended Setup for Server-Side Rendering
Server-Side Rendering Coding Guidelines
Working with Global Objects
Working with Timeouts
Manipulating the nativeElement
Using Transfer State Functionality
Getting the Request URL and Origin
Avoiding Memory Leaks in SSR
Workaround for Known Issue in Composable Storefront 3.0.2 and Earlier
Server-Side Rendering Optimization
Enabling the SSR Optimization Engine
Configuring the SSR Optimization Engine
Troubleshooting
Using Your Web Browser's Network Tool
Troubleshooting a Storefront That Is Not Running in SSR Mode
SSR Issues with SAP Commerce Cloud in the Public Cloud
Testing Locally
Testing SSR With a Self-Signed or Untrusted SSL Certificate
The URL or Routes Break SSR
Incorrect Site Information Embedded in the Domain
SSR Shows Only a Global Error Message
Detecting a Bot or Crawler
Using SSR Only for Certain Pages
Incomplete Renders and Memory Leaks
Load Testing of SSR in Composable Storefront
Debugging a Server–Side Rendered Storefront
Debugging Node.js in VS Code
Setting Breakpoints on Exceptions
Storefront Features
Anonymous Consent
Requirements
Configuring Anonymous Consent
Extending Anonymous Consent
Known Limitations
Applied Promotions
Enabling Applied Promotions
Displaying Applied Promotions
Assisted Service Module
Requirements
Enabling ASM in Composable Storefront
Granting CMS Permissions
Configuring CORS
Customizing the CORS Configuration
Additional CORS Configuration for Customer Emulation
Writing ASM-Compatible Code
Configuring the Session Timer Duration
Configuring the Number of Search Results
Configuring the Customer List
Invoking the ASM UI in the Storefront
Extending
Limitations
B2B Account Summaries
CMS Components
Adding CMS Components Manually
Updating Responsive Content Manually
Using Account Summaries
B2B Commerce Organization
Prerequisites
Customizing Routes
Customizing CMS Components
Customizing Table Configurations
Local Message Component
Local Message Component
Models
OCC
Adapters
Converters
Store
Homepage
Adding a New Banner
Hiding a Banner
Adding a Custom Icon
Styles
Translations
B2B Organization User Registration
Enabling B2B Organization User Registration
Limitations
B2B Reorder
Enabling Reorder
Configuring
Extending
B2B Unit-Level Orders
Architecture
Requirements
CMS Components
Enabling Unit-Level Orders
Disabling Unit-Level Orders
Configuring
Extending
Limitations
Bulk Pricing
Enabling Bulk Pricing
Configuring
Extending
Cancellations and Returns
Back-End Requirements
Enabling Cancellations and Returns in composable storefront
Enabling Cancellations and Returns through the CMS
Configuring
Extending
Cart Import and Export
Enabling Cart Import and Export
Disabling Cart Import and Export
Global Configuration
Configuring Cart Import
Configuring Cart Export
Adding Columns in the CSV File
Defining the Route and Context for Custom Configurations
Using Cart Import and Export in the Storefront
Importing to a Saved Cart
Importing to an Active Cart
Importing and Exporting with Quick Order
Exporting from the Order Confirmation and Order Details Pages
Limitations
Cart Validation
Requirements
Enabling Cart Validation
Configuring
Extending
Clear Cart
Enabling Clear Cart
Adding the Clear Cart CMS Component Manually
Configuring
Extending
Consignment Tracking
Requirements
Enabling Consignment Tracking
Configuring
Extending
Coupons
Requirements
Enabling Coupons
Configuring
Extending
Customer Coupons
Requirements
Enabling Customer Coupons
Configuring
Extending
Customer Interests
Requirements
Enabling Customer Interests
Configuring
Extending
Customer Service
Requirements
Request Status
Enabling Customer Service
Configuring Customer Service
Extending Customer Service
Event Service
Event Types
Observing Events
Pulling Additional Data From Facades
Registering Event Sources
Avoiding Certain Candidates for an Event Stream
Avoiding Memory Leaks and Unregistering Event Sources
Dispatching Individual Events
Event Type Inheritance
List of Composable Storefront Events
Express Checkout
Enabling Express Checkout
Configuring Express Checkout
Choosing the Delivery Mode During Checkout
Guest Checkout
Enabling Guest Checkout
Using Guest Checkout With Express Checkout
Extending Guest Checkout
Image Zoom
Requirements
Enabling Image Zoom
Extending
Infinite Scroll
Inventory Display
Enabling Inventory Display in Composable Storefront
Enabling B2B Inventory Display Limits in the Back End Using Backoffice
Configuring
Extending
Notification Preferences
Requirements
Enabling Notification Preference
Configuring
Extending
Quick Order
Enabling Quick Order
Configuring Quick Order
Using Quick Order
Using the Quick Order Form in the Cart Page
The Quick Order Page
Adding Products with the Quick Order Page
Restoring a Deleted Product in the Quick Order Page
Importing and Exporting in the Quick Order Page
Saved Cart
Enabling Saved Cart
User Interface
Limitations
Scheduled Replenishment
Setting Up a Replenishment Order
CMS Components
Enabling Scheduled Replenishment
Disabling Scheduled Replenishment
Configuring
Extending
Scroll Position Restoration
Enabling Scroll Position Restoration
Configuring
Scroll to Top
Enabling Scroll to Top
Adding the Scroll to Top CMS Component Manually
Configuring Scroll to Top
Extending Scroll to Top
Selective Cart
Requirements
Enabling Selective Cart
Configuring
Extending
Skip Links
Configuring Skip Links
Adding a Configuration to the Storefront
Default Skip Link Configuration
Stock Notification
Requirements
Enabling Stock Notification
Configuring
Extending
Store Locator
Enabling the Store Locator
Configuring the Store Locator
Disabling the Store Locator
Further Reading
Tag Management System
Setup
Configuration
Customization
Tag Management System Examples
Google Tag Manager
Google Analytics
Google Tag Manager and Google Analytics
Adobe Experience Platform Launch (AEPL)
Text Field Configurator Template
Requirements
Enabling the Text Field Configurator
Configuring
Extending
Variants
Enabling Variants
Adding a Custom Variant Type
About the Variant Guard
SEO Customizations
Disabling Variants
Wish List
Usage
Customizing
Limitations
Disabling Wish Lists
Styling and Page Layout
CSS Architecture
Style Library
Style Versioning
Configuring the Styling Version in a Composable Storefront App
Composable Storefront Backwards Compatible Style Upgrades
Configuring Styling Versioning for Feature Libraries for Composable Storefront 5.1 and Newer
Using Styles Versioning After Upgrading an Existing App to Composable Storefront 5.1
Configuring Styling Versioning for Feature Libraries for Composable Storefront Versions Older Than 5.1
Creating a Style Config File to Propagate Style Versioning for Composable Storefront Versions Older Than 5.1
Using useLatestStyles for Developer Environments
Styles for Future Releases
Implementing Versioned Styles
CSS Technology
Global Theming
Component Styles
Page Layout Styles
Directionality
Breaking Changes
Configuring Directionality
Implementation Details
Icons
Icon Library
Technical Icon Format
Icon Configuration
Directionality
Outlets
Template-Driven Outlets
Component-Driven Outlets
Stacked Outlets
Outlet Context
Available Outlet References
Specific Sections on the Product Details Page
Deferred Loading
Page Layout
Page Structure
Configuring the Layout
Using Outlets to Override Page Templates
CSS Layout Rules
Choosing an Adaptive or Responsive Layout
Skeleton Design
Rendering Skeleton Designs
Example
Storefront Themes
Changing the Storefront Theme Dynamically
Configuring
Extending