Integración

Integrar el widget de accesibilidad en PrestaShop.

Intégralo con un tema hijo antes de la etiqueta de cierre body de todas las páginas de la tienda. Las ayudas de lectura complementan tu trabajo por una web accesible.

Guía revisada el

Lo que necesitas

Acceso a los archivos de la carpeta themes, permisos de administrador en el back office y un tema padre instalado. Haz antes una copia de seguridad. En Accessonaut, crea primero un proyecto con el dominio real de tu web y abre en el proyecto la página de instalación.

Paso a paso

  1. Crea en /themes/ un tema hijo con config/theme.yml y preview.png. En theme.yml, indica el nombre de la carpeta como name, tu tema activo como parent y, en assets, use_parent_assets: true.
  2. En el tema hijo, crea el archivo templates/layouts/layout-both-columns.tpl con {extends file='parent:layouts/layout-both-columns.tpl'}.
  3. Sobrescribe en él el bloque hook_before_body_closing_tag. Genera primero {$smarty.block.parent} y añade después el código de inserción sin cambios.
  4. Activa el tema hijo en Diseño → Tema y logotipo. Vacía la caché en Parámetros avanzados → Rendimiento.
  5. Revisa la página de inicio, una categoría, un producto, el carrito y la página de pago en una ventana privada y en la vista móvil.

Así es la inserción

Usa el código listo de tu proyecto. El ejemplo necesita tu ID de proyecto real y la dirección del servicio accesible públicamente.

<script src="https://accessonaut.com/widget.js"
  data-project-id="TU_ID_DE_PROYECTO"
  data-language="es" defer></script>

Adapta el diseño a tu web

En tu proyecto de Accessonaut, abre «Widget de ayudas de lectura». Cinco plantillas y una vista previa en directo te ayudan con el diseño: colores, tipografías, ancho del menú, esquinas, sombras, icono o botón de apertura con texto y textos propios. La posición y los márgenes se ajustan por separado para escritorio y smartphone. Al guardar, tu código de inserción actual adopta automáticamente el diseño del proyecto; la configuración pública se guarda en caché hasta un minuto.

En el plugin de WordPress puedes elegir ajustes locales en su lugar. Estos tienen prioridad sobre el diseño del proyecto. El diseño está disponible en todos los planes. En el plan Free, el aviso de Accessonaut sigue visible. Los ajustes de lectura personales de tus visitantes tienen prioridad sobre las indicaciones de diseño.

Ten en cuenta

Classic y Hummingbird contienen el bloque en layouts/layout-both-columns.tpl. Otros temas pueden ser distintos. Sin el prefijo parent:, la plantilla se refiere a sí misma. Prueba primero la activación del tema en una copia de tu tienda. El widget no llega a las páginas de pago externas ni a los campos de pago integrados.

Preguntas frecuentes sobre PrestaShop

¿Aparece el widget también en el checkout?

En el tema Classic, sí. La plantilla del checkout amplía el diseño predeterminado, que se basa en layouts/layout-both-columns.tpl. Ahí está el bloque anterior a la etiqueta de cierre body. El widget no llega a las páginas de pago externas ni a los campos de pago integrados. Por eso, prueba el checkout completo.

¿Se conserva mi inserción al actualizar el tema?

Sí. Un tema hijo hereda plantillas y recursos del tema padre. Solo sobrescribes lo que quieres cambiar. El tema padre lo puedes actualizar de forma independiente.

¿Qué pasa en el modo multitienda?

Cada tienda puede usar su propio tema. Asigna tu tema hijo a cada tienda que deba mostrar el widget. Si las tiendas tienen dominios propios, cada dominio necesita su propio proyecto de Accessonaut y, por tanto, su propio tema hijo.

¿Qué ajustes de caché son importantes?

En Parámetros avanzados → Rendimiento controlas la compilación de plantillas. Si las plantillas no se vuelven a compilar nunca, solo verás los cambios tras vaciar la caché. Durante la configuración ayuda la opción de recompilar las plantillas cuando cambian los archivos.

¿Tengo que desactivar «Combine, Compress and Cache»?

Para la inserción no hace falta. Pero PrestaShop aconseja probarlo todo tras activar la caché inteligente para JavaScript antes de dejar el ajuste activo. Al probar, comprueba también que el widget sigue apareciendo y funciona.

Si algo no funciona

El widget no aparece tras guardar la plantilla.

Causa: Smarty sigue usando plantillas compiladas.

Solución: Vacía la caché en Parámetros avanzados → Rendimiento, en la parte superior de la página.

En una tienda de la multitienda falta el widget.

Causa: Esa tienda usa otro tema.

Solución: Asigna el tema hijo a la tienda y vacía la caché.

Quieres quitar el widget.

Causa: El bloque sobrescrito en el tema hijo genera el código.

Solución: Quita el código de inserción de hook_before_body_closing_tag y deja {$smarty.block.parent}. Otra opción es volver a activar el tema padre. Después vacía la caché.

Comprueba la instalación

  • Abre la web pública en una ventana privada. El widget se muestra exactamente una vez.
  • Llega al botón con el teclado. Abre el panel, cambia el tamaño del texto y vuelve a cerrarlo.
  • Revisa la página de inicio, una subpágina, un formulario y la vista móvil. El widget no debe tapar ningún control importante.
  • En la pestaña Red, comprueba que widget.js y la configuración del proyecto se cargan desde la dirección de tu servicio. Si hay errores, revisa el dominio, el ID del proyecto y la CSP.
  • En los proyectos Free, el aviso visible de Accessonaut sigue formando parte del widget. Los permisos dependen de tu proyecto.

Privacidad y límites

Al cargarse, el navegador del visitante obtiene el script y la configuración del proyecto del servicio de Accessonaut. Con ello se tratan la dirección IP, los datos de la solicitud del navegador y el nombre de host de la web. Las preferencias de visualización se guardan localmente en el navegador. Ten en cuenta la integración en tu política de privacidad y revisa tu configuración concreta.

Las ayudas de lectura no garantizan la conformidad. Revisa además las barreras en el código fuente y los recorridos completos de los usuarios, de forma automática y manual.

Documentación oficial de la plataforma

PrestaShop: Crear un tema hijo

Conocimiento práctico para tus próximos pasos

Todos los artículos de la sección de conocimiento