Add Checkout & Account merchant block documentation (9 blocks)

.gitignore

@@ -18,6 +18,7 @@ pnpm-debug.log*
 # environment variables
 .env
 .env.production
+.env*.local
 
 # macOS-specific files
 .DS_Store
@@ -55,3 +56,6 @@ scripts/verify-*.js
 
 # B2B publication workflow
 .last-publication-verification
+
+# Vercel
+.vercel/

astro.sidebar.mjs

@@ -732,6 +732,7 @@ export function generateSidebar() {
             { label: 'Account Header', link: '/merchants/blocks/commerce-account-header/' },
             { label: 'Account Nav', link: '/merchants/blocks/commerce-account-nav/' },
             { label: 'Account Sidebar', link: '/merchants/blocks/commerce-account-sidebar/' },
+            { label: 'Checkout', link: '/merchants/blocks/commerce-checkout/' },
             { label: 'Checkout Success', link: '/merchants/blocks/commerce-checkout-success/' },
             { label: 'Company Accept Invitation', link: '/merchants/blocks/commerce-company-accept-invitation/' },
             { label: 'Company Create', link: '/merchants/blocks/commerce-company-create/' },
@@ -740,6 +741,8 @@ export function generateSidebar() {
             { label: 'Company Roles & Permissions', link: '/merchants/blocks/commerce-company-roles-permissions/' },
             { label: 'Company Structure', link: '/merchants/blocks/commerce-company-structure/' },
             { label: 'Company Users', link: '/merchants/blocks/commerce-company-users/' },
+            { label: 'Confirm Account', link: '/merchants/blocks/commerce-confirm-account/' },
+            { label: 'Create Account', link: '/merchants/blocks/commerce-create-account/' },
             { label: 'Customer Company', link: '/merchants/blocks/commerce-customer-company/' },
             { label: 'Negotiable Quote', link: '/merchants/blocks/commerce-b2b-negotiable-quote/' },
             { label: 'Negotiable Quote Template', link: '/merchants/blocks/commerce-b2b-negotiable-quote-template/' },

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

@@ -10,7 +10,7 @@ import Diagram from '@components/Diagram.astro';
 Customers see consistent page headers across account pages through this block. Place it at the top of account-related pages.
 
 <Diagram caption="Commerce Account Header block.">
-  ![Commerce Account Header block.](/images/placeholder.webp)
+  ![Commerce Account Header block.](@images/placeholder.webp)
 </Diagram>
 
 
@@ -34,9 +34,7 @@ Add this table to your document to configure the block:
 
 **Title**: The header title text displayed to users. Default: `My account`.
 
-### Important notes
-
-- Uses default configuration values if custom settings are missing or invalid.
+The block uses default configuration values if custom settings are missing or invalid.
 
 ## Section metadata
 

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

@@ -10,7 +10,7 @@ import Diagram from '@components/Diagram.astro';
 Customers navigate between account sections through this block. Place it on account dashboard pages.
 
 <Diagram caption="Account Navigation block.">
-  ![Account Navigation block.](/images/placeholder.webp)
+  ![Account Navigation block.](@images/placeholder.webp)
 </Diagram>
 
 

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

@@ -10,7 +10,7 @@ import Diagram from '@components/Diagram.astro';
 Customers navigate account sections through this sidebar. Place it on account pages for easy navigation.
 
 <Diagram caption="Commerce Account Sidebar block.">
-  ![Commerce Account Sidebar block.](/images/placeholder.webp)
+  ![Commerce Account Sidebar block.](@images/placeholder.webp)
 </Diagram>
 
 

src/content/docs/merchants/blocks/commerce-b2b-quote-checkout.mdx

@@ -10,7 +10,7 @@ import Diagram from '@components/Diagram.astro';
 Buyers complete negotiated quote purchases with approved pricing through this block. Place it on quote checkout pages.
 
 <Diagram caption="Quote Checkout block.">
-  ![Quote Checkout block.](/images/placeholder.webp)
+  ![Quote Checkout block.](@images/placeholder.webp)
 </Diagram>
 
 ## Requirements

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

@@ -10,7 +10,7 @@ import Diagram from '@components/Diagram.astro';
 Customers see order confirmation and order numbers after completing checkout through this block. Place it on your order confirmation page.
 
 <Diagram caption="Checkout Success block.">
-  ![Checkout Success block.](/images/placeholder.webp)
+  ![Checkout Success block.](@images/placeholder.webp)
 </Diagram>
 
 

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

@@ -0,0 +1,80 @@
+---
+title: Commerce Checkout
+description: Customers enter shipping details, select payment methods, and complete purchases through this block. Place it on your checkout page.
+sidebar:
+  label: Checkout
+---
+
+import Diagram from '@components/Diagram.astro';
+
+Customers enter shipping details, select payment methods, and complete purchases through this block. Place it on your checkout page.
+
+<Diagram caption="Commerce Checkout block.">
+  ![Commerce Checkout block.](@images/placeholder.webp)
+</Diagram>
+
+
+## Configuration
+
+No configurations available for this block.
+
+## Page metadata
+
+Configure page-level metadata in the document authoring table below:
+
+<table style="width: 100%; min-width: 470px; max-width: 100%; table-layout: fixed; border-collapse: collapse;">
+<tbody>
+<tr>
+<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;">metadata</td>
+</tr>
+<tr>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Title</td>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Checkout</td>
+</tr>
+<tr>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Robots</td>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">noindex, nofollow</td>
+</tr>
+<tr>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Cache Control</td>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">no-store</td>
+</tr>
+</tbody>
+</table>
+
+## Section metadata
+
+Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional:
+
+<table style="width: 100%; min-width: 470px; max-width: 100%; table-layout: fixed; border-collapse: collapse;">
+<tbody>
+<tr>
+<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;">section-metadata</td>
+</tr>
+<tr>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Style</td>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);"><em style="color: var(--sl-color-gray-3); font-style: italic;">light, highlight <span style="font-size: 0.85em;">(optional)</span></em></td>
+</tr>
+<tr>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Padding</td>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);"><em style="color: var(--sl-color-gray-3); font-style: italic;">medium <span style="font-size: 0.85em;">(optional)</span></em></td>
+</tr>
+<tr>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Margin</td>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);"><em style="color: var(--sl-color-gray-3); font-style: italic;">small <span style="font-size: 0.85em;">(optional)</span></em></td>
+</tr>
+<tr>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Column Width</td>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);"><em style="color: var(--sl-color-gray-3); font-style: italic;">30% <span style="font-size: 0.85em;">(optional)</span></em></td>
+</tr>
+<tr>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Gap</td>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);"><em style="color: var(--sl-color-gray-3); font-style: italic;">small <span style="font-size: 0.85em;">(optional)</span></em></td>
+</tr>
+</tbody>
+</table>
+
+<div style="background-color: var(--sl-color-blue-low); border-left: 4px solid var(--sl-color-blue); padding: 0.75rem 1rem; border-radius: 0.25rem; margin: 1rem 0 2rem 0;">
+<strong>Learn more:</strong> See the <a href="/merchants/storefront-builder/section-metadata/">Section Metadata guide</a> for all available values and the <a href="/merchants/storefront-builder/page-metadata/">Page Metadata guide</a> for SEO and caching options.
+</div>
+

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

