En Magento 2 o Adobe Commerce, creas un bloque CMS con el código del widget y lo colocas en todas las páginas de producto con una instancia de widget.
El código para Magento / Adobe Commerce
<div data-garantielabel></div>
<script src="https://www.garantielabel.app/widget.js" async></script>Más opciones, como la forma de mostrarlo y el idioma, las ajustas en el generador de código.
Paso a paso en Magento / Adobe Commerce
- Crea un bloque CMS
En “Content” → “Blocks” (Contenido → Bloques), crea un bloque nuevo y pega el código del widget. A partir de la versión 2.4.3 se abre Page Builder; usa ahí el elemento “HTML Code” (código HTML). - Crea un widget
En “Content” → “Elements” → “Widgets” (Contenido → Elementos → Widgets), crea un widget del tipo “CMS Static Block” (bloque estático CMS) para tu tema. - Colócalo
Como actualización de diseño, elige “All Product Types” (todos los tipos de producto) y selecciona el contenedor “Product View Extra Hint”. Está debajo del botón de añadir al carrito. - Vacía la caché
Guarda, vacía la caché y revisa una página de producto.
Los nombres de menú entre comillas son los de la interfaz en inglés; entre paréntesis va nuestra traducción.
Lo que conviene saber de Magento / Adobe Commerce
- Con una Content Security Policy activa (módulo Magento_Csp),
www.garantielabel.appdebe estar en la lista blanca para scripts, imágenes y conexiones. - La agrupación y minificación de JavaScript no deberían incluir el script externo.
Dónde colocar el aviso en Magento
Todas las páginas de producto usan el archivo de layout catalog_product_view.xml. A él se suman archivos por tipo de producto, como catalog_product_view_type_configurable.xml, y por producto individual, como catalog_product_view_sku_{sku}.xml. La columna con el precio y la zona de compra es el contenedor product.info.main. Contiene product.info.extrahint, que en el formulario del widget se llama “Product View Extra Hint”.
En el Admin, los widgets se crean en “Content → Elements → Widgets”. “Display On” define el tipo de página y “Container”, la zona de la página. Para las páginas de producto, elige “All Product Types” o un tipo de producto concreto. Para el aviso en el pie de página, añade una segunda actualización de layout: “All Pages” con el contenedor “Page Footer”, preferiblemente con data-darstellung="link".
Productos configurables e identificador del modelo
Un producto configurable aparece como un solo producto con opciones desplegables. Según Adobe, cada variación es un producto simple aparte con su propio SKU. El producto configurable en sí es el marco, y su precio procede de las variaciones.
La documentación de Adobe no menciona ningún campo propio para el identificador del modelo. Para ello creas un atributo de producto en “Stores → Attributes → Product” y luego lo añades a tu conjunto de atributos en “Stores → Attributes → Attribute Set”. Con “Visible on Catalog Pages on Storefront” en “Yes”, aparece en la página de producto. Como cada variación es un producto propio, puede llevar su propio identificador del modelo.
La etiqueta GARAN indica la marca y el identificador del modelo, así que hay una etiqueta por identificador del modelo. El widget muestra una etiqueta GARAN por marcador de posición y no cambia con la opción elegida. Para una etiqueta que solo corresponde a un producto, los desarrolladores usan el archivo de layout de ese producto (catalog_product_view_sku_{sku}.xml). Si las variaciones tienen identificadores del modelo distintos, es mejor gestionar esos modelos como productos separados.
Errores habituales en Magento
- Caché de página completa: las páginas de producto se guardan ya generadas en la Page Cache. Después de un cambio, actualiza los tipos de caché Page Cache, Layouts y Blocks HTML output en “System → Tools → Cache Management”.
- Widget vinculado al tema: cada instancia de widget pertenece a un Design Theme. Después de cambiar de tema, crea el widget para el tema nuevo.
- Store views: en “Storefront Properties” eliges las store views en las que aparece el widget. Si tienes varios idiomas, revisa cada store view.
- Tema propio: tus propios archivos de layout van en un tema propio. Adobe desaconseja modificar los temas que vienen de serie, por compatibilidad y por las actualizaciones.
Más fuentes
- Adobe Commerce: Product layouts (en inglés)
- Adobe Commerce: Create a widget (en inglés)
- Adobe Commerce: Block positions (en inglés)
- Adobe Commerce: Configurable product (en inglés)
- Adobe Commerce: Create product attributes (en inglés)
- Adobe Commerce: Cache management (en inglés)
- Adobe Commerce: Create a storefront theme (en inglés)
- Magento Open Source: opciones de “Display On” (GitHub)
Aviso de garantía legal en la confirmación de pedido
Según las directrices de la Comisión, el aviso también debería aparecer en el correo de confirmación. Las plantillas de correo se gestionan en “Marketing” → “Email Templates” (plantillas de correo). El gráfico oficial se puede añadir como imagen a la plantilla “New Order” (nuevo pedido). Es poco probable que un simple enlace cuente como soporte duradero (TJUE, asunto C-49/11, Content Services); lo más seguro es poner el aviso directamente en el correo como imagen, texto o adjunto. Encontrarás los archivos oficiales en nuestra página de descargas.
¿Garantía del productor? Entonces añade la etiqueta GARAN
Si el productor da gratis una garantía comercial de durabilidad de más de dos años que cubre la totalidad del bien, la etiqueta GARAN también va en la página de producto. Con el generador de etiquetas GARAN la creas en segundos a partir de los años, la marca y el modelo; tus primeras 3 etiquetas son gratis y sin registro. Debajo de cada etiqueta terminada recibes un código para insertar con direcciones de imagen permanentes: no subes nada y lo pegas en Magento / Adobe Commerce como se muestra arriba.
¿Prefieres tus propios archivos? Sube la versión completa y la anidada a la biblioteca de medios de Magento / Adobe Commerce e introduce las direcciones en el código del widget:
<div data-garantielabel
data-garan-voll="https://…/GARAN-MX-500.svg"
data-garan-klein="https://…/GARAN-MX-500-anidada.svg"></div>El widget muestra entonces la versión anidada debajo del aviso de garantía legal, y un clic abre la etiqueta GARAN completa.
Preguntas frecuentes
¿Puedo hacerlo con layout XML?
Sí. Los desarrolladores añaden el bloque mediante layout XML en catalog_product_view.xml.
¿Funciona con Hyvä?
Sí. El widget no depende de RequireJS ni de Knockout y también funciona en temas Hyvä.
¿Tengo que vaciar la caché?
Sí, después de crear el widget; si no, el bloque aparecerá más tarde.
¿Puedo añadir una etiqueta GARAN solo para un producto?
Sí. Los desarrolladores usan el archivo de layout catalog_product_view_sku_{sku}.xml. Solo se aplica al producto con ese SKU.
¿Aparece el widget en todas las store views?
Solo en las que selecciones en las “Storefront Properties” de la instancia del widget.
¿Qué tengo que hacer después de cambiar de tema?
Las instancias de widget pertenecen a un Design Theme. Crea el widget para el tema nuevo, actualiza la caché y comprueba una página de producto.