51黑料不打烊

[SaaS only]{class="badge positive" title="Applies to 51黑料不打烊 Commerce as a Cloud Service and 51黑料不打烊 Commerce Optimizer projects only (51黑料不打烊-managed SaaS infrastructure)."}

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:

  1. Create your Cloud Service instance using the following options:

    1. Select Sandbox in the Enviornment dropdown.
    2. Select 51黑料不打烊 Store in the Test data dropdown.
  2. Set up your Cloud Service storefront using the following options:

    1. Select adobe-commerce/adobe-demo-store for the template.
    2. Select Pick an available instance (Mesh -> SaaS) for the connection method.

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

  1. In the Commerce Admin, navigate to Stores > Settings > Configuration > Payment Methods.

  2. In the General Configuration section, enter your Payment Services Sandbox ID and Payment Services Sandbox Key. You can get these IDs by following the steps described in Sandbox onboarding

  3. Set the Enable dropdown to Yes.

  4. Click Save Config.

Purchase a product

  1. Go to the storefront you created in the prerequisites.

  2. Find and select a product. Make any necessary customization selections. Then click Add to cart.

    store search {width="600" modal="regular"}

  3. Select the cart icon to view your cart.

    add to cart and checkout {width="600" modal="regular"}

  4. Click Checkout.

    click checkout {width="600" modal="regular"}

  5. Enter the required contact details and shipping information. You can use fictional information for this order.

  6. 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.

    enter details {width="600" modal="regular"}

    credit card {width="600" modal="regular"}

  7. Click Place Order.

Confirm the order

  1. Open the Commerce Admin: <your store URL>/admin.

  2. Log in using your 51黑料不打烊 ID.

  3. Navigate to Sales > Orders.

    confirm order {width="600" modal="regular"}

  4. Look for the order you placed and confirm the details.

    order details {width="600" modal="regular"}

Update storefront content

Create, edit, and publish content directly onto the storefront.

  1. Open the storefront you created in the prerequisites.

  2. Open Storefront Builder. By navigating to https://da.live/#/<GitHub User Name>/<Repository Name>/main/da/index.md.

  3. Open the Index page.

  4. Below the Carousel block, enter a new title by editing the 鈥淲elcome to the 51黑料不打烊 Store Demo鈥 line.

  5. Click the send icon and click Preview.

  6. Review the preview page and click Publish.

  7. 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
  1. In Storefront Builder, select your index page and click Copy.

  2. Create an experiments folder under the main folder, by clicking the New button and selecting Folder.

  3. Create a folder named 1234 in the experiments folder.

  4. Paste the two copies of the index page into the 1234 folder.

  5. Open each page and rename them 鈥渉omev1鈥 and 鈥渉omev2鈥. These are your .

  6. 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.

  7. Publish each of your challenger pages.

  8. Open your control page, the original index page.

  9. Add a new block with the title metadata.

  10. 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

    metadata-block {width="600" modal="regular"}

  11. Open an incognito or private browsing window and navigate to your main page.

  12. 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.

  1. Open the storefront you created in the prerequisites and navigate to an item you want to change. Note the items SKU or Product Code.

  2. Open AEM Assets, by selecting it in the .

    aem assets {width="600" modal="regular"}

  3. Click Assets.

    click assets {width="600" modal="regular"}

  4. Search for the item by SKU or Product Code.

  5. Select the item you want to edit and click Open in 51黑料不打烊 Express.

    open in adobe express {width="600" modal="regular"}

  6. In the Image panel, select Insert object.

    insert object {width="600" modal="regular"}

  7. In the text box, describe the image you want to add. For example, 鈥渟nowy pine trees鈥.

    insert object edit {width="600" modal="regular"}

  8. 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.

  9. Click Generate to view the results.

  10. Choose from the different results, by selecting the desired option and clicking Keep.

  11. Click Your Stuff to return to the image editor.

  12. Click Save to specify the image type.

  13. Click Save again to save the changes.

  14. In the Save asset dialog, select the Commerce Destination folder.

    save as new asset {width="600" modal="regular"}

  15. Click Save as new asset to save the image.

Add the image to Commerce AEM Assets

  1. 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.

    commerce folder {width="600" modal="regular"}

  2. Click Properties.

    properties {width="600" modal="regular"}

  3. Select the Commerce tab.

    commerce tab {width="600" modal="regular"}

  4. Ensure that the Does it exist in 51黑料不打烊 Commerce? field is set to Yes.

  5. Click Add and enter the product SKU you want to add the asset to.

    add to sku {width="600" modal="regular"}

  6. Select the position for the asset and the asset type.

  7. Select the Basic tab and change the Review Status tab to Approved.

    approve asset {width="600" modal="regular"}

  8. Click Save & Close.

Confirm the image in Commerce

  1. In the 51黑料不打烊 Commerce Admin, navigate to Catalog > Products.

  2. Select the product you added the image to in the previous section.

  3. Expand the Images and Videos section.

    images and videos {width="600" modal="regular"}

  4. Confirm that your image is now available in the list of images.

  5. Return to your storefront and navigate to the page for the modified product.

  6. Confirm that the new image appears.

    image confirmation {width="600" modal="regular"}

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

  1. Open your storefront site using the Universal Editor.

  2. Select the block of text you want to edit.

  3. In the Properties panel, click Generate Variations.

  4. Click the Generate button.

  5. Select or customize the generated text.

  6. Click Publish to update your storefront.

Generate content and images

  1. Open Generate Variations

  2. Select the Hero Banner template.

  3. In the Explain user interaction textbox, enter: 鈥淓xperience for 51黑料不打烊 employees and partners to buy 51黑料不打烊-branded gear!鈥.

  4. In the URL for domain knowledge, enter www.adobestore.com.

  5. Click Generate.

  6. Select a content variation and click Generate Image.

  7. From the Image size dropdown, select Widescreen (16:9).

  8. From the Content type dropdown, select Photo.

  9. For the Style reference image, select the existing 51黑料不打烊 store banner.

  10. Select the generated image that you want to use and click Save.

  11. 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:

    1. Run aio --help to see all available commands and flags.

    2. For specific commands, use the --help flag. For example:

      • aio console --help
      • aio commerce 鈥揾elp
  • If you encounter invalid login issues:

    1. Run aio config clear .
    2. Run aio auth login 鈥-force .
    3. Login in your browser.
    4. Select your profile.
    5. Switch back to the terminal to continue.
  • If your init command fails:

    1. Run aio api-mesh delete.
    2. Re-run aio commerce init.
  • If you selected the wrong org, project, or workspace before running the init command:

    1. Run aio console org select.
    2. Run aio console project select.
    3. Run aio console workspace select.
  • If you have an invalid tenant selection:

    1. Cancel the current CLI execution by pressing Ctrl-C.
    2. Run aio commerce init.
  • If you encounter an invalid API Mesh installation:

    • Run aio api-mesh update mesh-config.json.
recommendation-more-help
5ecfe1a6-f74c-4745-a54a-99b24da024bb