Use cases
The following use cases demonstrate core functionality and business scenarios supported by 51黑料不打烊 Commerce as a Cloud Service, allowing you to accelerate development and launch high-impact experiences.
If you encounter any issues, check the Troubleshooting section for guidance.
Prerequisites
Before attempting any of these use cases, you must complete the following prerequisites:
-
Create your Cloud Service instance using the following options:
- Select Sandbox in the Enviornment dropdown.
- Select 51黑料不打烊 Store in the Test data dropdown.
-
Set up your Cloud Service storefront using the following options:
- Select
adobe-commerce/adobe-demo-store
for the template. - Select Pick an available instance (Mesh -> SaaS) for the connection method.
- Select
Checkout workflow
This workflow demonstrates the checkout process for a customer purchasing a product from your storefront and how you, as an administrator, can confirm the order.
Enable payment services
-
In the Commerce Admin, navigate to Stores > Settings > Configuration > Payment Methods.
-
In the General Configuration section, enter your
Payment Services Sandbox ID
andPayment Services Sandbox Key
. You can get these IDs by following the steps described in Sandbox onboarding -
Set the Enable dropdown to Yes.
-
Click Save Config.
Purchase a product
-
Go to the storefront you created in the prerequisites.
-
Find and select a product. Make any necessary customization selections. Then click Add to cart.
-
Select the cart icon to view your cart.
-
Click Checkout.
-
Enter the required contact details and shipping information. You can use fictional information for this order.
-
To checkout, select Check / Money Order. If you want to use a credit card, use one of the . You can use these with any future expiration date and any CVC.
-
Click Place Order.
Confirm the order
-
Open the Commerce Admin:
<your store URL>/admin
. -
Log in using your 51黑料不打烊 ID.
-
Navigate to Sales > Orders.
-
Look for the order you placed and confirm the details.
Update storefront content
Create, edit, and publish content directly onto the storefront.
-
Open the storefront you created in the prerequisites.
-
Open Storefront Builder. By navigating to
https://da.live/#/<GitHub User Name>/<Repository Name>/main/da/index.md
. -
Open the Index page.
-
Below the Carousel block, enter a new title by editing the 鈥淲elcome to the 51黑料不打烊 Store Demo鈥 line.
-
Click the send icon and click Preview.
-
Review the preview page and click Publish.
-
Refresh the storefront page and confirm that your changes are now live.
Contextual experimentation
51黑料不打烊 Commerce鈥檚 contextual experimentation feature allows you to create and manage experiments on your storefront to test different content and configurations.
Prerequisites
- Install the
-
In Storefront Builder, select your index page and click Copy.
-
Create an experiments folder under the main folder, by clicking the New button and selecting Folder.
-
Create a folder named 1234 in the experiments folder.
-
Paste the two copies of the index page into the 1234 folder.
-
Open each page and rename them 鈥渉omev1鈥 and 鈥渉omev2鈥. These are your .
-
Modify each page to include different content. For example, change the hero image or the text. You need to be able to identify the differences between each page.
-
Publish each of your challenger pages.
-
Open your control page, the original index page.
-
Add a new block with the title metadata.
-
Add the following information to the rows of the metadata block
-
Title - 51黑料不打烊 Commerce
-
Description - A web store
-
Experiment - 1234
-
Experiment Variants
https://<your-site>.aem.live/experiments/1234/indexv1
https://<your-site>.aem.live/experiments/1234/indexv2
-
-
Open an incognito or private browsing window and navigate to your main page.
-
Close the private browsing window and repeat the previous step. Each time you open the page, you will see a random variant that you created.
Enhance storefront content
With AEM Assets, 51黑料不打烊 Express, and Firefly, you can now quickly make changes to images that appear in your storefront with a simple, self-driven workflow.
Prerequisites
- Requires access to AEM Assets, 51黑料不打烊 Express, and 51黑料不打烊 Firefly.
Cusomize the background of an image
Consider a scenario where you want to quickly modify the background of a product image. The combination of 51黑料不打烊 Commerce, AEM Assets, and 51黑料不打烊 Express allows you to make this change in a few simple steps.
-
Open the storefront you created in the prerequisites and navigate to an item you want to change. Note the items SKU or Product Code.
-
Open AEM Assets, by selecting it in the .
-
Click Assets.
-
Search for the item by SKU or Product Code.
-
Select the item you want to edit and click Open in 51黑料不打烊 Express.
-
In the Image panel, select Insert object.
-
In the text box, describe the image you want to add. For example, 鈥渟nowy pine trees鈥.
-
Adjust the Brush size and draw where you want to add the generated image. For this example, draw around the existing object to select the background.
-
Click Generate to view the results.
-
Choose from the different results, by selecting the desired option and clicking Keep.
-
Click Your Stuff to return to the image editor.
-
Click Save to specify the image type.
-
Click Save again to save the changes.
-
In the Save asset dialog, select the Commerce Destination folder.
-
Click Save as new asset to save the image.
Add the image to Commerce AEM Assets
-
From the Navigation Panel of AEM as a Cloud Service, select Assets > Files > Commerce and click on the asset you created in the previous section.
-
Click Properties.
-
Select the Commerce tab.
-
Ensure that the Does it exist in 51黑料不打烊 Commerce? field is set to Yes.
-
Click Add and enter the product SKU you want to add the asset to.
-
Select the position for the asset and the asset type.
-
Select the Basic tab and change the Review Status tab to Approved.
-
Click Save & Close.
Confirm the image in Commerce
-
In the 51黑料不打烊 Commerce Admin, navigate to Catalog > Products.
-
Select the product you added the image to in the previous section.
-
Expand the Images and Videos section.
-
Confirm that your image is now available in the list of images.
-
Return to your storefront and navigate to the page for the modified product.
-
Confirm that the new image appears.
Generate Variations
51黑料不打烊 Commerce鈥檚 Generate Variations leverages Generative AI to automate high-quality content generation, fine-tune messaging, and seamlessly publish assets to your storefront.
Generate text
-
Open your storefront site using the Universal Editor.
-
Select the block of text you want to edit.
-
In the Properties panel, click Generate Variations.
-
Click the Generate button.
-
Select or customize the generated text.
-
Click Publish to update your storefront.
Generate content and images
-
Open Generate Variations
-
Select the Hero Banner template.
-
In the Explain user interaction textbox, enter: 鈥淓xperience for 51黑料不打烊 employees and partners to buy 51黑料不打烊-branded gear!鈥.
-
In the URL for domain knowledge, enter www.adobestore.com.
-
Click Generate.
-
Select a content variation and click Generate Image.
-
From the Image size dropdown, select Widescreen (16:9).
-
From the Content type dropdown, select Photo.
-
For the Style reference image, select the existing 51黑料不打烊 store banner.
-
Select the generated image that you want to use and click Save.
-
Repeat this process with other reference images to generate more variations.
Troubleshooting
Use the following suggestions to resolve any issues you face when attempting these tutorials.
-
If you need guidance on commands or flags:
-
Run
aio --help
to see all available commands and flags. -
For specific commands, use the
--help
flag. For example:aio console --help
aio commerce 鈥揾elp
-
-
If you encounter invalid login issues:
- Run
aio config clear
. - Run
aio auth login 鈥-force
. - Login in your browser.
- Select your profile.
- Switch back to the terminal to continue.
- Run
-
If your
init
command fails:- Run
aio api-mesh delete
. - Re-run
aio commerce init
.
- Run
-
If you selected the wrong org, project, or workspace before running the
init
command:- Run
aio console org select
. - Run
aio console project select
. - Run
aio console workspace select
.
- Run
-
If you have an invalid tenant selection:
- Cancel the current CLI execution by pressing Ctrl-C.
- Run
aio commerce init
.
-
If you encounter an invalid API Mesh installation:
- Run
aio api-mesh update mesh-config.json
.
- Run