Theme tags

Theme tags

Theme-Tags haben viele Funktionen, darunter:
  1. Gibt HTML-Tags für die Vorlage aus.
  2. Dem Theme mitteilen, welches Layout und welche Snippets verwendet werden sollen.
  3. Teilen eines zurückgegebenen Arrays in mehrere Seiten.


comment

Text innerhalb der einleitenden und schließenden Kommentarblöcke wird nicht ausgegeben, und der Liquid-Code wird nicht ausgeführt.

{% comment %} ... {% endcomment %}
Das ist die erste Zeile.
{% comment %}
Das ist die zweite Zeile.
Das ist die dritte Zeile.
{% endcomment %}
Das ist die vierte Zeile
Das ist die erste Zeile.
Das ist die vierte Zeile.


include

Fügt ein Snippet aus dem Snippets-Ordner eines Designs ein.

{% include 'my-snippet-file' %}


Beachten Sie, dass Sie die .liquid-Erweiterung der Datei nicht schreiben müssen.


Wenn Sie ein Snippet einschließen, hat der darin enthaltene Code Zugriff auf die Variablen in der übergeordneten Vorlage.


Mehrere Variablen in ein Snippet aufnehmen

Es gibt zwei Möglichkeiten, mehrere Variablen in ein Snippet aufzunehmen. Sie können sie in verschiedenen Zeilen zuweisen und einfügen, wodurch sie in der übergeordneten Vorlage erstellt werden:

{% assign my_variable = 'apples' %}
{% assign my_second_variable = 'oranges' %}
{% include 'snippet' %}
{% endif %}

Oder Sie können Variablen in derselben Zeile erstellen, in die Sie das Snippet einschließen:

{% include 'snippet', my_variable: 'apples', my_other_variable: 'oranges' %}


form

Erstellt ein HTML-Element form zusammen mit den erforderlichen input -Elementen, um das Formular an einen bestimmten Endpunkt zu senden.

form typen und Tag-Parameter

Es gibt viele Arten von form, die in Versacommerce-Designs erstellt und übermittelt werden können. Um ein Produkt in den Warenkorb zu legen, ein Kundenkonto zu erstellen und einen Blogartikel zu kommentieren, sind alle form -Elemente mit unterschiedlichen Attributen und input -Elementen erforderlich.


Um verschiedene Formen zu erstellen, erfordert das Tag {% form%} einen Typ und möglicherweise zusätzliche Parameter. Beispielsweise erfordert die Form, die zum Senden eines Kommentars zu einem Blogartikel verwendet wird, den Typ von new_comment und ein Artikelobjekt als Parameter.

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

Die verschiedenen form-typen und ihre erforderlichen Parameter sind unten aufgeführt.


aktivieren customer password

Erzeugt ein Form zum Aktivieren eines Kundenkontos in der Vorlage "activieren_account.liquid".

{% form 'activate_customer_password' %}
...
{% endform %}
<form accept-charset="UTF-8" action="https://my-shop.versacommerce.de/account/activate" method="post">
  <input name="form_type" type="hidden" value="activate_customer_password" />
  <input name="utf8" type="hidden" value="✓" />
  ...
</form>
{% endform %}

contact

Erzeugt ein Form zum Senden einer E-Mail über das Liquid-Kontaktform.

{% form 'contact' %}
...
{% endform %}
<form accept-charset="UTF-8" action="/contact" class="contact-form" method="post">
  <input name="form_type" type="hidden" value="contact" />
  <input name="utf8" type="hidden" value="✓" />
  ...
</form>

currency

Erzeugt ein Formular, mit dem Ihr Kunde die Währung in Ihrer Storefront ändern kann.


Sie können dieses Form mit dem Currency_selector-Filter verwenden oder eine eigene Währungsauswahl mithilfe von cart.currency und shop.enabled_currencies erstellen.


Im folgenden Beispiel wird der Currency_selector-Filter mit dem Währungsform verwendet:

{% form 'currency' %}
  {{ form | currency_selector }}
  <button type="submit">Submit</button>
{% endform %}


Im folgenden Beispiel wird eine angepasste Währungsauswahl mit dem Währungsform verwendet.

