Aggiungi l'avviso sulla garanzia legale su Webflow

Il codice per Webflow

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

Altre opzioni, come visualizzazione e lingua, le imposti nel generatore di codice.

Passo dopo passo in Webflow

1. Apri il template del prodotto
   Nel Designer apri il “Products Template” in Pages.
2. Aggiungi un Code Embed
   Trascina l'elemento “Code Embed” dal pannello Add sotto il pulsante Add to Cart.
3. Incolla il codice
   Incolla il codice del widget e salva.
4. Pubblica
   Pubblica il sito. Gli script incorporati non vengono eseguiti nel Designer stesso.

I nomi dei menu sono riportati come nell'interfaccia inglese; nella versione italiana possono essere diversi.

Da sapere su Webflow

• Code Embed richiede un piano Site o Workspace a pagamento.
• Se carichi contenuti tramite script (come elenchi con “Load more”), richiama poi window.garantielabelWidget.rendern(), così vengono disegnati i nuovi segnaposto.

Dove va l’avviso in Webflow

I prodotti di Webflow Ecommerce sono una Collection, proprio come nel CMS. Il “Products Template” è la sua pagina Collection. Un Code Embed lì compare su ogni pagina prodotto, e lì puoi inserire i campi del prodotto nel codice. Puoi anche aggiungere codice a un elemento rich text: posiziona il cursore, apri il menu di inserimento con l’icona del più e fai clic sul pulsante del codice personalizzato.

Per un avviso su ogni pagina, trasforma il tuo footer in un componente. Webflow cita barre di navigazione e footer come esempi tipici. Un Code Embed dentro questo componente compare ovunque il componente sia usato. Le modifiche al componente principale aggiornano tutte le istanze.

La riga dello script può anche stare in un unico punto centrale: in “Site settings → Custom code”, nella sezione “Footer code”. Webflow la aggiunge allora prima del tag di chiusura </body> di ogni pagina e consiglia questo punto per gli script, perché la pagina carica prima i suoi contenuti. Per una singola pagina, “Page settings” ha una sezione “Before </body> tag”. Il segnaposto deve comunque trovarsi nel design.

Varianti e identificativo del modello in Webflow Ecommerce

Le varianti nascono da un massimo di tre set di opzioni per prodotto, con al massimo 50 varianti per prodotto. Webflow tratta ogni variante come un prodotto separato con i propri campi, tra cui SKU, prezzo e immagine. Ogni variante conta inoltre per il limite di elementi del tuo Site plan.

I campi personalizzati, per esempio per gli indirizzi delle etichette GARAN, li aggiungi nelle impostazioni della Collection Products. Un campo di questo tipo appartiene al prodotto. Importante: secondo Webflow, gli embed dinamici con campi Ecommerce non si aggiornano in base alla variante scelta dal visitatore. Un’etichetta GARAN presa da un campo del prodotto resta quindi la stessa per tutte le varianti. Se le tue varianti hanno identificativi del modello diversi, crea un prodotto separato per ogni modello. Ogni pagina prodotto mostra così l’etichetta giusta.

Errori tipici in Webflow

• L’elemento Code Embed e il codice personalizzato in Site settings e Page settings richiedono un Workspace Core, Growth, Agency o Freelancer oppure un Site plan attivo.
• Per uno <script> in un embed, il Designer mostra solo un segnaposto. Il codice viene eseguito nell’anteprima, ma ha effetto sul sito live solo dopo la pubblicazione. Nella vista canvas espansa (expand canvas view) il codice personalizzato non viene eseguito affatto.
• Non inserire tag <html>, <head> o <body> nel codice personalizzato. Secondo Webflow, questo rompe il layout.
• I siti Webflow pubblicati di recente includono già jQuery 3.5.1. Secondo Webflow, importare un’altra versione può causare conflitti. Il widget non ha bisogno di jQuery.
• Un Code Embed può contenere fino a 50.000 caratteri, così come le sezioni di codice head e footer. Il codice del widget resta molto al di sotto, anche con gli indirizzi GARAN.

Altre fonti

• Webflow Help: Custom code embed (in inglese)
• Webflow Help: Custom code in head and body tags (in inglese)
• Webflow Help: Use dynamic data in custom code embeds (in inglese)
• Webflow Help: Create product options and variants (in inglese)
• Webflow Help: Ecommerce Collections overview (in inglese)
• Webflow Help: Components overview (in inglese)

L'avviso sulla garanzia legale nella conferma d'ordine

Secondo gli orientamenti della Commissione, l'avviso dovrebbe comparire anche nell'e-mail di conferma. Le e-mail degli ordini di Webflow Ecommerce le personalizzi nelle impostazioni Ecommerce, tra i modelli e-mail. Lì la grafica ufficiale si può aggiungere come immagine. Un semplice link difficilmente vale come supporto durevole (CGUE, causa C-49/11, Content Services); la strada più sicura è inserire l'avviso direttamente nell'e-mail come immagine, testo o allegato. Trovi i file ufficiali nella nostra pagina di download.

Garanzia del produttore? Allora aggiungi l'etichetta GARAN

Se il produttore offre gratuitamente una garanzia commerciale di durabilità superiore a due anni sull'intero bene, anche l'etichetta GARAN va sulla pagina prodotto. Con il generatore di etichette GARAN la crei in pochi secondi da anni, marchio e modello, le prime 3 etichette gratis e senza registrazione. Sotto ogni etichetta pronta ricevi un codice di incorporamento con indirizzi delle immagini permanenti: non carichi nulla e lo incolli in Webflow come mostrato sopra.

Preferisci usare i tuoi file? Allora carica la versione completa e quella annidata nella libreria multimediale di Webflow e inserisci gli indirizzi nel codice del widget:

<div data-garantielabel
  data-garan-voll="https://…/GARAN-MX-500.svg"
  data-garan-klein="https://…/GARAN-MX-500-annidata.svg"></div>

Il widget mostra quindi la versione annidata sotto l'avviso sulla garanzia legale, e un clic apre l'etichetta GARAN completa.

Domande frequenti