Editor de código

Sin dependencia de tu plan, la plataforma te permite editar el código fuente del tema instalado.

Para crear temas se utilizan los lenguajes estándar HTML, CSS y JavaScript. Además, InSales utiliza el procesador de plantillas Liquid.

Liquid permite acceder directamente a la información de back office (por ejemplo, mostrar nombres y precios), así como realizar operaciones básicas de la programación clásica: efectuar ciclos, crear matrices, etc.
La característica principal de Liquid es que se ejecuta en el lado del servidor, a diferencia de JavaScript que se ejecuta en el lado del navegador y solo después de que se inicia la carga de la página.

Para un trabajo completo con temas, es deseable aprender este lenguaje.

1. Inicio de sesión en el Editor
2. Vista general del Editor
3. Nos ponemos a trabajar
4. Edición de archivos
5. Búsqueda por archivos de tema

Inicio de sesión en el Editor

Para acceder al Editor, abre la sección "Diseño" y haz clic en el botón con los símbolos "</>" debajo de la captura de pantalla del tema deseado:

Vista general del Editor

1. La búsqueda por título (1) te permite buscar archivos de tema por su título. Por ejemplo, si quieres encontrar un archivo "preloader.gif", podrás escribir "load" y los archivos excedentes no se mostrarán:
   
2. La estructura de archivos del tema se divide en componentes:
   
   • Plantillas: Son plantillas responsables de la generación de páginas comunes (Inicio, categoría, producto, blog, página de métricas, etc.);
   • Snippets: Son fragmentos funcionales, es decir, "ladrillos", de que consiste una plantilla;
   • Estilos: Son archivos de formato .css y .scss;
   • Scripts: Son archivos de formato .js;
   • SVG: son imágenes vectoriales;
   • Archivos de tema: Son imágenes y fuentes;
   • Ajustes de tema: Son archivos del sistema .html y .json .
3. La búsqueda por archivos de tema (3) te permite encontrar exactamente aquellos archivos en cuyo código se encuentra la palabra buscada. Esto es útil, por ejemplo, para buscar por clases de HTML o palabras específicas.
4. El botón "Guardar" (4) está diseñado para guardar los cambios en el código de la plantilla.

Guía general sobre la estructura de temas: "Creación de temas".

Nos ponemos a trabajar

Para expandir o contraer la carpeta deseada, simplemente haz clic en su nombre (el área que se puede hacer clic se indica en gris cuando se desplaza):

La carpeta "Plantillas" generalmente se expone de forma predeterminada, ya que se usa más a menudo que otros.

El icono de piñón te permite agregar una plantilla, un snippet u otro archivo:

Como alternativa al piñón, podrás usar el botón "Agregar", que se encuentra al final de la lista de archivos de la carpeta adecuada:

Edición de archivos

Haz clic en el nombre del archivo deseado para abrirlo en el Editor:

Al editar, puedes usar teclas de acceso rápido:

• Tab: Añadir sangría para las líneas seleccionadas;
• Tab + Shift: Formatear las líneas seleccionadas;
• Mantener presionado el Alt: Seleccionar verticalmente las líneas.

Los elementos del procesador de plantillas Liquid tienen un fondo gris para mayor comodidad (se ve en la captura de pantalla anterior).

Al hacer clic en la etiqueta HTML de apertura, se puede ver la etiqueta de cierre, y viceversa:

Al igual que en la mayoría de los otros Editores, aquí están disponibles la cancelación de la operación (Ctrl+Z) y la repetición de la operación cancelada (Ctrl+Y).

Cuando hay varios archivos abiertos al mismo tiempo, se puede intercambiarse rápidamente entre ellos haciendo clic en los títulos:

Para cerrar la pestaña con el archivo, haz clic en la cruz:

Búsqueda por archivos de tema

Como se indicó anteriormente, la plataforma te permite buscar lugares concretos en el código por palabras clave.

Por ejemplo, una de las páginas relacionadas con el carrito tiene un mensaje que dice "Tu carrito está vacío". Simplemente puedes escribir esta frase en el campo de la búsqueda:

...y el sistema emitirá todos los archivos en los que se encuentra la ocurrencia:

En este caso, un archivo de este tipo es "messages.json". En la línea 22, vemos la frase correcta subrayada.
Además, se muestran 3 líneas antes y después del resultado.

Si haces clic en el nombre del archivo, se abrirá la ventana de edición, y el Editor resaltará inmediatamente la línea: