Template dei widget

Sistema di template dei widget

Il sistema di template ti dà il pieno controllo su come vengono mostrati nel tuo negozio online le opzioni di garanzia, gli articoli del carrello, lo stato dell’ordine e la protezione spedizione. Ognuno dei 12 tipi di widget può avere un template HTML personalizzato che usa variabili in stile Handlebars e data attribute per l’interattività.

---

Gestione dei template

Accedi alla gestione dei template da Dashboard → Widget → Template. Offre un editor di codice Monaco con evidenziazione della sintassi e completamento automatico, un pannello di anteprima e la documentazione delle variabili disponibili per ciascun tipo di widget.

---

Riferimento dei data attribute

I data attribute collegano gli elementi del template al JavaScript del widget Umbrella.

Apertura della modale

Attributo	Descrizione
data-umbrella-modal-trigger	Apre una modale al clic. Valore: "selector" o "info".
data-umbrella-modal-close-btn	Chiude la modale al clic.

Selezione dell’opzione di garanzia

Attributo	Descrizione
data-umbrella-options	Obbligatorio. Contenitore dei selettori delle opzioni.
data-umbrella-option	Obbligatorio. Contrassegna una singola opzione selezionabile.
data-umbrella-option-price	Mostra il prezzo dell’opzione (si aggiorna al cambio di variante).
data-umbrella-selected-state	Cambia la visibilità in base allo stato di selezione.
data-umbrella-selected-warranty-title	Mostra il titolo della garanzia selezionata.
data-umbrella-selected-warranty-price	Mostra il prezzo della garanzia selezionata. Usa "rounded" o "withCents".

Azioni del carrello

Attributo	Descrizione
data-umbrella-add-to-cart-btn	Obbligatorio nelle modali/nel carrello. Aggiunge al carrello la garanzia selezionata.
data-umbrella-decline-btn	Obbligatorio nelle modali/nel carrello. Rifiuta la garanzia.

Protezione spedizione

Attributo	Descrizione
data-umbrella-shipping-protection-checkbox	Obbligatorio. Casella di spunta per attivare la protezione spedizione.
data-umbrella-shipping-protection-checkbox-label	Obbligatorio. Etichetta della casella di spunta.

Sezioni espandibili

Attributo	Descrizione
data-umbrella-expandable-section	Contenitore della sezione espandibile.
data-umbrella-expandable-content	Contenuto che si mostra/nasconde.
data-umbrella-expandable-toggle	Pulsante che mostra/nasconde il contenuto.

Accordion

Attributo	Descrizione
data-umbrella-collapsible-accordion	Contenitore dell’accordion.
data-umbrella-collapsible-item	Singolo elemento dell’accordion.
data-umbrella-collapsible-button	Pulsante di apertura/chiusura dell’elemento.
data-umbrella-collapsible-content	Area dei contenuti dell’elemento.

Menu a discesa

Attributo	Descrizione
data-umbrella-dropdown-menu	Contenitore del menu a discesa.
data-umbrella-dropdown-toggle	Apre/chiude il menu a discesa.
data-umbrella-dropdown-content	Pannello dei contenuti del menu a discesa.
data-umbrella-dropdown-option-value	Valore di ciascuna opzione del menu a discesa.
data-umbrella-dropdown-selected-value	Mostra il valore selezionato.
data-umbrella-dropdown-unselected-placeholder	Testo segnaposto quando non è selezionato nulla.

---

Riferimento delle variabili di template

Le variabili usano la sintassi Handlebars: {{variable}} per il testo, {{{variable}}} per i contenuti HTML sicuri (prezzi).

Prodotto

{{productImage}}, {{productName}}, {{productType}}, {{productHandle}}, {{productId}}, {{productQuantity}}, {{{productPrice}}}

Variante selezionata

{{selectedVariantId}}, {{selectedVariantTitle}}, {{{selectedVariantPrice}}}

Garanzia

{{warrantyId}}, {{warrantyTitle}}, {{{warrantyDescription}}}, {{warrantyImage}}, {{warrantyProductHandle}}, {{warrantyProductUrl}}

Ciclo delle opzioni ({{#each options}})

{{serviceLevel}}, {{term}}, {{title}}, {{{description}}}, {{imageUrl}}, {{isNoCoverageOption}}, {{{priceRounded}}}, {{{priceWithCents}}}, {{{totalPrice}}}, {{variantId}}

Garanzia selezionata (carrello)

{{warrantyTerm}}, {{warrantyServiceLevel}}, {{{warrantyPrice}}}, {{{warrantyPriceRounded}}}, {{warrantyTermDisplay}}, {{warrantyVariantId}}

Flag della modalità di visualizzazione

{{isInlineMode}}, {{isIndividualMode}}, {{isModalMode}}, {{{cheapestPrice}}}, {{{cheapestPriceRounded}}}

Contesto della riga d’ordine

{{isProtectedProductLineItem}}, {{isWarrantyLineItem}}

Prezzi del carrello

{{isMultipleQuantity}}, {{{warrantySingleLineItemPrice}}}, {{{warrantyTotalLineItemPrice}}} (più le varianti rounded e withCents)

Flag della copertura

{{isEligible}}, {{coversManufacturerDefect}}, {{coversAccidentalDamage}}, {{coversWearAndTear}}, {{coversSpillOrStain}}, {{coversLostOrStolen}}

Polizza (stato dell’ordine)

{{policyId}}, {{policyNumber}}, {{policyStatus}}, {{policyStartDate}}, {{policyEndDate}}, {{isActive}}, {{claimWindowOpen}}, {{daysRemaining}}, {{orderName}}, {{fileClaimUrl}}

---

Variabili disponibili per tipo di widget

Tipo di widget	Prodotto	Variante	Garanzia	Opzioni	Copertura	Modalità di visualizzazione	Riga d’ordine	Carrello	Polizza
pdp_widget	Sì	Sì	Sì	Sì	Sì	Sì	—	—	—
selector_modal	Sì	Sì	Sì	Sì	Sì	Parziale	—	—	—
info_modal	Sì	Sì	Sì	—	Sì	—	—	—	—
cart_protected	Sì	Sì	Sì	—	Sì	—	Sì	Sì	—
cart_unprotected	Sì	Sì	Sì	Sì	Sì	Sì	—	Sì	—
order_status	—	—	Sì	—	Sì	—	—	—	Sì
order_status_modal	—	—	Sì	—	Sì	—	—	—	Sì
order_status_post_purchase	—	—	Sì	Sì	Sì	—	—	—	—
order_status_post_purchase_modal	—	—	Sì	Sì	Sì	—	—	—	—
shipping_protection	—	—	Sì	—	Sì	—	—	—	—
shipping_protection_modal	—	—	Sì	—	Sì	—	—	—	—

---

Suggerimenti

• Usa le triple graffe {{{price}}} per i prezzi, così le entità HTML vengono mostrate correttamente
• Includi sempre data-umbrella-options e data-umbrella-option perché la selezione delle opzioni funzioni
• Prova con diverse varianti di prodotto per verificare l’aggiornamento dei prezzi
• Usa {{#if isInlineMode}} per layout specifici di una modalità di visualizzazione
• Includi data-umbrella-modal-close-btn nelle modali

---

Correlati

• Configurazione dei widget — Comportamento e opzioni di visualizzazione dei widget
• Estensione del tema Shopify — Widget PDP tramite embed del tema
• Estensioni del checkout Shopify — Impostazioni delle estensioni del checkout
• Estensioni dell’ordine Shopify — Visualizzazione del widget di stato dell’ordine