diff --git a/storefront/_astro/widgets-dark.BhTTYvSO_ZSUcJf.webp b/storefront/_astro/widgets-dark.BhTTYvSO_ZSUcJf.webp new file mode 100644 index 000000000..8bda48f48 Binary files /dev/null and b/storefront/_astro/widgets-dark.BhTTYvSO_ZSUcJf.webp differ diff --git a/storefront/_astro/widgets-light.D9KljE8i_2bPuGa.webp b/storefront/_astro/widgets-light.D9KljE8i_2bPuGa.webp new file mode 100644 index 000000000..8293a292e Binary files /dev/null and b/storefront/_astro/widgets-light.D9KljE8i_2bPuGa.webp differ diff --git a/storefront/activate/index.html b/storefront/activate/index.html index 7e22350c5..b95775b18 100644 --- a/storefront/activate/index.html +++ b/storefront/activate/index.html @@ -1 +1 @@ -Activate the docs | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

Activate the docs

Activating the docs has begun in version 1 but will be expanded in version 2+.

\ No newline at end of file +Activate the docs | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

Activate the docs

Activating the docs has begun in version 1 but will be expanded in version 2+.

\ No newline at end of file diff --git a/storefront/blocks/blocks-overview/index.html b/storefront/blocks/blocks-overview/index.html index c028311c5..30bcef367 100644 --- a/storefront/blocks/blocks-overview/index.html +++ b/storefront/blocks/blocks-overview/index.html @@ -1 +1 @@ -Blocks overview | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront
Blocks

Blocks overview

Learn more about the non-Commerce content blocks available for your storefronts.

\ No newline at end of file +Blocks overview | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront
Blocks

Blocks overview

Learn more about the non-Commerce content blocks available for your storefronts.

\ No newline at end of file diff --git a/storefront/contribute/index.html b/storefront/contribute/index.html index cf2a43f11..4a59bfc08 100644 --- a/storefront/contribute/index.html +++ b/storefront/contribute/index.html @@ -1 +1 @@ -Contribute | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

Contribute

Placeholder for Contribute page for Adobe Commerce Storefront.

\ No newline at end of file +Contribute | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

Contribute

Placeholder for Contribute page for Adobe Commerce Storefront.

\ No newline at end of file diff --git a/storefront/customize/design-tokens/index.html b/storefront/customize/design-tokens/index.html index ad08e4823..447270808 100644 --- a/storefront/customize/design-tokens/index.html +++ b/storefront/customize/design-tokens/index.html @@ -3,4 +3,4 @@
--type-headline-1-font: normal normal 400 24px/32px var(--type-display-font-family); /* Desktop & tablet page title */
--type-headline-1-letter-spacing: 0.04em;
--type-headline-2-default-font: normal normal 300 20px/24px var(--type-display-font-family); /* Rail title */
--type-headline-2-default-letter-spacing: 0.04em;
--type-headline-2-strong-font: normal normal 400 20px/24px var(--type-display-font-family); /* Mobile page and section title */
--type-headline-2-strong-letter-spacing: 0.04em;
--type-body-1-default-font: normal normal 300 16px/24px var(--type-body-font-family); /* Normal text paragraph */
--type-body-1-default-letter-spacing: 0.04em;
--type-body-1-strong-font: normal normal 400 16px/24px var(--type-body-font-family);
--type-body-1-strong-letter-spacing: 0.04em;
--type-body-1-emphasized-font: normal normal 700 16px/24px var(--type-body-font-family);
--type-body-1-emphasized-letter-spacing: 0.04em;
--type-body-2-default-font: normal normal 300 14px/20px var(--type-body-font-family);
--type-body-2-default-letter-spacing: 0.04em;
--type-body-2-strong-font: normal normal 400 14px/20px var(--type-body-font-family);
--type-body-2-strong-letter-spacing: 0.04em;
--type-body-2-emphasized-font: normal normal 700 14px/20px var(--type-body-font-family);
--type-body-2-emphasized-letter-spacing: 0.04em;
--type-button-1-font: normal normal 400 20px/26px var(--type-body-font-family); /* Primary button text */
--type-button-1-letter-spacing: 0.08em;
--type-button-2-font: normal normal 400 16px/24px var(--type-body-font-family); /* Small buttons */
--type-button-2-letter-spacing: 0.08em;
-
--type-details-caption-1-font: normal normal 400 12px/16px var(--type-details-font-family);
--type-details-caption-1-letter-spacing: 0.08em;
--type-details-caption-2-font: normal normal 300 12px/16px var(--type-details-font-family);
--type-details-caption-2-letter-spacing: 0.08em;
--type-details-overline-font: normal normal 700 12px/20px var(--type-details-font-family);
--type-details-overline-letter-spacing: 0.16em;
}

Continue with spacing, shapes, layouts, and colors.

Use the same process for overriding the spacing, shapes, grids, and color token values. With a company’s brand guidelines, you can start discovering how to map brand categories to the design-token values you need to override. But it’s not always straightforward. Mapping brand colors to the color token options can be challenging. This is when you will need to work closely with the design team to make decisions about which design tokens to override and how to map your brand colors to the available options.

Video

Playground

Summary

The process of branding dropins is typically fast and easy. Focus on one brand category at a time and work with your designers to solve the less obvious brand-to-token overrides.

\ No newline at end of file +
--type-details-caption-1-font: normal normal 400 12px/16px var(--type-details-font-family);
--type-details-caption-1-letter-spacing: 0.08em;
--type-details-caption-2-font: normal normal 300 12px/16px var(--type-details-font-family);
--type-details-caption-2-letter-spacing: 0.08em;
--type-details-overline-font: normal normal 700 12px/20px var(--type-details-font-family);
--type-details-overline-letter-spacing: 0.16em;
}

Continue with spacing, shapes, layouts, and colors.

Use the same process for overriding the spacing, shapes, grids, and color token values. With a company’s brand guidelines, you can start discovering how to map brand categories to the design-token values you need to override. But it’s not always straightforward. Mapping brand colors to the color token options can be challenging. This is when you will need to work closely with the design team to make decisions about which design tokens to override and how to map your brand colors to the available options.

Video

Playground

Summary

The process of branding dropins is typically fast and easy. Focus on one brand category at a time and work with your designers to solve the less obvious brand-to-token overrides.

\ No newline at end of file diff --git a/storefront/customize/index.html b/storefront/customize/index.html index 83de058e8..0d3e69308 100644 --- a/storefront/customize/index.html +++ b/storefront/customize/index.html @@ -1 +1 @@ -Customize overview | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront
Customize

Customize overview

All dropins can be customized in five ways: design tokens, CSS classes, slots, content enrichment, and localization. In this section, you’ll learn how to use each approach.

Design tokens

Design tokens are the quickest way to customize your storefront. By changing the default token values with your own brand colors, typography, spacing, and shapes, you can make quick, global brand changes to your entire storefront.

CSS classes

CSS classes provide deeper style changes for dropins than design tokens. Overriding or adding new CSS classes allows you to restyle specific areas of the dropin You’ll find best practices for styling here.

Slots

Slots provide the deepest level of customization. Slots are built-in extension points in the dropin to add your own UI components and functions. You’ll learn how powerful slots can be.

\ No newline at end of file +Customize overview | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront
Customize

Customize overview

All dropins can be customized in five ways: design tokens, CSS classes, slots, content enrichment, and localization. In this section, you’ll learn how to use each approach.

Design tokens

Design tokens are the quickest way to customize your storefront. By changing the default token values with your own brand colors, typography, spacing, and shapes, you can make quick, global brand changes to your entire storefront.

CSS classes

CSS classes provide deeper style changes for dropins than design tokens. Overriding or adding new CSS classes allows you to restyle specific areas of the dropin You’ll find best practices for styling here.

Slots

Slots provide the deepest level of customization. Slots are built-in extension points in the dropin to add your own UI components and functions. You’ll learn how powerful slots can be.

\ No newline at end of file diff --git a/storefront/customize/slots/index.html b/storefront/customize/slots/index.html index 78b4de2f4..a87a20853 100644 --- a/storefront/customize/slots/index.html +++ b/storefront/customize/slots/index.html @@ -1 +1 @@ -Slots | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront
Customize

Slots

Using slots provides the deepest level of customization. Slots are built-in extension points in the dropin. A slot provides a place in the dropin to add your own UI components and functions. This architecture makes it easy to change the default look, layout, and behavior. Let’s learn how it works.

Big Picture

What is a slot?
What is a slot?
  1. prependSibling: A function to prepend a new HTML element before the slot’s content.
  2. prependChild: A function to prepend a new HTML element to the slot’s content.
  3. replaceWith: A function to replace the slot’s content with a new HTML element.
  4. appendChild: A function to append a new HTML element to the slot’s content.
  5. appendSibling: A function to append a new HTML element after the slot’s content.
  6. getSlotElement: A function to get a slot element.
  7. onChange: A function to listen to changes in the slot’s context.
  8. dictionary: JSON Object for the current locale. If the locale changes, the dictionary values change to reflect the values for the selected language.

Vocabulary

Container

Component that manages or encapsulates other components. Containers handle logic, fetch data, manage state, and pass data to the UI components that are rendered on the screen.

Slot

Component that provides placeholders to add other components. You can use a dropin’s built-in slots to add or remove UI components and functions. Or you can add your own additional Slots.

Component

Overloaded term in web development. Everything is a component. It’s components all the way down. This is why we need to be specific about what kind of component we are talking about. For example, from top-to-bottom, big-to-small, a dropin component can contain multiple container components that can contain multiple slot components that can contain multiple UI components.

Examples

\ No newline at end of file +Slots | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront
Customize

Slots

Using slots provides the deepest level of customization. Slots are built-in extension points in the dropin. A slot provides a place in the dropin to add your own UI components and functions. This architecture makes it easy to change the default look, layout, and behavior. Let’s learn how it works.

Big Picture

What is a slot?
What is a slot?
  1. prependSibling: A function to prepend a new HTML element before the slot’s content.
  2. prependChild: A function to prepend a new HTML element to the slot’s content.
  3. replaceWith: A function to replace the slot’s content with a new HTML element.
  4. appendChild: A function to append a new HTML element to the slot’s content.
  5. appendSibling: A function to append a new HTML element after the slot’s content.
  6. getSlotElement: A function to get a slot element.
  7. onChange: A function to listen to changes in the slot’s context.
  8. dictionary: JSON Object for the current locale. If the locale changes, the dictionary values change to reflect the values for the selected language.

Vocabulary

Container

Component that manages or encapsulates other components. Containers handle logic, fetch data, manage state, and pass data to the UI components that are rendered on the screen.

Slot

Component that provides placeholders to add other components. You can use a dropin’s built-in slots to add or remove UI components and functions. Or you can add your own additional Slots.

Component

Overloaded term in web development. Everything is a component. It’s components all the way down. This is why we need to be specific about what kind of component we are talking about. For example, from top-to-bottom, big-to-small, a dropin component can contain multiple container components that can contain multiple slot components that can contain multiple UI components.

Examples

\ No newline at end of file diff --git a/storefront/customize/style/index.html b/storefront/customize/style/index.html index 77b28a1f6..819642908 100644 --- a/storefront/customize/style/index.html +++ b/storefront/customize/style/index.html @@ -1,3 +1,3 @@ CSS classes | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront
Customize

CSS classes

