Additional filters

Allgemeine Filter dienen vielen verschiedenen Zwecken, einschließlich Formatierung, Konvertierung und Anwendung von CSS-Klassen.

Inhalt

date

Konvertiert einen Zeitstempel in ein anderes Datumsformat.

{{ article.published_at | date: "%a, %b %d, %y" }}

Di, Apr 22, 14

date akzeptiert die gleichen Parameter wie die Methode strftime von Ruby. Eine Liste der Kurzformate finden Sie in der Ruby-Dokumentation oder auf einer Website wie strfti.me.

format

Sie können einen format Parameter an den date Filter übergeben, um das Datum in einem Format anzuzeigen, das der Sprache des Schaufensters entspricht. Unter format stehen verschiedene Optionen zur Verfügung, und es ist auch möglich, eigene Optionen zu definieren.

{{ order.created_at | date: format: 'abbreviated_date' }}

Dez. 31, 2018

default

Setzt einen Standardwert für jede Variable, der kein Wert zugewiesen ist. Kann mit Strings, Arrays und Hashes verwendet werden.

Der Standardwert wird zurückgegeben, wenn die Variable zu nil, false oder einer leeren Zeichenkette "" aufgelöst wird. Eine Zeichenfolge, die Leerzeichen enthält, wird nicht in den Standardwert aufgelöst.

Liebe {{ Kunde.name | default: "Kunde" }}

 <!-- If Kunde.name is nil -->
Liebe Kunde


 <!-- If Kunde.name is "" -->
Liebe Kunde


 <!-- If Kunde.name is "   " -->
Liebe

Damit Variablen anstelle des Standardwerts false zurückgeben, können Sie den Parameter allow_false verwenden.

{{ settings.flag | default: true, allow_false: true }}

 <!-- If settings.flag is false -->
false

default_errors

Gibt Standard-Fehlermeldungen für die Variable form. errors aus. Die zurückgegebenen Meldungen sind abhängig von den von form. errors zurückgegebenen Zeichenfolgen.

{% if form.errors %}
  {{ form.errors | default_errors }}
{% endif %}

 <!-- if form.errors returned "email" -->
Bitte geben Sie eine gültige E-Mail Adresse ein.

default_pagination

Erzeugt eine Reihe von Links für paginierte Ergebnisse. Wird in Verbindung mit der Variablen paginate verwendet.

{{ paginate | default_pagination }}

<span class="page current">1</span>
<span class="page"><a href="/Sammlungen/all?page=2" title="">2</a></span>
<span class="page"><a href="/Sammlungen/all?page=3" title="">3</a></span>
<span class="deco">&hellip;</span>
<span class="page"><a href="/Sammlungen/all?page=17" title="">10</a></span>
<span class="next"><a href="/Sammlungen/all?page=2" title="">Next »</a></span>

Die Standardpaginierung verwendet die Bezeichnungen Next » und « Previous für Links zur nächsten und vorherigen Seite. Sie können diese Bezeichnungen außer Kraft setzen, indem Sie dem Filter default_pagination neue Wörter übergeben:

{{ paginate | default_pagination: next: 'Ältere', previous: 'Neuere' }}

<span class="page current">1</span>
<span class="page"><a href="/Sammlungen/all?page=2" title="">2</a></span>
<span class="page"><a href="/Sammlungen/all?page=3" title="">3</a></span>
<span class="next"><a href="/Sammlungen/all?page=2" title="">Ältere</a></span>

format_address

Verwenden Sie den Filter format_address für eine Adresse, um die Elemente der Adresse in der Reihenfolge ihres Gebietsschemas zu drucken. Der Filter druckt nur die Teile der Adresse, die angegeben wurden. Dieser Filter funktioniert auf der Adressseite für Kunden, die ein Konto in Ihrem Geschäft haben, oder auf der Adresse Ihres Geschäfts:

{{ address | format_address }}

<p>
  Laura Quandt<br>
  beispielstrasse 123<br>
  Koblenz<br>
  DE<br>
  30419<br>
  Deutschland
