Aem commerce content system integration
Skill prakash888kp/AEM-SKILLS/skills/tier-6-commerce/aem-commerce-content-system-integration
A curated catalog of Adobe Experience Manager (AEM) skills organized into tiers, with dependency chains and contribution guidelines.
npx -y skills add prakash888kp/AEM-SKILLS --skill aem-commerce-content-system-integrationAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
4.9 KB, as published. Nobody here has run it
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