USF-1132: Storefront Implementation Guide #73
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jeff-matthews
force-pushed
the
USF-1132-implementation
branch
2 times, most recently
from
c97d75c
to
6ebc01d
Compare
jeff-matthews
force-pushed
the
USF-1132-implementation
branch
from
a4bbcb5
to
0f2799e
Compare
jeff-matthews
force-pushed
the
USF-1132-implementation
branch
from
fe3a2ba
to
41605a5
Compare
herzog31
reviewed
Oct 15, 2024
src/content/docs/implementation/setup/content-delivery-network.mdx
Outdated
Show resolved
Hide resolved
src/content/docs/implementation/setup/content-delivery-network.mdx
Outdated
Show resolved
Hide resolved
src/content/docs/implementation/setup/content-delivery-network.mdx
Outdated
Show resolved
Hide resolved
2 tasks
Co-authored-by: Stephen <[email protected]>
Co-authored-by: Kevin Harper <[email protected]>
USF-1485: CDN configuration
Co-authored-by: Kevin Harper <[email protected]>
USF-1657: Metadata and SEO
keharper
reviewed
Oct 17, 2024
| <Diagram caption="Implementation planning and project delivery process."> | ||
|  | ||
| </Diagram> | ||
|
|
There was a problem hiding this comment.
Add some text that ties the numbered infographic to the left navigation.
|
|
||
| Headless Adobe Commerce storefronts on Edge Delivery Services are built using a composable architecture with domain-driven commerce components ([dropins](/dropins/all/introduction/)). 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. |
There was a problem hiding this comment.
Dropins rely on Adobe Commerce and Catalog Service APIs
Add links to core and Catalog Service GraphQL pages?
| * **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 |
There was a problem hiding this comment.
Add links for all of these.
| 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 |
There was a problem hiding this comment.
Consider moving this section to the Commerce requirements page, and moving that page to be under Storefront Implementation.
| 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. |
There was a problem hiding this comment.
Do you need to differentiate the discovery process between companies that are already using one or more storefront services and those who are not?
| @@ -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? | |||
There was a problem hiding this comment.
As mentioned in another comment, consider moving this topic to be in the Storefront implementation section of the TOC
keharper
reviewed
Oct 18, 2024
| ### Thid-party integrations | ||
|
|
||
| * Prefer APIs over embedding third-party scripts. | ||
| * If you mut embed third-party scripts, try using placeholders to prevent cumulative layout shift (CLS) and load them delayed or when they appear in the viewport (`IntersectionObserver`). |
There was a problem hiding this comment.
Suggested change
| * If you mut embed third-party scripts, try using placeholders to prevent cumulative layout shift (CLS) and load them delayed or when they appear in the viewport (`IntersectionObserver`). | |
| * If you must embed third-party scripts, try using placeholders to prevent cumulative layout shift (CLS). Load them delayed or when they appear in the viewport (`IntersectionObserver`). |
|
|
||
| ## What should I do if my Catalog Service/Live Search data is missing or corrupted? | ||
|
|
||
| Submit a request to Adobe Commerce Support to clear your data space. This deletes all data within Catalog Service/Live Search for a specific environment ID. Be careful not to lear any data space required for production. |
There was a problem hiding this comment.
Suggested change
| Submit a request to Adobe Commerce Support to clear your data space. This deletes all data within Catalog Service/Live Search for a specific environment ID. Be careful not to lear any data space required for production. | |
| Submit a request to Adobe Commerce Support to clear your data space. This deletes all data within Catalog Service/Live Search for a specific environment ID. Be careful not to clear any data space required for production. |
| * LCP relevant blocks (for example, product details, product list page) must be loaded in the eager phase. This means that they need to be the first block on the page and added to the `LCP_BLOCKS` array. | ||
| * Only load elements that are required. Elements that are not immediately required should be separated and loaded when needed. | ||
| * **Example 1:** Logic for newsletter sign-up can be loaded when the user clicks on the subscribe button. | ||
| * **Example 2:** Minicart block is loaded on every page but only loads lightweight code to display button and a number. Only on click of the button, the full minicart block is loaded. |
There was a problem hiding this comment.
Suggested change
| * **Example 2:** Minicart block is loaded on every page but only loads lightweight code to display button and a number. Only on click of the button, the full minicart block is loaded. | |
| * **Example 2:** Minicart block is loaded on every page but only loads lightweight code to display button and a number. The full minicart block is loaded only upon a click of the button. |
|
|
||
| Launching a headless Adobe Commerce storefront on Edge Delivery Services requires some basic setup. | ||
|
|
||
| Adobe recommends starting with the [Commerce boilerplate](https://github.com/hlxsites/aem-boilerplate-commerce) to get a head start on the implementation. The [Ceate your storefront tutorial](/get-started/) provides all the information that you need to get started in about 20 minutes. |
There was a problem hiding this comment.
Suggested change
| Adobe recommends starting with the [Commerce boilerplate](https://github.com/hlxsites/aem-boilerplate-commerce) to get a head start on the implementation. The [Ceate your storefront tutorial](/get-started/) provides all the information that you need to get started in about 20 minutes. | |
| Adobe recommends starting with the [Commerce boilerplate](https://github.com/hlxsites/aem-boilerplate-commerce) to get a head start on the implementation. The [Create your storefront tutorial](/get-started/) provides all the information that you need to get started in about 20 minutes. |
|
|
||
| Depending on the outcome of the discovery phase, you can add dropins and widgets to the project. | ||
|
|
||
| You can find the integration patterns for dropins and widgets as pull requests in the [commerce boilerplate repository](https://github.com/hlxsites/aem-boilerplate-commerce). |
There was a problem hiding this comment.
Suggested change
| You can find the integration patterns for dropins and widgets as pull requests in the [commerce boilerplate repository](https://github.com/hlxsites/aem-boilerplate-commerce). | |
| You can find the integration patterns for dropins and widgets as pull requests in the [Commerce boilerplate repository](https://github.com/hlxsites/aem-boilerplate-commerce). |
|
|
||
| * Includes the same details as the full storefront option, plus the following: | ||
| * Transactional pages (for example, cart, checkout, and account) are routed to Commerce, depending on the Luma Bridge implementation | ||
| * Any additional endpoints (eg. REST endpoints, `/customer/sections/load`) that are required by the Luma Bridge implementation are routed to Commerce |
There was a problem hiding this comment.
Suggested change
| * Any additional endpoints (eg. REST endpoints, `/customer/sections/load`) that are required by the Luma Bridge implementation are routed to Commerce | |
| * Any additional endpoints (such REST endpoints, `/customer/sections/load`) that are required by the Luma Bridge implementation are routed to Commerce |
I don't know what customer/sections/load means or why it's in code formatting.
|
|
||
| ### API Mesh | ||
|
|
||
| API Mesh has a header size limit. We may need to remove third-party cookies if using API mesh: |
There was a problem hiding this comment.
I question the use of "we" in this section.
|
|
||
| ### Branch names on staging | ||
|
|
||
| You can enable using Edge Delivery Services branches on a staging URL (for example, `branch1.my-staging.com`). Use regex to get the domain name with this addition to the `miss` snippet: |
There was a problem hiding this comment.
enable the use of/ The opening sentence is hard to parse.
|
|
||
| ### Maintainance page workaround | ||
|
|
||
| The maintainance page can block requests to API Mesh/GraphQL. The solution is to create a VCL snippet with low priority that comes before the maintainance check in VCL and allows GraphQL requests through. (set commerce backend and pass) |
There was a problem hiding this comment.
The parenthetical sentence needs work
|
|
||
| ```bash | ||
| curl -sI -H 'Fastly-Debug: 1' https://www.aemshop.net/scripts/aem.js | grep 'x-cache\|surrogate-key\|cache-control' | ||
| content-encoding: gzip |
There was a problem hiding this comment.
I think the response begins here.
This comment is applicable for all the curl commands in this section. The commands and responses are in the same bash gates, without even a blank line to separate them.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Purpose of this pull request
This pull request (PR) creates a new section for project implementation guidance as described in USF-1132. It's modeled after the project blueprint in the boilerplate repo wiki. I also incorporated info from the technical presentations that the team has prepared (e.g., architecture diagrams).
This branch is the baseline for the new guide. I plan on creating separate PRs to target the stories scoped in the USF-1132 epic:
Design
I chose to organize the guide into the following top-level categories, with individual pages beneath each section:
Note
We'll probably decide to combine or move some pages during stakeholder review. We may also want to add a section for "development".
Review build
https://commerce-docs.github.io/microsite-commerce-storefront/implementation/