Resumen

Después puedes comprobar aquí abajo si las etiquetas aparecen en tu página de producto.

1. Abre la plantillaEn WordPress, ve a Apariencia → Editor → Plantillas y abre la plantilla de producto individual (“Single Product”). Con un tema clásico, salta al paso 4.
2. Inserta un bloqueDebajo del bloque de añadir al carrito con opciones (“Add to Cart with Options”), inserta un bloque “HTML personalizado”.
3. Pega el códigoPega el código del widget y guarda la plantilla. Así se aplica a todas las páginas de producto.
4. Tema clásicoSin el editor de bloques, muestra el código en tu tema hijo mediante el hook woocommerce_single_product_summary con prioridad 35, o usa un plugin de fragmentos de código.

Código del widget para el aviso de garantía legal

<div data-garantielabel></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Marca-Modelo.svg"
  data-garan-klein="https://…/GARAN-Marca-Modelo-anidada.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Abre la Shopping ExperienceEn la Administración, ve a “Content” → “Shopping Experiences” (Contenido → Experiencias de compra) y abre el diseño de tus páginas de producto, o crea uno nuevo del tipo “Product page” (página de producto).
2. Inserta el marcadorDebajo de la caja de compra, añade un bloque con un elemento de texto, cambia a la vista de código fuente e inserta <div data-garantielabel></div>.
3. Carga el scriptAñade la línea con widget.js a través del tema (por ejemplo, en base.html.twig) o de un plugin para scripts propios; después guarda el diseño y asígnalo a los productos.
4. Alternativa en el temaLos desarrolladores amplían en su propio tema la plantilla de la caja de compra (buy-widget.html.twig) con el marcador y cargan el script en la cabecera de la plantilla.

Código del widget para el aviso de garantía legal

<div data-garantielabel></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Marca-Modelo.svg"
  data-garan-klein="https://…/GARAN-Marca-Modelo-anidada.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Abre la página de productoEn el Editor de Wix, abre la página de producto de Wix Stores. Los cambios ahí se aplican a todos los productos.
2. Añade el elementoVe a “Add Elements” → “Embed Code” (Añadir elementos → Insertar código) y elige el elemento “Embed HTML” (insertar HTML).
3. Pega el códigoPega el código del widget, arrastra el elemento debajo del botón de añadir al carrito y hazlo lo bastante grande para que se vea el gráfico entero.
4. PublicaPublica el sitio y revisa una página de producto.

Código del widget para el aviso de garantía legal

<div data-garantielabel data-darstellung="voll" data-sprache="es"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Marca-Modelo.svg"
  data-garan-klein="https://…/GARAN-Marca-Modelo-anidada.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Abre la plantilla de productoEn el Designer, abre la “Products Template” (plantilla de productos) en “Pages” (páginas).
2. Añade un Code EmbedArrastra el elemento “Code Embed” desde el panel “Add” (añadir) debajo del botón “Add to Cart” (añadir al carrito).
3. Pega el códigoPega el código del widget y guarda.
4. PublicaPublica el sitio. Los scripts insertados no se ejecutan en el propio Designer.

Código del widget para el aviso de garantía legal

<div data-garantielabel></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Marca-Modelo.svg"
  data-garan-klein="https://…/GARAN-Marca-Modelo-anidada.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Usa una plantilla hijaLos cambios van en una plantilla hija (para NOVA: NOVAChild) para que las actualizaciones no los sobrescriban.
2. Amplía la plantillaEn la plantilla hija, amplía la plantilla de la página de detalle del artículo y coloca el código del widget debajo del botón de añadir a la cesta. Así se aplica a todos los artículos.
3. Artículo sueltoSolo para un artículo: en el OnPage Composer, arrastra un portlet de texto debajo del botón de añadir a la cesta y pega el código en la vista de código fuente. El OnPage Composer edita cada página por separado.
4. CompruebaVacía la caché o publica el borrador y revisa un artículo.

Código del widget para el aviso de garantía legal

<div data-garantielabel></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Marca-Modelo.svg"
  data-garan-klein="https://…/GARAN-Marca-Modelo-anidada.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Abre el productoEdita el producto en “Commerce” o en la página de la tienda.