Overriding and adding CSS classes for dropin components provides the next level of customizing your storefront dropins. By modifying a dropin’s built-in CSS classes and adding additional classes, you can quickly change the built-in classes to meet your specifications. You’ll find best-practices for styling here.

The CSS classes for each UI component that provides the Product Details dropin with its UI are provided here. Override these classes and add new classes to customize the look and feel of your PDP dropin to match your specific style requirements.

Step-by-step

The quickest way to override the CSS classes used in the dropin is to inspect the dropin’s UI from your browser’s developer tools. The following example shows a Product Details dropin with the classes applied to the UI components that compose the dropin:

Find CSS classes to override

Find CSS classes to override.
  1. Inspect the element in the UI that you want to customize (right-click on the element and select “Inspect” from the menu).
  2. Identify the CSS class(es) for the element. We use BEM naming, which makes it easy to know which component you’re changing (and which CSS file to use). This class styles the Product component, so use your product.css file.
  3. Copy the CSS class to your product.css file to override the existing rules or add new rules to the class. But wait! Look closely 🧐 at the .pdp-product__title class. It’s using two design tokens. And when you see a design token within a CSS rule, don’t remove the token. Instead, change the token’s value (where it’s defined) OR create a new token along-side this existing one to ensure maintenance and updates continue to benefit from global design token usage.

Example overrides

Here’s an example of adding CSS class overrides to your product.css file:

product.css
.pdp-product__options {
  grid-column: 1 / span 3;
}

 
.pdp-product__quantity {
  grid-column: 1 / span 3;
}

-
.pdp-product__buttons {
  grid-gap: 0.5rem;
}
\ No newline at end of file +
.pdp-product__buttons {
grid-gap: 0.5rem;
}
\ No newline at end of file diff --git a/storefront/dropins/cart/cart-containers/index.html b/storefront/dropins/cart/cart-containers/index.html index 444f0ba19..3ac7c8a34 100644 --- a/storefront/dropins/cart/cart-containers/index.html +++ b/storefront/dropins/cart/cart-containers/index.html @@ -1 +1 @@ -Cart Containers | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

Cart Containers

Learn about the containers in the Cart dropin.

\ No newline at end of file +Cart Containers | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

Cart Containers

Learn about the containers in the Cart dropin.

\ No newline at end of file diff --git a/storefront/dropins/cart/cart-functions/index.html b/storefront/dropins/cart/cart-functions/index.html index 3c63c20ed..52c23d354 100644 --- a/storefront/dropins/cart/cart-functions/index.html +++ b/storefront/dropins/cart/cart-functions/index.html @@ -1 +1 @@ -Cart Functions | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

Cart Functions

Learn about the API functions provided by the Cart dropin.

\ No newline at end of file +Cart Functions | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

Cart Functions

Learn about the API functions provided by the Cart dropin.

\ No newline at end of file diff --git a/storefront/dropins/cart/cart-installation/index.html b/storefront/dropins/cart/cart-installation/index.html index f1280888d..1a5727356 100644 --- a/storefront/dropins/cart/cart-installation/index.html +++ b/storefront/dropins/cart/cart-installation/index.html @@ -1 +1 @@ -Cart Installation | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

Cart Installation

Learn how to install the Cart dropin into your site.

\ No newline at end of file +Cart Installation | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

Cart Installation

Learn how to install the Cart dropin into your site.

\ No newline at end of file diff --git a/storefront/dropins/cart/cart-introduction/index.html b/storefront/dropins/cart/cart-introduction/index.html index 7dbef0451..4efbf3980 100644 --- a/storefront/dropins/cart/cart-introduction/index.html +++ b/storefront/dropins/cart/cart-introduction/index.html @@ -1 +1 @@ -Cart Introduction | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

Cart Introduction

Learn about the features and functions of the Cart dropin.

\ No newline at end of file +Cart Introduction | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

Cart Introduction

Learn about the features and functions of the Cart dropin.

\ No newline at end of file diff --git a/storefront/dropins/cart/cart-slots/index.html b/storefront/dropins/cart/cart-slots/index.html index 06d8e4bb9..27819ec77 100644 --- a/storefront/dropins/cart/cart-slots/index.html +++ b/storefront/dropins/cart/cart-slots/index.html @@ -1 +1 @@ -Cart Slots | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

Cart Slots

Learn about the slots provided in the Cart dropin.

\ No newline at end of file +Cart Slots | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

Cart Slots

Learn about the slots provided in the Cart dropin.

\ No newline at end of file diff --git a/storefront/dropins/cart/cart-styles/index.html b/storefront/dropins/cart/cart-styles/index.html index 59d6ec78d..e2c38d3e6 100644 --- a/storefront/dropins/cart/cart-styles/index.html +++ b/storefront/dropins/cart/cart-styles/index.html @@ -1 +1 @@ -Cart Styles | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

Cart Styles

Learn how to style the Cart dropin using its CSS classes.

\ No newline at end of file +Cart Styles | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

Cart Styles

Learn how to style the Cart dropin using its CSS classes.

\ No newline at end of file diff --git a/storefront/dropins/checkout/checkout-containers/index.html b/storefront/dropins/checkout/checkout-containers/index.html index 98b585e7f..caace40e7 100644 --- a/storefront/dropins/checkout/checkout-containers/index.html +++ b/storefront/dropins/checkout/checkout-containers/index.html @@ -1 +1 @@ -Checkout Containers | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

Checkout Containers

Scheduled for later release.

\ No newline at end of file +Checkout Containers | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

Checkout Containers

Scheduled for later release.

\ No newline at end of file diff --git a/storefront/dropins/checkout/checkout-functions/index.html b/storefront/dropins/checkout/checkout-functions/index.html index d4fc5f976..bab09544e 100644 --- a/storefront/dropins/checkout/checkout-functions/index.html +++ b/storefront/dropins/checkout/checkout-functions/index.html @@ -1 +1 @@ -Checkout Functions | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

Checkout Functions

Scheduled for later release.

\ No newline at end of file +Checkout Functions | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

Checkout Functions

Scheduled for later release.

\ No newline at end of file diff --git a/storefront/dropins/checkout/checkout-installation/index.html b/storefront/dropins/checkout/checkout-installation/index.html index aff8adb71..1452cb6b5 100644 --- a/storefront/dropins/checkout/checkout-installation/index.html +++ b/storefront/dropins/checkout/checkout-installation/index.html @@ -1 +1 @@ -Checkout Installation | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

Checkout Installation

Completion scheduled before release.

\ No newline at end of file +Checkout Installation | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

Checkout Installation

Completion scheduled before release.

\ No newline at end of file diff --git a/storefront/dropins/checkout/checkout-introduction/index.html b/storefront/dropins/checkout/checkout-introduction/index.html index 2031492c1..326707ae7 100644 --- a/storefront/dropins/checkout/checkout-introduction/index.html +++ b/storefront/dropins/checkout/checkout-introduction/index.html @@ -1 +1 @@ -Checkout Introduction | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

Checkout Introduction

Learn about the features and functions of the Checkout dropin.

\ No newline at end of file +Checkout Introduction | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

Checkout Introduction

Learn about the features and functions of the Checkout dropin.

\ No newline at end of file diff --git a/storefront/dropins/checkout/checkout-slots/index.html b/storefront/dropins/checkout/checkout-slots/index.html index fa6263896..1f0e0f034 100644 --- a/storefront/dropins/checkout/checkout-slots/index.html +++ b/storefront/dropins/checkout/checkout-slots/index.html @@ -1 +1 @@ -Checkout Slots | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

Checkout Slots

Learn about the slots provided in the Checkout dropin.

\ No newline at end of file +Checkout Slots | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

Checkout Slots

Learn about the slots provided in the Checkout dropin.

\ No newline at end of file diff --git a/storefront/dropins/checkout/checkout-styles/index.html b/storefront/dropins/checkout/checkout-styles/index.html index 46f8b8c8f..aa9f5c9d8 100644 --- a/storefront/dropins/checkout/checkout-styles/index.html +++ b/storefront/dropins/checkout/checkout-styles/index.html @@ -1 +1 @@ -Checkout Styles | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

Checkout Styles

Learn how to style the Checkout dropin using its CSS classes.

\ No newline at end of file +Checkout Styles | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

Checkout Styles

Learn how to style the Checkout dropin using its CSS classes.

\ No newline at end of file diff --git a/storefront/dropins/user-account/useraccount-introduction/index.html b/storefront/dropins/user-account/useraccount-introduction/index.html index 827acf1cb..77a364b19 100644 --- a/storefront/dropins/user-account/useraccount-introduction/index.html +++ b/storefront/dropins/user-account/useraccount-introduction/index.html @@ -1 +1 @@ -User Account Introduction | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

User Account Introduction

The User Account dropin will provides account management features in your storefront.

\ No newline at end of file +User Account Introduction | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

User Account Introduction

The User Account dropin will provides account management features in your storefront.

\ No newline at end of file diff --git a/storefront/dropins/user-auth/userauth-introduction/index.html b/storefront/dropins/user-auth/userauth-introduction/index.html index c2b3ab00e..302f3141e 100644 --- a/storefront/dropins/user-auth/userauth-introduction/index.html +++ b/storefront/dropins/user-auth/userauth-introduction/index.html @@ -1 +1 @@ -User Auth Introduction | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

User Auth Introduction

The User Auth dropin will provide user authentication to allow customers to sign up, log in, and log out of your storefront.

\ No newline at end of file +User Auth Introduction | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

User Auth Introduction

The User Auth dropin will provide user authentication to allow customers to sign up, log in, and log out of your storefront.

\ No newline at end of file diff --git a/storefront/faq/index.html b/storefront/faq/index.html index 53291b835..b066fbe99 100644 --- a/storefront/faq/index.html +++ b/storefront/faq/index.html @@ -1 +1 @@ -Frequently Asked Questions | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

Frequently Asked Questions

Placeholder for FAQ about Edge Delivery Services for Adobe Commerce.

This topic will be removed if the relevant content from FAQ: Edge Delivery Services in Adobe Commerce cannot be reviewed in time for Summit.

\ No newline at end of file +Frequently Asked Questions | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

Frequently Asked Questions

Placeholder for FAQ about Edge Delivery Services for Adobe Commerce.

This topic will be removed if the relevant content from FAQ: Edge Delivery Services in Adobe Commerce cannot be reviewed in time for Summit.

\ No newline at end of file diff --git a/storefront/get-started/index.html b/storefront/get-started/index.html index d1c59cb18..18fbc937b 100644 --- a/storefront/get-started/index.html +++ b/storefront/get-started/index.html @@ -1,3 +1,3 @@ Create your storefront | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront
Get Started

Create your storefront

time to complete
~20 minutes

Welcome to your Commerce Storefront journey. Our goal is to make the journey fun and informative. We start every topic with big-picture overviews and relevant vocabulary. We then walk you through the details step-by-step. And finally, we provide a sandbox for practice when possible. Let’s get started.

Big picture

The following diagram shows the steps you’ll take to create and configure your storefront:

Steps to create and configure your storefront.

Steps to create and configure your storefront.

The full details are slightly more involved. Let’s break it down.

Details to create and configure your Commerce storefront.

