DocumentaciónCommerceGuía de Adobe Commerce Optimizer

[Solo SaaS]{class="badge positive" title="Solo se aplica a Adobe Commerce as a Cloud Service y Adobe Commerce Optimizer proyectos (infraestructura SaaS administrada por Adobe)."}

Configurar tu tienda

Last update: Mon Oct 13 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Creado para:

  • Desarrollador

Esta guía le explica cómo configurar una tienda para la instancia de Adobe Commerce Optimizer mediante los servicios de entrega de Adobe Edge. Su tienda incluye código de plantillas, contenido de muestra y compatibilidad con páginas de detalles de productos y descubrimiento de productos (búsqueda y filtrado).

Tiempo estimado para finalizar: 30-45 minutos

Requisitos previos

  • Cuenta de GitHub que puede crear repositorios y está configurada para el desarrollo local (github.com)
  • Adobe Commerce Optimizerinstancia con datos de ejemplo y vistas de catálogo y directivas configuradas

Datos de instancia requeridos

Antes de empezar, recopile la siguiente información de su instancia de Adobe Commerce Optimizer:

NOTE
Los clientes de acceso de prueba pueden encontrar el punto final de GraphQL en el correo electrónico de bienvenida recibido cuando se creó la instancia. Las instancias de prueba vienen preconfiguradas con datos de muestra, vistas de catálogo y directivas.

Configuración de pasos

  1. Crea tu proyecto de tienda-Usa la herramienta de creador de sitios para crear un nuevo proyecto de tienda con código de plantillas, contenido de muestra y un archivo de configuración.

  2. Personalizar la configuración de la tienda: actualice el archivo config.json en su repositorio para conectarse a su instancia de Adobe Commerce Optimizer.

  3. Compruebe su configuración (10 minutos)

    • Previsualización del sitio de la tienda
    • Prueba de las páginas de detalles del producto y funcionalidad de búsqueda

Cree su proyecto de tienda

La herramienta Creador de sitios crea un proyecto de tienda completo con los siguientes componentes:

  • Sitio: página de aterrizaje de tienda con contenido de plantillas
  • Código: repositorio con archivos de origen de plantillas
  • Contenido: entorno de creación de documentos con archivos de contenido de sitio
  • Configuración de Commerce: config.json archivo para configuración específica de instancia

Paso 1: Generación del proyecto

  1. Abrir la herramienta Creador de sitios

    Site Creator tool {width="700" modal="regular"}

  2. Seleccione Crear nuevo sitio (código y contenido).

  3. Complete la configuración del sitio:

    • Nombre de organización/usuario de GitHub: escriba su nombre de usuario u organización de GitHub
    • Nombre del sitio: elige un nombre descriptivo para tu tienda
    • Punto final de Commerce GraphQL (opcional): escriba el punto final de GraphQL para su instancia de Adobe Commerce Optimizer

  4. Haga clic en Crear sitio para crear el repositorio de GitHub con el código de plantilla de tienda.

    Cuando se crea el repositorio, el creador del sitio actualiza y le solicita que instale la aplicación de sincronización de código.

Paso 2: Instalar la aplicación de sincronización de código

  1. Haga clic en Install AEM Code Sync App para abrir el programa de instalación de sincronización de código en una pestaña nueva.

  2. Configure la aplicación de sincronización de código:

    • Seleccione su organización de GitHub y haga clic en Configure.
    • En la interfaz de sincronización de código, haga clic en Only select repositories.
    • Haga clic en el menú Select repositories y, a continuación, seleccione el repositorio de código de tienda que ha creado.
    • Haga clic en Save para registrar su repositorio.

  3. Vuelva a la ventana del explorador donde está abierto el Creador del sitio y haga clic en Crear sitio.

    El creador del sitio copia el contenido de las plantillas de tienda en el entorno de creación de documentos. Este proceso tarda de 1 a 2 minutos.

Paso 3: guardar los vínculos del proyecto

  1. En la sección Detalles del sitio, revise los vínculos del proyecto de tienda:

    Storefront setup complete {width="700" modal="regular"}

    Use estos vínculos para administrar el código, el contenido y la configuración de la tienda.

  2. Copie y guarde estos vínculos para referencia futura: haga clic en **Copy.

Configurar tu tienda

Actualice la configuración de la tienda para conectarse a la instancia de Adobe Commerce Optimizer.

  1. Abra el administrador de configuración mediante el vínculo guardado anteriormente:

    https://da.live/sheet#/<username or org>/<repo name>/config.json

  2. Busque la sección cs (servicio de catálogo) en la configuración.

  3. Reemplace los valores de marcador de posición por los valores de la instancia. Consulte Requisitos previos.

    code language-json 
    "cs": {
   "AC-View-ID": "{catalogViewId}",
   "AC-Environment-ID": "{tenantId}",
   "AC-Source-Locale": "en_US"
}

  4. Guarde el archivo de configuración.

NOTE
Los cambios de configuración pueden tardar unos minutos en propagarse. Si no ve los datos inmediatamente, espere de 2 a 3 minutos antes de solucionar el problema.

Verifique su configuración

Pruebe la tienda para asegurarse de que está conectada correctamente a la instancia de Adobe Commerce Optimizer.

Paso 1: Ver la página principal de tu tienda

  1. Vaya a la URL de vista previa activa:

    https://main--{SITE}--{ORG}.aem.live

    Reemplace {ORG} y {SITE} por su organización de GitHub y el nombre del sitio.

  2. Criterios de éxito: debería ver la página principal de la tienda con contenido de plantillas.

    ACO storefront site with boilerplate {width="700" modal="regular"}

