USF-1132: Initial commit

astro.config.mjs

@@ -39,15 +39,19 @@ export default defineConfig({
  '/dropins/checkout/checkout-introduction': '/developer/commerce/storefront/dropins/checkout',
  '/dropins/user-account/useraccount-introduction': '/developer/commerce/storefront/dropins/user-account',
  '/dropins/user-auth/userauth-introduction': '/developer/commerce/storefront/dropins/user-auth',
- '/launch': '/developer/commerce/storefront/get-started/launch-checklist',
+ '/faq': '/developer/commerce/storefront/troublshooting/faq',
+ '/get-started/launch-checklist': '/developer/commerce/storefront/implementation/launch',
+ '/get-started/requirements': '/developer/commerce/storefront/discovery/requirements',
+ '/get-started/configurations': '/developer/commerce/storefront/setup/commerce-configuration',
+ '/launch': '/developer/commerce/storefront/implementation/launch',
  '/product-details/pdp-containers': '/developer/commerce/storefront/dropins/product-details/pdp-containers',
  '/product-details/pdp-functions': '/developer/commerce/storefront/dropins/product-details/pdp-functions',
  '/product-details/pdp-installation': '/developer/commerce/storefront/dropins/product-details/pdp-installation',
  '/product-details/pdp-introduction': '/developer/commerce/storefront/dropins/product-details/',
  '/product-details/pdp-slots': '/developer/commerce/storefront/dropins/product-details/pdp-slots',
  '/product-details/pdp-styles': '/developer/commerce/storefront/dropins/product-details/pdp-styles',
- '/references/configurations': '/developer/commerce/storefront/get-started/configurations',
- '/references/requirements': '/developer/commerce/storefront/get-started/requirements',
+ '/references/configurations': '/developer/commerce/storefront/setup/commerce-configuration',
+ '/references/requirements': '/developer/commerce/storefront/discovery/requirements',
  },
  integrations: [
  tailwind({
@@ -109,6 +113,99 @@ export default defineConfig({
  directory: '/get-started/'
  }
  },
+ {
+ label: 'Storefront Implementation',
+ items: [
+ {
+ label: 'Overview',
+ link: '/implementation/'
+ },
+ {
+ label: 'Discovery',
+ collapsed: true,
+ items: [
+ {
+ label: 'Overview',
+ link: '/implementation/discovery/'
+ },
+ {
+ label: 'Commerce requirements',
+ link: '/implementation/discovery/requirements/'
+ },
+ {
+ label: 'Data export validation',
+ link: '/implementation/discovery/data-export-validation/'
+ },
+ {
+ label: 'Luma Bridge',
+ link: '/implementation/discovery/luma-bridge/'
+ },
+ ]
+ },
+ {
+ label: 'Setup',
+ collapsed: true,
+ items: [
+ {
+ label: 'Overview',
+ link: '/implementation/setup/'
+ },
+ {
+ label: 'Content delivery network',
+ link: '/implementation/setup/content-delivery-network/'
+ },
+ {
+ label: 'Commerce configuration',
+ link: '/implementation/setup/commerce-configuration/'
+ },
+ {
+ label: 'Dropins and widgets',
+ link: '/implementation/setup/dropins-and-widgets/'
+ },
+ {
+ label: 'Commerce blocks',
+ link: '/implementation/setup/commerce-blocks/'
+ },
+ ]
+ },
+ {
+ label: 'Marketing and SEO',
+ collapsed: true,
+ items: [
+ {
+ label: 'Overview',
+ link: '/implementation/marketing/'
+ },
+ {
+ label: 'Instrumentation',
+ link: '/implementation/marketing/commerce-instrumentation/'
+ },
+ {
+ label: 'SEO',
+ link: '/implementation/marketing/seo/'
+ },
+ {
+ label: 'Metadata',
+ link: '/implementation/marketing/metadata/'
+ },
+ ]
+ },
+ {
+ label: 'Launch',
+ collapsed: true,
+ items: [
+ {
+ label: 'Overview',
+ link: '/implementation/launch/'
+ },
+ {
+ label: 'Checklist',
+ link: '/implementation/launch/checklist/'
+ },
+ ]
+ },
+ ]
+ },
  {
  label: 'Dropins',
  items: [
@@ -200,7 +297,7 @@ export default defineConfig({
  autogenerate: {
  directory: '/troubleshooting/'
  }
- }
+ },
  ]
  }), (await import("@playform/compress")).default({
  CSS: false,

src/content/docs/implementation/discovery/data-export-validation.mdx

@@ -0,0 +1,16 @@
+---
+title: Data export validation
+description: Learn how to validate data exports from your Adobe Commerce backend to your storefront.
+---
+
+Data export synchronizes data between an Adobe Commerce instance and connected storefront services.
+
+Validating the data export is crucial to ensure that the data is correctly synchronized and available for the storefront. You can use the [Data Management Dashboard](https://experienceleague.adobe.com/en/docs/commerce-admin/systems/data-transfer/data-dashboard) to monitor the data sync progress for each service.
+
+:::tip[Self-service data export validation]
+See the [_SaaS Data Export Guide_](https://experienceleague.adobe.com/en/docs/commerce-merchant-services/saas-data-export/overview) for details and troubleshooting.
+:::
+
+Use GraphQL to validate that all products were synchronized and product lookup and search are working. See [GraphQL queries](https://developer.adobe.com/commerce/services/graphql/catalog-service/products/) and [Postman sample collection](https://github.com/magento/adobe-commerce-catalog-service) for queries. 
+
+For more complex catalogs, reach out to the Adobe team on Slack to validate that the exported data is correct. This might require you to provide a database dump or direct access. Please also reach out to the Adobe team if you encounter any currently un-supported use cases, so that they can be enabled in the future.

src/content/docs/implementation/discovery/index.mdx

@@ -0,0 +1,79 @@
+---
+title: Discovery and preparation
+description: Learn about Adobe Commerce on Edge Delivery Services project requirements, data validation, dropins, and Luma Bridge.
+---
+
+Before starting any Adobe Commerce on Edge Delivery Services project, you must conduct a discovery phase to scope the project and ensure that there are no major roadblocks or risks.
+
+The discovery phase is important because Adobe Commerce is a highly customizable platform with a large thid-party extension ecosystem. Migrating an Adobe Commerce storefront to Edge Delivery Services is similar to migrating to a headless storefront (like [PWA Studio](https://developer.adobe.com/commerce/pwa-studio)).
+
+:::note[Important]
+The key requirement for a headless storefront implementation is that all required data is provided by APIs. Adobe Commerce provides all of the API coverage that you need for a successful implementation.
+:::
+
+## Review Commerce requirements
+
+Before starting the project, ensure that your Adobe Commerce backend meets the following requirements:
+
+* **Product license**: Cloud or on-premises (Magento Open Source is not supported)
+* **Version**: v2.4.7
+* **PHP**: 8.3/8.2 for Adobe Commerce 2.4.7
+* **Storefront services**: Ensure that the following services are installed and configured:
+ * Data Connection service
+ * Services Connector
+ * Catalog Sync service
+ * Catalog Service
+ * Live Search
+ * Product Recommendations
+
+ See [Commerce requirements](/implementation/discovery/requirements/) for more information.
+
+## Identify extensions
+
+Before starting the project, use the following list to create an inventory of the Adobe Commerce extensions that are actively being used. This will help you understand which extensions can be replaced by out-of-the-box Adobe Commerce functionality.
+
+* What extensions are currently in use?
+
+* What type of data do the extensions provide (for example, reviews)?
+
+* Is the data required on the frontend?
+
+* How do the extensions expose the data (for example, GraphQL, REST API)?
+
+* Do the extensions expose an API to access data (for example, [Amasty Labels](https://amasty.com/docs/doku.php?id=magento_2:product_labels))? If not, create an action item to expose the required data through an API. Options include:
+
+ * Customize the Adobe Commerce Catalog Service exporter to export additional custom data to Catalog Service
+ * Create a custom Adobe Commerce GraphQL query
+ * Use [API Mesh for Adobe Developer App Builder](https://developer.adobe.com/graphql-mesh-gateway/)
+
+* Are any of the extensions for delivery options (for example, shipping/BOPIS), payments, or tax providers? If you use third-party solutions, clarify if they expose APIs on the frontend and if they provide their own set of dropin components for the frontend integration.
+
+## Validate option for dropins/widgets
+
+Dropins are re-useable components that define the storefront shopping experience. They are framework agnostic and can be used in any context (Edge Delivery Services, AEM, Luma). However, this documentation focuses on the use of dropins in Edge Delivery Services projects using the [boilerplate template](https://github.com/hlxsites/aem-boilerplate-commerce). The dropin development roadmap is synchronised with Adobe Commerce APIs, so new API features are automatically available in dropins and widgets.
+
+Storefront widgets in Adobe Commerce Live Search are tools that enhance the search functionality on your site. Widgets are designed to improve the user experience by making search results more accessible and relevant. There are two main types of widgets:
+
+* **[Live Search Popover](https://experienceleague.adobe.com/en/docs/commerce-merchant-services/live-search/live-search-storefront/storefront-popover)**: This widget appears as a box under the search field, displaying search results dynamically as users type their queries.
+* **[Product Listing Page (PLP)](https://experienceleague.adobe.com/en/docs/commerce-merchant-services/live-search/live-search-storefront/plp-styling)**: This widget provides a searchable product listing page with facets and synonym support, making it easier for users to find products.
+
+:::note
+See the [dropins overview](/dropins/all/introduction/) for a list of all available dropins.
+:::
+
+### Use cases and requirements
+
+Document your use cases and requirements. If there are gaps, the Adobe team can help you understand how to fill them.
+
+The Live Search Popover and PLP has two integration paths:
+
+* Using the out-of-the-box hosted option where Adobe hosts the JavaScript file
+
+ * Automatic updates for fixes and small features
+ * Small upgrades available for major or breaking features
+ * Can change some styling
+
+* Using the customized option where Adobe provides a reference implementation for the components
+
+ * Full control of customization and look and feel
+ * You host the library and own the total cost of ownership

src/content/docs/implementation/discovery/luma-bridge.mdx

@@ -0,0 +1,38 @@
+---
+title: Luma Bridge
+description: Learn how to implement the Luma Bridge for your Adobe Commerce on Edge Delivery Services project.
+---
+
+This section provides guidance on how to implement the Luma Bridge for your Adobe Commerce on Edge Delivery Services project.
+
+Before starting an implementation, clarify the following:
+
+ * Architecture of the cart, checkout, and account pages
+ * Complexity of the cart, checkout, and account pages
+ * Requirements for customization of the cart, checkout, and account pages
+
+This information will help you decide whether to use Luma Bridge or a headless implementation for the cart, checkout, and account pages.
+
+## What is Luma Bridge?
+
+Luma bridge is an implementation for Adobe Commerce on Edge Delivery Services projects where the complex transactional part of the store (cart, checkout, account) is reused instead of being rebuilt during the project.
+
+If the previous discovery steps led to the conclusion that dropins can be used for cart, checkout, and account experiences, Luma Bridge is not necessary or can be reduced to parts that are not covered by dropins (for example, complex customizations). If existing headless implementations for cart, checkout, and account ([PWA Studio](https://github.com/magento/pwa-studio), [Vue Storefront](https://vuestorefront.io/)) are available, Luma Bridge is not necessary.
+
+Rebuilding the cart, checkout, and account pages as part of a project is usually not feasible. Instead, Adobe recommends reusing existing cart, checkout, and account pages based on Luma PHP. You can use Luma Bridge to route the shopper to the PHP-based cart, checkout, and account pages.
+
+:::note
+Be aware that with a side-by-side/Luma Bridge implementation, you will not achieve a 100 Lighthouse score on cart, checkout, and account pages.
+:::
+
+## Where can I get it?
+
+Luma Bridge is available from the following providers:
+
+ * Adobe Consulting (reach out via Slack)
+ * Atwix (https://www.atwix.com/)
+ * Atama ([open source](https://github.com/AtamaCo/luma-bridge), https://www.atama.co/)
+
+:::tip
+When using Luma Bridge, ensure that you have engineers on the project with backend PHP knowledge on Adobe Commerce.
+:::

src/content/docs/get-started/requirements.mdx → src/content/docs/implementation/discovery/requirements.mdx

@@ -1,8 +1,6 @@
 ---
 title: Commerce requirements
 description: Learn about the backend service requirements for your Storefront.
-sidebar:
- order: 5
 ---
 
 import Tasks from '@components/Tasks.astro';
@@ -15,12 +13,22 @@ When connecting your storefront dropins to your own instance of Adobe Commerce,
 For a complete list of merchandising services available for your Adobe Commerce storefront, refer to the [Adobe Commerce Services Guides](https://experienceleague.adobe.com/en/docs/commerce-merchant-services/user-guides/home). Direct links to the required services are provided below.
 :::
 
+## What are storefront services?
+
+Storefront services are a set of multi-tenant services that provide access to storefront data via GraphQL APIs. They are very fast and are not tied to scaling constraints of a Commerce environment. They provide read-only access to catalog data, which can drive product detail and list pages, search, navigation, and product recommendations. [Synchronized data](https://experienceleague.adobe.com/en/docs/commerce-merchant-services/user-guides/integration-services/saas) is stored in a "SaaS data space" available through Adobe IMS. 
+
+Availability and setup of these services are a hard requirement for building a storefront on Edge Delivery Services because only these APIs provide the performance to build sites with a 100 Lighthouse score. The storefront services APIs are available in addition to the core Adobe Commerce [GraphQL APIs](https://developer.adobe.com/commerce/webapi/graphql/). 
+
+This page provides an overview of the services required for your Adobe Commerce storefront.
+
 <Tasks>
 
 <Task>
 
 ### Adobe Commerce
 
+Adobe Commerce is the backend system that powers your Commerce storefront. You must use version 2.4.7 or later with the storefront compatibility package installed.
+
 The following links provide the requirements and installation procedures for your Adobe Commerce backend:
 
 - [System requirements for cloud infrastructure](https://experienceleague.adobe.com/en/docs/commerce-operations/installation-guide/system-requirements)
@@ -49,6 +57,10 @@ The Services Connector connects your Commerce storefront to the Commerce backend
 
 The Catalog Sync service synchronizes Commerce catalog data with your Commerce storefront. The service is continuously triggered by events that change your catalog data, like product price and inventory changes. Refer to the [Catalog Sync Guide](https://experienceleague.adobe.com/en/docs/commerce-merchant-services/user-guides/data-services/catalog-sync) for details and installation instructions.
 
+:::note[Catalog structure]
+Please schedule a discovery session with the Adobe team to share insights on how your catalog is structured. Please assess if the catalog structure is compatible with the services.
+:::
+
 </Task>
 
 <Task>
@@ -63,12 +75,18 @@ The Catalog Service module provides fast read-only access to Commerce catalog da
 
 The Live Search service replaces the default Commerce catalog search and installs the Product Listing Page (PLP) widget in your storefront. Refer to the [Live Search Guide](https://experienceleague.adobe.com/en/docs/commerce-merchant-services/live-search/overview) for details and installation instructions.
 
+:::caution[Multiple stores in a single Adobe Commerce environment]
+When using a single Adobe Commerce environment for multiple stores and only a single store should be migrated to Edge Delivery Services, please raise this with the Adobe team on Slack to ensure that Live Search is activated without disabling Elasticsearch, which should continue to drive the search of the other stores.
+:::
+
 </Task>
 
 <Task>
 ### Product Recommendations
 
 Product Recommendations uses artificial intelligence and machine-learning algorithms ([Adobe Sensei](https://business.adobe.com/products/sensei/adobe-sensei.html)) to create personalized storefront experiences. While not a strict requirement, we recommended it for Commerce storefronts. Refer to the [Product Recommendations Guide](https://experienceleague.adobe.com/en/docs/commerce-merchant-services/product-recommendations/guide-overview) for details and installation instructions.
 
+It provides data for product recommendations for the current shopper context and surfaces "units" such as "Customers who viewed this product also viewed" and can be placed in several areas of the site. You can configure the behavior of the service in Adobe Commerce Admin.
+
 </Task>
 </Tasks>