Details to create and configure your Commerce storefront.
  1. Use the boilerplate template to create a storefront repository.
  2. Add the Code Sync app to your newly created repo. This app automatically redeploys your storefront when you push changes to the main branch. It also provides the Edge Delivery system (Helix Admin) with access to your repo so it can coordinate code changes with content changes.
  3. Create a folder on Google Drive or SharePoint for your content and Share it with the helix@adobe.com user. This gives the Edge Delivery system (Helix Admin) with read/write access to your folder’s content.
  4. Add sample content from the boilerplate to your new folder on Google Drive or SharePoint.
  5. Connect your repo to your content using the mountpoint in your fstab.yaml URL in your GitHub repo.
  6. Install and configure Sidekick so it can preview, publish, and edit content on your storefront.
  7. Set up your local development environment and install the dependencies. Start the development server and explore your new storefront.

Vocabulary

Before we dive into the step-by-step guide, let’s review some key Vocabulary that will help you understand the process of creating and configuring your storefront.

Boilerplate template

The boilerplate template is a pre-configured storefront that includes all the necessary components and services to get you started. It’s a great way to quickly create a new storefront with all the necessary components and services already in place.

Code Sync app

The Code Sync app listens to changes in your code repositories (commits and merges to the main branch) and publishes code to the Edge Delivery code bus. It also intelligently purges CDN caches when changes have been made. This app is essential for keeping your storefront up-to-date with the latest changes.

Content folder

The content folder is where you store all the content for your storefront. This includes images, text, and other assets that make up your site. By sharing read/write access to your content folder with Edge Delivery Services, you enable it to provide all the features of document-based authoring, such as editing, previewing, and publishing.

Sidekick

Sidekick is an extension that makes it easy for creators to connect, edit, preview, and publish content directly from documents and spreadsheets in Google Drive and SharePoint. It’s also responsible for pushing content to the Edge Delivery content bus so it can be previewed and published.

mountpoint

The mountpoint is the URL that points to your content folder on Google Drive or SharePoint. By specifying the mountpoint in your GitHub repo’s fstab.yaml file, Edge Delivery Services can link your code to the content for your storefront.

Example

Our WKND demo site was built from the same boilerplate you will set up to develop your own storefront. You can access the full WKND demo site here: https://main—xsc-wknd-commerce—hlxsites.hlx.live/.

Step-by-step

The centerpiece of this 20-minute storefront is our Commerce boilerplate template. It provides a starter storefront that is pre-configured with our Commerce components and services and pre-connected to our Commerce boilerplate backend.

Prerequisites

Before you begin, take a moment to set up these required tools and accounts as needed.

GitHub Sign into your GitHub account.
Node.js Verify your Node version (LTS).
Google Drive** Create a Google Drive account.
SharePoint** Create a SharePoint account.

Create code repository

This task requires you to have a GitHub account with access to the organization or owner where you want to create your new repo.

Create your storefront repo

Create your storefront repo.

  1. Navigate to boilerplate-commerce-dropins , select the Use this template button, then select the Create a new repository option to open the form.

  2. Complete the form with the following details:

    • Repository template: hlxsites/boilerplate-commerce-dropins (default).
    • Include all branches: Do not include all branches (default).
    • Owner: Your organization or account (required).
    • Repository name: A unique name for your new repo (required).
    • Description: A brief description of your repo (optional).
    • Public or Private: We recommend public (default).

  3. Select the Create repository button and watch GitHub create your new storefront repo.

  4. After a few seconds, you should be redirected to the home page of your new repo.

Add Code Sync GitHub app

The Code Sync app redeploys your storefront site whenever you push or merge changes to the main branch of your repo.

Add AEM Code Sync to your repository.

Add AEM Code Sync to your repository.

  1. Navigate to the AEM Code Sync app and select the Configure button (top right) to open the repo selection page.

  2. Select the organization or account for the repo you just created.

  3. From the form, choose Only select repositories, open the Select repositories selector, and choose your repo from the list.

  4. Select Install (or Save, see note above) to complete the Code Sync installation.

  5. You should see a success screen if the installation completed without errors. Your repo is now connected to the Edge Delivery Services code bus.

  6. (Optional) If you return to the account selection page , your repo’s organization or account will now be gray with “Configure” added. Select your org or account again to access the Code Sync configuration page. This page shows when the app was added to your organization (highlighted) and allows you to connect the Code Sync app to additional repositories.

Create and share folder

Now let’s create and set up the content side of your storefront. We’ll create a new folder and share it with Edge Delivery Services. Choose the tab below that matches your chosen storage service, Google Drive or SharePoint.

Follow these steps to create and share your Google Drive folder.

Create and Share your Google Drive content folder.

Create and Share your Google Drive folder.
  1. Open your Google Drive My Drive page, select the ✚ New button (top-left), create a new folder, and give it a name that identifies your storefront.
  2. Open your new folder (double-click).
  3. Open your folder’s menu, and select the Share > Share menu item.
  4. Type helix and select helix@adobe.com as the recipient.
  5. Ensure the Editor option (default) is selected to give read/write access, then select the Send button.
  6. You can verify your folder is now shared if you see a new Shared icon (👥) to the right of your folder.
  7. Additionally, you can select the icon and verify that helix@adobe.com is listed as an Editor. If it is, your content folder is now connected to the Edge Delivery Services content bus.

Add sample content

Now let’s add the boilerplate sample files to your content folder. Choose the tab below that matches your chosen storage service, Google Drive or SharePoint.

Add sample Google Drive content.

Add sample Google Drive content.
  1. Open your Google Drive folder.
  2. Select the ⚙️ Settings icon (top-right of the page) and choose Settings from the menu.
  3. Enable the Uploads checkbox to convert uploads to Google Docs editor format. Return to your storefront folder.
  4. Download the boilerplate’s starter-content-commerce.zip file.
  5. Unzip the file and drag the contents into your folder. This will convert the Word and Excel files to Google Docs and Sheets.

Connect repo to folder content

Now we need to link your GitHub storefront repo (the code) to your storefront folder (the content). Linking your code to your content enables Edge Delivery to coordinate code changes in the repo with content changes in your Google Drive or SharePoint folder. After step 1 below, all steps are the same for Google Drive and SharePoint.

Replace the default boilerplate's folder URL with your content folder URL.

Replace the default boilerplate's folder URL with your content folder URL.

  1. Copy the URL to your content folder:

    • For Google Drive: Open your folder and copy the URL from the browser’s address bar.
    • For SharePoint: Open your folder and select the Copy link button.

  2. Go to your GitHub repo and open the fstab.yaml file from the project root.

  3. Edit the fstab.yaml file in place.

  4. Replace the default mountpoints URL (which points to the boilerplate’s SharePoint folder) with your Google Drive or SharePoint folder URL.

  5. Select the Commit changes… button.

  6. Commit the changes directly to main. Now the Edge Delivery system knows where to find the content for this repository.

Set up Sidekick for content

For this task, we’ll use the Sidekick Configurator to install Sidekick and configure it for our storefront.

Set up Sidekick.
Set up Sidekick.

  1. Open your GitHub repo and copy it’s URL from the browser’s address bar.

  2. Open the Sidekick Configurator tool and complete the fields as follows:

    • Repository URL: Paste the URL to your repo (required).
    • Project Name: Add name that identifies your storefront (optional).

  3. Select the Go button. If you don’t already have Sidekick installed, you should see links to install Sidekick or add the bookmarklet.

  4. Install Sidekick from the Chrome Web Store or use the bookmarklet. If you’re using the bookmarklet, drag it to your browser’s bookmarks bar. If installing the extension, Pin the Sidekick extension to your browser’s toolbar.

  5. Select the browser’s back button to return to the Sidekick Configurator page. You should now see a message stating “Your Sidekick is not configured for this project yet” and an Add project button.

  6. Select the Add project button to complete your Sidekick setup. You should see a message stating: “Your Sidekick is configured for this project.”

  7. Return to your folder, select all your Google docs or Word.docx files, select the Sidekick extension, and click the Preview button. Repeat this for all files in each folder. Select all the files again, but select the Publish button for each docs/docx file. These actions add your content to the internal (preview) and production (publish) Edge Delivery CDNs, where it can be downloaded and displayed on your browser for local development.

You can now use Sidekick to Preview, Publish, and Edit all your files directly from your Google Drive or SharePoint folder. Take a moment to select any file in your folder, select the Sidekick extension, and choose the Sidekick options to get familiar with how Sidekick works. Visit the Sidekick documentation for more information on how to use Sidekick to manage your storefront content.

Set up local dev environment

  1. Go to your GitHub repo and select the Code button to copy the repo’s git URL for cloning (HTTPS or SSH).

  2. Open a terminal on your local machine and clone your storefront repo:

    git clone [HTTPS or SSH URL]

  3. Navigate to the root of your local repo and install the dependencies.

    npm install

  4. Start the development server to view the boilerplate storefront.

    npm start

    The first page of your boilerplate storefront should be visible in your browser at http://localhost:3000.

    Boilerplate Home Page

  5. Open the project in your favorite code editor. You’re now ready to explore the boilerplate and start customizing your storefront!

\ No newline at end of file +URL.">

Replace the default boilerplate's folder URL with your content folder URL.

  1. Copy the URL to your content folder:

    • For Google Drive: Open your folder and copy the URL from the browser’s address bar.
    • For SharePoint: Open your folder and select the Copy link button.

  2. Go to your GitHub repo and open the fstab.yaml file from the project root.

  3. Edit the fstab.yaml file in place.

  4. Replace the default mountpoints URL (which points to the boilerplate’s SharePoint folder) with your Google Drive or SharePoint folder URL.

  5. Select the Commit changes… button.

  6. Commit the changes directly to main. Now the Edge Delivery system knows where to find the content for this repository.

Set up Sidekick for content

For this task, we’ll use the Sidekick Configurator to install Sidekick and configure it for our storefront.

Set up Sidekick.
Set up Sidekick.

  1. Open your GitHub repo and copy it’s URL from the browser’s address bar.

  2. Open the Sidekick Configurator tool and complete the fields as follows:

    • Repository URL: Paste the URL to your repo (required).
    • Project Name: Add name that identifies your storefront (optional).

  3. Select the Go button. If you don’t already have Sidekick installed, you should see links to install Sidekick or add the bookmarklet.

  4. Install Sidekick from the Chrome Web Store or use the bookmarklet. If you’re using the bookmarklet, drag it to your browser’s bookmarks bar. If installing the extension, Pin the Sidekick extension to your browser’s toolbar.

  5. Select the browser’s back button to return to the Sidekick Configurator page. You should now see a message stating “Your Sidekick is not configured for this project yet” and an Add project button.

  6. Select the Add project button to complete your Sidekick setup. You should see a message stating: “Your Sidekick is configured for this project.”

  7. Return to your folder, select all your Google docs or Word.docx files, select the Sidekick extension, and click the Preview button. Repeat this for all files in each folder. Select all the files again, but select the Publish button for each docs/docx file. These actions add your content to the internal (preview) and production (publish) Edge Delivery CDNs, where it can be downloaded and displayed on your browser for local development.

You can now use Sidekick to Preview, Publish, and Edit all your files directly from your Google Drive or SharePoint folder. Take a moment to select any file in your folder, select the Sidekick extension, and choose the Sidekick options to get familiar with how Sidekick works. Visit the Sidekick documentation for more information on how to use Sidekick to manage your storefront content.

Set up local dev environment

  1. Go to your GitHub repo and select the Code button to copy the repo’s git URL for cloning (HTTPS or SSH).

  2. Open a terminal on your local machine and clone your storefront repo:

    git clone [HTTPS or SSH URL]

  3. Navigate to the root of your local repo and install the dependencies.

    npm install

  4. Start the development server to view the boilerplate storefront.

    npm start

    The first page of your boilerplate storefront should be visible in your browser at http://localhost:3000.

    Boilerplate Home Page

  5. Open the project in your favorite code editor. You’re now ready to explore the boilerplate and start customizing your storefront!

