Skip to content

Commit 6baa4e1

Browse files
committed
draft 2.5
1 parent 2cbe191 commit 6baa4e1

9 files changed

Lines changed: 37 additions & 44 deletions

File tree

astro.sidebar.mjs

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -859,13 +859,13 @@ export function generateSidebar() {
859859
icon: 'seti:svg',
860860
items: [
861861
{
862-
label: 'Quick Start',
862+
label: 'Start Here',
863863
items: [
864864
{ label: 'Overview', link: '/merchants/quick-start/' },
865865
{ label: 'What is Commerce Storefront?', link: '/merchants/quick-start/create-content/' },
866-
{ label: 'Content model overview', link: '/merchants/quick-start/content-model/' },
867-
{ label: 'Your First Page', link: '/merchants/quick-start/your-first-page/' },
866+
{ label: 'Page Designers and Content Authors', link: '/merchants/quick-start/content-model/' },
868867
{ label: 'Using the Document Authoring Tool', link: '/merchants/quick-start/document-authoring/' },
868+
{ label: 'Create your first commerce page', link: '/merchants/quick-start/your-first-page/' },
869869
{ label: 'Using the Universal Editor', link: '/merchants/quick-start/universal-editor/' },
870870
// { label: 'Using Digital Assets Management', link: '/merchants/quick-start/digital-assets-management/' },
871871
],

src/content/docs/merchants/blocks/author-and-developer-tasks.mdx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import TableWrapper from '@components/TableWrapper.astro';
88
import TaskSection from '@components/TaskSection.astro';
99
import Term from '@components/Term.astro';
1010

11-
If your storefront uses templates for common content pages, start from the closest match instead of an empty page — see [Content model overview](/merchants/quick-start/content-model/). Labels, block settings, spacing, scheduling, and which blocks appear on a page are all author tasks done in Document Authoring without code. Visual design and behavior inside a drop-in (colors, layout, how buttons work) belongs to a developer.
11+
If your storefront uses templates for common content pages, start from the closest match instead of an empty page — see [Page Designers and Content Authors](/merchants/quick-start/content-model/). Labels, block settings, spacing, scheduling, and which blocks appear on a page are all author tasks done in Document Authoring without code. Visual design and behavior inside a drop-in (colors, layout, how buttons work) belongs to a developer.
1212

1313
## What you can change without code
1414

@@ -59,7 +59,7 @@ Every Commerce Storefront page stacks three layers:
5959
- <Term term="Commerce blocks">Commerce block</Term> — A <Term>Block table</Term> in your document with the block name (for example, `product-details` or `commerce-cart`) and any settings that block needs. See [Block table structure](/merchants/blocks/block-tables/) for the table shape.
6060
- Page — The document that holds your Commerce blocks and any content blocks (marketing copy, images, breadcrumbs, Product Recommendations).
6161

62-
Most Commerce blocks live on a page you author yourself, such as your cart or sign-in page. If your storefront uses templates for common content pages, like a landing page or category page, start from the closest match instead of an empty page — see [Content model overview](/merchants/quick-start/content-model/) for how that works. The product page (PDP) is the exception. One document at `/products/default` is the template layout for every product URL, so a change there updates all product pages at once. Names, prices, and images still come from your catalog, not from that document. See [Product Details](/merchants/blocks/product-details/) for how this template works.
62+
Most Commerce blocks live on a page you author yourself, such as your cart or sign-in page. If your storefront uses templates for common content pages, like a landing page or category page, start from the closest match instead of an empty page — see [Page Designers and Content Authors](/merchants/quick-start/content-model/) for how that works. The product page (PDP) is the exception. One document at `/products/default` is the template layout for every product URL, so a change there updates all product pages at once. Names, prices, and images still come from your catalog, not from that document. See [Product Details](/merchants/blocks/product-details/) for how this template works.
6363

6464
#### Roles at a glance
6565

@@ -70,7 +70,7 @@ Most Commerce blocks live on a page you author yourself, such as your cart or si
7070

7171
On a small team, one person may cover two roles. Name the role you need on a ticket so the request reaches the right person faster.
7272

73-
For why this split exists, and how layout options get built before a Content Author can pick them, see [Content model overview](/merchants/quick-start/content-model/).
73+
For why this split exists, and how layout options get built before a Content Author can pick them, see [Page Designers and Content Authors](/merchants/quick-start/content-model/).
7474

7575
For developer-facing vocabulary (containers, slots, events), see [Introduction to drop-in components](/dropins/all/introduction/).
7676

src/content/docs/merchants/blocks/b2b/index.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,7 @@ For B2B storefronts, add these specialized pages:
190190

191191
## Related resources
192192

193-
- [Your first page](/merchants/quick-start/your-first-page/) - Step-by-step tutorial for creating a page.
193+
- [Create your first commerce page](/merchants/quick-start/your-first-page/) - Step-by-step tutorial for creating a page.
194194
- [Page metadata](/merchants/blocks/page-metadata/) - Configure page-level settings.
195195
- [Section metadata](/merchants/blocks/section-metadata/) - Style your page sections.
196196
- [B2C Commerce blocks](/merchants/blocks/b2c/) - If you're building a B2C storefront, see the B2C blocks reference.

src/content/docs/merchants/blocks/b2c/index.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ Enhance your B2C storefront with these additional pages:
118118

119119
## Related resources
120120

121-
- [Your first page](/merchants/quick-start/your-first-page/) - Step-by-step tutorial for creating a cart page.
121+
- [Create your first commerce page](/merchants/quick-start/your-first-page/) - Step-by-step tutorial for creating a category page.
122122
- [Page metadata](/merchants/blocks/page-metadata/) - Configure page-level settings.
123123
- [Section metadata](/merchants/blocks/section-metadata/) - Style your page sections.
124124
- [B2B Commerce blocks](/merchants/blocks/b2b/) - If you're building a B2B storefront, see the B2B blocks reference.

src/content/docs/merchants/blocks/block-tables.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,5 +69,5 @@ To add any Commerce block to a page, create a block table in Document Authoring
6969

7070
</TaskSection>
7171

72-
For an end-to-end example that covers metadata, a cart block, and section styling, work through [Your first page](/merchants/quick-start/your-first-page/).
72+
For an end-to-end example that covers metadata, a commerce block, and section styling, work through [Create your first commerce page](/merchants/quick-start/your-first-page/).
7373

src/content/docs/merchants/blocks/content-commerce-blocks.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ Content blocks and Commerce blocks are the two types of building blocks on every
1111

1212
Content blocks are pre-built UI components for static page content — buttons, images, galleries, navigation, and text layouts. They come from Edge Delivery Services and the AEM block collection. You add a content block to a page with the same document table pattern you use for Commerce blocks.
1313

14-
For the full list and how to author them, see the <Link href="https://www.aem.live/developer/block-collection" text="Block Collection documentation" /> and the <Link href="https://www.aem.live/docs/authoring" text="content blocks tutorial" />. For why the set of available blocks and variations is fixed rather than something you design freely, see [Content model overview](/merchants/quick-start/content-model/).
14+
For the full list and how to author them, see the <Link href="https://www.aem.live/developer/block-collection" text="Block Collection documentation" /> and the <Link href="https://www.aem.live/docs/authoring" text="content blocks tutorial" />. For why the set of available blocks and variations is fixed rather than something you design freely, see [Page Designers and Content Authors](/merchants/quick-start/content-model/).
1515

1616
## Commerce blocks
1717

src/content/docs/merchants/quick-start/content-model.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Content model overview
2+
title: Page Designers and Content Authors
33
description: Why content and presentation are separated in your storefront, and what that means for page designers and content authors.
44
---
55

src/content/docs/merchants/quick-start/index.mdx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Quick start
2+
title: Start Here
33
description: Learn how to create pages, add commerce blocks, and configure your storefront using document authoring tools.
44
---
55

@@ -14,11 +14,11 @@ Get started by learning what Commerce Storefront is and how block tables work, t
1414
| **Get oriented** | |
1515
| [What is Commerce Storefront?](/merchants/quick-start/create-content/) | Learn about the Commerce Storefront platform and the tools you use to build storefront pages |
1616
| [Author and developer tasks](/merchants/blocks/author-and-developer-tasks/) | Drop-ins, blocks, and pages as three layers; what you can change without code; when to hand off to a developer |
17-
| [Content model overview](/merchants/quick-start/content-model/) | Why content and layout are separate, and why layout options are fixed |
17+
| [Page Designers and Content Authors](/merchants/quick-start/content-model/) | Why content and layout are separate, and why layout options are fixed |
1818
| [Block table structure](/merchants/blocks/block-tables/) | How document tables map to blocks (name row, key-value settings, and merged full-width content rows) |
1919
| **Build a page** | |
2020
| [Using the Document Authoring tool](/merchants/quick-start/document-authoring/) | Learn the document-based authoring interface for creating and editing page content |
21-
| [Your first page](/merchants/quick-start/your-first-page/) | Step-by-step tutorial: create a cart page with page metadata, a commerce block, and section metadata |
21+
| [Create your first commerce page](/merchants/quick-start/your-first-page/) | Step-by-step tutorial: create a category page with page metadata, a commerce block, and section metadata |
2222
| **Refine and go deeper** | |
2323
| [Using the Universal Editor](/merchants/quick-start/universal-editor/) | Edit storefront content visually, directly on the rendered page |
2424
| [Using Content and Commerce blocks](/merchants/blocks/content-commerce-blocks/) | Add pre-built content blocks and commerce functionality to your pages |

src/content/docs/merchants/quick-start/your-first-page.mdx

Lines changed: 23 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
---
2-
title: Your first page
2+
title: Create your first commerce page
33
description: Create your first commerce page using document authoring with page metadata, section metadata, and commerce blocks.
44
---
55

66
import Tasks from '@components/Tasks.astro';
77
import Task from '@components/Task.astro';
88
import { Steps } from '@astrojs/starlight/components';
99

10-
Create a complete commerce page in minutes by building a shopping cart page. This hands-on tutorial introduces you to the three essential building blocks—page metadata, commerce blocks, and section styling—by using them to build a real page.
10+
Create a complete commerce page in minutes by building a category page. This hands-on tutorial introduces you to the three essential building blocks—page metadata, commerce blocks, and section styling—by using them to build a real page.
1111

12-
## Tutorial: Create a cart page
12+
## Tutorial: Create a category page
1313

1414
<Tasks>
1515

1616
<Task>
1717

1818
### Create a new document
1919

20-
In the Document Authoring tool, create a new document named `cart`.
20+
In the Document Authoring tool, create a new document named `dresses`.
2121

2222
</Task>
2323

@@ -37,55 +37,47 @@ Create a metadata table at the top of your document:
3737
</tr>
3838
<tr>
3939
<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Title</td>
40-
<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Shopping Cart</td>
40+
<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Dresses</td>
4141
</tr>
4242
<tr>
43-
<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Robots</td>
44-
<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">noindex, nofollow</td>
43+
<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Description</td>
44+
<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Shop women's dresses in the latest styles, from casual to formal.</td>
4545
</tr>
4646
<tr>
4747
<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Cache Control</td>
48-
<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">no-store</td>
48+
<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">max-age=3600</td>
4949
</tr>
5050
</tbody>
5151
</table>
5252
</div>
5353

54-
These settings prevent search engines from indexing the cart and ensure the page is never cached (since cart contents change frequently).
54+
These settings give the page a clear title and description for search results, and let it stay cached since a category listing doesn't change on every request.
5555

5656
</Task>
5757

5858
<Task>
5959

60-
### Add the Commerce Cart block
60+
### Add the Product List Page block
6161

62-
**Commerce blocks** are pre-built components that add shopping functionality to your pages (like carts, product lists, and checkout). You add them using tables where the table name identifies the block and the rows configure its behavior. (See [all commerce blocks](/merchants/blocks/) for the complete list.)
62+
**Commerce blocks** are pre-built components that add shopping functionality to your pages (like product listings, carts, and checkout). You add them using tables where the table name identifies the block and the rows configure its behavior. (See [all commerce blocks](/merchants/blocks/) for the complete list.)
6363

64-
Create a table with the Commerce Cart block and essential configuration:
64+
Create a table with the Product List Page block and the category it should display:
6565

6666
<div style="width: 100%; overflow-x: auto;">
6767
<table style="width: 100%; min-width: 470px; max-width: 100%; table-layout: fixed; border-collapse: collapse;">
6868
<tbody>
6969
<tr>
70-
<td colspan="2" style="text-align: center; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5); background-color: var(--sl-color-gray-6); font-weight: 600;">commerce-cart</td>
70+
<td colspan="2" style="text-align: center; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5); background-color: var(--sl-color-gray-6); font-weight: 600;">product-list-page</td>
7171
</tr>
7272
<tr>
73-
<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Max Items</td>
74-
<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">10</td>
75-
</tr>
76-
<tr>
77-
<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Enable Estimate Shipping</td>
78-
<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">true</td>
79-
</tr>
80-
<tr>
81-
<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Checkout Url</td>
82-
<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">/checkout</td>
73+
<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">urlPath</td>
74+
<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">/women/dresses</td>
8375
</tr>
8476
</tbody>
8577
</table>
8678
</div>
8779

88-
This configuration limits the cart display to 10 items, enables shipping estimation, and provides a checkout link.
80+
This tells the block which category from your catalog to show on this page. Replace `/women/dresses` with a real category path from your own catalog — the block still renders with the placeholder path, but shows zero results if it doesn't match a category you actually have.
8981

9082
</Task>
9183

@@ -95,7 +87,7 @@ This configuration limits the cart display to 10 items, enables shipping estimat
9587

9688
**Section metadata** controls the visual styling of page sections (like background colors and layouts). You add a section metadata table after the content you want to style. (See [all section metadata styles](/merchants/blocks/section-metadata/) for layout options.)
9789

98-
Below the Commerce Cart block, add a section metadata table:
90+
Below the Product List Page block, add a section metadata table:
9991

10092
<div style="width: 100%; overflow-x: auto;">
10193
<table style="width: 100%; min-width: 470px; max-width: 100%; table-layout: fixed; border-collapse: collapse;">
@@ -111,7 +103,7 @@ Below the Commerce Cart block, add a section metadata table:
111103
</table>
112104
</div>
113105

114-
This applies a light background to distinguish the cart section from other page content.
106+
This applies a light background to the category listing section.
115107

116108
</Task>
117109

@@ -130,14 +122,15 @@ Preview your page to verify everything looks correct, then publish it to make it
130122
Your document contains three tables in this order:
131123

132124
<Steps>
133-
1. **metadata** table (Title, Robots, Cache Control)
134-
2. **commerce-cart** block table (Max Items, Enable Estimate Shipping, Checkout Url)
125+
1. **metadata** table (Title, Description, Cache Control)
126+
2. **product-list-page** block table (urlPath)
135127
3. **section-metadata** table (Style: light)
136128
</Steps>
137129

138130
## Troubleshooting
139131

140-
**Block not appearing?** Verify the block name is `commerce-cart` (kebab-case) and configuration keys match exactly.
132+
**Block not appearing?** Verify the block name is `product-list-page` (kebab-case).
141133

142-
**Changes not visible?** Wait a moment for cache to clear, then hard refresh the page (Cmd+Shift+R on Mac, Ctrl+Shift+R on Windows).
134+
**Page loads but shows zero results?** Check that `urlPath` matches a real category path in your catalog — the block renders normally either way, but has nothing to display if the path doesn't match.
143135

136+
**Changes not visible?** Wait a moment for cache to clear, then hard refresh the page (Cmd+Shift+R on Mac, Ctrl+Shift+R on Windows).

0 commit comments

Comments
 (0)