Paso 2: Probar las páginas de detalles del producto

Consulte la página de detalles predeterminada del producto para comprobar que los datos del producto se cargan correctamente.

  1. Vaya a una página de producto de ejemplo:
    https://main--{SITE}--{ORG}.aem.live/products/placeholder/{sku}

    Utilice cualquier SKU de los datos de ejemplo:
    https://main--{SITE}--{ORG}.aem.live/products/placeholder/aur-flu-tir-std-2017

    Para la tienda predeterminada, puede usar el valor placeholder en la ruta para ver el producto. Cuando empiece a personalizar la tienda, puede personalizar el código de la tienda para establecer la ruta a la página de detalles del producto en función de las rutas del producto definidas en el catálogo.

    note tip
    TIP
    Ver los SKU disponibles de la página Sincronización de datos en tu instancia de Adobe Commerce Optimizer.

  2. Criterios de éxito: La página debería mostrar:

    • Nombre, descripción y precios del producto
    • Imágenes de productos
    • Funcionalidad Añadir al carro
    • Datos recuperados de su instancia de Adobe Commerce Optimizer

    Default product detail page showing a product from the sample data {width="700" modal="regular"}

Paso 3: Probar la funcionalidad de búsqueda predeterminada

Pruebe las funciones de producto predeterminadas, incluidas la búsqueda y el filtrado.

  1. En la página de inicio de la tienda, haga clic en el icono de lupa del encabezado.

  2. Escriba la cadena de búsqueda tires y presione Intro.

  3. Criterios de éxito: debería ver:

    • Página de resultados de búsqueda con productos de neumáticos
    • Opciones de filtrado en la barra lateral
    • Listados de productos con imágenes y precios

    View search results page {width="675" modal="regular"}

  4. Haga clic en cualquier producto de neumático para ver su página de detalles.

    View product details page {width="675" modal="regular"}

Resolución de problemas

Si se producen problemas durante la configuración, utilice la consola del inspector de páginas web para comprobar si hay errores. Además, intente borrar la caché del explorador o utilice un explorador diferente.

Siga estas directrices para comprobar problemas comunes:

Problemas comunes

Problema
Síntomas
Solución
Error en la instalación de sincronización de código
No se puede completar la configuración de sincronización de código
  • Asegúrese de que tiene acceso de administrador a su organización de GitHub.
  • Intente utilizar un repositorio personal en lugar de una organización.
  • Compruebe los permisos de GitHub e inténtelo de nuevo.
El sitio no se carga
404 o errores de conexión
  • Compruebe el formato de la dirección URL del sitio: https://main--{SITE}--{ORG}.aem.live
  • Compruebe que la aplicación de sincronización de código esté correctamente instalada.
  • Asegúrese de que el repositorio sea público o esté configurado correctamente.
No se mostraron datos del producto
Las páginas de producto muestran marcadores de posición o errores
  • Compruebe sus valores de configuración en config.json
  • En la instancia Adobe Commerce Optimizer, compruebe la página Sincronización de datos para comprobar que se han cargado los productos de ejemplo. Si no hay productos disponibles, vuelva a cargar los datos de ejemplo o agregue un producto mediante la API de ingesta de datos. Espere unos minutos para que los cambios de configuración se propaguen.
  • Intente recuperar los detalles del producto mediante la consulta de productos del servicio de comercialización utilizando los mismos encabezados configurados en el archivo config.json. Si puede recuperar los datos, es probable que haya un problema con la configuración de la vista del catálogo o un error de índice.
La búsqueda no devuelve resultados
Página de resultados de búsqueda vacía
  • Compruebe que puede recuperar los resultados de la búsqueda de productos usando la consulta productSearch de los servicios de comercialización con los mismos encabezados configurados en el archivo config.json. Si puede recuperar los datos, es probable que haya un problema con la configuración de la vista del catálogo o un error de índice.
  • Confirme que el identificador de vista de catálogo del archivo config.json coincide con el identificador de vista de catálogo de Adobe Commerce Optimizer.
  • En Adobe Commerce Optimizer, compruebe la configuración de las directivas, la configuración regional y los libros de precios que utilizó en la configuración del encabezado de tienda.
  • Compruebe que la configuración de metadatos de atributo esté establecida correctamente para la búsqueda.

Lista de comprobación de validación

Antes de continuar con los siguientes pasos, verifica lo siguiente para asegurarte de que tu tienda funcione correctamente:

Lista de comprobación Los valores de configuración coinciden con la configuración de la instancia

Lista de comprobación La página principal de la tienda se carga sin errores

Lista de comprobación Al menos una página de detalles del producto muestra información completa

La funcionalidad de búsqueda Checklist devuelve resultados relevantes

Lista de comprobación Las imágenes del producto se están cargando correctamente

Lista de comprobación Los valores de configuración coinciden con la configuración de la instancia

Obtener ayuda

Si los problemas persisten:

Pasos siguientes

Después de configurar y comprobar la tienda, puedes:

  1. Instalar Sidekick: extensión de explorador para editar, previsualizar y publicar contenido directamente desde el sitio web

  2. Configurar un entorno de desarrollo local: crea un entorno local para personalizar el código y el contenido de tu tienda

Aprender y explorar

Related Articles
Consulte la documentación de Adobe Commerce Storefront para obtener más información sobre la actualización del contenido del sitio y la integración con los componentes de front-end y los datos del back-end de Commerce.
recommendation-more-help
37888386-4bfe-4484-be24-1acecb3b670d