Theme tags

Theme-Tags haben viele Funktionen, unter anderem:

  • Ausgabe von vorlagenspezifischem HTML-Markup
  • Dem Theme mitteilen, welches Layout und welche Snippets verwendet werden sollen
  • Aufteilung eines zurückgegebenen Arrays in mehrere Seiten.

Inhalt

comment

Ermöglicht es Ihnen, nicht gerenderten Code in einer Liquid-Vorlage zu belassen. Jeglicher Text innerhalb der öffnenden und schließenden Blöcke von comment wird nicht ausgegeben, und jeglicher Liquid-Code darin wird nicht ausgeführt.

Mein Name ist Ulrieke Hustmann{% comment %}, esquire {% endcomment %}

Mein Name ist Ulrieke Hustmann.

echo

Gibt einen Ausdruck in der gerenderten HTML-Datei aus. Dies ist identisch mit dem Umhüllen eines Ausdrucks in {{ und }}, funktioniert aber innerhalb von liquid tags und unterstützt Filter.

{% liquid
if product.featurot_image
  echo product.featurot_image | image_url: width: 500 |image_tag: srcset: nil, width: 500
else
  echo 'product-1' | placeholder_svg_tag
endif %}

<img src="//cdn.versacommerce.de/s/files/1/0159/3350/products/rot_shirt.jpg?v=1398706734" alt="Rot Shirt Small" width="500">

form

Erstellt ein HTML <form> Element zusammen mit den erforderlichen <input> Elementen, um das Formular an einen bestimmten Endpunkt zu übermitteln.

form types and tag parameters

Es gibt viele Arten von Formularen, die in VersaCommerce-Themen erstellt und eingereicht werden können. Das Hinzufügen eines Produkts zum Warenkorb, das Anlegen eines Kundenkontos und das Kommentieren eines Blogartikels erfordern alle <form> Elemente mit unterschiedlichen Attributen und <input> Elementen.

Um verschiedene Formulare zu erstellen, benötigt das Tag {% form %} einen Typ und kann zusätzliche Parameter erfordern. Das Formular, mit dem ein Kommentar zu einem Blog-Artikel abgegeben werden kann, erfordert beispielsweise den Typ new_comment und benötigt ein article Objekt als Parameter.

{% form 'new_comment', article %}
...
{% endform %}

Die verschiedenen Formulartypen und ihre erforderlichen Parameter sind im Folgenden aufgeführt.

Erzeugt ein Formular für die Aktivierung eines Kundenkontos auf der Vorlage activate_account. liquid.

{% form 'activate_Kunde_password' %}
...
{% endform %}

 <form accept-charset="UTF-8" action="https://my-shop.myversacommerce.de/account/activate" method="post">
  
  <input name="form_type" type="hidden" value="activate_Kunde_password">
  
  <input name="utf8" type="hidden" value="✓">
  ...

 </form>

Erzeugt ein Formular für die Übermittlung einer E-Mail über das Liquid-Kontaktformular.

{% form 'Kontakt' %}
...
{% endform %}

 <form accept-charset="UTF-8" action="/Kontakt" class="Kontakt-form" method="post">
  
  <input name="form_type" type="hidden" value="Kontakt">
  
  <input name="utf8" type="hidden" value="✓">
  ...

 </form>

Erzeugt ein Formular zum Anlegen eines neuen Kunden, ohne ein neues Konto zu registrieren. Dieses Formular ist nützlich für die Erfassung von Kundeninformationen, wenn Sie nicht möchten, dass sich die Kunden in Ihrem Geschäft anmelden, z. B. um eine Liste von E-Mails aus einer Newsletter-Anmeldung zu erstellen.

Um ein Formular zur Registrierung eines Kundenkontos zu erstellen, verwenden Sie das Formular create_customer.

{% form 'Kunde' %}
...
{% endform %}

 <form method="post" action="/Kontakt#Kontakt_form" id="Kontakt_form" class="Kontakt-form" accept-charset="UTF-8">
  
  <input type="hidden" value="Kunde" name="form_type">
  
  <input type="hidden" name="utf8" value="✓">
  ...

 </form>

Erzeugt ein Formular zum Anlegen eines neuen Kundenkontos auf der Vorlage register. liquid.

{% form 'create_Kunde' %}
...
{% endform %}

 <form accept-charset="UTF-8" action="https://my-shop.myversacommerce.de/account" id="create_Kunde" method="post">
  
  <input name="form_type" type="hidden" value="create_Kunde">
  
  <input name="utf8" type="hidden" value="✓">
  ...

 </form>

