[AEM Gems] Building Storefronts on Edge Delivery Services with Adobe Commerce

[kautuk_sahni]

Session Details

This AEM GEMs webinar will teach you how to build a high-performance storefront on Edge Delivery Services for Adobe Commerce. We will guide you through the setup process of your project with the Commerce boilerplate and how to connect it with the new Commerce SaaS services for fast and Sensei UI-enhanced product catalog integration. We introduce drop-in components, a set of customizable front-end components that accelerate storefront development. You will learn best practices on how to extend and style them. Finally, we will highlight new Edge Delivery authoring features to enrich your Commerce experiences with authored content.

Housekeeping details:

1. Duration: 60 minutes including 10 minutes of Q&A
2. Audience: Customers, Partners, and Adobe Employees
3. Recording and slides will be made available to the public after the session
4. The session is free of charge, registration will be required

Session Recording

Session Presentation

Here is the Deck of the Session: https://adobe.ly/3VhmkZc 

Session Q&As

Questions	Answers
what is the underlying technology of edge services ? like is there a server where the document is converted to HTML content	You can find more information on the architecture on https://www.aem.live/docs/architecture
does the document editor have review process in places?	For document-based authoring, you can use all the review functionalities that MS Office and Sharepoint offers.
Pages and more importantly, all the content still doesn't load on mobile. How can I ensure everything loads? I compress everything but pages don't fully populate. I despise this...	We would need some additional information to be able to reply. Please post your request in the concluding/ending poll elaborating on your issue. Please also add your email so we can reply to you. https://bit.ly/EndingPoll06March
What CDN is used for Edge Delivery?  Fastly?	https://www.aem.live/docs/byo-cdn-setup
Is there a way to see reports on what loads to clients and how fast?	This is tracked by the CrUX data. You can also get more detailed information with the RUM tracking included in Edge Delivery.
does Edge Delivery allow content to be reused for a mobile app?	You're very flexible here. Usually Edge Delivery projects are built mobile-first. Content is usually shared across mobile and desktop.
Do you really recommend Office 365/Google drive for files sharing on commerce sites?	We recommend document-based authoring as a fast and easy way to manage content. In the end, this content gets published to Edge Delivery and not directly to the browser.
How does SEO works as the edge delivery services uses lazy load to load the blocks?	Search engines are fine with indexing client-side loaded data. Especially if the site is very fast.
Can I include the adobe target or adobe analytics javascript for tracking and personalizing the experiences ?	yes
What is the reason to use Google Doc or MS Word as an editor ? The native Page Builder of Adobe Commerce looks easier to use with widgets that you can drag & drop on the page.	We have seen in over 230+ live sites that doc-based is fast and does not have any learning curve.
Do the Commerce Drop in Components use Commerce Integration Framework?	no
When the module ( "magento/magento-extra-graphql" ) for cart & checkout drop-ins will be available for Adobe Commerce?	The current plan is for the cart and checkout dropins to work against 2.4.7, we plan to provide a compatibility package for 2.4.6 version
Are there micro frontend components for Live Search?...assuming so given an earlier silde.	we use the existing Live Search widget.
if there are customisations needed like on PLP/PDP/Checkout does integrator need to customise these dropins?	correct. dropin components can be customized and extended using extension points.
Is it possible to have multiple "default" PDP pages, for e.g A/B testing? How to mount them in config	You can use the experimentation framework in Edge Delivery for that: https://www.aem.live/docs/experimentation
Is it possible to configure the personal details form fields inside of the checkout dropin ?	The address form is customizable from the Commerce back-office dashboard.
Do the PLP drop-ins connect exclusively to the catalog services endpoints and mean customers would have to be using catalog services?	Yes, the PLP widget and the PDP dropin use the catalog service endpoint.
Is a Dropin like a SPA or more like a Component?	From a frontend architecture perspective, Dropins are more like components, or "micro-frontends" but do not internally handle routing of your website, so I would not consider them SPAs.
Office365 was designed for intranet type applications...not a commercial website. As you site traffic grows, you will have issues. Also, you don't other production features. Same for Google. What is the site traffic profile for Adobe Commerce?	documents are used for content authoring - not for delivery. This happens via Edge Delivery. https://www.aem.live/docs/authoring
Can this arch model be extended to any headless commerce engine ?  What are the requirements or constraints	Yes. One major requirement is however to have very fast APIs. As long as you have these available or build them, you can use any commerce engine.
How are the dropins included on the page as node_modules is within the gitignore ?	There is a postinstall script that copies them into the scripts folder. See https://github.com/hlxsites/aem-boilerplate-commerce/pull/34
Do the droppins need to be developed in JS or we can use other libraries to develop that like react	Dropins are framework agnostic. You can use them with any framework.
Can hybris or other commerce can be used with edge delivery?	Yes. One major requirement is however to have very fast APIs. As long as you have these available or build them, you can use any commerce engine.
Does it require additional license or customer with AEM/Commerce license can use this platform?	Edge Delivery is currently available for AEM CS customers. At Summit, there will be an announcement regarding Edge Delivery for Commerce.
Can you talk more about enrichment and how one would enrich a product page with marketing content?	Enrichment is the process of tagging content with Commerce references (e.g. a product) and this content can then be loaded on catalog pages with that product.
when to use universal editor or document editor?	that depends on the preference and customer use-case.
I am new to AEM, but do you need to use Google docs for managing content on EDS?	for document-based authoring you can use Google Drive or Sharepoint. For AEM authoring you would use AEM.
is there any mechanism to stage this type of update to go live at a particular date and time?	yes https://www.aem.live/docs/?q=schedulded+publishing
Instead of defining applicable SKUs in Google Drive, could it leverage promotional rules defined within Adobe Commerce?	You can also use for example product attributes to assign content. Promotional rules would be possible as well, but today these are not exposed via API out of the box. Could be added as part of a project though.
What is the Google Lighthouse score with any of these PLP or PDP? Do they also reach 100?	Yes. PLP can be tricky sometimes and might need some extra optimisations. Depends a bit on the design of your site.
does the name of the excel sheet have to be enrichment as it is for searche like query_index?	This is the setup as defined in the boilerplate project. But generally you are free to change this.
If i want something more complex like 2/3 col slider & carousel each show different product (in adobe different source eg. category pagebuilder element) google docs seems to be good for POC or from user perspective	You can leverage Catalog Service / Live Search APIs also for building custom blocks which do exactly what you described.
Is my understanding correct that to do enrichment you require a document and an entry in an Excel file?	The document yes. The entry in the Excel file is created automatically using the Indexing feature in Edge Delivery.
if the layout / features vary on PDP based on product type (say shirt vs shoes) how do we configure multiple pdp default docs?	You can have multiple blocks with different PDP implementation and serve blocks per product type
how to maintain Mutiple variations of  styles for a block?	You can use https://www.aem.live/developer/markup-sections-blocks#block-options
Publishing a page to index it will move the changes to live site as well but how can we control it so that they remain only to preview.	Not currently.
What limitations are there with Adobe Commerce? For example is there support for, customer group prices, B2B suite	Anything supported in Adobe Commerce through APIs is supported for headless storefronts. The storefront boilerplate does not provide code for customer group prices or B2B yet.
Publishing a page to index it will move the changes to live site as well but how can we control it so that they remain only to preview.	This is not possible at the moment. But there are ways to work around that.
Is it possible to overwrite / edit the dropin Javascript OR to create a custom dropin version for a checkout step ?	Dropins are built internally right now using a private SDK. In the future we may explore opening this up for public use. For extensibility purposes, the current Dropins provide "slots" as is being discussed currently. In Checkout, for example, you can add a custom payment provider through this mechanism.
could Dropins be used even if you are not using the commerce as backend but have some other ecommerce tool?	not at the moment...
Where information about product is stored? How EDS is getting full product info?	Edge delivery will retrieve the data from the Catalog Service.
Is there any comparison of the "traditional" AEM & Commerce integration with what you are showing today?	not yet, but you should be able to do the same things... With the difference that Edge Delivery development will be faster and the storefront will be fast.
Can I create pdp specific content that would come from the gdrive/sharepoint but only applies to specific SKU's?	yes, that's the enrichment use-case Hannes showed before.
how do we maintain different variations of a product on PDP like different sizes, colors and also is there any single template for the PDP page that is picked by every product dynamically, or is this working in a way that all the products should be under a folder?	This depends a lot on your use case. There is quite some flexibility in how this can be implemented.
Is B2B supported?	B2B dropin components are on the roadmap but not yet available.
what features of Adobe commerce does this storefront support out of the box, for example wishlist, account dashboard, custom options etc?	I don't have a full list of features at hand, but we are working in each of the various "domains", to support a large selection of core functionality. We have not yet built a wishlist view, or account dashboard with dropins.
how is i18n supported for product data and the static labels?	You (integrator) can provide translation files that modify any OOTB translations that are provided.
Does EDS offer a cache component for product data ?	Caching for product data is done on API (Catalog Service / LiveSearch) and browser level.
Is it possible to include personalized data, e.g. icon of shopping cart with nr. of items already in cart. Or information if user might be eligible for a promotion?	Yes. This data is added on the fly based on the user state.
Is there a need for Typescript to be used for JS code changes ? or will traditional JavaScript work	You can use whatever you like in your project. The Dropins are transpiled, production ready JS bundles, no hard requirement on TS.
Do you provide typeinfo for the @dropins packages for autocompletion?	Not currently.
Is there support for the Commerce B2B functions?	Not currently.
Can you create a non-PDP page that includes a product and buy button?	yes
is there a process for updating existing sites with new changes/features added to the boilerplate?	You can simply pull changes from to boilerplate into your project. The process is similar to GitHub forks.
Is there a list of supported Adobe Commerce features/dropins? Can I get a link to the roadmap?	We support end2end shopping experience with Product Detail Page (PDP) Drop-in, Mini cart/Cart Dropin, Checkout Dropin, User Auth Dropin and Account Dropin
Can Adobe Target Visual Experience composer be used with Edge Delivery services or are there any limitations ?	Some Target use cases can be quite heavy. So in Edge Delivery projects we usually go through individual use cases and integrate them in an optimised way.
do you provide type's for the dropins-packages ?	Not at this time. We are hoping to at least provide documentation for the integration code API soon.
Do you have example / link for Adobe Commerce client use Edge Delivery ?	www.maidenform.com
could you share this presentation?	All the resources would be shared in next 2 days at https://adobe.ly/48m4dEm
How does the generated PDP page work with the query-index search functionality. Do we need to specify another search index for these pages that do not have an actual document?	Generic PDPs need to be indexed by API. The regular publishing via Sidekick will not index those documents.
can you schedule the enrichments to be published at a specific date and time, similar to commerce staging functionality?	yes
Can you schedule enrichment to be available at a specific date and time, similar to commerce staging?	This can be done yes.
Hi, where is the library or reference docs for any boilerplate code (or 'slots') outside of the default at set up?	All code can be found at https://github.com/hlxsites/aem-boilerplate-commerce
Q- Is there any scaffolding so we can extend upon the dropins?	Dropins can be extended using the "slots" pattern.
is the side kick customizable?	Yes, see https://www.aem.live/developer/sidekick-customization
From which origin is the client (browser) getting the data of prices / stock qty from?	This depends on your setup. We would recommend proxying any API calls through your CDN, so they are made to the same origin as your site is served from.
What does your indexer do when lets say customer updates prices on 10 000 products? As I understand it you fill default template for product with product data by grahpql query and then store the result on edge?	No, we don't export any product data to Edge Delivery. Product data is read from Adobe Commerce SaaS services.