{% form 'currency' %}
  <select name="currency">
    {% for currency in shop.enabled_currencies %}
      {% if currency == cart.currency %}
        <option selected="true">{{currency.iso_code}}</option>
      {% else %}
        <option>{{currency.iso_code}}</option>
      {% endif %}
    {% endfor %}
  </select>
  <button type="submit">Submit</button>
{% endform %}

customer

Erzeugt ein Form zum Erstellen eines neuen Kunden, ohne ein neues Konto zu registrieren. Mit diesem Form können Sie Kundendaten sammeln, wenn sich Kunden nicht bei Ihrem Geschäft anmelden möchten, z. B. um eine Liste mit E-Mails von einer Newsletter-Anmeldung zu erstellen.


Verwenden Sie zum Erstellen eines Formes, das ein Kundenkonto registriert, das Form create_customer.

{% form 'customer' %}
...
{% endform %}
<form method="post" action="/contact#contact_form" id="contact_form" class="contact-form" accept-charset="UTF-8">
  <input type="hidden" value="customer" name="form_type">
  <input type="hidden" name="utf8" value="✓">
  ...
</form>

create_customer

Erzeugt ein Form zum Erstellen eines neuen Kundenkontos in der Vorlage register.liquid.

{% form 'create_customer' %}
...
{% endform %}
<form accept-charset="UTF-8" action="https://my-shop.versacommerce.de/account" id="create_customer" method="post">
  <input name="form_type" type="hidden" value="create_customer" />
  <input name="utf8" type="hidden" value="✓" />
  ...
</form>

customer_address

Erzeugt ein Form zum Erstellen oder Bearbeiten von Kundenkontenadressen in der Vorlage address.liquid. Fügen Sie beim Erstellen einer neuen Adresse den Parameter customer.new_address ein. Geben Sie beim Bearbeiten einer vorhandenen Adresse die Parameteradresse an.