\ No newline at end of file diff --git a/storefront/get-started/run-lighthouse/index.html b/storefront/get-started/run-lighthouse/index.html index a2be2f26a..f969093c8 100644 --- a/storefront/get-started/run-lighthouse/index.html +++ b/storefront/get-started/run-lighthouse/index.html @@ -1 +1 @@ -Run Lighthouse audits | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront
Get Started

Run Lighthouse audits

PageSpeed Insights is the most accurate way to audit your storefront’s Web Vitals. It uses the same Lighthouse engine as the Chrome DevTools, but it runs the audit on a real device in a controlled environment.

PageSpeed Insights Make sure you enter your storefront's .live production URL for accurate results. The .live production site sits on CDNs that are closest to your customers, on the edge.

Visit the Adobe Experience Manager docs topic, Keeping it 100 💯, to learn more about what PageSpeed Insights measure and how to keep your storefront at 100.

Step-by-step

  1. Navigate to the PageSpeed Insights page: https://pagespeed.web.dev/.

  2. Enter your .live storefront URL. The URLs for your preview and live sites take the following forms:

    • Preview: https://main--{repo}--{owner}.hlx.page/
    • Live: https://main--{repo}--{owner}.hlx.live/

  3. Click the Analyze button to run the audit.

  4. You should see full Web Vital reports for both mobile and desktop, with lighthouse scores at or very near 100 across Performance, Accessibility, Best Practices, and SEO. 🚀

\ No newline at end of file +Run Lighthouse audits | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront
Get Started

Run Lighthouse audits

PageSpeed Insights is the most accurate way to audit your storefront’s Web Vitals. It uses the same Lighthouse engine as the Chrome DevTools, but it runs the audit on a real device in a controlled environment.

PageSpeed Insights Make sure you enter your storefront's .live production URL for accurate results. The .live production site sits on CDNs that are closest to your customers, on the edge.

Visit the Adobe Experience Manager docs topic, Keeping it 100 💯, to learn more about what PageSpeed Insights measure and how to keep your storefront at 100.

Step-by-step

  1. Navigate to the PageSpeed Insights page: https://pagespeed.web.dev/.

  2. Enter your .live storefront URL. The URLs for your preview and live sites take the following forms:

    • Preview: https://main--{repo}--{owner}.hlx.page/
    • Live: https://main--{repo}--{owner}.hlx.live/

  3. Click the Analyze button to run the audit.

  4. You should see full Web Vital reports for both mobile and desktop, with lighthouse scores at or very near 100 across Performance, Accessibility, Best Practices, and SEO. 🚀

\ No newline at end of file diff --git a/storefront/get-started/storefront-structure/index.html b/storefront/get-started/storefront-structure/index.html index afa3da9dd..459e51b65 100644 --- a/storefront/get-started/storefront-structure/index.html +++ b/storefront/get-started/storefront-structure/index.html @@ -1 +1 @@ -Explore the Structure | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront
Get Started

Explore the Structure

The storefront project is a collection of blocks (Content components, widgets, and dropins), scripts, and styles designed for amazing performance, easy customizations, and rapid content development.

Big picture

The file structure of the storefront boilerplate is shown here. Detailed descriptions are scheduled to be added before our April release.

  • Directoryblocks/ — Content and Commerce blocks
    • Directorycards/ — Content block
      • cards.css — CSS classes
      • cards.js — JavaScript decorator
    • Directorycolumns/ — Content block
      • columns.css — CSS classes
      • columns.js — JavaScript decorator
    • Directorycommerce-account/ — Commerce block
      • commerce-account.css — CSS classes
      • commerce-account.js — JavaScript decorator
    • Directorycommerce-cart/ — Commerce block
      • commerce-cart.css — CSS classes
      • commerce-cart.js — JavaScript decorator
    • Directorycommerce-checkout/ — Commerce block
      • commerce-checkout.css — CSS classes
      • commerce-checkout.js — JavaScript decorator
    • Directorycommerce-login/ — Commerce block
      • commerce-login.css — CSS classes
      • commerce-login.js — JavaScript decorator
    • Directorycommerce-order-confirmation/ — Commerce block
      • commerce-order-confirmation.css — CSS classes
      • commerce-order-confirmation.js — JavaScript decorator
    • Directoryfooter/ — Content block
      • footer.css — CSS classes
      • footer.js — JavaScript decorator
    • Directoryfragment/ — Content block
      • fragment.css — CSS classes
      • fragment.js — JavaScript decorator
    • Directoryheader/ — Content block
      • header.css — CSS classes
      • header.js — JavaScript decorator
    • Directoryhero/ — Content block
      • hero.css — CSS classes
      • hero.js — JavaScript decorator
    • Directoryproduct-details/ — Commerce block
      • product-details.css — CSS classes
      • product-details.js — JavaScript decorator
    • Directoryproduct-list-page/ — Commerce block
      • product-list-page.css — CSS classes
      • product-list-page.js — JavaScript decorator
    • Directoryproduct-teaser/ — Commerce block
      • product-teaser.css — CSS classes
      • product-teaser.js — JavaScript decorator
  • Directoryfonts/ — Default fonts
    • roboto-bold.woff2
    • roboto-regular.woff2
  • Directoryicons/ — SVG icons
    • caret-down-fill.svg
    • more…
  • Directoryscripts/ — JavaScript files that provide core site functions and connections to Commerce backend services
    • Directory__dropins__ — Imported dropins
      • Directorystorefront-cart/ — minified/optimized dropin code
        • …
      • Directorystorefront-checkout/ — minified/optimized dropin code
        • …
      • Directorystorefront-order-confirmation/ — minified/optimized dropin code
        • …
      • Directorystorefront-pdp/ — minified/optimized dropin code
        • …
    • Directorywidgets/ — Imported widgets
      • LiveSearchAutocomplete.js — For site search field in nav bar
      • search.js — For Product List Page
    • aem.js — AEM site functions
    • commerce.js — Commerce backend GraphQL queries
    • dropins.js — Dropin endpoints and initializers/loaders
    • scripts.js — Loads blocks, fonts, and lazy-styles
    • others…
  • Directorystyles/ — CSS files for dropin design tokens, fonts, deferred styles
    • fonts.css — Default font styles
    • lazy-styles.css — Global styles loaded post LCP
    • styles.css — Global site design tokens and styles
  • Directorytools/ — Commerce Picker code and Sidekick configuration file
    • Directorypicker/ — Picker project code
      • project-files… — Contains Catalog Services GraphQL queries for categories and products
    • Directorysidekick/ — Sidekick configuration
      • config.json — Configuration settings for Commerce Picker, including Picker button title
  • fstab.yaml — Connects the code to the content using the URL and ID to your Google Drive or SharePoint folder
  • head.html — Includes @dropin importmap, aem.js, scripts.js, and styles.css
  • helix-query.yaml — Defines the path and properties for your enrichment blocks
  • package.json — Includes aem-cli, @dropins/tools, and the currently integrated dropins

Vocabulary

Commerce dropins

Full-featured shopping components that turn websites into storefronts. Dropins are not primitive components, like Carousels and Galleries. They provide the entire storefront shopping experience for a website using pages and other commerce features.

Commerce blocks

The integration of Commerce dropins into the Edge Delivery Services architecture of JavaScript blocks and document-based authoring.

Content blocks

The Edge Delivery components that provide the content and layout for non-commerce pages in the storefront. These include Cards, Columns, Headers, Footers, and many more. Visit the Adobe Experience Manager Block Collection section for the details.

Start exploring

Run your storefront locally using the npm start command and use the table below see how each boilerplate page has a corresponding Commerce block which wraps the dropin (or widget) that provides the block with its features and functions.

Relationship between the Commerce blocks and dropins

In the following table, the first column of links won’t resolve unless you have your storefront running locally on port 3000. The second column links to the Commerce block code in the boilerplate repository, and the third column links to the dropin/widget code that powers the block.

From the page →to the Commerce block →to the dropin/widget that powers it
🔎 Search boxblocks/header/searchbar.jsscripts/widgets/LiveSearchAutocomplete.js
Catalog > Gearblocks/product-list-pagescripts/widgets/search.js
Catalog > Crown Summit Backpackblocks/product-detailsscripts/__dropins__/storefront-pdp/containers/ProductDetails.js
Catalog > Hollister Backyard Shirtblocks/product-detailsscripts/__dropins__/storefront-pdp/containers/ProductDetails.js
Checkout Experience > Cartblocks/commerce-cart*In Development
Checkout Experience > Checkoutblocks/commerce-checkout*In Development
Account > Login (NA)blocks/commerce-login*In Development
Account > Account (NA)blocks/commerce-account*In Development
Order ConfirmationIn DevelopmentIn Development

*Dropins marked as In Development have placeholders in the current Commerce boilerplate.

\ No newline at end of file +Explore the Structure | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront
Get Started

Explore the Structure

The storefront project is a collection of blocks (Content components, widgets, and dropins), scripts, and styles designed for amazing performance, easy customizations, and rapid content development.

Big picture

The file structure of the storefront boilerplate is shown here. Detailed descriptions are scheduled to be added before our April release.

  • Directoryblocks/ — Content and Commerce blocks
    • Directorycards/ — Content block
      • cards.css — CSS classes
      • cards.js — JavaScript decorator
    • Directorycolumns/ — Content block
      • columns.css — CSS classes
      • columns.js — JavaScript decorator
    • Directorycommerce-account/ — Commerce block
      • commerce-account.css — CSS classes
      • commerce-account.js — JavaScript decorator
    • Directorycommerce-cart/ — Commerce block
      • commerce-cart.css — CSS classes
      • commerce-cart.js — JavaScript decorator
    • Directorycommerce-checkout/ — Commerce block
      • commerce-checkout.css — CSS classes
      • commerce-checkout.js — JavaScript decorator
    • Directorycommerce-login/ — Commerce block
      • commerce-login.css — CSS classes
      • commerce-login.js — JavaScript decorator
    • Directorycommerce-order-confirmation/ — Commerce block
      • commerce-order-confirmation.css — CSS classes
      • commerce-order-confirmation.js — JavaScript decorator
    • Directoryfooter/ — Content block
      • footer.css — CSS classes
      • footer.js — JavaScript decorator
    • Directoryfragment/ — Content block
      • fragment.css — CSS classes
      • fragment.js — JavaScript decorator
    • Directoryheader/ — Content block
      • header.css — CSS classes
      • header.js — JavaScript decorator
    • Directoryhero/ — Content block
      • hero.css — CSS classes
      • hero.js — JavaScript decorator
    • Directoryproduct-details/ — Commerce block
      • product-details.css — CSS classes
      • product-details.js — JavaScript decorator
    • Directoryproduct-list-page/ — Commerce block
      • product-list-page.css — CSS classes
      • product-list-page.js — JavaScript decorator
    • Directoryproduct-teaser/ — Commerce block
      • product-teaser.css — CSS classes
      • product-teaser.js — JavaScript decorator
  • Directoryfonts/ — Default fonts
    • roboto-bold.woff2
    • roboto-regular.woff2
  • Directoryicons/ — SVG icons
    • caret-down-fill.svg
    • more…
  • Directoryscripts/ — JavaScript files that provide core site functions and connections to Commerce backend services
    • Directory__dropins__ — Imported dropins
      • Directorystorefront-cart/ — minified/optimized dropin code
        • …
      • Directorystorefront-checkout/ — minified/optimized dropin code
        • …
      • Directorystorefront-order-confirmation/ — minified/optimized dropin code
        • …
      • Directorystorefront-pdp/ — minified/optimized dropin code
        • …
    • Directorywidgets/ — Imported widgets
      • LiveSearchAutocomplete.js — For site search field in nav bar
      • search.js — For Product List Page
    • aem.js — AEM site functions
    • commerce.js — Commerce backend GraphQL queries
    • dropins.js — Dropin endpoints and initializers/loaders
    • scripts.js — Loads blocks, fonts, and lazy-styles
    • others…
  • Directorystyles/ — CSS files for dropin design tokens, fonts, deferred styles
    • fonts.css — Default font styles
    • lazy-styles.css — Global styles loaded post LCP
    • styles.css — Global site design tokens and styles
  • Directorytools/ — Commerce Picker code and Sidekick configuration file
    • Directorypicker/ — Picker project code
      • project-files… — Contains Catalog Services GraphQL queries for categories and products
    • Directorysidekick/ — Sidekick configuration
      • config.json — Configuration settings for Commerce Picker, including Picker button title
  • fstab.yaml — Connects the code to the content using the URL and ID to your Google Drive or SharePoint folder
  • head.html — Includes @dropin importmap, aem.js, scripts.js, and styles.css
  • helix-query.yaml — Defines the path and properties for your enrichment blocks
  • package.json — Includes aem-cli, @dropins/tools, and the currently integrated dropins

