Caso de uso completo del administrador de catálogos y tiendas

IU Adobe Commerce Optimizer: configure las vistas del catálogo y las directivas para administrar la compleja configuración operativa del catálogo para el caso de uso de Carvelo.

Commerce Storefront: procese la tienda usando los datos de catálogo de muestra cargados en su instancia de Adobe Commerce Optimizer y los archivos de configuración de Commerce Storefront, fstab.yaml y config.json.

Cree una nueva póliza llamada Celport part categories para que Celport venda solamente piezas de frenos y suspensión.

Cree una nueva vista de catálogo para la tienda de Celport.

Esta vista del catálogo usa las categorías de piezas de Celport de la directiva recién creada y las marcas East Coast Inc para garantizar que Celport pueda vender solamente las marcas Bolt y Cruz como parte del acuerdo con East Coast Inc. La vista del catálogo de Celport usa el libro de precios east_coast_inc para admitir las programaciones de precios de productos que se alinean con los acuerdos de licencia de marca.

Actualice la configuración de la tienda de comercio para utilizar los datos de la vista de catálogo de Celport que ha creado.

En el carril izquierdo, expanda la sección Configuración de tienda y haga clic en Policies.

Haga clic en Create Policy.

Aparece una nueva página para agregar los detalles de la directiva.

Añada los detalles necesarios:

Nombre = Categorías de piezas de Celport

Haga clic en Add Filter.

Se muestra un cuadro de diálogo para añadir detalles del filtro.

Añada los detalles del filtro:

• Atributo = part_category
• Operador = IN
• Valor Source = ESTÁTICO
• Valor = frenos
• Valor = suspensión

Para obtener más información acerca de la diferencia entre un origen de valor ESTÁTICO y de DÉCLENCHEUR, vea tipos de origen de valor.

En el diálogo Filter details, haga clic en Save.

Para habilitar el filtro que acaba de crear, haga clic en los puntos de acción (…) y seleccione Habilitar.

Haga clic en Save.

Vuelva a la lista de directivas haciendo clic en la flecha hacia atrás.

Su nueva directiva Celport categorías de partes aparece en la lista.

En el carril izquierdo, expanda la sección Configuración de tienda y haga clic en Catalog views.

Observe las vistas de catálogo existentes: Arkbridge, Kingsbluff y Global.

Haga clic en Add catalog view.

Rellene los detalles de la vista de catálogo:

• Nombre = Celport
• Orígenes de catálogo = en-US
• Políticas (usar lista desplegable) = Marcas de East Coast Inc; Categorías de partes de Celport; Marca; Modelo

Haga clic en Add para crear la vista de catálogo.

La página Vistas de catálogo se actualiza para mostrar la nueva vista de catálogo.

Obtenga el ID de vista de catálogo de Celport.

Haga clic en el icono de información para la vista de catálogo Celport en la página Vistas de catálogo.

Copie y guarde el ID de vista de catálogo. Necesita este ID cuando actualice la configuración de la tienda para enviar datos al nuevo catálogo de Celport.

Para comprobar que este paso se completó correctamente:

• El nombre de la vista de catálogo es "Celport"
• La vista de catálogo muestra 4 directivas asociadas
• El ID de vista de catálogo se muestra y se puede copiar
• La fuente del catálogo muestra "en-US"

En su entorno de desarrollo local, abra la carpeta donde clonó el repositorio de GitHub con los archivos de configuración de las plantillas de tienda.

En el directorio raíz de la carpeta, abra el archivo config.json.

{
 "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"
       }
    }
   }
}

En el valor commerce-endpoint, reemplace el ID de inquilino en la URL por la URL de su instancia Adobe Commerce Optimizer.

Puede encontrar el ID de inquilino en la URL de la interfaz de usuario de Commerce Optimizer. Por ejemplo, en la siguiente URL, el ID de inquilino es XDevkG9W6UbwgQmPn995r3.

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

Reemplace el valor ac-view-id por el ID de vista de catálogo de Celport que copió anteriormente.

Reemplazar el valor ac-price-book-id por "east_coast_inc".

Después de realizar estos cambios, el archivo config.json debería tener un aspecto similar al siguiente, con los marcadores de posición ACO-tenant-id y celport-catalog-view-id reemplazados por sus valores:

{
  "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"
          }
      }
  }
}

Guarde el archivo.

Cuando guarde los cambios, actualice la configuración del catálogo para utilizar la vista del catálogo Carvelo, que se ha configurado para vender solo piezas de freno y suspensión.

Inicia la tienda para ver la experiencia de catálogo específica de Celport creada por la configuración de tu tienda.

1. Desde la ventana de terminal del IDE, inicie la previsualización de la tienda local.

   code language-shell
   npm start

   El explorador se abre en la vista previa de desarrollo local en http://localhost:3000.

   Si el comando falla o el explorador no se abre, revise las instrucciones para el desarrollo local en el tema de configuración de Storefront.

En el explorador, busque brakes y presione Entrar.

La tienda se actualiza para mostrar la página de la lista de productos con las piezas de freno.

Haga clic en una imagen de la pieza de freno para ver los detalles del producto con información sobre el precio y anote la información sobre el precio del producto.

Busque tires, que es otra categoría de artículo disponible en los datos del caso de uso de la instancia Adobe Commerce Optimizer.

Observe que no se devuelve ningún resultado. Esto se debe a que la vista del catálogo de Celport se ha configurado para vender únicamente piezas de freno y suspensión.

Experimente con la actualización del archivo de configuración de la tienda (config.json).

1. Cambie los valores ac-view-id y ac-price-book.

Por ejemplo, puede cambiar el identificador de la vista de catálogo a la vista de catálogo de Kingsbluff y el identificador del libro de precios a east_coast_inc. Puedes ver las categorías de piezas disponibles para Kingsbluff revisando la política de categorías de piezas de Kingsbluff.

1. Guarde el archivo.

   Al guardar el archivo, la vista previa de la tienda local se actualiza automáticamente.

2. Vista previa de los cambios en el navegador mediante la función de búsqueda para encontrar las piezas de neumáticos.

   Observe los diferentes tipos de piezas disponibles y los precios asignados a la vista de catálogo de Kingsbluff.

Estos experimentos demuestran la flexibilidad de Adobe Commerce Optimizer: puede cambiar rápidamente entre diferentes vistas de catálogo y libros de precios para crear experiencias de compra personalizadas para diferentes audiencias sin duplicar los datos del catálogo.