{% form 'customer_address', customer.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="customer_address" />
  <input name="utf8" type="hidden" value="✓" />
  ...
</form>

customer_login

Erzeugt ein Form für die Anmeldung bei Kunden in der login.liquid Vorlage.

{% form 'customer_login' %}
...
{% endform %}
<form accept-charset="UTF-8" action="https://my-shop.versacommerce.com/account/login" id="customer_login" method="post">
  <input name="form_type" type="hidden" value="customer_login" />
  <input name="utf8" type="hidden" value="✓" />
  ...
</form>

guest_login

Erzeugt in der login.liquid-Vorlage ein Form, das die Kunden zurück zu ihrer Checkout-Sitzung als Gast führt, anstatt sich bei einem Konto anzumelden.

{% form 'guest_login' %}
...
{% endform %}
<form method="post" action="https://my-shop.versacommerce.de/account/login" id="customer_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=contact_information">
</form>

new_comment

Erzeugt ein Form zum Erstellen eines neuen Kommentars in der article.liquid Vorlage. Erfordert das Artikelobjekt 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>

product

Erzeugt ein Form zum Hinzufügen einer Produktvariante zum Warenkorb. Erfordert ein Produktobjekt 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>

recover_customer_password

Erzeugt ein Form zum Wiederherstellen eines verlorenen Kennworts in der Vorlage login.liquid.

 {% form 'recover_customer_password' %}
...
{% endform %}
<form accept-charset="UTF-8" action="/account/recover" method="post">
  <input name="form_type" type="hidden" value="recover_customer_password" />
  <input name="utf8" type="hidden" value="✓" />
  ...
</form>

reset_customer_password

Erzeugt ein Form in der Vorlage customers / reset_password.liquid, damit ein Kunde sein Kennwort zurücksetzen kann.

  {% form 'reset_customer_password' %}
...
{% endform %}
<form method="post" action="https://my-shop.versacommerce.com/account/account/reset" accept-charset="UTF-8">
  <input type="hidden" value="reset_customer_password" name="form_type" />
  <input name="utf8" type="hidden" value="✓" />
  ...
  <input type="hidden" name="token" value="408b690al218a77d0802457f054260b7-1452835827">
  <input type="hidden" name="id" value="1033844568">
</form>

storefront_password

Erzeugt ein Form in der Vorlage password.liquid zur Eingabe einer kennwortgeschützten Storefront.

{% 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 Form -Element erstellen, können Sie seine Standardattribute ändern oder neue Attribute hinzufügen. Sie können dies tun, indem Sie das Attribut, das Sie dem Form-Tag hinzufügen oder ändern möchten, als benannten Parameter hinzufügen und 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-36185306239">
  <input type="hidden" name="form_type" value="product">
  <input type="hidden" name="utf8" value="✓">
    ...
</form>


paginate

Der Block-orientierte Befehl paginate wird genutzt, um durch grössere Mengen von Produkten, Produktgruppen oder Seiten in kleineren Teilmengen zu „blättern“. Um die Ansicht einer Gruppe in mehrere Seiten zu unterteilen, müssen Sie den paginate Befehl vor dem Beginn einer For-Schleife aufrufen. Die Anzahl der Objekte wird wird automatisch auf die angegebene Grösse für die jeweilige Seite reduziert.

{% paginate collection.products by 3 %}
{% endpaginate %}

Beispiel:

{% paginate collection.products by 3 %}
{% for product in collection.products %}
{{ products.title }}
{% endfor %}
{% endpaginate %}
Apple–iMac
Apple–iPhone
Apple–IPod

Innerhalb des paginate Blocks haben Sie Zugriff auf die folgenden Funktionen des paginate-Objektes:

Parameter
Inhalt
paginate.page_size
Die Menge der angezeigten Elemente
paginate.current_page
Die Nummer der aktuell angezeigten Seite
paginate.current_offset
Die aktuelle Bereichsverschiebung - also die Anzahl der Elemente, die übersprungen wurden.
paginate.pages
Die Anzahl der Seiten, die erzeugt werden müssen, um alle Elemente anzuzeigen.
paginate.items
Die Gesamtzahl aller Elemente, die angezeigt werden sollen.
paginate.previous
Existiert nur, wenn es eine vorhergehende Seite gibt.
paginate.previous.title
Der Titel für den "zurück"-Link ('«')
paginate.previous.url
Die URL für den "zurück"-Link.
paginate.next
Existiert nur, wenn es eine nächste Seite gibt.
paginate.next.title
Der Titel für den "weiter"-Link ('»')
paginate.next.url
Die URL für den "weiter"-Link.
paginate.parts
Liste aller Teilseiten

Jede Teilseite (part) enthält diese 3 Parameter:

Parameter
Inhalt
part.is_link
Gibt an, ob dieses Element ein Link ist
part.title
Der Titel dieses Links
part.url
Die URL dieses Links


Ausgabe der Links
{% if paginate.previous %}
{{ 'zurück' | link_to: paginate.previous.url }}
{% endif %}

{% for part in paginate.parts %}
{% if part.is_link %}
{{ part.title | link_to: part.url }}
{% else %}
{{ part.title }}
{% endif %}
{% endfor %}

{% if paginate.next %}
{{ 'weiter' | link_to: paginate.next.url }}
{% endif %}

    • Related Articles

    • Tags

      Schlagwortliste eines Produktes ausgeben: <ul> {% for tag in product.tags %} <li>{{ tag.name }}</li> {% endfor %} </ul> Schlagwortliste eine Produktes ausgeben und auf das Schlagwort verlinken mit Hilfe des Filters link_to_tag: <ul> {% for tag in ...
    • Variable tags

      Sie können variable Tags verwenden, um neue Liquid-Variablen zu erstellen. capture Mit diesem „Block“-orientierten Befehl „schneiden“ sie alles mit, was innerhalb seines Start- und Ende-Elementes erzeugt wird. Anstatt diese erzeugten Daten ...
    • Iteration tags

      Iteration tags repeatedly run blocks of code. for Mit dem Befehl for können Sie mit einer Schleife mehrere Datensätze in einem Datenobjekt abarbeiten. {% for item in array %} {% endfor %} array = [1,2,3,4,5,6] {% for item in array %} {{ item }} {% ...
    • Theme Editor

      Der Theme-Editor (Editor) ist ein Werkzeug, mit dem die Dateien eines Shop-Themes im Browser bearbeitet werden können. Geöffnet werden kann der Editor durch einen Klick des HTML-&-CSS-bearbeiten-Buttons im Administrations-Bereich unter “Design”. ...
    • Integrations

      Integrations bieten die Möglichkeit, beliebigen Code in Theme- und E-Mail-Templates unterzubringen. Dazu kann jede Integration drei pflegbare Templates enthalten: Das Head-Template Das Body-Template Das E-Mail-Template Wo erscheint der erzeugte Code? ...