Integración

Integrar el widget de accesibilidad en Shopware 6.

Intégralo con un tema propio en el bloque anterior a la etiqueta de cierre body. Las ayudas de lectura complementan tu trabajo por una web accesible.

Guía revisada el

Lo que necesitas

Permisos de administrador y un tema propio derivado. En tiendas autoalojadas necesitas acceso al sistema de archivos y a la consola. 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 un tema propio, por ejemplo con bin/console theme:create. Instálalo y actívalo en Extensiones → Mis extensiones y asígnalo al canal de venta.
  2. En el tema, crea el archivo src/Resources/views/storefront/base.html.twig. Amplía en él la plantilla con {% sw_extends '@Storefront/storefront/base.html.twig' %}.
  3. Sobrescribe el bloque base_body_script. Genera primero {{ parent() }} y añade después el código de inserción sin cambios. El bloque está justo antes de la etiqueta de cierre body.
  4. Vacía la caché en los ajustes del sistema, en la sección de cachés e índices, o con bin/console cache:clear.
  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

No modifiques nunca el tema estándar ni archivos en vendor/. Un tema duplicado en la administración no sustituye a un tema derivado. La inserción solo se aplica en los canales de venta con tu tema. En Shopware SaaS subes un tema como ZIP en Mis extensiones; allí la consola y el módulo de caché de las tiendas autoalojadas no están disponibles de la misma forma. Revisa por separado los campos de pago integrados.

Preguntas frecuentes sobre Shopware 6

¿Qué pasa con varios canales de venta o dominios?

El tema se asigna por canal de venta en la pestaña Themes. Por eso, la inserción solo se aplica en los canales con tu tema. Si los canales usan dominios propios, cada dominio necesita su propio proyecto de Accessonaut. Necesitas entonces un tema derivado por canal con el código de inserción correspondiente.

¿Tiene que figurar el widget en los ajustes de cookies de Shopware?

Shopware reúne en su gestión del consentimiento las cookies del núcleo, de los plugins y de las apps. El widget no instala cookies y no aparece allí por sí solo. Guarda los ajustes de lectura en el almacenamiento local del navegador. Si solo debe cargarse tras el consentimiento, necesitas una adaptación propia.

¿Qué hago si mi tema no se aplica?

Shopware indica para ello bin/console theme:change y, a continuación, bin/console theme:compile. Si los cambios siguen sin verse, ejecuta bin/console cache:clear.

¿Qué hago con una Content Security Policy?

Shopware define políticas predeterminadas con el parámetro de contenedor shopware.security.csp_templates. Si las adaptas, permite la dirección de tu servicio en script-src y connect-src. El widget inserta elementos style sin nonce; style-src debe permitir estilos incrustados.

Si algo no funciona

En un canal de venta falta el widget.

Causa: Ese canal tiene asignado otro tema.

Solución: Abre el canal de venta, elige tu tema en la pestaña Themes y vacía la caché.

El cambio en la plantilla no tiene efecto.

Causa: La caché sigue sirviendo páginas antiguas.

Solución: Elige «Clear cache» en Settings → System → Caches & Indexes o ejecuta bin/console cache:clear.

Quieres quitar el widget.

Causa: El bloque base_body_script de tu tema sigue generando el código.

Solución: Quita el código de inserción del bloque, deja {{ parent() }} y 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

Shopware: Adaptar una plantilla en un tema propio

Conocimiento práctico para tus próximos pasos

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