Session Schedule

Wednesday, March 6, 2024, | 8 am PST OR 5 pm CEST OR 9.30 pm IST  

Speaker(s)

Hannes Hertach - Software Development Engineer, Adobe & James Calcaben - Software Engineer, Adobe

Don't forget to register yourself for this session using the registration link shared above. 

Register at: https://adobe.ly/48cmKCV 

[Residentx10]

Hi I'm familiar with AEM but I'm not sure how this connects to Commerce. Can you present an overview of what this storefront connections looks like?

1. What currencies are supported? 

2. How do I manage all of this sites?  

3. Do you have a playbook for use on Azure? 

4. How are multi-languages and identities handled on Commerce?   

5. At what level of scale can Commerce handle transactions? 

[hannes_hertach]

Thank you for your question.

This session will cover how we can use AEM with Edge Delivery Services to build a front-end for a headless Adobe Commerce.

Any feature supported by Adobe Commerce headless can be integrated into the front-end. You can find the documentation for supported features of Adobe Commerce here: https://developer.adobe.com/commerce/docs/

During the session, we will cover your questions regarding how to connect Adobe Commerce to AEM and how the site is managed.

[lemundo-ts]

Hi Team,

were you able to record the session?

Best regards

Torben

[kautuk_sahni]

Yes, we will share the recording link within the next 2 days. Work is in the progress.

[Sandeep_Maheshwari]

Hi, please share the link to the recorded session.

[kautuk_sahni]

Yes, we will share the recording link within the next 2 days. Work is in the progress.

[kautuk_sahni]

The recording for this session has been uploaded to the main thread.

[kautuk_sahni]

The presentation for the session is added to the Main thread.