From 1a137d2f3425edb230b8e5d258f5b725a4b221c5 Mon Sep 17 00:00:00 2001 From: Bruce Denham Date: Thu, 11 Dec 2025 17:19:24 -0600 Subject: [PATCH] feat: Add Checkout & Account merchant blocks (9 blocks) - commerce-account-header - commerce-account-nav - commerce-account-sidebar - commerce-b2b-po-checkout-success - commerce-b2b-quote-checkout - commerce-checkout-success - commerce-checkout - commerce-confirm-account - commerce-create-account Fixed placeholder paths to use @images alias for base path resolution. Base: releases/b2b-nov-release --- .../blocks/commerce-account-header.mdx | 76 +++++++++++++++++ .../merchants/blocks/commerce-account-nav.mdx | 60 ++++++++++++++ .../blocks/commerce-account-sidebar.mdx | 56 +++++++++++++ .../commerce-b2b-po-checkout-success.mdx | 60 ++++++++++++++ .../blocks/commerce-b2b-quote-checkout.mdx | 83 +++++++++++++++++++ .../blocks/commerce-checkout-success.mdx | 60 ++++++++++++++ .../merchants/blocks/commerce-checkout.mdx | 80 ++++++++++++++++++ .../blocks/commerce-confirm-account.mdx | 56 +++++++++++++ .../blocks/commerce-create-account.mdx | 80 ++++++++++++++++++ 9 files changed, 611 insertions(+) create mode 100644 src/content/docs/merchants/blocks/commerce-account-header.mdx create mode 100644 src/content/docs/merchants/blocks/commerce-account-nav.mdx create mode 100644 src/content/docs/merchants/blocks/commerce-account-sidebar.mdx create mode 100644 src/content/docs/merchants/blocks/commerce-b2b-po-checkout-success.mdx create mode 100644 src/content/docs/merchants/blocks/commerce-b2b-quote-checkout.mdx create mode 100644 src/content/docs/merchants/blocks/commerce-checkout-success.mdx create mode 100644 src/content/docs/merchants/blocks/commerce-checkout.mdx create mode 100644 src/content/docs/merchants/blocks/commerce-confirm-account.mdx create mode 100644 src/content/docs/merchants/blocks/commerce-create-account.mdx diff --git a/src/content/docs/merchants/blocks/commerce-account-header.mdx b/src/content/docs/merchants/blocks/commerce-account-header.mdx new file mode 100644 index 000000000..fc4c4d984 --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-account-header.mdx @@ -0,0 +1,76 @@ +--- +title: Commerce Account Header +description: Customers see consistent page headers across account pages through this block. Place it at the top of account-related pages. +sidebar: + label: Account Header +--- + +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. + + + ![Commerce Account Header block.](@images/placeholder.webp) + + + +## Configuration + +Add this table to your document to configure the block: + + + + + + + + + + + +
commerce-account-header
TitleMy account
+ +### Property descriptions + +**Title**: The header title text displayed to users. Default: `My account`. + +### Important notes + +- Uses default configuration values if custom settings are missing or invalid. + +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylelight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-account-nav.mdx b/src/content/docs/merchants/blocks/commerce-account-nav.mdx new file mode 100644 index 000000000..3fca5f13a --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-account-nav.mdx @@ -0,0 +1,60 @@ +--- +title: Account Navigation +description: Customers navigate between account sections through this block. Place it on account dashboard pages. +sidebar: + label: Account Navigation +--- + +import Diagram from '@components/Diagram.astro'; + +Customers navigate between account sections through this block. Place it on account dashboard pages. + + + ![Account Navigation block.](@images/placeholder.webp) + + + +## Requirements + +Customers must log in to access this block. + +## 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: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylelight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-account-sidebar.mdx b/src/content/docs/merchants/blocks/commerce-account-sidebar.mdx new file mode 100644 index 000000000..3f8c5d70c --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-account-sidebar.mdx @@ -0,0 +1,56 @@ +--- +title: Commerce Account Sidebar +description: Customers navigate account sections through this sidebar. Place it on account pages for easy navigation. +sidebar: + label: Account Sidebar +--- + +import Diagram from '@components/Diagram.astro'; + +Customers navigate account sections through this sidebar. Place it on account pages for easy navigation. + + + ![Commerce Account Sidebar block.](@images/placeholder.webp) + + + +## 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: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylelight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-b2b-po-checkout-success.mdx b/src/content/docs/merchants/blocks/commerce-b2b-po-checkout-success.mdx new file mode 100644 index 000000000..69ec4ddda --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-b2b-po-checkout-success.mdx @@ -0,0 +1,60 @@ +--- +title: "Purchase Order Checkout Success" +description: Buyers receive purchase order confirmation and order numbers through this block. Place it on purchase order confirmation pages. +sidebar: + label: "PO Checkout Success" +--- + +import Diagram from '@components/Diagram.astro'; + +Buyers receive purchase order confirmation and order numbers through this block. Place it on purchase order confirmation pages. + + + ![Purchase Order Checkout Success block.](@images/placeholder.webp) + + + +## Requirements + +Customers must log in to access this block. Enable company features in **Stores** > **Configuration** > **General** > **B2B Features** > **Enable Company**. Purchase orders are then configured per company. + +## 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: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylehighlight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-b2b-quote-checkout.mdx b/src/content/docs/merchants/blocks/commerce-b2b-quote-checkout.mdx new file mode 100644 index 000000000..2c20072ed --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-b2b-quote-checkout.mdx @@ -0,0 +1,83 @@ +--- +title: Quote Checkout +description: Buyers complete negotiated quote purchases with approved pricing through this block. Place it on quote checkout pages. +sidebar: + label: Quote Checkout +--- + +import Diagram from '@components/Diagram.astro'; + +Buyers complete negotiated quote purchases with approved pricing through this block. Place it on quote checkout pages. + + + ![Quote Checkout block.](@images/placeholder.webp) + + +## Requirements + +Customers must log in to access this block. Enable company features and negotiable quotes in **Stores** > **Configuration** > **General** > **B2B Features** > **Enable Company** and **Stores** > **Configuration** > **General** > **B2B Features** > **Enable B2B Quote**. + +## Configuration + +No configurations available for this block. + +## Page metadata + +Configure page-level metadata in the document authoring table below: + + + + + + + + + + + + + + + + + + + +
metadata
TitleCheckout
Robotsnoindex, nofollow
Cache Controlno-store
+ +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylehighlight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-checkout-success.mdx b/src/content/docs/merchants/blocks/commerce-checkout-success.mdx new file mode 100644 index 000000000..1b58b6468 --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-checkout-success.mdx @@ -0,0 +1,60 @@ +--- +title: Checkout Success +description: Customers see order confirmation and order numbers after completing checkout through this block. Place it on your order confirmation page. +sidebar: + label: Checkout Success +--- + +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. + + + ![Checkout Success block.](@images/placeholder.webp) + + + +## Requirements + +Customers must log in to access this block. Enable company features in **Stores** > **Configuration** > **General** > **B2B Features** > **Enable Company**. Purchase orders are then configured per company. + +## 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: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylelight, highlight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-checkout.mdx b/src/content/docs/merchants/blocks/commerce-checkout.mdx new file mode 100644 index 000000000..06f315c58 --- /dev/null +++ b/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. + + + ![Commerce Checkout block.](@images/placeholder.webp) + + + +## Configuration + +No configurations available for this block. + +## Page metadata + +Configure page-level metadata in the document authoring table below: + + + + + + + + + + + + + + + + + + + +
metadata
TitleCheckout
Robotsnoindex, nofollow
Cache Controlno-store
+ +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylelight, highlight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-confirm-account.mdx b/src/content/docs/merchants/blocks/commerce-confirm-account.mdx new file mode 100644 index 000000000..a69ce2bd3 --- /dev/null +++ b/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. + + + ![Commerce Confirm Account block.](@images/placeholder.webp) + + + +## 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: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylelight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-create-account.mdx b/src/content/docs/merchants/blocks/commerce-create-account.mdx new file mode 100644 index 000000000..1f9d7800f --- /dev/null +++ b/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. + + + ![Commerce Create Account block.](@images/placeholder.webp) + + + +## Configuration + +No configurations available for this block. + +## Page metadata + +Configure page-level metadata in the document authoring table below: + + + + + + + + + + + + + + + + + + + +
metadata
TitleCreate Account
Robotsnoindex, nofollow
Cache Controlno-store
+ +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylelight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+