Commerce Integration

For more details see following links:

• https://experienceleague.adobe.com/developer/commerce/storefront/discovery/architecture/
• https://experienceleague.adobe.com/developer/commerce/storefront/get-started/
• https://github.com/hlxsites/aem-boilerplate-commerce/tree/main

Storefront Architecture

Headless Adobe Commerce storefronts on Edge Delivery Services are built using a composable architecture with domain-driven commerce components called dropins. This architecture allows you to build and deploy a storefront that is composed of multiple Adobe services, each with its own responsibility. Dropins are connected through APIs and can be developed, tested, and deployed independently for faster development cycles.
Dropins rely on Adobe Commerce and Catalog Service APIs to provide data and functionality. These components are designed to be reusable and can be shared across multiple projects. They are integrated out-of-the-box with Edge Delivery Services through the Commerce boilerplate. Adobe Commerce storefronts on Edge Delivery Services are compatible with doc-based authoring, which allows business users to create and manage content without developer intervention.
The following diagram illustrates the composable architecture of a headless Adobe Commerce storefront on Edge Delivery Services:

Create and configure starter storefront

1. Use the boilerplate template to create a storefront repository.
2. Add the Code Sync app to your newly created repo. This app automatically redeploys your storefront when you push changes to the main branch. It also provides the Edge Delivery system (Helix Admin) with access to your repo so it can coordinate code changes with content changes.
3. Create a folder on Google Drive or SharePoint for your content and Share it with the [email protected] user. This gives the Edge Delivery system (Helix Admin) with read/write access to your folder’s content.
4. Add sample content from the boilerplate to your new folder on Google Drive or SharePoint.
5. Connect your repo to your content using the mountpoint in your fstab.yaml URL in your GitHub repo.
6. Install and configure Sidekick so it can preview, publish, and edit content on your storefront.
7. Set up your local development environment and install the dependencies. Start the development server and explore your new storefront.

Dropins

https://experienceleague.adobe.com/developer/commerce/storefront/dropins/product-details/pdp-installation/

What are dropins?

Dropins are full-featured shopping components. They are not primitive components like Carousels and Galleries. Dropins define the storefront shopping experience. Our dropins include Product Details, Carts, Checkout, User Authentication, User Accounts, with more on the way. This section introduces these dropins and provides links to their details.