Widget-Vorlagen

Das Widget-Vorlagensystem

Mit dem Vorlagensystem bestimmen Sie vollständig, wie Garantieoptionen, Warenkorbartikel, Bestellstatusanzeigen und Versandschutz in Ihrem Shop dargestellt werden. Jeder der 12 Widget-Typen kann eine eigene HTML-Vorlage haben, die Variablen im Handlebars-Stil und Data-Attribute für die Interaktivität nutzt.

---

Vorlagenverwaltung

Sie öffnen die Vorlagenverwaltung unter Dashboard → Widgets → Vorlagen. Sie bietet einen Monaco-Code-Editor mit Syntaxhervorhebung und Autovervollständigung, einen Vorschaubereich und eine Dokumentation der verfügbaren Variablen je Widget-Typ.

---

Referenz der Data-Attribute

Data-Attribute verbinden Vorlagenelemente mit dem JavaScript des Umbrella-Widgets.

Modal-Auslöser

Attribut	Beschreibung
data-umbrella-modal-trigger	Öffnet beim Klick ein Modal. Wert: "selector" oder "info".
data-umbrella-modal-close-btn	Schließt das Modal beim Klick.

Auswahl der Garantieoption

Attribut	Beschreibung
data-umbrella-options	Erforderlich. Container für die Optionsauswahl.
data-umbrella-option	Erforderlich. Kennzeichnet eine einzelne auswählbare Option.
data-umbrella-option-price	Zeigt den Preis der Option an (wird bei Variantenwechsel aktualisiert).
data-umbrella-selected-state	Ändert die Sichtbarkeit je nach Auswahlzustand.
data-umbrella-selected-warranty-title	Zeigt den Titel der ausgewählten Garantie an.
data-umbrella-selected-warranty-price	Zeigt den Preis der ausgewählten Garantie an. Verwenden Sie "rounded" oder "withCents".

Warenkorbaktionen

Attribut	Beschreibung
data-umbrella-add-to-cart-btn	In Modals/im Warenkorb erforderlich. Legt die ausgewählte Garantie in den Warenkorb.
data-umbrella-decline-btn	In Modals/im Warenkorb erforderlich. Lehnt die Garantie ab.

Versandschutz

Attribut	Beschreibung
data-umbrella-shipping-protection-checkbox	Erforderlich. Kontrollkästchen zum Aktivieren des Versandschutzes.
data-umbrella-shipping-protection-checkbox-label	Erforderlich. Beschriftung des Kontrollkästchens.

Aufklappbare Bereiche

Attribut	Beschreibung
data-umbrella-expandable-section	Container für einen aufklappbaren Bereich.
data-umbrella-expandable-content	Inhalt, der ein- und ausgeblendet wird.
data-umbrella-expandable-toggle	Schaltfläche, die den Inhalt umschaltet.

Akkordeon

Attribut	Beschreibung
data-umbrella-collapsible-accordion	Akkordeon-Container.
data-umbrella-collapsible-item	Einzelnes Akkordeon-Element.
data-umbrella-collapsible-button	Umschalt-Schaltfläche des Elements.
data-umbrella-collapsible-content	Inhaltsbereich des Elements.

Dropdown-Menü

Attribut	Beschreibung
data-umbrella-dropdown-menu	Dropdown-Container.
data-umbrella-dropdown-toggle	Öffnet bzw. schließt das Dropdown.
data-umbrella-dropdown-content	Inhaltsbereich des Dropdowns.
data-umbrella-dropdown-option-value	Wert jeder Dropdown-Option.
data-umbrella-dropdown-selected-value	Zeigt den ausgewählten Wert an.
data-umbrella-dropdown-unselected-placeholder	Platzhalter, wenn nichts ausgewählt ist.

---

Referenz der Vorlagenvariablen

Variablen verwenden Handlebars-Syntax: {{variable}} für Text, {{{variable}}} für HTML-sichere Inhalte (Preise).

Produkt

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

Ausgewählte Variante

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

Garantie

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

Optionsschleife ({{#each options}})

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

Ausgewählte Garantie (Warenkorb)

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

Flags für den Anzeigemodus

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

Kontext der Warenkorbposition

{{isProtectedProductLineItem}}, {{isWarrantyLineItem}}

Warenkorbpreise

{{isMultipleQuantity}}, {{{warrantySingleLineItemPrice}}}, {{{warrantyTotalLineItemPrice}}} (dazu die Varianten „rounded“ und „withCents“)

Deckungs-Flags

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

Police (Bestellstatus)

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

---

Verfügbare Variablen je Widget-Typ

Widget-Typ	Produkt	Variante	Garantie	Optionen	Deckung	Anzeigemodus	Position	Warenkorb	Police
pdp_widget	Ja	Ja	Ja	Ja	Ja	Ja	—	—	—
selector_modal	Ja	Ja	Ja	Ja	Ja	Teilweise	—	—	—
info_modal	Ja	Ja	Ja	—	Ja	—	—	—	—
cart_protected	Ja	Ja	Ja	—	Ja	—	Ja	Ja	—
cart_unprotected	Ja	Ja	Ja	Ja	Ja	Ja	—	Ja	—
order_status	—	—	Ja	—	Ja	—	—	—	Ja
order_status_modal	—	—	Ja	—	Ja	—	—	—	Ja
order_status_post_purchase	—	—	Ja	Ja	Ja	—	—	—	—
order_status_post_purchase_modal	—	—	Ja	Ja	Ja	—	—	—	—
shipping_protection	—	—	Ja	—	Ja	—	—	—	—
shipping_protection_modal	—	—	Ja	—	Ja	—	—	—	—

---

Tipps

• Verwenden Sie für Preise dreifache geschweifte Klammern {{{price}}}, damit HTML-Entitäten korrekt dargestellt werden
• Fügen Sie immer data-umbrella-options und data-umbrella-option ein, damit die Optionsauswahl funktioniert
• Testen Sie mit verschiedenen Produktvarianten, um die Preisaktualisierung zu prüfen
• Verwenden Sie {{#if isInlineMode}} für Layouts, die vom Anzeigemodus abhängen
• Fügen Sie in Modals data-umbrella-modal-close-btn ein

---

Verwandte Themen

• Widget-Konfiguration — Verhalten und Anzeigeoptionen der Widgets
• Shopify-Theme-Erweiterung — PDP-Widget über das Theme-Embed
• Shopify-Checkout-Erweiterungen — Einstellungen der Checkout-Erweiterung
• Shopify-Bestellerweiterungen — Anzeige des Bestellstatus-Widgets