gabrielmoreira AEM Commerce & Content System Integration
Purpose
Integrate AEM with commerce platforms (Adobe Commerce/Magento, Salesforce Commerce, SAP Commerce) using the Commerce Integration Framework (CIF) for unified content-commerce experiences.
When to Use (Triggers)
- User mentions "commerce," "CIF," "product catalog," or "shopping experience"
- References to Adobe Commerce, Magento, commerce connectors, or product data
- Questions about product detail pages, cart integration, or checkout flows
- Requests involving commerce data in AEM components or commerce APIs
- Discussion of CIF Core Components, GraphQL commerce, or commerce authoring
Core Capabilities
- Configure Commerce Integration Framework (CIF) with commerce backends
- Implement CIF Core Components for product display and commerce functionality
- Design content-commerce page patterns (PDP, PLP, cart, checkout)
- Build custom commerce components using CIF React components
- Integrate product data with AEM content authoring workflows
Domain Knowledge Required
Technical Foundation
- Commerce platform architecture (catalog, cart, checkout, order management)
- GraphQL API patterns for commerce data (products, categories, cart mutations)
- Micro-frontend patterns for commerce widgets
- Commerce data modeling (SKU, variants, pricing, availability)
AEM-Specific Context
- Commerce Integration Framework (CIF) architecture and components
- CIF Core Components (product teaser, product list, search bar, cart)
- Commerce product picker for authoring (product/category selection)
- CIF URL pattern handling (product URLs, category URLs)
- CIF GraphQL client and caching layer
- Commerce Cloud Service configuration
Implementation Approach
Step 1: Commerce Backend Connection
Configure the connection to the commerce platform.
- Install CIF add-on and connector for target commerce platform
- Configure Commerce Cloud Service with endpoint and credentials
- Set up GraphQL endpoint connectivity and authentication
- Validate product catalog data accessibility from AEM
Step 2: Catalog & Navigation
Implement product browsing and discovery.
- Configure category page template with CIF navigation component
- Set up product list page (PLP) with filtering and pagination
- Implement product detail page (PDP) template with variants
- Configure URL generation for SEO-friendly commerce pages
Step 3: Commerce Components
Build and customize commerce UI components.
- Deploy CIF Core Components as foundation
- Customize product teaser for brand-specific display
- Implement add-to-cart with variant selection
- Build wishlist and comparison functionality
- Configure product recommendations component
Step 4: Content-Commerce Fusion
Combine editorial content with commerce data.
- Create editorial content areas on PDP (brand story, usage guides)
- Implement commerce-aware Experience Fragments (upsell, cross-sell)
- Build content-driven product showcases (lookbooks, collections)
- Configure personalization using commerce context (cart contents, browse history)
Step 5: Cart & Checkout
Implement shopping flow components.
- Configure mini-cart and full cart page components
- Integrate checkout flow with commerce platform
- Handle payment and shipping service connections
- Implement order confirmation and account pages
Quality Checklist
- Product data loads within 2 seconds on PDP
- Cart operations (add, update, remove) function correctly
- Commerce URLs resolve to correct products/categories
- Cached product data refreshes on catalog updates
- Authoring experience allows product selection via picker
- Commerce components render correctly in AEM preview
- Pricing and availability data reflects real-time backend state
- Commerce functionality works on all supported breakpoints
Related Skills
- aem-content-api-headless (headless commerce delivery)
- aem-personalization-ecommerce (commerce personalization)
- aem-caching-strategy (commerce data caching)
Example Use Cases
- Fashion Retail Platform: Integrate AEM with Adobe Commerce for 50,000 SKUs with visual merchandising, lookbook content, size/color variant selection, and personalized recommendations.
- B2B Commerce Portal: Build a B2B purchasing experience with custom pricing tiers, bulk ordering, approval workflows for purchases, and account-specific product catalogs.
- Multi-Brand Marketplace: Implement a marketplace experience where multiple brands share a commerce backend with brand-specific content experiences, shared cart, and unified checkout.
Notes
- CIF uses GraphQL for real-time commerce data — cache aggressively for catalog data, minimally for pricing
- Product URLs are virtual in AEM — they don't correspond to JCR pages but resolve via CIF URL provider
- CIF Core Components are React-based micro-frontends embedded in AEM pages
- Adobe Commerce (Magento) is the primary supported backend but CIF supports custom connectors