Vocabulary

Commerce dropins

Full-featured shopping components that turn websites into storefronts. Dropins are not primitive components, like Carousels and Galleries. They provide the entire storefront shopping experience for a website using pages and other commerce features.

Commerce blocks

The integration of Commerce dropins into the Edge Delivery Services architecture of JavaScript blocks and document-based authoring.

Content blocks

The Edge Delivery components that provide the content and layout for non-commerce pages in the storefront. These include Cards, Columns, Headers, Footers, and many more. Visit the Adobe Experience Manager Block Collection section for the details.

Start exploring

Run your storefront locally using the npm start command and use the table below see how each boilerplate page has a corresponding Commerce block which wraps the dropin (or widget) that provides the block with its features and functions.

Relationship between the Commerce blocks and dropins

In the following table, the first column of links won’t resolve unless you have your storefront running locally on port 3000. The second column links to the Commerce block code in the boilerplate repository, and the third column links to the dropin/widget code that powers the block.

From the page →to the Commerce block →to the dropin/widget that powers it
🔎 Search boxblocks/header/searchbar.jsscripts/widgets/LiveSearchAutocomplete.js
Catalog > Gearblocks/product-list-pagescripts/widgets/search.js
Catalog > Crown Summit Backpackblocks/product-detailsscripts/__dropins__/storefront-pdp/containers/ProductDetails.js
Catalog > Hollister Backyard Shirtblocks/product-detailsscripts/__dropins__/storefront-pdp/containers/ProductDetails.js
Checkout Experience > Cartblocks/commerce-cart*In Development
Checkout Experience > Checkoutblocks/commerce-checkout*In Development
Account > Login (NA)blocks/commerce-login*In Development
Account > Account (NA)blocks/commerce-account*In Development
Order ConfirmationIn DevelopmentIn Development

*Dropins marked as In Development have placeholders in the current Commerce boilerplate.

\ No newline at end of file diff --git a/storefront/images/pdp/pdp-installation.png b/storefront/images/pdp/pdp-installation.png index e1ed25d61..b0f9b0a9b 100644 Binary files a/storefront/images/pdp/pdp-installation.png and b/storefront/images/pdp/pdp-installation.png differ diff --git a/storefront/index.html b/storefront/index.html index c8d03ddb3..e8af5a255 100644 --- a/storefront/index.html +++ b/storefront/index.html @@ -1 +1 @@ -Adobe Commerce Storefront | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront
Adobe Commerce Storefront Adobe Commerce Storefront

Create the fastest
storefronts on the web.

Our new Edge Delivery Services, Commerce dropins, and Content blocks are now combined to create the fastest shops on the web. Find out how they can work for you.
Create your Storefront Join our Discord!
Create your Storefront Give us 20 minutes, we'll give you the foundation for your next storefront.
Product Details dropin Discover how flexible our Commerce components are with our Product Details dropin.
Cart dropin Learn about the Cart dropin.
Checkout dropin Learn about the Checkout dropin.
\ No newline at end of file +Adobe Commerce Storefront | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront
Adobe Commerce Storefront Adobe Commerce Storefront

Create the fastest
storefronts on the web.

Our new Edge Delivery Services, Commerce dropins, and Content blocks are now combined to create the fastest shops on the web. Find out how they can work for you.
Create your Storefront Join our Discord!
Create your Storefront Give us 20 minutes, we'll give you the foundation for your next storefront.
Product Details dropin Discover how flexible our Commerce components are with our Product Details dropin.
Cart dropin Learn about the Cart dropin.
Checkout dropin Learn about the Checkout dropin.
\ No newline at end of file diff --git a/storefront/launch/index.html b/storefront/launch/index.html index cab6ed89b..1235892da 100644 --- a/storefront/launch/index.html +++ b/storefront/launch/index.html @@ -1 +1 @@ -Prepare for Launch | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront
Launch

Prepare for Launch

The launch of a new storefront can be an overwhelming and stressful process. If you don’t have a checklist, you’re likely to forget something. Our Go-Live Checklist is designed specifically to ensure a smooth and successful lauch of your Commerce + Edge Delivery Services storefront.

Documentation

For complete documentation on Launching your storefront, visit the Launch section on the Adobe Experience Manager site or select the direct links below.

  1. Go Live Checklist: The go-live checklist is a summary of best practices to consider when launching a website.
  2. Push Invalidation: Automatically purge content on your production CDN, whenever an author publishes content changes.
  3. Cloudflare Worker Setup: Learn how to configure Cloudflare to deliver content.
  4. Akamai Setup: Discover how to use the Akamai Property Manager to configure a property to deliver content.
  5. Fastly Setup: This guide illustrates how to configure Fastly to deliver content.
  6. CloudFront Setup: Set up Amazon Web Services Cloudfront to deliver your AEM site with push invalidation.
  7. Bring your own DNS: A custom domain without having to set up a content delivery network.
  8. Redirects: You can intuitively manage redirects as a spreadsheet called redirects (or redirects.xlsx) in the root of your project folder.
\ No newline at end of file +Prepare for Launch | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront
Launch

Prepare for Launch

The launch of a new storefront can be an overwhelming and stressful process. If you don’t have a checklist, you’re likely to forget something. Our Go-Live Checklist is designed specifically to ensure a smooth and successful lauch of your Commerce + Edge Delivery Services storefront.

Documentation

For complete documentation on Launching your storefront, visit the Launch section on the Adobe Experience Manager site or select the direct links below.

  1. Go Live Checklist: The go-live checklist is a summary of best practices to consider when launching a website.
  2. Push Invalidation: Automatically purge content on your production CDN, whenever an author publishes content changes.
  3. Cloudflare Worker Setup: Learn how to configure Cloudflare to deliver content.
  4. Akamai Setup: Discover how to use the Akamai Property Manager to configure a property to deliver content.
  5. Fastly Setup: This guide illustrates how to configure Fastly to deliver content.
  6. CloudFront Setup: Set up Amazon Web Services Cloudfront to deliver your AEM site with push invalidation.
  7. Bring your own DNS: A custom domain without having to set up a content delivery network.
  8. Redirects: You can intuitively manage redirects as a spreadsheet called redirects (or redirects.xlsx) in the root of your project folder.
\ No newline at end of file diff --git a/storefront/pagefind/index/en_a437469.pf_index b/storefront/pagefind/index/en_a437469.pf_index new file mode 100644 index 000000000..b323de393 Binary files /dev/null and b/storefront/pagefind/index/en_a437469.pf_index differ diff --git a/storefront/pagefind/index/en_de5bbdb.pf_index b/storefront/pagefind/index/en_de5bbdb.pf_index new file mode 100644 index 000000000..1ea5e4c4d Binary files /dev/null and b/storefront/pagefind/index/en_de5bbdb.pf_index differ diff --git a/storefront/pagefind/pagefind-entry.json b/storefront/pagefind/pagefind-entry.json index ef0b25475..8e761267f 100644 --- a/storefront/pagefind/pagefind-entry.json +++ b/storefront/pagefind/pagefind-entry.json @@ -1 +1 @@ -{"version":"1.1.0","languages":{"en":{"hash":"en_944b56c11b","wasm":"en","page_count":37}}} \ No newline at end of file +{"version":"1.1.0","languages":{"en":{"hash":"en_95cc9de103","wasm":"en","page_count":37}}} \ No newline at end of file diff --git a/storefront/pagefind/pagefind.en_95cc9de103.pf_meta b/storefront/pagefind/pagefind.en_95cc9de103.pf_meta new file mode 100644 index 000000000..685903f64 Binary files /dev/null and b/storefront/pagefind/pagefind.en_95cc9de103.pf_meta differ diff --git a/storefront/pagefind/wasm.en.pagefind b/storefront/pagefind/wasm.en.pagefind index 72d99dc52..83cf973c2 100644 Binary files a/storefront/pagefind/wasm.en.pagefind and b/storefront/pagefind/wasm.en.pagefind differ diff --git a/storefront/pagefind/wasm.unknown.pagefind b/storefront/pagefind/wasm.unknown.pagefind index 48af88493..f50e14541 100644 Binary files a/storefront/pagefind/wasm.unknown.pagefind and b/storefront/pagefind/wasm.unknown.pagefind differ diff --git a/storefront/product-details/pdp-containers/index.html b/storefront/product-details/pdp-containers/index.html index 9ef0721cf..7dfcd0701 100644 --- a/storefront/product-details/pdp-containers/index.html +++ b/storefront/product-details/pdp-containers/index.html @@ -1 +1 @@ -PDP Container | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront
PDP Dropin

PDP Container

The PDP dropin has a single container called ProductDetails. The container’s configuration options are provided below.

Configurations

The Product Details container provides the following configuration options:

OptionTypeReq?Description
skustringYesThe unique identifier for the product.
hideSkubooleanNoOptional boolean to hide the SKU display.
hideQuantitybooleanNoHides the quantity selector if set to true.
hideShortDescriptionbooleanNoHides the short description if set to true.
hideDescriptionbooleanNoHides the description if set to true.
hideAttributesbooleanNoHides the attributes if set to true.
hideURLParamsbooleanNoDisables synchronization of options with URL parameters if true.
productDataProductModelNoOptional initial product data to preload the component.
slotsobjectNoAn object containing slot overrides for customizing various parts of the component display.
carouselCarouselConfigNoConfiguration for the product image carousel display.
onAddToCartfunctionNoCallback function triggered upon adding the product to the cart.

Sku

The sku property is the only required configuration. It’s a string that uniquely identifies the product. This value is used to fetch ProductModel data from the backend.

Hide options

The hide options (hideSku, hideQuantity, and the others) let you hide the parts of the Product Details UI that are not relevant for your storefront. These properties are optional and default to false.

ProductData

The productData property is an optional object that contains the initial product data to preload the component. The object should follow the ProductModel interface:

