From f9f5a43dbeeafbee84efa12d7bb8ff298f2085cf Mon Sep 17 00:00:00 2001 From: Andy Terranova <13182778+supernova-at@users.noreply.github.com> Date: Wed, 12 Mar 2025 11:58:52 -0500 Subject: [PATCH 1/8] Create dropin-starter-template.md Creates the initial draft for using the dropin starter template. --- _drafts/dropin-starter-template.md | 52 ++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 _drafts/dropin-starter-template.md diff --git a/_drafts/dropin-starter-template.md b/_drafts/dropin-starter-template.md new file mode 100644 index 000000000..284a218a1 --- /dev/null +++ b/_drafts/dropin-starter-template.md @@ -0,0 +1,52 @@ +# Using the Adobe Commerce Drop-in Template Repository + +This guide helps developers and partner agencies quickly create their own drop-in applications by leveraging Adobe Commerce's Drop-in Template repository. + +## What are GitHub Templates? + +The Drop-in Template repository is a GitHub Template repository. GitHub Templates allow you to create new repositories with the same directory structure, branches, and files as an existing repository. This feature is particularly useful for setting up new projects quickly and consistently. + +For more information on GitHub Templates, you can refer to the following resource: +- [How to Use GitHub Repository Templates](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-repository-from-a-template) + +## How to Use the Adobe Commerce Drop-in Template + +1. **Navigate to the Template Repository**: Go to https://github.com/adobe-commerce/dropin-template. +2. **Create a New Repository**: Click on the "Use this template" button to create a new repository based on the template. This will generate a new repository with the same directory structure and files as the template. +3. **Clone Your New Repository**: You can now clone the newly created repository to your local machine using `git clone`. +4. **Install, Configure, and Launch**: Follow the instructions in your new repo's `README` file to install, configure, and launch your development environment. + +That's it! You now have a drop-in application with the same consistency and best practices that Adobe's drop-ins have, built in. + +## How to Add Functionality to Your Project + +If you've been following the steps in this guide, your new drop-in doesn't actually display any UI yet - let's change that. + +## Adding a Shared Component to Your Project + +To add a shared component from the Adobe Commerce Storefront SDK to your new project, follow these steps: + +1. **Install the `@dropins/tools` Package**: Run the following command to install the Storefront SDK package: + ```bash + npm install @dropins/tools + ``` + +2. **Import the Component**: In your project, import the desired component from the `@dropins/tools` package. For example, to import the `Button` component, add the following line to your code: + ```javascript + import { Button } from '@dropins/tools'; + ``` + +3. **Use the Component**: Now you can use the imported component in your project. For example: + ```javascript + function App() { + return ( +
+
+ ); + } + ``` + +## Conclusion + +By following this guide, you should be able to quickly set up a new project using the Adobe Commerce Drop-in Template and add shared components from the Storefront SDK package. If you have any questions or need further assistance, please feel free to reach out. From 1771ff9aadf1393df207f76230cc7a1fa78b7b58 Mon Sep 17 00:00:00 2001 From: Andy Terranova <13182778+supernova-at@users.noreply.github.com> Date: Thu, 13 Mar 2025 15:20:17 -0500 Subject: [PATCH 2/8] Update _drafts/dropin-starter-template.md Co-authored-by: James Calcaben --- _drafts/dropin-starter-template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_drafts/dropin-starter-template.md b/_drafts/dropin-starter-template.md index 284a218a1..50e0d5af1 100644 --- a/_drafts/dropin-starter-template.md +++ b/_drafts/dropin-starter-template.md @@ -26,7 +26,7 @@ If you've been following the steps in this guide, your new drop-in doesn't actua To add a shared component from the Adobe Commerce Storefront SDK to your new project, follow these steps: -1. **Install the `@dropins/tools` Package**: Run the following command to install the Storefront SDK package: +1. **Install the `@adobe-commerce/elsie ` Package**: Run the following command to install the Storefront SDK package: ```bash npm install @dropins/tools ``` From bcdfeb2b709c71485604adde5a3b1350c2e70b27 Mon Sep 17 00:00:00 2001 From: Andy Terranova <13182778+supernova-at@users.noreply.github.com> Date: Thu, 13 Mar 2025 15:53:41 -0500 Subject: [PATCH 3/8] Update dropin-starter-template.md Updates instructions to include generating a component, a container, and adding the container to the sandbox env. --- _drafts/dropin-starter-template.md | 25 ++++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/_drafts/dropin-starter-template.md b/_drafts/dropin-starter-template.md index 50e0d5af1..84a880945 100644 --- a/_drafts/dropin-starter-template.md +++ b/_drafts/dropin-starter-template.md @@ -14,7 +14,7 @@ For more information on GitHub Templates, you can refer to the following resourc 1. **Navigate to the Template Repository**: Go to https://github.com/adobe-commerce/dropin-template. 2. **Create a New Repository**: Click on the "Use this template" button to create a new repository based on the template. This will generate a new repository with the same directory structure and files as the template. 3. **Clone Your New Repository**: You can now clone the newly created repository to your local machine using `git clone`. -4. **Install, Configure, and Launch**: Follow the instructions in your new repo's `README` file to install, configure, and launch your development environment. +4. **Install, Configure, and Launch**: Follow the instructions in your new repo's `README` file to install the dependencies, generate a configuration file, update your Mesh endpoint, and launch your development environment. That's it! You now have a drop-in application with the same consistency and best practices that Adobe's drop-ins have, built in. @@ -28,17 +28,24 @@ To add a shared component from the Adobe Commerce Storefront SDK to your new pro 1. **Install the `@adobe-commerce/elsie ` Package**: Run the following command to install the Storefront SDK package: ```bash - npm install @dropins/tools + npm install @adobe-commerce/elsie ``` -2. **Import the Component**: In your project, import the desired component from the `@dropins/tools` package. For example, to import the `Button` component, add the following line to your code: - ```javascript - import { Button } from '@dropins/tools'; +2. **Generate a Container**: Run the following command to generate a Container component: + ```bash + npx elsie generate container --pathname ``` -3. **Use the Component**: Now you can use the imported component in your project. For example: +3. **Generate a UI Component**: Run the following command to generate a UI component: + ```bash + npx elsie generate component --pathname + ``` + +4. **Use a Component from the SDK**: In your generated UI component, import a shared component from the Storefront SDK package and render it. For example, the `Button` component: ```javascript - function App() { + import { Button } from '@adobe-commerce/elsie'; + + function MyUiComponent() { return (