@@ -0,0 +1,56 @@
+---
+title: Commerce Confirm Account
+description: Customers verify their email addresses and sign in through this block. Place it on your account confirmation page.
+sidebar:
+  label: Confirm Account
+---
+
+import Diagram from '@components/Diagram.astro';
+
+Customers verify their email addresses and sign in through this block. Place it on your account confirmation page.
+
+<Diagram caption="Commerce Confirm Account block.">
+  ![Commerce Confirm Account block.](@images/placeholder.webp)
+</Diagram>
+
+
+## Configuration
+
+No configurations available for this block.
+
+## Section metadata
+
+Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional:
+
+<table style="width: 100%; min-width: 470px; max-width: 100%; table-layout: fixed; border-collapse: collapse;">
+<tbody>
+<tr>
+<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;">section-metadata</td>
+</tr>
+<tr>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Style</td>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);"><em style="color: var(--sl-color-gray-3); font-style: italic;">light <span style="font-size: 0.85em;">(optional)</span></em></td>
+</tr>
+<tr>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Padding</td>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);"><em style="color: var(--sl-color-gray-3); font-style: italic;">medium <span style="font-size: 0.85em;">(optional)</span></em></td>
+</tr>
+<tr>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Margin</td>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);"><em style="color: var(--sl-color-gray-3); font-style: italic;">small <span style="font-size: 0.85em;">(optional)</span></em></td>
+</tr>
+<tr>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Column Width</td>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);"><em style="color: var(--sl-color-gray-3); font-style: italic;">30% <span style="font-size: 0.85em;">(optional)</span></em></td>
+</tr>
+<tr>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Gap</td>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);"><em style="color: var(--sl-color-gray-3); font-style: italic;">small <span style="font-size: 0.85em;">(optional)</span></em></td>
+</tr>
+</tbody>
+</table>
+
+<div style="background-color: var(--sl-color-blue-low); border-left: 4px solid var(--sl-color-blue); padding: 0.75rem 1rem; border-radius: 0.25rem; margin: 1rem 0 2rem 0;">
+<strong>Learn more:</strong> See the <a href="/merchants/storefront-builder/section-metadata/">Section Metadata guide</a> for all available values and the <a href="/merchants/storefront-builder/page-metadata/">Page Metadata guide</a> for SEO and caching options.
+</div>
+

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

