Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/content/docs/boilerplate/universal-editor.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,14 @@ sidebar:
---

import Link from '@components/Link.astro';
import Aside from '@components/Aside.astro';

The Adobe Commerce boilerplate supports the Universal Editor (UE) for content and Commerce blocks. For setup, instrumentation syntax, and custom block workflow, see the DA.live documentation below.

<Aside type="note" title="Document Authoring content source">
This page covers Universal Editor setup for the **Commerce boilerplate**, which uses **Document Authoring (DA.live)** as the content source. If your project uses **AEM Sites** as the content source, the instrumentation approach differs — follow the <Link href="https://www.aem.live/developer/universal-editor-blocks" text="Universal Editor blocks guide" /> on aem.live instead.
</Aside>

## Commerce boilerplate structure

Commerce differs from the standard DA.live approach (centralized `ue/models/blocks/` in <Link href="https://github.com/aemsites/da-block-collection" text="da-block-collection" />): **UE instrumentation JSON files live next to each block** at `blocks/{block-name}/_{block-name}.json`. A pre-commit hook composes these into the root-level `component-*.json` files the UE consumes.
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/get-started/before-you-start.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ These tools help you build and deploy a storefront on <Term>Edge Delivery Servic
|------|-----------------|---------------|
| Adobe ID | Document Author (DA.live) and other Adobe experiences in this workflow expect you to sign in with an Adobe ID. | Open <Link href="https://www.adobe.com/" text="Adobe.com" />, then use the account menu in the header to sign in or create an Adobe ID. |
| GitHub account | Site Creator creates or links a GitHub repository for your storefront code. | <Link href="https://github.com/signup" text="Sign up for GitHub" /> (personal or enterprise). |
| Document Author (DA.live) access | Site Creator runs inside DA.live and stores your starter content there. | <Link href="https://da.live" text="Open DA.live" /> and sign in with the Adobe ID from the first row. For workspace and authoring concepts, see <Link href="https://docs.da.live/" text="Document Authoring documentation" />. If your organization uses enterprise access, ask your admin for an invitation. |
| Document Author (DA.live) access | Site Creator creates your starter content in DA.live. This applies to the default Document Authoring path. If your project uses AEM Sites as the content source, DA.live access is not required. | <Link href="https://da.live" text="Open DA.live" /> and sign in with the Adobe ID from the first row. For workspace and authoring concepts, see <Link href="https://docs.da.live/" text="Document Authoring documentation" />. If your organization uses enterprise access, ask your admin for an invitation. |
| Adobe Commerce backend | Every <Term term="Drop-in components">drop-in component</Term> — a ready-made Commerce UI package for cart, checkout, account, or product pages — connects to an Adobe Commerce backend. You need to know which backend type you have before you can configure the storefront. | See [Backend options](/get-started/backends/) to pick Commerce PaaS, Adobe Commerce as a Cloud Service, or Adobe Commerce Optimizer. |
| Commerce Admin access and API values | Site Creator can read from your Commerce APIs when they are reachable. After the repo exists, [Storefront configuration](/setup/configuration/commerce-configuration/) asks for base URLs, GraphQL endpoints (Commerce's query language for reading and writing data), and credentials for a headless storefront (the storefront UI runs in the shopper's browser, not on the Commerce server). The exact fields depend on your backend. | Work with your Commerce administrator or solution partner to gather values before you paste them into tools. [Backend options](/get-started/backends/) lists services and limits per platform. When you have API access and a repository, the <Link href="https://da.live/app/adobe-commerce/storefront-tools/tools/config-generator/config-generator" text="config generator tool" /> in DA.live can build a starter storefront configuration from your inputs. Use [Storefront configuration](/setup/configuration/commerce-configuration/) to learn what each field means. |
| Node.js | You need Node.js before you run the Commerce boilerplate locally (`npm install`, `npm start`, and drop-in updates). Adobe lists which Node.js release to install in the Prerequisites section of <Link href="https://experienceleague.adobe.com/developer/commerce/storefront/get-started/create-storefront/" text="Create a storefront on Experience League" />. Adobe updates that Prerequisites line when the recommendation changes. The Commerce boilerplate on GitHub does not declare a Node version in `package.json` (there is no `engines` field), so match whatever Prerequisites shows when you read it. | Open Prerequisites on <Link href="https://experienceleague.adobe.com/developer/commerce/storefront/get-started/create-storefront/" text="Create a storefront on Experience League" />, install the Node.js release listed there from <Link href="https://nodejs.org/en/download" text="Download Node.js" />, then run `node -v` to confirm. |
Expand Down
4 changes: 4 additions & 0 deletions src/content/docs/get-started/create-storefront.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,10 @@ The diagram caption and the numbered list below describe the same flow, so you c

</Callouts>

<Aside type="note" title="Document Authoring content source">
This walkthrough uses <Term>Document Authoring</Term> on <Link href="https://da.live/" text="DA.live" />, the default for new EDS storefronts. For AEM Sites content (for example, Commerce drop-ins on an existing AEM as a Cloud Service site), content setup and Universal Editor steps differ. See the <Link href="https://github.com/adobe-rnd/aem-boilerplate-xcom" text="XCOM boilerplate" /> and <Link href="https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/edge-delivery/overview" text="Edge Delivery Services with AEM Sites" />.
</Aside>

## Which backend do you have?

<TableWrapper nowrap={[0]}>
Expand Down
11 changes: 11 additions & 0 deletions src/content/docs/merchants/quick-start/universal-editor.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,17 @@ description: Edit Commerce storefront content with the Universal Editor. See DA.
---

import Link from '@components/Link.astro';
import Aside from '@components/Aside.astro';

<Aside type="tip" title="Choosing your authoring approach">

Two approaches for authoring with Edge Delivery Services:

- **Document Authoring** (this guide): Content authored on da.live. The Universal Editor saves edits back into your DA.live project.

- **AEM Sites Authoring**: Content authored in AEM as a Cloud Service, published to Edge Delivery Services. See the <Link href="https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/sites/authoring/universal-editor/authoring" text="Universal Editor authoring docs" /> and [Localization (Universal Editor)](/merchants/quick-start/content-localization-universal-editor/) for the AEM-specific workflow.

</Aside>

The Universal Editor lets you edit storefront content in the context of the rendered page. The content is then saved into your Document Authoring (DA.live) project where you can use most content orchestration apps, such as localization, bulk publish, Snapshots, and more.

Expand Down
Loading