Configurar tu tienda

Instale el administrador de versiones de nodos (NVM).

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

Instale Node.js y NPM. Para obtener más información, consulte Node.js.

nvm install 22

npm install -g npm

Compruebe la instalación.

npm -v

Inicie sesión en su cuenta de GitHub.

Vaya al repositorio de GitHub aem-boilerplate-commerce.

Seleccione Usar esta plantilla y, a continuación, seleccione Crear un nuevo repositorio en el menú desplegable.

{width="700" modal="regular"}

Se muestra la página de configuración del repositorio.

{width="700" modal="regular"}

Complete el formulario de configuración con los siguientes detalles:

• Plantilla de repositorio—hlxsites/aem-boilerplate-commerce (predeterminada).
• Propietario: su organización o cuenta (obligatorio).
• Nombre del repositorio: Un nombre único para su nuevo repositorio (obligatorio).
• Descripción: Una breve descripción de su repositorio (opcional).
• Público o privado: Adobe recomienda público (predeterminado).

Seleccione Crear repositorio.

Después de varios minutos, se abre el nuevo repositorio.

Omita las notificaciones de solicitudes de extracción que se muestren en la interfaz de usuario de GitHub.

Clone el repositorio en el equipo local.

git clone https://github.com/{ORG}/{SITE}.git

Si encuentra errores al clonar el repositorio, consulte Solucionar errores de clonación en la documentación de GitHub.

Abra el repositorio en su terminal o IDE.

Cree su archivo de configuración copiando el archivo default-fstab.yaml en fstab.yaml.

cp default-fstab.yaml fstab.yaml

Actualice el punto de montaje en el archivo de configuración de la tienda para que apunte a la dirección URL de contenido.

1. Abra el archivo de configuración fstab.yaml.

   code language-yaml
   mountpoints: /: url: https://content.da.live/{org}/{site}/ type: markup folders: /products/: /products/default

2. Reemplace las cadenas {ORG} y {SITE} por los valores del repositorio de GitHub que creó para su código de plantillas.

   Por ejemplo, el código actualizado debería tener este aspecto.

   code language-yaml
   mountpoints: /: url: https://content.da.live/owner-name/aco-storefront/ type: markup

3. Guarde el archivo.

Cree un nuevo directorio tools/sidekick.

mkdir tools/sidekick

Copie el archivo demo-sidekick.json en el directorio raíz al directorio tools/sidekick y cambie su nombre a config.json.

cp demo-sidekick.json tools/sidekick/config.json

Personalice la configuración de Sidekick para su sitio.

Desde el directorio tools/sidekick/, edite el archivo config.json.

{
  "project": "My Project",
  "editUrlLabel": "Document Authoring",
  "editUrlPattern": "https://da.live/edit#/{{org}}/{{site}}{{pathname}}"
}

Actualice los valores de clave url con los valores del repositorio de GitHub.

• Reemplace la cadena {{ORG}} por la organización o el nombre de usuario de su repositorio.

• Reemplace la cadena {{SITE}} por el nombre del repositorio.

• El sistema ha rellenado la variable pathname.

{
  "project": "My Project",
  "editUrlLabel": "Document Authoring",
  "editUrlPattern": "https://da.live/edit#/aco-storefront/early-adopter{{pathname}}"
}

Guarde el archivo.

Desde el editor o IDE, confirme y guarde los archivos actualizados.

git add .

Compruebe que está confirmando los dos archivos actualizados.

git status
On branch main
Your branch is up to date with 'origin/main'.

Changes to be committed:
 (use "git restore --staged <file>..." to unstage)
     new file:   fstab1.yaml
     modified:   tools/sidekick/config.json

Confirme los cambios.

git commit -m "Update storefront boilerplate for Adobe Commerce Optimizer"

Aplique los cambios.

git push

Abra la página de configuración aplicación AEM Code Sync.

Seleccione Configurar y luego realice la autenticación con la organización o la cuenta que contiene el repositorio que creó.

En el formulario, elija Seleccionar solo repositorios y, a continuación, seleccione el repositorio que creó.

Seleccione Instalar para agregar la aplicación AEM Code Sync a su repositorio.

