Guia para configurar tu código HTML

Prepara tu entorno

A. Variables de entorno

Dentro del archivo zip descomprimido, encontrarás un archivo .env que contiene cuatro variables clave: SHOPS_URL, UUID_VERSION, TOKEN, y OVERWRITE_TOKEN. Si deseas que tu proyecto refleje la estructura de tu tienda real, deberás configurar correctamente estas variables.

B. SHOPS_URL

Aquí debes colocar la URL de tu tienda. https://testuser1319460927.mercadoshops.cl/

C. UUID_VERSION

Este es el UUID que puedes encontrar en el sitebuilder al hacer clic en Vista previa. El UUID aparecerá como un parámetro en la URL. 488b06fb-4746-4a3c-82d7-0dcf5c1c71c6.

D. TOKEN

Este es obligatorio y debe ser gestionado previamente con nuestros asesores. Sin este token, no podrás acceder a los datos de tu tienda vía API.

D. OVERWRITE_TOKEN

Esta variable es opcional, y puedes encontrar más información sobre ella en la sección dedicada al Mock.

Inicialización

Para configurar tu entorno de desarrollo es necesario que tengas instalado los paquetes node (versión 20.12.1 o superior) y npm, los cuales los puedes descargar desde https://nodejs.org/es/download/. Una vez instalados, y desde la consola de tu PC, debes estar ubicado en la carpeta base del entorno y ejecutar el siguiente comando:

**imagen

Este proceso puede demorar unos minutos, pero una vez finalizado, se abrirá automáticamente en el navegador una pestaña con el proyecto cargado y el entorno estará listo para comenzar a trabajar.

Header & Footer

Los componentes de header y footer son elementos fundamentales en el diseño de tu tienda online. Su presencia constante en todas las páginas garantiza una navegación fluida y coherente para los usuarios. Estos componentes no solo sirven como herramientas de navegación, sino que también juegan un papel crucial en la identidad visual y la accesibilidad de tu sitio.

Handlebars

Podrás encontrar los archivos de maquetación para estos componentes en la carpeta: views/partials/{theme} Donde {theme} corresponde al último tema utilizado por tu tienda. Esto puede ser un tema como fashion, explorer, simple, etc., si tu tienda fue parte de las migradas, o custom si comenzaste directamente con la última versión.

Dentro de esta carpeta, encontrarás dos archivos fundamentales:

• header.hbs
• footer.hbs

Es obligatorio que tu ZIP incluya siempre los archivos header.hbs y footer.hbs en las carpetas designadas. La ausencia de estos archivos generará errores al intentar subir tu ZIP de personalización. Por lo tanto, es crucial no eliminarlos ni cambiarlos de directorio.

Además, en la misma carpeta, es probable que encuentres otros archivos Handlebars, que generalmente se utilizan como íconos en el header, el footer o en ambos. Estos archivos complementan la funcionalidad y el diseño de tu tienda, proporcionando una experiencia de usuario cohesiva y visualmente atractiva.

Components

En tu tienda, el header y footer no solo sirven como elementos estructurales básicos, sino que también pueden integrar otros partials que enriquecen la funcionalidad y la experiencia del usuario. Entre estos partials, podrías incluir elementos como el consentimiento y aceptación de cookies, o mensajes flash que aparecen en la parte superior de la página de inicio. Puedes encontrar estos componentes adicionales en la carpeta: views/partials/components. En esta ubicación, generalmente se almacena el maquetado para componentes auxiliares usados en el header o footer, o que es transversal a toda la tienda. Es importante que cualquier edición de estilos relacionados con estos componentes se mantenga dentro del archivo: static/layout_styles.css. Puesto que en la carpeta que contiene tus archivos header.hbs y footer.hbs, como en la carpeta components, solo deberían existir archivos con extensión .hbs. Esto asegura una organización clara y mantiene la coherencia del código, facilitando su mantenimiento y actualización.

Estilos

Para personalizar el estilo de estos componentes, debes referirte al archivo: static/layout_styles.css. En este archivo, tienes la libertad de agregar, modificar o eliminar estilos que afectarán directamente al header y al footer de tu tienda.