2. Añade un bloque de códigoAñade un bloque de código en la sección de información adicional.
3. Pega el códigoPega el código del widget, deja desactivado “Display Source” (mostrar fuente) y guarda.
4. Carga el script de forma centralTambién puedes cargar una sola vez la línea con widget.js mediante la “Code Injection” (inserción de código) de la página de la tienda. El marcador tiene que seguir estando en cada producto.

Código del widget para el aviso de garantía legal

<div data-garantielabel data-darstellung="voll"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Marca-Modelo.svg"
  data-garan-klein="https://…/GARAN-Marca-Modelo-anidada.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Crea un bloque CMSEn “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).
2. Crea un widgetEn “Content” → “Elements” → “Widgets” (Contenido → Elementos → Widgets), crea un widget del tipo “CMS Static Block” (bloque estático CMS) para tu tema.
3. ColócaloComo 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.
4. Vacía la cachéGuarda, vacía la caché y revisa una página de producto.

Código del widget para el aviso de garantía legal

<div data-garantielabel></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Marca-Modelo.svg"
  data-garan-klein="https://…/GARAN-Marca-Modelo-anidada.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Comprueba tu versiónA partir de Gambio 26.09.0, activas ambas etiquetas en los ajustes de la tienda, si quieres por grupo de clientes. Para versiones anteriores a partir de la 4.6, según Gambio existe un módulo. En ese caso no necesitas el widget.
2. Añade el scriptPara el widget, ve a „Einstellungen“ → „Suchmaschinenoptimierung“ → „Tracking-Codes“ (Ajustes → Optimización para buscadores → Códigos de seguimiento) e inserta la línea con widget.js en la sección „Body“. Así se carga en todas las páginas de la tienda.
3. Coloca el marcadorEn la descripción del artículo, abre la vista de código fuente del editor e inserta el marcador <div data-garantielabel></div> donde quieras.
4. CompruebaDespués de guardar, vuelve a abrir la vista de código fuente. Si el marcador sigue ahí, la etiqueta aparece en la página de producto.

Código del widget para el aviso de garantía legal

<div data-garantielabel></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Marca-Modelo.svg"
  data-garan-klein="https://…/GARAN-Marca-Modelo-anidada.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Usa un tema hijoLos cambios en el tema van en un tema hijo para que las actualizaciones no los sobrescriban.
2. Elige el sitioEn templates/catalog/product.tpl, busca la zona debajo del botón de añadir al carrito.
3. Pega el códigoPega ahí el código del widget. Como alternativa, usa un módulo de bloque HTML del marketplace de Addons en el hook displayProductAdditionalInfo.
4. Vacía la cachéVacía la caché en Parámetros avanzados → Rendimiento y comprueba.

Código del widget para el aviso de garantía legal

<div data-garantielabel></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Marca-Modelo.svg"
  data-garan-klein="https://…/GARAN-Marca-Modelo-anidada.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Módulo o tema hijoLa extensión va en un pequeño módulo o en un tema hijo (en theme.php con 'parentTheme' => 'apex') para que las actualizaciones del tema APEX no la sobrescriban. Lo activas en “Extensions” → “Modules” o “Extensions” → “Themes” (Extensiones → Módulos o Temas). Para ello necesitas acceso a los archivos; normalmente se encarga tu agencia.
2. Amplía el bloqueAmplía la plantilla page/details/inc/productmain.html.twig y pega el código del widget en el bloque details_productmain_tobasket después de {{ parent() }}. Con parent(), el botón de añadir a la cesta queda sin cambios.
3. Etiqueta GARAN por productoPara tus propias etiquetas GARAN, crea dos atributos en “Administer Products” → “Attributes” (Administrar productos → Atributos), por ejemplo “GARAN completa” y “GARAN pequeña”, e introduce en el producto, en “Selection” → “Assign Attributes” (Selección → Asignar atributos), las direcciones de los dos archivos. En la plantilla, muestra los valores en data-garan-voll y data-garan-klein.
4. Vacía la cachéVacía la caché de plantillas con vendor/bin/oe-console oe:cache:clear y revisa la página de producto, también las variantes.