interface ProductModel {
  name: string;
  sku: string;
  addToCartAllowed: boolean;
  inStock: boolean | null;
  shortDescription?: string;
  description?: string;
  images?: Image[];
  prices: Prices;
  attributes?: Attribute[];
  options?: Option[];
  optionUIDs?: string[];
  url?: string;
  urlKey?: string;
  externalId?: string;
}

View the Example configuration section for an example of how to use this property.

Slots

Slots allow for the customization of component parts. Each slot accepts a SlotProps object with a context containing data, values, and a valid state. Custom actions and content can be added through these slots.

Visit the Slots page for slot details and usage information.

The Carousel settings available for configuration are defined in the CarouselConfig interface:

interface CarouselConfig {
  controls?: 'thumbnailsRow' | 'thumbnailsColumn' | 'dots';
  mobile?: boolean;
  loopable?: boolean;
  peak?: {
    mobile?: boolean;
    desktop?: boolean;
  };
  thumbnailsLoadingMode?: 'lazy' | 'eager';
}
OptionTypeReq?Description
controlsstringNoLayout options: thumbnailsRow, thumbnailsColumn, or dots
mobilebooleanNoWhether to display the carousel on mobile devices.
loopablebooleanNoWhether the carousel should loop continously or stop at the end.
peakobjectNoWhether to show part of the next image on mobile and desktop.
thumbnailsLoadingModestringNoThe loading mode for the thumbnails, lazy or eager.

The Example configuration section shows a usage example for carousel.

onAddToCart

Triggered when the Add to Cart button is clicked. Receives an object with sku, quantity, and optionally optionsUIDs reflecting the user’s selection.

// values: Values { sku: string, quantity: number, optionsUIDs: string[] }
onAddToCart: (values) => void;

Example configuration

The following example demonstrates how to configure the Product Details container:

return productRenderer.render(ProductDetails, {
  sku: yourGetSkuFetchFunction(),
  hideSku: false,
  productData: {
    name: 'Product Name',
    sku: '12345',
    addToCartAllowed: false;
    inStock: true,
    shortDescription: 'Short description of the product.',
    description: 'Long description of the product.',
    images: [
      { url: 'https://via.placeholder.com/150', label: 'Product image', width: 150, height: 150},
      { url: 'https://via.placeholder.com/150', label: 'Product image', width: 150, height: 150},
    ],
  },
  hideQuantity: false,
  hideShortDescription: false,
  hideDescription: false,
  hideAttributes: false,
  hideURLParams: false,
  carousel: {
    controls: 'thumbnailsRow', // 'thumbnailsRow' | 'thumbnailsColumn' | 'dots'
    mobile: true,
    loopable: true,
    peak: {
      mobile: true,
      desktop: true,
    }
    thumbnailsLoadingMode: 'lazy', // 'lazy' | 'eager';
  },
  slots: {
    // See all PDP slots in the next section
    Title: { },
    SKU: { },
  },
  onAddToCart: (values) => console.log('Added to cart', values),
});
\ No newline at end of file +PDP Container | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront
PDP Dropin

PDP Container

The PDP dropin has a single container called ProductDetails. The container’s configuration options are provided below.

Configurations

The Product Details container provides the following configuration options:

OptionTypeReq?Description
skustringYesThe unique identifier for the product.
hideSkubooleanNoOptional boolean to hide the SKU display.
hideQuantitybooleanNoHides the quantity selector if set to true.
hideShortDescriptionbooleanNoHides the short description if set to true.
hideDescriptionbooleanNoHides the description if set to true.
hideAttributesbooleanNoHides the attributes if set to true.
hideURLParamsbooleanNoDisables synchronization of options with URL parameters if true.
productDataProductModelNoOptional initial product data to preload the component.
slotsobjectNoAn object containing slot overrides for customizing various parts of the component display.
carouselCarouselConfigNoConfiguration for the product image carousel display.
onAddToCartfunctionNoCallback function triggered upon adding the product to the cart.

Sku

The sku property is the only required configuration. It’s a string that uniquely identifies the product. This value is used to fetch ProductModel data from the backend.

Hide options

The hide options (hideSku, hideQuantity, and the others) let you hide the parts of the Product Details UI that are not relevant for your storefront. These properties are optional and default to false.

ProductData

The productData property is an optional object that contains the initial product data to preload the component. The object should follow the ProductModel interface:

interface ProductModel {
  name: string;
  sku: string;
  addToCartAllowed: boolean;
  inStock: boolean | null;
  shortDescription?: string;
  description?: string;
  images?: Image[];
  prices: Prices;
  attributes?: Attribute[];
  options?: Option[];
  optionUIDs?: string[];
  url?: string;
  urlKey?: string;
  externalId?: string;
}

View the Example configuration section for an example of how to use this property.

Slots

Slots allow for the customization of component parts. Each slot accepts a SlotProps object with a context containing data, values, and a valid state. Custom actions and content can be added through these slots.

Visit the Slots page for slot details and usage information.

The Carousel settings available for configuration are defined in the CarouselConfig interface:

interface CarouselConfig {
  controls?: 'thumbnailsRow' | 'thumbnailsColumn' | 'dots';
  mobile?: boolean;
  loopable?: boolean;
  peak?: {
    mobile?: boolean;
    desktop?: boolean;
  };
  thumbnailsLoadingMode?: 'lazy' | 'eager';
}
OptionTypeReq?Description
controlsstringNoLayout options: thumbnailsRow, thumbnailsColumn, or dots
mobilebooleanNoWhether to display the carousel on mobile devices.
loopablebooleanNoWhether the carousel should loop continously or stop at the end.
peakobjectNoWhether to show part of the next image on mobile and desktop.
thumbnailsLoadingModestringNoThe loading mode for the thumbnails, lazy or eager.

The Example configuration section shows a usage example for carousel.

onAddToCart

Triggered when the Add to Cart button is clicked. Receives an object with sku, quantity, and optionally optionsUIDs reflecting the user’s selection.

// values: Values { sku: string, quantity: number, optionsUIDs: string[] }
onAddToCart: (values) => void;

Example configuration

The following example demonstrates how to configure the Product Details container:

return productRenderer.render(ProductDetails, {
  sku: yourGetSkuFetchFunction(),
  hideSku: false,
  productData: {
    name: 'Product Name',
    sku: '12345',
    addToCartAllowed: false;
    inStock: true,
    shortDescription: 'Short description of the product.',
    description: 'Long description of the product.',
    images: [
      { url: 'https://via.placeholder.com/150', label: 'Product image', width: 150, height: 150},
      { url: 'https://via.placeholder.com/150', label: 'Product image', width: 150, height: 150},
    ],
  },
  hideQuantity: false,
  hideShortDescription: false,
  hideDescription: false,
  hideAttributes: false,
  hideURLParams: false,
  carousel: {
    controls: 'thumbnailsRow', // 'thumbnailsRow' | 'thumbnailsColumn' | 'dots'
    mobile: true,
    loopable: true,
    peak: {
      mobile: true,
      desktop: true,
    }
    thumbnailsLoadingMode: 'lazy', // 'lazy' | 'eager';
  },
  slots: {
    // See all PDP slots in the next section
    Title: { },
    SKU: { },
  },
  onAddToCart: (values) => console.log('Added to cart', values),
});
\ No newline at end of file diff --git a/storefront/product-details/pdp-functions/index.html b/storefront/product-details/pdp-functions/index.html index e6a98ecd6..ddaac866b 100644 --- a/storefront/product-details/pdp-functions/index.html +++ b/storefront/product-details/pdp-functions/index.html @@ -1,3 +1,3 @@ PDP Functions | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront
PDP Dropin

PDP Functions

The Product Details dropin provides two functions for retrieving the product details data to display: getProductData and getRefinedProduct.

getProductData

This function returns the product data for a given product sku. It takes sku as a parameter.

import { getProductData } from '@/pdp/api/getProductData';

 
getProductData(sku: string);

getRefinedProduct

A function that returns refined product’s data. It takes sku and optionUIDs as parameters.

import { getRefinedProduct } from '@/pdp/api/getRefinedProduct';

-
getRefinedProduct(sku: string, optionUIDs: string[]);

Example usage

\ No newline at end of file +
getRefinedProduct(sku: string, optionUIDs: string[]);

Example usage

\ No newline at end of file diff --git a/storefront/product-details/pdp-installation/index.html b/storefront/product-details/pdp-installation/index.html index 352894fba..c010f285f 100644 --- a/storefront/product-details/pdp-installation/index.html +++ b/storefront/product-details/pdp-installation/index.html @@ -6,4 +6,4 @@
// Dropin Container
import ProductDetails from '@dropins/storefront-pdp/containers/ProductDetails.js';

Connect to the endpoint

Connect your Product Details dropin to the Catalog Service GraphQL endpoint and set the required headers as shown in the example below. Replace the endpoint URL and header placeholder values with the actual values from your Commerce backend services:

product-details.js
// Set endpoint configuration
product.setEndpoint('https://<catalog-service-endpoint>/graphql');

 
product.setFetchGraphQlHeaders({
  // Environment required headers
  'Magento-Environment-Id': 'your-environment-id',
  'Magento-Store-View-Code': 'your-store-view-code',
  'Magento-Website-Code': 'your-website-code',
  'x-api-key': 'your-api-key',
  'Magento-Store-Code': 'main_website_store',
  'Magento-Customer-Group': 'your-customer-group',
  'Content-Type': 'application/json',
});

Register and load the dropin

The code below shows how to register the Product Details dropin, load it (mount), and enable the logger for debugging purposes. You can add these functions within a <script> tag in your Product Details HTML page as shown here:

index.html
<script type="module">
  // more code above...

 
  // Register and load the Product Details dropin
  initializers.register(pdp.initialize);

-
  // Mount Initializers (must be called after all initializers are registered)
  window.addEventListener('load', initializers.mount);
</script>
  1. This function registers the Product Details dropin to be loaded on the page by the initializers.mount function.
  2. This event handler triggers the initializers.mount function to load the Product Details dropin after the page has loaded.

Render the dropin

Render the Product Details dropin on the page. The example below provides the minimal configuration options required to render the default Product Details dropin:

product-details.js
// Render Product Details
productRenderer(ProductDetails, {
  sku: 'SKU-001',
  // other configuration options
  // slots for adding custom elements, components, and functions
})(document.getElementById('your-pdp-element'));

Test the Product Details dropin by viewing your PDP page in a browswer, or running your local dev or build server. If you see the Product Details dropin rendered in the browser, congrats!, you have a successful installation. If not, check the console for any errors and verify that you have followed all the steps correctly.

Summary

The installation of all dropins follows the same pattern demonstrated by installing the PDP dropin: Install, Map, Import, Connect, Register, and Render. We like to call the process iMICRR for short, pronounced eye-mike-er. Actually, we don’t call it that, but if it helps…Enjoy!

\ No newline at end of file +
// Mount Initializers (must be called after all initializers are registered)
window.addEventListener('load', initializers.mount);
</script>
  1. This function registers the Product Details dropin to be loaded on the page by the initializers.mount function.
  2. This event handler triggers the initializers.mount function to load the Product Details dropin after the page has loaded.

Render the dropin

Render the Product Details dropin on the page. The example below provides the minimal configuration options required to render the default Product Details dropin:

product-details.js
// Render Product Details
productRenderer(ProductDetails, {
  sku: 'SKU-001',
  // other configuration options
  // slots for adding custom elements, components, and functions
})(document.getElementById('your-pdp-element'));