@@ -0,0 +1,80 @@
+---
+title: Commerce Create Account
+description: Customers create new accounts to save addresses and track orders through this block. Place it on your registration page.
+sidebar:
+  label: Create Account
+---
+
+import Diagram from '@components/Diagram.astro';
+
+Customers create new accounts to save addresses and track orders through this block. Place it on your registration page.
+
+<Diagram caption="Commerce Create Account block.">
+  ![Commerce Create Account block.](@images/placeholder.webp)
+</Diagram>
+
+
+## Configuration
+
+No configurations available for this block.
+
+## Page metadata
+
+Configure page-level metadata in the document authoring table below:
+
+<table style="width: 100%; min-width: 470px; max-width: 100%; table-layout: fixed; border-collapse: collapse;">
+<tbody>
+<tr>
+<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;">metadata</td>
+</tr>
+<tr>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Title</td>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Create Account</td>
+</tr>
+<tr>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Robots</td>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">noindex, nofollow</td>
+</tr>
+<tr>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Cache Control</td>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">no-store</td>
+</tr>
+</tbody>
+</table>
+
+## Section metadata
+
+Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional:
+
+<table style="width: 100%; min-width: 470px; max-width: 100%; table-layout: fixed; border-collapse: collapse;">
+<tbody>
+<tr>
+<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;">section-metadata</td>
+</tr>
+<tr>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Style</td>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);"><em style="color: var(--sl-color-gray-3); font-style: italic;">light <span style="font-size: 0.85em;">(optional)</span></em></td>
+</tr>
+<tr>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Padding</td>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);"><em style="color: var(--sl-color-gray-3); font-style: italic;">medium <span style="font-size: 0.85em;">(optional)</span></em></td>
+</tr>
+<tr>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Margin</td>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);"><em style="color: var(--sl-color-gray-3); font-style: italic;">small <span style="font-size: 0.85em;">(optional)</span></em></td>
+</tr>
+<tr>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Column Width</td>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);"><em style="color: var(--sl-color-gray-3); font-style: italic;">30% <span style="font-size: 0.85em;">(optional)</span></em></td>
+</tr>
+<tr>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">Gap</td>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);"><em style="color: var(--sl-color-gray-3); font-style: italic;">small <span style="font-size: 0.85em;">(optional)</span></em></td>
+</tr>
+</tbody>
+</table>
+
+<div style="background-color: var(--sl-color-blue-low); border-left: 4px solid var(--sl-color-blue); padding: 0.75rem 1rem; border-radius: 0.25rem; margin: 1rem 0 2rem 0;">
+<strong>Learn more:</strong> See the <a href="/merchants/storefront-builder/section-metadata/">Section Metadata guide</a> for all available values and the <a href="/merchants/storefront-builder/page-metadata/">Page Metadata guide</a> for SEO and caching options.
+</div>
+