Código del widget para el aviso de garantía legal

<div data-garantielabel></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Marca-Modelo.svg"
  data-garan-klein="https://…/GARAN-Marca-Modelo-anidada.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Comprueba tu versiónA partir de plentyShop LTS 5.0.83, ShopBuilder ofrece los widgets “Guarantee of conformity” y “Guarantee of durability”. El widget “Guarantee of durability” muestra la etiqueta GARAN si el fabricante, el modelo y la garantía comercial de durabilidad están rellenados en el artículo.
2. Abre ShopBuilderEn “Shop” » “ShopBuilder”, abre el contenido de la página de artículo (tipo de contenido “Item”, artículo).
3. Inserta el widget CodePara el aviso directamente en la página del artículo, arrastra el widget “Code” debajo del widget “Add to basket” (añadir a la cesta) y pega el código de arriba, con <script2> en lugar de <script>.
4. Guarda y compruebaGuarda y revisa la página del artículo en la tienda en vivo, también al cambiar de variante. Después de las actualizaciones de plentyShop, vuelve a generar los contenidos en “Shop” » “ShopBuilder”.

Código del widget para el aviso de garantía legal

<div data-garantielabel></div>
<script2 src="https://www.garantielabel.app/widget.js" async></script2>

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Marca-Modelo.svg"
  data-garan-klein="https://…/GARAN-Marca-Modelo-anidada.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Comprueba tu versiónEstos pasos se aplican a ePages Base, la versión antigua. Si tienes ePages Now, usa las funciones integradas de arriba.
2. Añade el scriptEn „Einstellungen“ → „Allgemeine Einstellungen“ → „Erweiterte Einstellungen“ (Ajustes → Ajustes generales → Ajustes avanzados), inserta la línea con widget.js en el campo „HTML-Head-Bereich“ (área de cabecera HTML) y guarda. Así se aplica a todas las páginas.
3. Marcador en el productoEn „Produkte“ → „Produkte“ (Productos → Productos), abre el artículo, inserta el marcador <div data-garantielabel></div> en la „Erweiterte Beschreibung“ (descripción ampliada) mediante „Quellcode“ (código fuente), aplica y guarda.
4. CompruebaActualiza la caché de la página con „Ihre Seite anzeigen“ (ver tu sitio) y revisa la página de producto. Después vuelve a abrir la vista de código fuente: si el marcador sigue ahí, el editor no lo ha eliminado.

Código del widget para el aviso de garantía legal

<div data-garantielabel></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Marca-Modelo.svg"
  data-garan-klein="https://…/GARAN-Marca-Modelo-anidada.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. ¿Creator o Website Builder?Si la dirección del editor empieza por cms.e.jimdo.com, usas Jimdo Creator. En Website Builder (builder.e.jimdo.com) no puedes añadir código propio.
2. Añade el elementoEn la página del producto, debajo del artículo de la tienda, elige “Add Element” → “More elements and Add-ons” → “Widget/HTML” (Añadir elemento → Más elementos y complementos → Widget/HTML).
3. Pega el códigoPega el código del widget, para una etiqueta GARAN con las direcciones en data-garan-voll y data-garan-klein, y guarda.
4. Carga el script de forma centralSi quieres, añade una sola vez la línea con widget.js en “Menu” → “Settings” → “Edit Head” (Menú → Ajustes → Editar head). Así, el elemento de cada producto solo necesita el marcador.

Código del widget para el aviso de garantía legal

<div data-garantielabel></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Marca-Modelo.svg"
  data-garan-klein="https://…/GARAN-Marca-Modelo-anidada.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. UbicaciónColoca el código en la página de producto, justo debajo de la zona de compra. La etiqueta aparece exactamente ahí.
2. Guardar y publicarDespués recarga la página de producto y compruébalo aquí abajo.

Código del widget para el aviso de garantía legal

<div data-garantielabel></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Marca-Modelo.svg"
  data-garan-klein="https://…/GARAN-Marca-Modelo-anidada.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>