Erzeugt ein Formular zum Erstellen oder Bearbeiten von Kundenkontoadressen auf der Vorlage addresses. liquid. Beim Anlegen einer neuen Adresse ist der Parameter customer. new_address anzugeben. Wenn Sie eine bestehende Adresse bearbeiten, fügen Sie den Parameter address ein.

{% form 'Kunde_address', Kunde.new_address %}
...
{% endform %}

 <form accept-charset="UTF-8" action="/account/addresses/70359392" id="address_form_70359392" method="post">
  
  <input name="form_type" type="hidden" value="Kunde_address">
  
  <input name="utf8" type="hidden" value="✓">
  ...

 </form>

Erzeugt ein Formular für die Anmeldung bei Kundenkonten auf der Vorlage login. liquid.

{% form 'Kunde_login' %}
...
{% endform %}

 <form accept-charset="UTF-8" action="https://my-shop.myversacommerce.de/account/login" id="Kunde_login" method="post">
  
  <input name="form_type" type="hidden" value="Kunde_login">
  
  <input name="utf8" type="hidden" value="✓">
  ...

 </form>

Erzeugt ein Formular auf der Vorlage login. liquid, das den Kunden als Gast zur Kasse zurückleitet, anstatt sich bei einem Konto anzumelden.

{% form 'guest_login' %}
...
{% endform %}

 <form method="post" action="https://my-shop.myversacommerce.de/account/login" id="Kunde_login_guest" accept-charset="UTF-8">
  
  <input type="hidden" value="guest_login" name="form_type">
  
  <input type="hidden" name="utf8" value="✓">
  ...
  
  <input type="hidden" name="guest" value="true">
  
  <input type="hidden" name="checkout_url" value="https://checkout.versacommerce.de/store-id/checkouts/session-id?step=Kontakt_information">

 </form>

Erzeugt ein Formular, in dem Kunden ihr bevorzugtes Land auswählen können, damit sie die entsprechende Sprache und Währung angezeigt bekommen. Innerhalb des Formulars können Sie zwei verschiedene Selektoren erstellen:

  • Ein Länderwähler
  • Ein Sprachwähler

Sie können einen Länderselektor erstellen, indem Sie die Attribute available_countries und country des Lokalisierungsobjekts verwenden. Wenn Sie eine Auswahl treffen, wird die mit dem ausgewählten Land verbundene Währung aktualisiert, und wenn die aktuell ausgewählte Sprache nicht verfügbar ist, wird sie auf die Standardsprache des ausgewählten Landes aktualisiert.

Zum Beispiel:

