feat: docs for extending drop-ins with Commerce APIs

astro.config.mjs

@@ -31,9 +31,6 @@ export default defineConfig({
   trailingSlash: 'ignore',
   outDir: './dist',
 
-
-
-
   redirects: {
     '/customize/design-tokens': '/developer/commerce/storefront/dropins/all/branding',
     '/customize/enrich': '/developer/commerce/storefront/dropins/all/enriching',
@@ -184,6 +181,10 @@ export default defineConfig({
             label: 'Styling',
             link: '/dropins/all/styling/'
           },
+          {
+            label: 'Slots',
+            link: '/dropins/all/slots/'
+          },
           {
             label: 'Layouts',
             link: '/dropins/all/layouts/'

src/content/docs/dropins/all/enriching.mdx

@@ -60,7 +60,7 @@ Content positioning is the placement of content and enrichment blocks on a webpa
 
 ### Slot API functions
 
-The slots API provides several functions to add content within a drop-in component by specifying a slot name and a position. The slot API provides functions to add content to specific positions above and below the slot, such as prepend and append. See the full list of slot API functions here: [Extending drop-in components](/dropins/all/extending#big-picture)
+The slots API provides several functions to add content within a drop-in component by specifying a slot name and a position. The slot API provides functions to add content to specific positions above and below the slot, such as prepend and append. See the full list of slot API functions here: [Understanding slots](/dropins/all/slots#big-picture)
 
 </Vocabulary>
 

src/content/docs/dropins/all/extending.mdx

@@ -1,6 +1,6 @@
 ---
 title: Extending dropin-in components
-description: Learn about slots and how to use them to customize dropin-in components.
+description: Learn about different methods to extend dropin-in components.
 ---
 
 import { Tabs, TabItem } from '@astrojs/starlight/components';
@@ -12,42 +12,7 @@ import { Steps } from '@astrojs/starlight/components';
 import Tasks from '@components/Tasks.astro';
 import Task from '@components/Task.astro';
 
-Using slots provides the deepest level of customization. Slots are built-in extension points in the drop-in. A slot provides a place in the drop-in component 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
-
-<Diagram caption="What is a slot?">![What is a slot?](@images/slots/what-is-a-slot.svg)</Diagram>
-
-<Callouts>
-
-1. `prependSibling`: A function to prepend a new HTML element before the slot's content.
-1. `prependChild`: A function to prepend a new HTML element to the slot's content.
-1. `replaceWith`: A function to replace the slot's content with a new HTML element.
-1. `appendChild`: A function to append a new HTML element to the slot's content.
-1. `appendSibling`: A function to append a new HTML element after the slot's content.
-1. `getSlotElement`: A function to get a slot element.
-1. `onChange`: A function to listen to changes in the slot's context.
-1. `dictionary`: JSON Object for the current locale. If the locale changes, the `dictionary` values change to reflect the values for the selected language.
-
-</Callouts>
-
-## Vocabulary
-
-<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 drop-in component'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 **drop-in component** can contain multiple **container components** that can contain multiple **slot components** that can contain multiple **UI components**.
-
-</Vocabulary>
+Drop-in components are designed to be flexible and extensible. This guide provides an overview of how to extend drop-in components to add new features, integrate with third-party services, and customize the user experience.
 
 ## Extend drop-ins with Commerce APIs
 

src/content/docs/dropins/all/slots.mdx

@@ -0,0 +1,50 @@
+---
+title: Understanding slots
+description: Learn about slots and how to use them to customize dropin-in components.
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import Diagram from '@components/Diagram.astro';
+import Vocabulary from '@components/Vocabulary.astro';
+import Aside from '@components/Aside.astro';
+import Callouts from '@components/Callouts.astro';
+import { Steps } from '@astrojs/starlight/components';
+import Tasks from '@components/Tasks.astro';
+import Task from '@components/Task.astro';
+
+Using slots provides the deepest level of customization. Slots are built-in extension points in the drop-in. A slot provides a place in the drop-in component 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
+
+<Diagram caption="What is a slot?">![What is a slot?](@images/slots/what-is-a-slot.svg)</Diagram>
+
+<Callouts>
+
+1. `prependSibling`: A function to prepend a new HTML element before the slot's content.
+1. `prependChild`: A function to prepend a new HTML element to the slot's content.
+1. `replaceWith`: A function to replace the slot's content with a new HTML element.
+1. `appendChild`: A function to append a new HTML element to the slot's content.
+1. `appendSibling`: A function to append a new HTML element after the slot's content.
+1. `getSlotElement`: A function to get a slot element.
+1. `onChange`: A function to listen to changes in the slot's context.
+1. `dictionary`: JSON Object for the current locale. If the locale changes, the `dictionary` values change to reflect the values for the selected language.
+
+</Callouts>
+
+## Vocabulary
+
+<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 drop-in component'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 **drop-in component** can contain multiple **container components** that can contain multiple **slot components** that can contain multiple **UI components**.
+
+</Vocabulary>