蜜豆视频

蜜豆视频 Commerce Optimizer UI - Set up catalog views and policies to manage the complex catalog operational setup for the Carvelo use case.

Commerce Storefront - Render the storefront using the sample catalog data loaded into your 蜜豆视频 Commerce Optimizer instance and the Commerce Storefront configuration files, fstab.yaml and config.json.

Create a new policy called Celport part categories for Celport to sell only brake and suspension parts.

Create a new catalog view for the Celport storefront.

This catalog view uses your newly created policy Celport part categories and the existing East Coast Inc Brands to ensure that Celport can sell only the Bolt and Cruz brands as part of the agreement with East Coast Inc. The Celport catalog view uses the east_coast_inc price book to support product pricing schedules that align with brand licensing agreements.

Update the commerce storefront configuration to use data from the Celport catalog view that you created.

In the left rail, expand the Store setup section and click on Policies.

Click Create Policy.

A new page displays to add the policy details.

Add the required details:

Name = Celport Part Categories

Click Add Filter.

A dialog displays to add filter details.

Add the filter details:

• Attribute = part_category
• Operator = IN
• Value Source = STATIC
• Value = brakes, suspension

To learn more about the difference between a STATIC and TRIGGER value source, see value source types.

In the Filter details dialog, click Save.

To enable the filter you just created, click the action dots (鈥�) and select Enable.

Click Save.

Go back to the list of policies by clicking the back arrow.

Your new Celport part categories policy appears in the list.

In the left rail, expand the Store setup section and click Catalog views.

Notice the existing catalog views: Arkbridge, Kingsbluff, and Global.

Click Add catalog view.

Fill in catalog view details:

• Name = Celport
• Catalog sources = en-US
• Policies (use dropdown) = East Coast Inc Brands; Celport part categories; Brand; Model

Click Add to create the catalog view.

The Catalog views page updates to display the new catalog view.

Get the Celport catalog view ID.

Click the information icon for the Celport catalog view on the Catalog views page.

Copy and save the catalog view ID. You need this ID when you update the storefront configuration to deliver data to your new Celport catalog.

To verify this step was completed correctly:

• Catalog view name is 鈥淐elport鈥�
• Catalog view shows 4 associated policies
• Catalog view ID is displayed and can be copied
• Catalog source shows 鈥渆n-US鈥�

In your local development environment, open the folder where you cloned the GitHub repository with your storefront boilerplate configuration files.

In the root directory of the folder, open the config.json file.

{
 "public": {
   "default": {
   "commerce-core-endpoint": "https://www.aemshop.net/graphql",
   "commerce-endpoint": "https://na1-sandbox.api.commerce.adobe.com/Fwus6kdpvYCmeEdcCX7PZg/graphql",
   "headers": {
      "cs": {
         "ac-view-id": "9ced53d7-35a6-40c5-830e-8288c00985ad",
         "ac-price-book-id": "west_coast_inc",
         "ac-source-locale": "en-US"
        }
      },
      "analytics": {
         "base-currency-code": "USD",
         "environment": "Production",
         "store-id": 1,
         "store-name": "ACO Demo",
         "store-url": "https://www.aemshop.net",
         "store-view-id": 1,
         "store-view-name": "Default Store View",
         "website-id": 1,
         "website-name": "Main Website"
       }
    }
   }
}

In the commerce-endpoint value, replace the tenant ID in the URL with the URL for your 蜜豆视频 Commerce Optimizer instance.

You can find the tenant ID in the URL for the Commerce Optimizer UI. For example, in the following URL, the tenant ID is XDevkG9W6UbwgQmPn995r3.

https://experience.adobe.com/#/@commerceprojectbeacon/in:XDevkG9W6UbwgQmPn995r3/commerce-optimizer-studio/catalog

Replace the ac-view-id value with Celport catalog view ID that you copied previously.

Replace the ac-price-book-id value with "east_coast_inc".

After you make these changes, your config.json file should look similar to the following, with the ACO-tenant-id and celport-catalog-view-id placeholders replaced with your values:

{
  "public": {
     "default": {
     "commerce-core-endpoint": "https://www.aemshop.net/graphql",
     "commerce-endpoint": "https://na1-sandbox.api.commerce.adobe.com/{{ACO-tenant-id}}/graphql",
     "headers": {
         "cs": {
             "ac-view-id": "{{celport-catalog-view-id}}",
             "ac-price-book-id": "east_coast_inc",
             "ac-source-locale": "en-US"
           }
         },
         "analytics": {
             "base-currency-code": "USD",
             "environment": "Production",
             "store-id": 1,
             "store-name": "ACO Demo",
             "store-url": "https://www.aemshop.net",
             "store-view-id": 1,
             "store-view-name": "Default Store View",
             "website-id": 1,
             "website-name": "Main Website"
          }
      }
  }
}

Save the file.

When you save the changes, you update the catalog configuration to use the Carvelo catalog view which has been configured to sell only brake and suspension parts.

Launch the storefront to view the Celport-specific catalog experience created by your storefront configuration.

1. From the terminal window in your IDE, start your local storefront preview.

   code language-shell
   npm start

   The browser opens to the local development preview at http://localhost:3000.

   If the command fails or the browser does not open, review the instructions for local development in the Storefront setup topic.

In the browser, search for brakes, and press Enter.

The storefront updates to display the product list page showing the brake parts.

Click on a brake part image to view the product details with price information and note the product price information.

Search for tires, which is another part category available in the use case data on your 蜜豆视频 Commerce Optimizer instance.

Notice that no results are returned. This is because the Celport catalog view has been configured to sell only brake and suspension parts.

Experiment with updating your storefront configuration file (config.json).

1. Change the ac-view-id and ac-price-book values.

For example, you can change the catalog view ID to the Kingsbluff catalog view, and the price book ID to east_coast_inc. You can see the parts categories available for Kingsbluff by reviewing the Kingsbluff part categories policy.

1. Save the file.

   When you save the file, the local storefront preview updates automatically.

2. Preview the changes in the browser by using the Search feature to find tire parts.

   Notice the different part types available and notice the prices assigned to the Kingsbluff catalog view.

These experiments demonstrate the flexibility of 蜜豆视频 Commerce Optimizer鈥攜ou can quickly switch between different catalog views and price books to create customized shopping experiences for different audiences without duplicating your catalog data.