{% form 'localization' %}
  <select name="country_code">
    {% for country in localization.available_countries %}
      <option value="{{ country.currency.iso_code }}" {%- if country="=" localization.country %} selected {% endif> {{ country.name }} ({{ country.currency.iso_code }}) - {{ country.currency.symbol }} </option>
    {% endfor %}
  </select>

  <input type="submit" value="Update">
{% endform %}
Wenn Sie Kunden nach dem Absenden des Formulars auf eine bestimmte Seite weiterleiten möchten, können Sie den Parameter return_to form tag verwenden.

Sie können einen Sprachselektor mit den Attributen available_languages und language des Lokalisierungsobjekts erstellen.

Zum Beispiel:

{% form 'localization' %}
  <select name="language_code">
    {% for language in localization.available_languages %}
      <option value="{{ language.iso_code }}" {%- if language="=" localization.language %} selected {% endif> {{ language.endonym_name }} </option>
    {% endfor %}
  </select>

  <input type="submit" value="Update">
{% endform %}
Wenn Sie Kunden nach dem Absenden des Formulars auf eine bestimmte Seite weiterleiten möchten, können Sie den Parameter return_to form tag verwenden.

Erzeugt ein Formular zum Erstellen eines neuen Kommentars in der Vorlage article. liquid. Benötigt das Objekt article als Parameter.

{% form 'new_comment', article %}
...
{% endform %}

 <form accept-charset="UTF-8" action="/blogs/news/10582441-my-article/comments" class="comment-form" id="article-10582441-comment-form" method="post">
  
  <input name="form_type" type="hidden" value="new_comment">
  
  <input name="utf8" type="hidden" value="✓">
  ...

 </form>

Erzeugt ein Formular, um eine Produktvariante in den Warenkorb zu legen. Erfordert ein product Objekt als Parameter.

{% form "product", product %}
  ...
{% endform %}

 <form method="post" action="/cart/add" enctype="multipart/form-data">
  
  <input type="hidden" name="form_type" value="product">
  
  <input type="hidden" name="utf8" value="✓">
  ...

 </form>
Lesen Sie über die Erstellung von Produktvorlagen, um ein Beispiel für die Verwendung des Produktformulars zu erhalten.

Erzeugt ein Formular zur Wiederherstellung eines verlorenen Passworts auf der Vorlage login. liquid.

{% form 'recover_Kunde_password' %}
...
{% endform %}

 <form accept-charset="UTF-8" action="/account/recover" method="post">
  
  <input name="form_type" type="hidden" value="recover_Kunde_password">
  
  <input name="utf8" type="hidden" value="✓">
  ...

 </form>

Erzeugt ein Formular auf der Vorlage customers/reset_password. liquid, mit dem ein Kunde sein Passwort zurücksetzen kann.

{% form 'reset_Kunde_password' %}
...
{% endform %}

 <form method="post" action="https://my-shop.myversacommerce.de/account/account/reset" accept-charset="UTF-8">
  
  <input type="hidden" value="reset_Kunde_password" name="form_type">
  
  <input name="utf8" type="hidden" value="✓">
  ...
  
  <input type="hidden" name="token" value="408b680ac218a77d0802457f054260b7-1452875227">
  
  <input type="hidden" name="id" value="1080844568">

 </form>

Erzeugt ein Formular auf der Vorlage password. liquid für die Eingabe eines passwortgeschützten Schaufensters.

{% form 'storefront_password' %}
...
{% endform %}

 <form method="post" action="/password" id="login_form" class="storefront-password-form" accept-charset="UTF-8">
  
  <input type="hidden" value="storefront_password" name="form_type">
  
  <input type="hidden" name="utf8" value="✓">
  ...

 </form>

Modifying form attributes

Wenn Sie ein Element <form> erstellen, können Sie seine Standardattribute ändern oder neue Attribute hinzufügen. Sie können dies tun, indem Sie das Attribut, das Sie hinzufügen oder ändern möchten, als benannten Parameter in das Formular-Tag aufnehmen und ihm einen Wert zuweisen.

{% form "product", product, id: "newID", class: "custom-class", data-example: "100" %}
  ...
{% endform %}

 <form method="post" action="/cart/add" id="newID" class="custom-class" data-example="100" enctype="multipart/form-data">
  
  <input type="hidden" name="form_type" value="product">
  
  <input type="hidden" name="utf8" value="✓">
    ...

 </form>

Sie können auch Liquid-Variablen als Parameter verwenden:

{% capture 'form_id' %}addToCartForm-{{ section.id }}{% endcapture %}

{% form 'product', product, id:form_id %}
...
{% endform %}

 <form action="/cart/add" method="post" enctype="multipart/form-data" id="addToCartForm-36197306239">
  
  <input type="hidden" name="form_type" value="product">
  
  <input type="hidden" name="utf8" value="✓">
    ...

 </form>

Redirecting customers with the return_to form tag parameter

Standardmäßig leitet jeder Formulartyp Ihre Kunden zu einer bestimmten Seite weiter. Der Formulartyp product leitet zum Beispiel zur Warenkorb-Seite weiter.

Sie können den Parameter return_to form tag verwenden, um auf eine Seite umzuleiten, die Sie auf eine der folgenden Arten angeben:

  • Verwenden Sie 'back', um zu derselben Seite zurückzukehren, auf der sich Ihre Kunden befunden haben, bevor sie das Formular abgeschickt haben.
  • Verwenden Sie einen relativen Pfadwert, zum Beispiel '/collections/all'.
  • Verwenden Sie ein routes -Attribut, zum Beispiel routes. all_products_collection_url.

Im folgenden Beispiel leitet return_to das Währungsformular auf die Seite mit der gesamten Produktpalette um:

{% form 'currency', return_to: routes.all_products_collection_url %}
    {{ form | currency_selector }}
    <button type="submit">Update</button>
  {% endform %}

layout

Fügen Sie {% layout 'alternate' %} am Anfang einer Vorlagendatei ein, um eine alternative Layout-Datei aus dem Layout-Ordner Ihres Themas zu verwenden. Wenn Sie kein alternatives Layout definieren, wird standardmäßig die Vorlagendatei theme. liquid verwendet:

{% layout 'full-width' %}

Wenn Sie möchten, dass eine Vorlage keine Layout-Datei verwendet, können Sie none als Layout angeben:

{% layout none %}

liquid

Ermöglicht das Schreiben mehrerer Tags innerhalb eines Satzes von Begrenzungszeichen.

{% liquid
case section.blocks.size
when 1
  assign column_size = ''
when 2
  assign column_size = 'die Hälfte'
when 3
  assign column_size = 'ein Drittel'
else
  assign column_size = 'ein Viertel'
endcase %}

Verwenden Sie das Tag, um einen Ausdruck innerhalb eines Tags {% liquid %} auszugeben.

paginate

Die Aufteilung von Produkten, Blogartikeln und Suchergebnissen auf mehrere Seiten ist ein notwendiger Bestandteil des Themendesigns, da Sie in jeder for-Schleife auf 50 Ergebnisse pro Seite beschränkt sind.

Der Tag paginate arbeitet mit dem Tag for zusammen, um den Inhalt auf mehrere Seiten aufzuteilen. Er muss einen for Tag-Block umschließen, der ein Array in einer Schleife durchläuft, wie im folgenden Beispiel gezeigt:

{% paginate collection.products by 5 %}
  {% for product in collection.products %}
    
 <!--Produktdetails hier anzeigen -->
  {% endfor %}
{% endpaginate %}

Auf den Parameter by folgt eine ganze Zahl zwischen 1 und 50, die dem Tag paginate mitteilt, wie viele Ergebnisse pro Seite ausgegeben werden sollen.

Innerhalb der paginate -Tags können Sie auf die Attribute des paginate-Objekts zugreifen. Dazu gehören auch die Attribute zur Ausgabe der Links, die für die Navigation innerhalb der generierten Seiten erforderlich sind.

raw

Ermöglicht die Ausgabe von Liquid-Code auf einer Seite, ohne geparst zu werden.

{{ 5 | plus: 6 }} ist gleich 11.

render

Rendert ein Snippet aus dem Snippets-Ordner eines Themas.

{% render 'snippet-name' %}

Beachten Sie, dass Sie den Namen der Datei nicht schreiben müssen . liquid Erweiterung.

Wenn ein Snippet gerendert wird, hat der darin enthaltene Code nicht automatisch Zugriff auf die Variablen, die über Variablen-Tags in der übergeordneten Vorlage des Snippets zugewiesen wurden. Auch auf Variablen, die innerhalb des Snippets zugewiesen werden, kann der Code außerhalb des Snippets nicht zugreifen. Diese Kapselung erhöht die Leistung und trägt dazu bei, dass der Themencode leichter zu verstehen und zu pflegen ist.

Wenn ein Snippet mit dem Render-Tag gerendert wird, darf das veraltete Include-Tag nicht innerhalb des Snippets verwendet werden.

Passing variables to a snippet

Variablen, die über Variablen-Tags zugewiesen werden, können an ein Snippet übergeben werden, indem sie als Parameter im Tag render aufgeführt werden:

{% assign my_variable = 'Äpfel' %}
{% render 'name', my_variable: my_variable, my_other_variable: 'Mandarinen' %}

Globale Objekte müssen nicht vererbt werden. Sie sind von allen Dateien aus zugänglich.

Die Zuweisung einer Variablen innerhalb des Snippets, die auch in der übergeordneten Vorlage zugewiesen ist, überschreibt nicht ihren Wert in der übergeordneten Vorlage.

The with parameter

Mit den Parametern with und as kann ein einzelnes Objekt an ein Snippet übergeben werden:

{% assign featurot_product = all_products['product_handle'] %}
{% render 'product' with featurot_product as product %}

Im obigen Beispiel enthält die Variable product im Snippet den Wert von featured_product in der übergeordneten Vorlage.

The for parameter

Ein Snippet kann für jeden Wert eines aufzählbaren Objekts einmal gerendert werden, indem die Parameter for und as verwendet werden:

{% assign variants = product.variants %}
{% render 'variant' for variants as variant %}

Im obigen Beispiel wird das Snippet für jede Produktvariante einmal gerendert, und die Variable variant enthält ein Produktvariantenobjekt innerhalb des Snippets.

Wenn Sie den Parameter for verwenden, ist das Objektforloop innerhalb des Snippets zugänglich.

section

Rendert einen Abschnitt aus dem Abschnittsordner eines Themas.

{% section 'header' %}

 <div id="shopify-section-header" class="shopify-section">
  
  <!-- Inhalt von sections/header.liquid -->

 </div>

Das Einfügen von Abschnittsdateien mit dem Tag {% section %} bewirkteinen "statischen" Abschnitt wiedergeben. Weitere Informationen über Abschnitte und deren Einbindungin Ihrem Thema, lesen Sie die Dokumentation über Themenabschnitte.

Jeder Abschnitt unterstützt abschnittsspezifische Tags für die Definition von Einstellungen, Stilen und Skripten, die nur in einer Abschnittsdatei vorhanden sind.

style

Der Liquid {% style %} -Tag rendert einen HTML <style> -Tag mit einem VersaCommerce-Datenattribut. Die Platzierung von Farbeinstellungen innerhalb eines {% style %} -Tags ermöglicht es Ihnen, Farbaktualisierungen live vom Theme-Editor aus vorzunehmen, ohne die Seite vollständig aktualisieren zu müssen.

{% style %}
  .hero__background-color-container {
    background-color: {{ section.settings.background_color }}
  }
{% endstyle %}
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.