Test the Product Details dropin by viewing your PDP page in a browswer, or running your local dev or build server. If you see the Product Details dropin rendered in the browser, congrats!, you have a successful installation. If not, check the console for any errors and verify that you have followed all the steps correctly.

Summary

The installation of all dropins follows the same pattern demonstrated by installing the PDP dropin: Install, Map, Import, Connect, Register, and Render. We like to call the process iMICRR for short, pronounced eye-mike-er. Actually, we don’t call it that, but if it helps…Enjoy!

\ No newline at end of file diff --git a/storefront/product-details/pdp-introduction/index.html b/storefront/product-details/pdp-introduction/index.html index 2dfa33c5d..c2a640814 100644 --- a/storefront/product-details/pdp-introduction/index.html +++ b/storefront/product-details/pdp-introduction/index.html @@ -1 +1 @@ -Product Details Page (PDP) introduction | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront
PDP Dropin

Product Details Page (PDP) introduction

Product Details Page (PDP) dropin is designed to render detailed information about products and services, including SKUs, pricing, descriptions, and customizable options, with built-in support for internationalization and accessibility. This dropin is a key component of the e-commerce experience, providing users with essential product details and enabling them to make informed purchasing decisions.

The PDP dropin is highly customizable, allowing you to tailor its appearance and functionality to meet the specific needs of your brand and platform. By leveraging the dropin’s API functions and UI slots, developers can extend its capabilities and integrate it seamlessly with their existing systems. This flexibility enables brands to create a cohesive shopping experience that aligns with their unique brand identity and user experience goals.

Topics

Each of the following topics collectively provides a comprehensive guide to implementing, styling, and utilizing PDP dropins effectively within your e-commerce platform, aiming to enhance both the customer experience and administrative ease.

Installation

Installation outlines the step-by-step process for embedding the Product Details dropin into your site. This topic covers everything from basic setup requirements to more advanced configurations, ensuring that the dropin integrates seamlessly with your existing website architecture. It is designed for compatibility with modern web technologies, focusing on ease of use and flexibility for developers.

Styles

The styles topic show how to customize the appearance of PDP dropins using CSS. We provide guidelines and examples for applying styles to various components within the dropin. This customization allows brands to align the dropin’s look and feel with their overall design aesthetic, enhancing brand consistency across the platform.

Containers

PDP Containers discusses the structural elements of the Product Details dropin, specifically focusing on how the container manages and displays content. It includes information on configuration options and how to leverage these settings to customize the user experience. This guide is essential for understanding the foundational aspects of dropin management and deployment.

Slots

The PDP Slots documentation details the various UI slots available within the Product Details dropin. Each slot can be customized or replaced with alternative content, providing flexibility in how information is presented to the users. This topic includes diagrams and examples that describe the default UI controls and how they can be utilized or modified to fit different needs.

Functions

This topic introduces the API functions available in the Product Details dropin, such as getProductData and getRefinedProduct. These functions allow developers to retrieve and display detailed product information dynamically. Understanding these API functions is crucial for developers looking to extend the functionality of their PDP dropins or integrate them with other systems.

\ No newline at end of file +Product Details Page (PDP) introduction | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront
PDP Dropin

Product Details Page (PDP) introduction

Product Details Page (PDP) dropin is designed to render detailed information about products and services, including SKUs, pricing, descriptions, and customizable options, with built-in support for internationalization and accessibility. This dropin is a key component of the e-commerce experience, providing users with essential product details and enabling them to make informed purchasing decisions.

The PDP dropin is highly customizable, allowing you to tailor its appearance and functionality to meet the specific needs of your brand and platform. By leveraging the dropin’s API functions and UI slots, developers can extend its capabilities and integrate it seamlessly with their existing systems. This flexibility enables brands to create a cohesive shopping experience that aligns with their unique brand identity and user experience goals.

Topics

Each of the following topics collectively provides a comprehensive guide to implementing, styling, and utilizing PDP dropins effectively within your e-commerce platform, aiming to enhance both the customer experience and administrative ease.

Installation

Installation outlines the step-by-step process for embedding the Product Details dropin into your site. This topic covers everything from basic setup requirements to more advanced configurations, ensuring that the dropin integrates seamlessly with your existing website architecture. It is designed for compatibility with modern web technologies, focusing on ease of use and flexibility for developers.

Styles

The styles topic show how to customize the appearance of PDP dropins using CSS. We provide guidelines and examples for applying styles to various components within the dropin. This customization allows brands to align the dropin’s look and feel with their overall design aesthetic, enhancing brand consistency across the platform.

Containers

PDP Containers discusses the structural elements of the Product Details dropin, specifically focusing on how the container manages and displays content. It includes information on configuration options and how to leverage these settings to customize the user experience. This guide is essential for understanding the foundational aspects of dropin management and deployment.

Slots

The PDP Slots documentation details the various UI slots available within the Product Details dropin. Each slot can be customized or replaced with alternative content, providing flexibility in how information is presented to the users. This topic includes diagrams and examples that describe the default UI controls and how they can be utilized or modified to fit different needs.

Functions

This topic introduces the API functions available in the Product Details dropin, such as getProductData and getRefinedProduct. These functions allow developers to retrieve and display detailed product information dynamically. Understanding these API functions is crucial for developers looking to extend the functionality of their PDP dropins or integrate them with other systems.

\ No newline at end of file diff --git a/storefront/product-details/pdp-slots/index.html b/storefront/product-details/pdp-slots/index.html index d97fd06b2..3b5418179 100644 --- a/storefront/product-details/pdp-slots/index.html +++ b/storefront/product-details/pdp-slots/index.html @@ -6,4 +6,4 @@
ctx.onChange((next) => {
quantity.innerText = `${next.dictionary.Custom.quantityLabel}`;
promo.innerText = `${next.dictionary.Custom.promoLabel}:`;
});
},
},
});

Actions

return productRenderer.render(ProductDetails, {
  sku: getSkuFromUrl(),
  slots: {
    Actions: (ctx) => {
      // actions decoration
      const actions = document.createElement('div');
      actions.classList.add('actions-decoration');
      actions.innerHTML = 'Actions';
      ctx.prependChild(actions);

 
      const addToCart = ctx.appendButton({
        text: 'Add to Cart',
        icon: 'cart',
        onClick: () => {
          console.log('Add to Cart clicked');
        },
      });

 
      const addToWishlist = ctx.appendButton({
        text: 'Add to Wishlist',
        icon: 'heart',
        onClick: () => {
          console.log('Add to Wishlist clicked');
        },
      });

-
      const share = ctx.appendButton({
        text: 'Share',
        icon: 'share',
        onClick: () => {
          console.log('Share clicked');
        },
      });
    },
  },
});

Short Description

return productRenderer.render(ProductDetails, {
  sku: getSkuFromUrl(),
  slots: {
    ShortDescription: (ctx) => {
      const shortDescription = document.createElement('div');
      // add good example
    },
  },
});

Description

return productRenderer.render(ProductDetails, {
  sku: getSkuFromUrl(),
  slots: {
    Description: (ctx) => {
      const description = document.createElement('div');
      // add good example
    },
  },
});

Attributes

return productRenderer.render(ProductDetails, {
  sku: getSkuFromUrl(),
  slots: {
    Attributes: (ctx) => {
      const attributes = document.createElement('div');
      // add good example
    },
  },
});

GalleryContent

return productRenderer.render(ProductDetails, {
  sku: getSkuFromUrl(),
  slots: {
    GalleryContent: (ctx) => {
      const galleryContent = document.createElement('div');
      // add good example
    },
  },
});

InfoContent

return productRenderer.render(ProductDetails, {
  sku: getSkuFromUrl(),
  slots: {
    InfoContent: (ctx) => {
      const infoContent = document.createElement('div');
      // add good example
    },
  },
});

Content

return productRenderer.render(ProductDetails, {
  sku: getSkuFromUrl(),
  slots: {
    Content: (ctx) => {
      const productContent = document.createElement('div');
      // add good example
    },
  },
});

Summary

The Product Details dropin provides slots for nearly every part of its UI, allowing you to customize every detail to create a unique and branded experience for your customers.

\ No newline at end of file +
const share = ctx.appendButton({
text: 'Share',
icon: 'share',
onClick: () => {
console.log('Share clicked');
},
});
},
},
});

Short Description

return productRenderer.render(ProductDetails, {
  sku: getSkuFromUrl(),
  slots: {
    ShortDescription: (ctx) => {
      const shortDescription = document.createElement('div');
      // add good example
    },
  },
});

Description

return productRenderer.render(ProductDetails, {
  sku: getSkuFromUrl(),
  slots: {
    Description: (ctx) => {
      const description = document.createElement('div');
      // add good example
    },
  },
});

Attributes

return productRenderer.render(ProductDetails, {
  sku: getSkuFromUrl(),
  slots: {
    Attributes: (ctx) => {
      const attributes = document.createElement('div');
      // add good example
    },
  },
});

GalleryContent

return productRenderer.render(ProductDetails, {
  sku: getSkuFromUrl(),
  slots: {
    GalleryContent: (ctx) => {
      const galleryContent = document.createElement('div');
      // add good example
    },
  },
});

InfoContent

return productRenderer.render(ProductDetails, {
  sku: getSkuFromUrl(),
  slots: {
    InfoContent: (ctx) => {
      const infoContent = document.createElement('div');
      // add good example
    },
  },
});

Content

return productRenderer.render(ProductDetails, {
  sku: getSkuFromUrl(),
  slots: {
    Content: (ctx) => {
      const productContent = document.createElement('div');
      // add good example
    },
  },
});

Summary

The Product Details dropin provides slots for nearly every part of its UI, allowing you to customize every detail to create a unique and branded experience for your customers.

\ No newline at end of file diff --git a/storefront/product-details/pdp-styles/index.html b/storefront/product-details/pdp-styles/index.html index 2e2577963..93856b573 100644 --- a/storefront/product-details/pdp-styles/index.html +++ b/storefront/product-details/pdp-styles/index.html @@ -99,4 +99,4 @@
/* Medium (portrait tablets and large phones, 768px and up) */
/* @media only screen and (min-width: 768px) { } */
/* Large (landscape tablets, 1024px and up) */
/* @media only screen and (min-width: 1024px) { } */
/* XLarge (laptops/desktops, 1366px and up) */
/* @media only screen and (min-width: 1366px) { } */
-
/* XXlarge (large laptops and desktops, 1920px and up) */
/* @media only screen and (min-width: 1920px) { } */

Summary

You can customize the Product Details dropin by overriding the CSS classes provided for each component. Create a CSS file for each component to make it easier to maintain and update your PDP CSS. Use the BEM naming convention and your browser’s dev tools to identify and copy the class to your corresponding component CSS file and override it as needed. Happy styling! 🎨

\ No newline at end of file +
/* XXlarge (large laptops and desktops, 1920px and up) */
/* @media only screen and (min-width: 1920px) { } */

Summary

You can customize the Product Details dropin by overriding the CSS classes provided for each component. Create a CSS file for each component to make it easier to maintain and update your PDP CSS. Use the BEM naming convention and your browser’s dev tools to identify and copy the class to your corresponding component CSS file and override it as needed. Happy styling! 🎨

\ No newline at end of file diff --git a/storefront/references/configurations/index.html b/storefront/references/configurations/index.html index d083e6332..0aa1d7388 100644 --- a/storefront/references/configurations/index.html +++ b/storefront/references/configurations/index.html @@ -1,4 +1,4 @@ Storefront configurations | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront
References