Componentes

Cada componente personalizado se organiza dentro de una carpeta que contiene tres tipos de archivos: Código JavaScript (si aplica), Hojas de estilo en SASS y Templates en Handlebars. En views/partials/customComponents encontrarás subcarpetas junto con archivos SCSS, como el de variables globales (_variables.scss). Cada subcarpeta lleva el nombre de un componente de la tienda. Es importante tener en cuenta que los nombres están en inglés, por lo que no existe una referencia directa con el menú de agregar componentes en el sitebuilder. Sin embargo, más adelante encontrarás una tabla de relaciones que te permitirá saber qué carpeta corresponde a cada componente. Cada componente está organizado en una carpeta que contiene un archivo index.hbs, un archivo styles.scss, y, opcionalmente, una carpeta styles y otros archivos .hbs que forman parte del maquetado del componente.

Nomenclatura

Estructura de archivos

1. Nombres obligatorios:

Los archivos index.hbs y styles.scss (si existe) deben respetar estos nombres y solo su contenido puede ser modificado.

2. Opcionalidad de JavaScript

Algunos componentes pueden no incluir JavaScript o estilos, pero siempre incluirán maquetación.

3. Carpeta de estilos

Puedes encontrar una carpeta styles dentro del componente, donde se organizan los estilos, diferenciando entre vistas de desktop o mobile si es necesario.

Limitaciones y Observaciones

1. Archivo index.hbs

Cada componente personalizado debe incluir un archivo index.hbs, de no existir el proceso de subida del zip personalizado fallará.

2. Sin subcarpetas

No se deben crear subcarpetas más que la de styles dentro de un componente, ya que serán identificadas como variaciones del componente, lo que podría causar errores no deseados. En caso de que sean necesarias por orden o simplicidad use el prefijo # en su nombre para que sean ignoradas por el sistema. e.g. /sectionText/#subDir

3. Wrapper obligatorio en index.hbs

Cada archivo index.hbs debe conservar un wrapper en forma de un <div> con un ID específico: custom_component_{component}_default. Este wrapper es esencial para el correcto funcionamiento de las variaciones del componente. Borrar o modificar este ID puede causar fallos en la estilización y la funcionalidad de los componentes.

4. Estilos encapsulados

Si tu componente incluye un archivo styles.scss, es esencial utilizar el ID del wrapper como selector principal para la anidación de estilos. Este ID se presenta en el formato #custom_component_{component}_default. Utilizar este identificador único asegura que los estilos definidos en el archivo SCSS se apliquen exclusivamente al componente correspondiente, evitando así conflictos de estilos con otros elementos de la página.

5. Uso de partials en Handlebars

Si usas partials (referencias a otros archivos .hbs dentro de tu index.hbs), debes usar una ruta híbrida entre absoluta y relativa. Siempre comienza las referencias con customComponents/, pero sin anteponer un slash. e.g. customComponents/video/playIcon

Código Javascript

Para integrar scripts en tus templates .hbs, debes utilizar la etiqueta < script >. A la hora de agregar archivos de script locales, es crucial configurar el atributo src con una ruta absoluta que comience desde la carpeta partials. Además, es importante especificar si el origen del script es local o remoto mediante la propiedad local. Establece local="true" si el script se aloja localmente en tu servidor, y local="false" si el src apunta a una ubicación en la web:

Variaciones

Es posible que, para fechas especiales o eventos de la tienda como Navidad, San Valentín, Halloween o CyberMonday, desees que uno o varios componentes adopten un estilo particular. Para estos casos, puedes utilizar variaciones, una opción que te permite modificar tanto el comportamiento como el diseño de un componente de forma específica. Los componentes que has configurado hasta ahora son los default. Si modificas uno de ellos, todos los componentes del mismo tipo que uses en tu tienda o páginas cambiarán automáticamente. Con las variaciones, puedes hacer que no todos los componentes cambien. Solo aquellos que estén configurados para variar en ciertas fechas o eventos podrán cambiar de estilo o funcionalidad de acuerdo con lo que necesites.

Construir una variación