</p>

{{ address | format_address }}

<p>
  Denise Rother<br>
  Pfälzerstraße 40, 50825 köln<br>
  Belgisches Viertelt<br>
  10225 , Berlin<br>
  Deutschland
</p>

highlight

Umhüllt Wörter innerhalb der Suchergebnisse mit einem HTML <strong> Tag mit der Klasse highlight, wenn sie mit den eingegebenen search. terms übereinstimmen.

{{ item.content | highlight: search.terms }}

 <!-- Wenn der Suchbegriff "Gelb" war -->
<strong class="highlight">Gelb</strong> Hemden sind die besten!

highlight_active_tag

Verpackt einen Tag-Link in ein <span> mit der Klasse active, wenn dieser Tag zum Filtern einer Sammlung verwendet wird.

 <!-- collection.tags = ["Baumwolle", "Rundhalsausschnitt", "Jersey"] -->
{% for tag in collection.tags %}
    {{ tag | highlight_active | link_to_tag: tag }}
{% endfor %}

<a title="Show products matching tag Baumwolle" href="/Sammlungen/all/cotton"><span class="active">Baumwolle</span></a>
<a title="Show products matching tag Rundhalsausschnitt" href="/Sammlungen/all/crew-neck">Rundhalsausschnitt</a>
<a title="Show products matching tag Jersey" href="/Sammlungen/all/jersey">Jersey</a>

json

Konvertiert eine Zeichenkette in das JSON-Format.

var content = {{ pages.page-handle.content | json }};

var content = "\u003Cp\u003E\u003Cstrong\u003EYou made it! Congratulations on starting your own e-commerce store!\u003C/strong\u003E\u003C/p\u003E\n\u003Cp\u003EThis is your shop\u0026#8217;s \u003Cstrong\u003Efrontpage\u003C/strong\u003E, and it\u0026#8217;s the first thing your Kundes will see when they arrive. You\u0026#8217;ll be able to organize and style this page however you like.\u003C/p\u003E\n\u003Cp\u003E\u003Cstrong\u003ETo get started adding products to your shop, head over to the \u003Ca href=\"/admin\"\u003EAdmin Area\u003C/a\u003E.\u003C/strong\u003E\u003C/p\u003E\n\u003Cp\u003EEnjoy the software,  \u003Cbr /\u003E\nYour VersaCommerce Team.\u003C/p\u003E";
Sie brauchen die Liquid-Ausgabe nicht in Anführungszeichen zu setzen - der Json-Filter fügt sie ein. Der json-Filter bricht auch Anführungszeichen in der Ausgabe aus, falls erforderlich.

Der Filter json kann auch verwendet werden, um Liquid-Objekte für JavaScript lesbar zu machen:

var json_product = {{ Sammlungen.featurot.products.first | json }};
var json_cart = {{ cart | json }};

Product inventory and the JSON filter

Der JSON-Filter gibt keine Werte für die Felder inventory_quantity und inventory_policy für alle VersaCommerce-Shops aus, die nach dem 5. Dezember 2017 erstellt wurden. Diese Felder sind veraltet, um zu verhindern, dass Bots und Crawler Bestandsmengen für Geschäfte abrufen, auf die sie keinen Zugriff haben.

Anstatt den JSON-Filter zu verwenden, können Sie variant. inventory_quantity und variant. inventory_policy verwenden, um auf Bestandsinformationen zuzugreifen.

t (translation)

Verwendet eine Übersetzungstaste, um auf die Gebietsschemadatei für die aktive Sprache zuzugreifen. Gibt die entsprechende Zeichenkette des übersetzten Textes in der Locale-Datei zurück.

Weitere Informationen zur Verwendung des Filters t finden Sie unter Übersetzungsschlüssel und t-Filter. Richtlinien zur Benennung Ihrer Übersetzungsbeschreibungen finden Sie unter Benennung und Gruppierung Ihrer Umrechnungsschlüssel.

