Description

Introduction

This training program is designed to equip developers with the skills required to build, customize, and optimize modern front-end experiences using Optimizely Commerce. The course focuses on developing storefront solutions using React (Headless / SPA approach) and ASP.NET MVC (traditional server-rendered approach) within Optimizely Commerce environments.

Participants will gain hands-on experience in:

1. Building responsive and scalable commerce storefronts
2. Integrating frontend components with Optimizely APIs
3. Implementing product listing, search, cart, and checkout flows
4. Customizing themes, templates, and CMS-driven components
5. Applying performance optimization and SEO best practices

By the end of the program, learners will be capable of developing enterprise-grade B2B and B2C commerce frontends aligned with modern architectural standards.

Prerequisites

1. Basic understanding of eCommerce concepts
2. Working knowledge of:
   1. HTML5, CSS3, JavaScript
   2. React fundamentals (components, hooks, state management)
   3. C# and ASP.NET MVC basics
3. Familiarity with:
   1. REST APIs
   2. JSON data structures
   3. Git version control
4. Basic understanding of .NET ecosystem and web application architecture

Table of Contents

Module 1: Introduction to Optimizely Commerce Frontend Architecture

1. Overview of Optimizely Commerce platform
2. CMS + Commerce integration model
3. Monolithic vs Headless architecture
4. MVC-based vs React-based storefronts
5. Environment setup and solution structure

Module 2: ASP.NET MVC Storefront Development

1. Understanding MVC pattern in Optimizely
2. Controllers, Views, and ViewModels
3. Rendering catalog content (Products, Variants, Categories)
4. Template resolution and routing
5. Layouts and partial views
6. Commerce UI customization
7. Custom components and blocks

Module 3: Catalog & Product Experience Customization

1. Product detail page (PDP) development
2. Category and product listing pages (PLP)
3. Search integration and filtering
4. Pricing, inventory, and personalization display
5. Multi-language and multi-market configuration

Module 4: Cart & Checkout Implementation (MVC)

1. Cart architecture
2. Adding/removing items
3. Promotions and discount display
4. Checkout workflow customization
5. Payment and shipping integration basics

Module 5: Headless Commerce with React

1. Introduction to headless architecture
2. Optimizely APIs and content delivery
3. Setting up a React storefront
4. Connecting React to Commerce APIs
5. Handling authentication and session management
6. State management (Context / Redux basics)

Module 6: Building Commerce Features in React

1. Product listing and detail pages
2. Dynamic routing
3. Cart functionality in SPA
4. Checkout flow in React
5. API error handling and validation
6. Performance optimization (lazy loading, caching)

Module 7: CMS-Driven Frontend Components

1. Rendering CMS blocks in MVC
2. Rendering CMS content in React
3. Content modeling for frontend flexibility
4. Experience-driven commerce personalization

Module 8: Theming, Styling & UX Optimization

1. Responsive design principles
2. CSS frameworks integration
3. SEO best practices
4. Accessibility (WCAG basics)
5. Performance tuning for storefronts

Module 9: Integration & Extensibility

1. Integrating third-party APIs
2. Search provider integration
3. Analytics integration
4. Custom middleware and extensions

Module 10: Deployment & Best Practices

1. Environment configuration (Dev, QA, Prod)
2. CI/CD considerations
3. Debugging and troubleshooting
4. Code structure best practices
5. Performance and scalability strategies