Storefront configurations

In this section, you’ll learn how Commerce blocks in your storefront connect to a Commerce backend using values from the configs.xlsx in the root of your SharePoint content directory.

Vocabulary

Storefront configuration

The configs.xlsx file contains the connection settings for your Commerce blocks. Each row in the file contains a key and a value that corresponds to a specific setting in your Commerce backend. The key is used to retrieve the value from the configs.xlsx file and is used to connect your Commerce blocks to your Commerce backend.

default values

By default, the values in the configs.xlsx file are from the boilerplate’s sample backend to ensure everything works out of the box. But when it comes time to connect your own backend, you need to know what each key means so you can update it with the correct value from your own Commerce instance.

getConfigValue function

The getConfigValue function is a helper function that retrieves the value from the configs.xlsx file using the key as an argument. The getConfigValue function is used to connect your Commerce blocks to your Commerce backend.

Commerce block connection

To connect a Commerce block to your Commerce backend, you’ll use the getConfigValue function to set the Services endpoint and GraphQL headers for the block. The Services endpoint is the URL for the block’s GraphQL endpoint, and the GraphQL headers are the headers required to make a request to the endpoint.

Examples

You can find the configs.xlsx file in your content drive by clicking on the mountpoint link in your project’s fstab.yaml file. You should see the configs.xlsx file at the root of the SharePoint directory. Open the file to view the connection keys and values of the sample backend. They should look similar (but not exact) to the following:

#KeyValue
1commerce-endpointhttps://catalog-service-sandbox.adobe.io/graphql
2commerce-core-endpointhttps://graph.adobe.io/api/7f2da5e6-9bf4-6d6a-bb4b-b169583bf4b3/graphql?api_key=5da5ef17d259a3814d2fd872572b97a5
3commerce-environment-id7cb935fd-d3bc-487b-9a2f-e5965c30f2a1
4commerce-root-category-id2
5commerce-website-codebase
6commerce-store-codemain_website_store
7commerce-store-view-codedefault
8commerce-customer-groupd0b8ea36fca097dc92c02b1d104e6f41099184cb
9commerce-x-api-keya6b4e2f69a4a4267a8f423c8caaf6a47

Each key is described below with links to more details. The value for each key is specific to your Commerce instance and can be provided by your Commerce administrator.

  1. commerce-endpoint: (read-only) Services GraphQL endpoint optimized for Catalog Service, Live Search, and Product Recommendations. See Catalog Service for details.

  2. commerce-core-endpoint: (read/write) Core GraphQL endpoint for a variety of queries and mutations. See Adobe Commerce GraphQL API for details.

  3. commerce-environment-id: Connects the storefront to the cloud instance that serves it. See Cloud Environment overview for details.

  4. commerce-root-category-id: Determines the products in the storefront’s main menu. See Step 1: Create root categories, Catagories overview, and Root category and hierarchy for details.

  5. commerce-website-code: Determines the website to connect to. See Step 2: Create websites for details.

  6. commerce-store-code: Determines the store to connect to. See Step 3: Create stores for details.

  7. commerce-store-view-code: Determines the store view to connect to. See Step 4: Create store views and Store views for details.

  8. commerce-customer-group: Determines product discounts and tax classes. See Customer groups and the Create Customer Groups video for details.

  9. commerce-x-api-key: Provides access to SaaS storefront services (Catalog Service, Live Search, and Product Recommendations). See Commerce Services Connector for details.

Step-by-step

We’ll use the product-details Commerce block as an example of where and how to updated the connection settings for your Commerce blocks when switching to your own Commerce backend.

Import the getConfigValue function.

First, import the getConfigValue function from your boilerplate’s scripts/configs.js file. The getConfigValue function takes a string that matches one of the keys from the configs.xlsx file and returns the corresponding value.

import { getConfigValue } from '../../scripts/configs.js';

Set the endpoint and fetch headers.

Within the Commerce block’s decorate function, use the getConfigValue function to set the Services endpoint and GraphQL headers for the dropin block.

export default async function decorate(block) {
  // Initialize Drop-ins
  initializers.register(product.initialize, {});

 
  // Set Fetch Endpoint (Service)
  product.setEndpoint(await getConfigValue('commerce-endpoint'));

 
  // Set Fetch Headers (Service)
  product.setFetchGraphQlHeaders({
    'Content-Type': 'application/json',
    'Magento-Environment-Id': await getConfigValue('commerce-environment-id'),
    'Magento-Website-Code': await getConfigValue('commerce-website-code'),
    'Magento-Store-View-Code': await getConfigValue('commerce-store-view-code'),
    'Magento-Store-Code': await getConfigValue('commerce-store-code'),
    'Magento-Customer-Group': await getConfigValue('commerce-customer-group'),
    'x-api-key': await getConfigValue('commerce-x-api-key'),
  });

-
  //more...
}

Summary

That’s all it takes to connect a dropin Commerce block to your Commerce backend settings. You’ll use the same configuration keys to connect any custom Commerce blocks or new Commerce blocks provided in later releases.

\ No newline at end of file +
//more...
}

Summary

That’s all it takes to connect a dropin Commerce block to your Commerce backend settings. You’ll use the same configuration keys to connect any custom Commerce blocks or new Commerce blocks provided in later releases.

\ No newline at end of file diff --git a/storefront/references/requirements/index.html b/storefront/references/requirements/index.html index 737bab68a..7fa0c800c 100644 --- a/storefront/references/requirements/index.html +++ b/storefront/references/requirements/index.html @@ -1 +1 @@ -Commerce requirements | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront
References

Commerce requirements

When integrating Commerce dropins without Edge Delivery Services, you must ensure that your Adobe Commmerce backend is configured with the services described below. These services are required for Commerce dropins to function properly.

Adobe Commerce

The following links provide the requirements and installation procedures for your Adobe Commerce backend:

Data Connection service

The Data Connection extension connects your Adobe Commerce storefront to the Adobe Experience Platform and the Edge Network so that you can enrich and personalize the shopping experience for your customers. Refer to the Data Connection Guide for details and installation instructions.

Services Connector

The Services Connector connects your Commerce storefront to the Commerce backend services listed below. Refer to the Commerce Services Connector Guide for details and installation instructions.

Catalog Sync service

The Catalog Sync service synchronizes Commerce catalog data with your Commerce storefront. The service is continuously triggered by events that change your catalog data, like product price and inventory changes. Refer to the Catalog Sync Guide for details and installation instructions.

Catalog Service

The Catalog Service module provides fast read-only access to Commerce catalog data. The Product Details dropin requires this service to render product data in the storefront. Refer to the Catalog Service Guide for details and installation instructions.

The Live Search service replaces the default Commerce catalog search and installs the Product Listing Page (PLP) widget in your storefront. Refer to the Live Search Guide for details and installation instructions.

Product Recommendations

Product Recommendations uses artificial intelligence and machine-learning algorithms (Adobe Sensei) to create personalized storefront experiences. While not a strict requirement, we recommended it for Commerce storefronts. Refer to the Product Recommendations Guide for details and installation instructions.

\ No newline at end of file +Commerce requirements | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront
References

Commerce requirements

When integrating Commerce dropins without Edge Delivery Services, you must ensure that your Adobe Commmerce backend is configured with the services described below. These services are required for Commerce dropins to function properly.

Adobe Commerce

The following links provide the requirements and installation procedures for your Adobe Commerce backend:

Data Connection service

The Data Connection extension connects your Adobe Commerce storefront to the Adobe Experience Platform and the Edge Network so that you can enrich and personalize the shopping experience for your customers. Refer to the Data Connection Guide for details and installation instructions.

Services Connector

The Services Connector connects your Commerce storefront to the Commerce backend services listed below. Refer to the Commerce Services Connector Guide for details and installation instructions.

Catalog Sync service

The Catalog Sync service synchronizes Commerce catalog data with your Commerce storefront. The service is continuously triggered by events that change your catalog data, like product price and inventory changes. Refer to the Catalog Sync Guide for details and installation instructions.

Catalog Service

The Catalog Service module provides fast read-only access to Commerce catalog data. The Product Details dropin requires this service to render product data in the storefront. Refer to the Catalog Service Guide for details and installation instructions.

The Live Search service replaces the default Commerce catalog search and installs the Product Listing Page (PLP) widget in your storefront. Refer to the Live Search Guide for details and installation instructions.

Product Recommendations

Product Recommendations uses artificial intelligence and machine-learning algorithms (Adobe Sensei) to create personalized storefront experiences. While not a strict requirement, we recommended it for Commerce storefronts. Refer to the Product Recommendations Guide for details and installation instructions.

\ No newline at end of file diff --git a/storefront/superstar/index.html b/storefront/superstar/index.html index 2f979a0f0..3a947b0ce 100644 --- a/storefront/superstar/index.html +++ b/storefront/superstar/index.html @@ -1 +1 @@ -Storefront Stars | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

Storefront Stars

\ No newline at end of file +Storefront Stars | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront

Storefront Stars

\ No newline at end of file diff --git a/storefront/troubleshooting/pagespeed-issues/index.html b/storefront/troubleshooting/pagespeed-issues/index.html index 293195788..2c551e38f 100644 --- a/storefront/troubleshooting/pagespeed-issues/index.html +++ b/storefront/troubleshooting/pagespeed-issues/index.html @@ -1 +1 @@ -PageSpeed Insights issues | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront
Toubleshooting

PageSpeed Insights issues

Common issues for PageSpeed Insights errors and how to resolve them.

Status code 404

Diagram for how to brand dropins

PageSpeed 404 error

If This

You view lots of❗️red exclamation points and a status code of 404 for your preview (.page) or production (.live) storefront URLs.

Check This

Red dots indicate that the page has not been published or previewed since last edited. The 404 error only happens if you’ve never published or previewed the page you enter into the PageSpeed Insights text field (which includes your index page when you only enter your site’s URL). So because you never published the page (using Sidekick), Edge Delivery has not yet added the page to the preview or production CDNs, where PageSpeed Insights (and everyone else on the internet) looks for it. The result is a 404 error.

Do This

  1. Publish or Preview the page using the Sidekick buttons.
  2. Clear your browser cache.
  3. Wait a minute or two for the page to be added to the preview CDN (Preview button) or production CDN (Publish button).
\ No newline at end of file +PageSpeed Insights issues | Adobe Commerce StorefrontSkip to content
Adobe Commerce Storefront
Toubleshooting

PageSpeed Insights issues

Common issues for PageSpeed Insights errors and how to resolve them.

Status code 404

Diagram for how to brand dropins

PageSpeed 404 error

If This

You view lots of❗️red exclamation points and a status code of 404 for your preview (.page) or production (.live) storefront URLs.

Check This

Red dots indicate that the page has not been published or previewed since last edited. The 404 error only happens if you’ve never published or previewed the page you enter into the PageSpeed Insights text field (which includes your index page when you only enter your site’s URL). So because you never published the page (using Sidekick), Edge Delivery has not yet added the page to the preview or production CDNs, where PageSpeed Insights (and everyone else on the internet) looks for it. The result is a 404 error.

Do This

  1. Publish or Preview the page using the Sidekick buttons.
  2. Clear your browser cache.
  3. Wait a minute or two for the page to be added to the preview CDN (Preview button) or production CDN (Publish button).
\ No newline at end of file