Translation key

Das folgende Beispiel zeigt, wie eine Zeichenkette aus einer Locale-Datei in eine Liquid-Vorlage, einen Abschnitt oder eine Snippet-Datei ausgegeben wird. In diesem Fall wird der Umrechnungsschlüssel verwendet, um "Ausverkauft" auf einem Produktformular auszugeben.

Der Übersetzungsschlüssel muss in einfache Anführungszeichen eingeschlossen sein:

<span>{{ 'products.product.sold_out' | t }}</span>

Locale files

Nehmen wir an, Ihr Thema wird auf Englisch, Französisch und Spanisch angeboten. Die folgenden Beispiele zeigen, wie man einen entsprechenden Übersetzungsschlüssel für 'products. product. sold_out' in jede der anwendbaren Sprachumgebungsdateien einfügt:

{
  "products": {
    "product": {
        "sold_out": "Ausverkauft"
    }
  }
}

Input (Französisch)


{
  "products": {
    "product": {
      "sold_out": "Épuisé"
      }
    }
}

{
  "products": {
    "product": {
      "sold_out": "Agotado"
    }
  }
}

HTML

Die folgenden Beispiele zeigen den zurückgegebenen HTML-Code für die drei Locale-Dateien:

<span>Ausverkauft</span>

<span>Épuisé</span>

<span>Agotado</span>

Section locales vs Theme locales

Der Filter t kann auch auf Schlüssel verweisen, die in dem locales objekt der Abschnittsdatei schema Tag definiert sind. Der Inhalt, den Sie auf schema unter einem locales -Objekt einstellen, ist nur für diesen Abschnitt zugänglich. Dies ist nützlich, wenn Sie einen eigenständigen Abschnitt erstellen müssen, den Sie für verschiedene Themen verwenden möchten.

Inhalte, die für ein Thema global sind, sollten im Verzeichnis locales des Themas abgelegt werden. Sie könnten zum Beispiel den Ausdruck "See more" in Ihr locales Verzeichnis aufnehmen, um eine einzige Übersetzung zu erstellen. Sie könnten die Übersetzung dann in einem Blogbeitrag und auf der Produktdetailseite verwenden.

Übersetzungen im Schema-Tag des Abschnitts, die nicht Teil des Locales-Objekts sind, werden für den im Online-Shop-Editor angezeigten Händlertext verwendet. Diese Übersetzungen verwenden den t-Filter nicht.

weight_with_unit

Formatiert das Gewicht der Produktvariante. Die Gewichtseinheit wird in den allgemeinen Einstellungen festgelegt.

{{ product.variants.first.weight | weight_with_unit }}

24.0 kg

Das Gerät kann durch Eingabe in den Filter außer Kraft gesetzt werden. Dies ist sinnvoll bei Produktvarianten, die jeweils eine eigene Einheit haben können.

{{ variant.weight | weight_with_unit: variant.weight_unit }}

52.9 lb

placeholder_svg_tag

Nimmt einen Platzhalternamen und gibt eine Platzhalter-SVG-Illustration aus. Ein optionales Argument kann angegeben werden, um ein benutzerdefiniertes Klassenattribut in das SVG-Tag aufzunehmen.

{{ 'collection-1' | placeholder_svg_tag }}

 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 525.5 525.5">
  ...der Kürze halber weggelassen...
 </svg>

Custom class attribute

Sie können einen Class-Parameter übergeben, um ein benutzerdefiniertes Klassenattribut für das SVG-Tag aufzunehmen:

{{ 'collection-1' | placeholder_svg_tag: 'custom' }}

 <svg class="custom" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 525.5 525.5">
  ...der Kürze halber weggelassen...
 </svg>
Placeholder name Preview 
collection-1
		
collection-2
		
collection-3
		
collection-4
		
collection-5
		
collection-6
		
image
		
lifestyle-1
		
lifestyle-2
		
product-1
		
product-2
		
product-3
		
product-4
		
product-5
		
product-6
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.