Debería ver un mensaje que indique que la aplicación se ha instalado correctamente.

Abrir la herramienta de creación de sitios

Configure el repositorio:

• Seleccione Use Existing Repository.
• Escriba Organization/Username para el proyecto de plantillas de tienda.
• Escriba Repository Name.

Importe, previsualice y publique el contenido en el entorno de creación de documentos seleccionando Crear sitio.

{width="700" modal="regular"}

Una vez creado el sitio, puede utilizar los vínculos de las secciones Edit content y View Site para explorar la tienda de demostración.

Los vínculos principales a su contenido y sitio siguen estos formatos:

• Carpeta de contenido raíz— https://da.live/#/{ORG}/{SITE}
• Vista previa del sitio— https://main--{SITE}--{ORG}.aem.page/
• Producción del sitio:— https:/main--{SITE}--{ORG}.ae.live/

Abra el vínculo de la carpeta de contenido raíz para ver el contenido.

{width="700" modal="regular"}

Para ver el sitio, vaya a https://main--{SITE}--{ORG}.aem.live.

Reemplace {ORG} y {SITE} por la organización y el nombre de su repositorio de plantillas.

{width="700" modal="regular"}

Si la página devuelve un error 404, compruebe lo siguiente:

• El punto de montaje del archivo fstab.yaml señala a la dirección URL de contenido correcta: https://content.da.live/{ORG}/{SITE}/
• Ha configurado la aplicación de sincronización de código para conectarse a su repositorio de GitHub.
• Ha publicado el contenido en el entorno de Document Author mediante la herramienta de clonación de contenido de demostración.

Vea los datos de catálogo de muestra procedentes de la instancia predeterminada de Commerce Optimizer.

1. En el encabezado de la tienda, haga clic en la lupa para buscar tires.

   {width="675" modal="regular"}

2. Pulse Intro para ver la página de resultados de la búsqueda.

   {width="675" modal="regular"}

   Los componentes de página de resultados de búsqueda se definen en el documento de contenido search. Los datos de los resultados de búsqueda se rellenan según la configuración de la tienda en config.json.

3. Vea la página de detalles del producto seleccionando cualquier producto de neumático en la página.

   {width="675" modal="regular"}

   Los componentes de la página de detalles del producto están definidos por el documento de contenido default en la carpeta product.

En el IDE, cierre la rama principal y restablézcala a la última confirmación de la rama remota.

git checkout main
git reset --hard origin/main

Instale las dependencias necesarias.

npm install

Inicie el servidor de desarrollo local.

npm start

La primera página de la tienda de plantillas debe estar visible en el explorador en http://localhost:3000.

{width="700" modal="regular"}

En su IDE, actualice la configuración de la tienda para conectarse a la instancia de Adobe Commerce Optimizer que Adobe ha aprovisionado para usted.

1. Abra el archivo config.json.

2. Actualice los siguientes valores mediante el extremo de la instancia Adobe Commerce Optimizer:

   • commerce-endpoint: reemplace el valor existente por su dirección URL de extremo.

     code language-json
     "commerce-endpoint": "https://na1-sandbox.api.commerce.adobe.com/{tenantId}/graphql"

   • ac-environment-id: reemplace el valor existente por el ID de inquilino de la dirección URL de extremo.

     code language-json
     "ac-environment-id": "{tenantId}"

3. Guarde el archivo.

   Si la vista previa local funciona correctamente, las actualizaciones se aplican a la tienda local.

Compruebe el sitio para ver los resultados del cambio de configuración.

1. En el explorador, vaya a http://localhost:3000 y actualice la página.

2. En el encabezado de la tienda, haga clic en la lupa para buscar tires.

   {width="675" modal="regular"}

3. Pulse Intro para mostrar la página de resultados de la búsqueda.

   {width="675" modal="regular"}

   La búsqueda no devuelve ningún resultado porque los valores del encabezado del archivo de configuración de la tienda se basan en la instancia predeterminada. Ahora que la configuración apunta a la instancia Adobe Commerce Optimizer aprovisionada por usted, esos valores no son válidos.