2.8.12.1 Scripts de terceros Introducción < Ajustes
La sección Scripts de terceros permite gestionar la inclusión y ejecución de código personalizado en la tienda, tanto de origen externo como propio. Desde este apartado se pueden añadir scripts de JavaScript, hojas de estilo CSS y código noscript, así como definir en qué páginas y en qué momento del proceso de navegación se cargan.
Estos ajustes permiten no solo integrar herramientas y servicios de terceros, sino también modificar estilos, comportamientos y elementos visibles de la vista pública de la tienda, añadiendo o personalizando contenido según el contexto. Asimismo, es posible controlar la activación de los scripts y su relación con el aviso de cookies.
Debido a su impacto directo en el funcionamiento y la presentación de la tienda, estos ajustes deben configurarse con cuidado.
1. Interfaz de script de terceros en modo lista
| Ajuste |
Detalles |
|---|---|
| ID |
Identificador interno del script de terceros. Se asigna automáticamente al crearlo. |
| Nombre |
Nombre descriptivo del script, utilizado para identificarlo dentro del panel de administración. |
| Habilitado (estado) |
Indica si el script está activo o inactivo. Cuando está deshabilitado, el script no se ejecuta en la tienda. |
| Habilitado (acción rápida) |
Permite activar o desactivar el script directamente desde el listado mediante un control rápido, sin necesidad de editarlo. |
| Creado el |
Fecha de creación del script de terceros. |
| Actualizar |
Permite acceder a la edición del script seleccionado para modificar su configuración, código o condiciones de visualización. |
| Crear script de terceros |
Acción para crear un nuevo script de terceros y definir su configuración desde cero. |
| Filtros |
Permite filtrar el listado de scripts para facilitar su búsqueda y gestión. |
2. Interfaz de crear script de terceros
2.1 Columna izquierda sección superior
| Ajuste |
Detalles |
|---|---|
| Nombre |
Identifica el script de terceros dentro del panel de administración. Es un campo obligatorio. |
| Habilitado |
Activa o desactiva la ejecución del script configurado. |
| Aviso de cookies requeridas |
Indica si el script requiere la aceptación previa del aviso de cookies para poder ejecutarse. |
2.2 Columna izquierda sección inferior - Condiciones de visualización
El ajuste Condiciones de visualización permite definir, mediante selección tipo marcar casilla check, en qué páginas o momentos del flujo de navegación de la tienda se ejecutará el script configurado. Estas opciones sirven para limitar la carga y ejecución del código a contextos específicos, permitiendo mostrar contenido, modificar estilos o ejecutar acciones únicamente donde sea necesario.
Este ajuste es especialmente útil para integrar widgets, avisos, personalizaciones o acciones condicionadas a determinadas vistas de la tienda.
|
Opción |
Detalles |
|---|---|
| Todas las páginas |
El script se ejecuta en cada carga de página, permitiendo modificar el diseño o comportamiento antes de renderizar el contenido. |
| Listado de productos |
Se ejecuta antes de renderizar una lista de productos, útil para añadir o modificar información en la vista de listado. |
| Vista de producto |
Se activa antes de renderizar la vista de un producto individual, permitiendo personalizar la página de detalles del producto. |
| Carrito de compra |
Se ejecuta en la página del carrito, lo que permite modificar el resumen del carrito o añadir contenido adicional. |
| Pedido completado |
Se activa en la página de finalización del pedido, útil para mostrar mensajes o ejecutar acciones tras un pedido exitoso. |
| Vista de pedido |
Se ejecuta en la página de detalles de un pedido, permitiendo personalizar la información mostrada al usuario. |
| Lista de pedidos |
Se activa en la página “Mis pedidos”, permitiendo modificar la vista de la lista de pedidos del usuario. |
| Lista de categorías |
Se ejecuta antes de renderizar la lista de categorías, normalmente en la página de inicio o vistas generales. |
| Vista de categoría |
Se activa antes de renderizar una página de categoría, marca o proveedor, permitiendo personalizar estas vistas. |
| Slider |
Se ejecuta cada vez que se renderiza un slider, permitiendo modificar su contenido o comportamiento. |
| Mostrar después de resumen de pedido |
El script se renderiza debajo de la lista de productos en la página de resumen del carrito, útil para mostrar información o acciones adicionales. |
| Mostrar justo antes del comienzo de la sección de contenido principal |
Se ejecuta después del encabezado y antes del contenido principal, permitiendo mostrar banners o contenido introductorio. |
2.3 Interfaz para escribir código JavaScript
El ajuste Código JavaScript permite definir código JavaScript que se ejecutará en la tienda según las condiciones de visualización configuradas. Este código puede utilizarse tanto para integrar funcionalidades externas como para añadir comportamientos personalizados, modificar elementos de la interfaz o ejecutar acciones específicas en determinadas páginas.
El código puede introducirse directamente en el editor o cargarse mediante URLs externas, y su ejecución depende de la posición seleccionada y de las condiciones de visualización definidas.
| Ajuste |
Detalles |
|---|---|
| Código JS | Permite introducir código JavaScript personalizado que se ejecutará en la tienda. Puede dejarse vacío si se utilizan únicamente fuentes externas mediante URLs. |
| Posición del script de JS |
Define la ubicación en la que se cargará y ejecutará el código JavaScript.
|
| Uso recomendado | Integración de scripts de seguimiento, widgets de chat, personalizaciones visuales o lógica específica según la página. |
| Consideraciones | Un uso incorrecto del JavaScript puede afectar al rendimiento o funcionamiento de la tienda, por lo que se recomienda validar el código antes de activarlo. |
2.4 Interfaz para escribir código Css
El ajuste Código CSS personalizado permite definir estilos CSS que se aplicarán cuando el script esté activo. Estos estilos se utilizan para modificar la apariencia visual de elementos de la tienda, como widgets, banners, avisos o componentes añadidos mediante JavaScript, sin necesidad de alterar los archivos del tema.
Este ajuste es especialmente útil para adaptar el diseño de elementos externos o personalizados de forma localizada y controlada.
| Ajuste |
Detalles |
|---|---|
| Código CSS | Permite introducir reglas CSS personalizadas que se aplicarán cuando el script esté activo y se cumplan las condiciones de visualización configuradas. |
| Ámbito de aplicación | Los estilos afectan únicamente a las páginas y contextos definidos en las condiciones de visualización del script. |
| Uso recomendado | Personalización visual de widgets de terceros, burbujas de chat, banners de notificación o elementos añadidos mediante JavaScript. |
| Consideraciones | Un uso incorrecto del CSS puede afectar a la visualización de la tienda. Se recomienda validar los estilos y evitar reglas demasiado genéricas. |
2. 5 Código noscript
El ajuste Código noscript permite definir contenido alternativo que se mostrará únicamente en navegadores donde JavaScript esté desactivado o no sea compatible. Este tipo de contenido se incluye dentro de la etiqueta HTML <noscript> y se utiliza principalmente para mejorar la accesibilidad, la experiencia de usuario y el posicionamiento SEO en escenarios donde no se puede ejecutar JavaScript.
Este ajuste es especialmente útil para proporcionar alternativas informativas en elementos dependientes de JavaScript, como mapas, widgets externos o contenido multimedia.
| Ajuste |
Detalles |
|---|---|
| Código noscript | Permite introducir código HTML que se renderizará solo cuando JavaScript esté desactivado en el navegador del usuario. El contenido se encapsula dentro de la etiqueta <noscript>. |
| Uso recomendado | Mostrar mensajes informativos, enlaces alternativos o contenido estático que sustituya funcionalidades dependientes de JavaScript. |
| Impacto en accesibilidad | Facilita el acceso a la información para usuarios con navegadores limitados o configuraciones restrictivas. |
| Impacto en SEO | Permite a los motores de búsqueda acceder a contenido alternativo cuando no se ejecuta JavaScript, mejorando la indexación en ciertos casos. |
2. 5 Recursos externos y etiquetas meta introducción
Este bloque de ajustes permite incluir recursos y configuraciones adicionales en la tienda mediante referencias externas. Desde aquí se pueden cargar archivos JavaScript y CSS alojados en servidores externos, así como definir etiquetas meta personalizadas que se insertarán en el encabezado de la página.
Estos ajustes son útiles para integrar librerías, SDKs, servicios externos o configuraciones avanzadas sin necesidad de incluir el código directamente en el editor, y permiten ampliar o personalizar el comportamiento y la presentación de la tienda de forma flexible.
2.5.1 Ajuste JS SRC
Permite definir enlaces a archivos JavaScript externos que se cargarán en la tienda cuando el script esté activo. Cada enlace debe introducirse en una línea independiente.
Este ajuste se utiliza habitualmente para cargar librerías externas, servicios de analítica, SDKs de terceros o scripts alojados en servidores externos.
2.5.1 Ajuste CSS SRC
Permite definir enlaces a hojas de estilo CSS externas que se aplicarán cuando el script esté activo. Cada enlace debe introducirse en una línea independiente.
Este ajuste es útil para aplicar estilos proporcionados por librerías externas o para mantener estilos personalizados alojados fuera del sistema.
2.5.1 Ajuste Etiquetas meta
Permite definir etiquetas meta personalizadas que se insertarán en el encabezado (<head>) de la página. Cada etiqueta debe indicarse en una línea, utilizando el formato atributo:valor, pudiendo añadir múltiples atributos por línea.
Este ajuste se utiliza para configurar opciones relacionadas con SEO, verificación de servicios externos, control de comportamiento del navegador o integración con plataformas de terceros.