Html filters

HTML-Filter erstellen HTML-Elemente auf der Grundlage von Liquid-Eigenschaften oder den Assets einer Filiale.

Inhalt

image_tag

Erzeugt ein Bild-Tag. Sie können das Seitenverhältnis oder das Größenverhalten des Bildes anpassen, das Bild vorladen, Alt-Text hinzufügen oder zusätzliche HTML-Attribute an das Tag übergeben.

Die Eingabe für diesen Filter muss ein image_url mit einem width oder height Schlüsselwortargument sein.

{{ settings.favicon | image_url: width: 2000 | image_tag }}

<img src="//cdn.versacommerce.de/s/files/1/0251/7476/9720/files/myfavicon.png?v=1580676830&width=2000" alt="" srcset="
	//cdn.versacommerce.de/s/files/1/0251/7476/9720/files/myfavicon.png?v=1580676830&width=352 352w,//cdn.versacommerce.de/s/files/1/0251/7476/9720/files/myfavicon.png?v=1580676830&width=832 832w,
          //cdn.versacommerce.de/s/files/1/0251/7476/9720/files/myfavicon.png?v=1580676830&width=1200 1200w,
          //cdn.versacommerce.de/s/files/1/0251/7476/9720/files/myfavicon.png?v=1580676830&width=1920 1920w" width="2000" height="2007">

Aspect ratio

Auf der Grundlage der im Filter image_url angegebenen Abmessungen und des Seitenverhältnisses des Bildes wird dem Tag automatisch ein width und height hinzugefügt. Wenn eines der beiden Attribute angegeben wird, wird nur das angegebene Attribut verwendet.

 <!-- width is set to nil -->

{{ settings.favicon | image_url: width: 2000 | image_tag: width: nil }}

<img src="//cdn.versacommerce.de/s/files/1/0251/7476/9720/files/myfavicon.png?v=1580676830&width=2000" alt="" srcset="//cdn.versacommerce.de/s/files/1/0251/7476/9720/files/myfavicon.png?v=1580676830&width=352 352w,
          //cdn.versacommerce.de/s/files/1/0251/7476/9720/files/myfavicon.png?v=1580676830&width=832 832w,
          //cdn.versacommerce.de/s/files/1/0251/7476/9720/files/myfavicon.png?v=1580676830&width=1200 1200w,
          //cdn.versacommerce.de/s/files/1/0251/7476/9720/files/myfavicon.png?v=1580676830&width=1920 1920w">

 <!-- only the width attribute is specified -->

{{ settings.favicon | image_url: width: 2000 | image_tag: width: 200 }}

<img src="//cdn.versacommerce.de/s/files/1/0251/7476/9720/files/myfavicon.png?v=1580676830&width=2000" alt="" srcset="//cdn.versacommerce.de/s/files/1/0251/7476/9720/files/myfavicon.png?v=1580676830&width=352 352w,
          //cdn.versacommerce.de/s/files/1/0251/7476/9720/files/myfavicon.png?v=1580676830&width=832 832w,
          //cdn.versacommerce.de/s/files/1/0251/7476/9720/files/myfavicon.png?v=1580676830&width=1200 1200w,
          //cdn.versacommerce.de/s/files/1/0251/7476/9720/files/myfavicon.png?v=1580676830&width=1920 1920w" width="200">

Responsive images and sizing

image_tag liefert standardmäßig ein responsives Bild. Eine srcset wird automatisch generiert, wobei ein intelligenter Standardsatz von Breiten bis zu der im image_url filter angegeben ist. Sie können das Verhalten mit den folgenden Schlüsselwortargumenten anpassen oder außer Kraft setzen:

Sie können die Quellgrößen mit dem Schlüsselwortargument sizes angeben. Dieses Argument verwendet die gleiche Syntax wie das HTML-Attribut sizes .

{{ settings.favicon | image_url: width: 200 | image_tag: sizes: '(min-width: 1100px) 535px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)' }}

<img src="//cdn.versacommerce.de/s/files/1/0251/7476/9720/files/myfavicon.png?v=1580676830&width=2000" alt="" srcset="//cdn.versacommerce.de/s/files/1/0251/7476/9720/files/myfavicon.png?v=1580676830&width=352 352w,
          //cdn.versacommerce.de/s/files/1/0251/7476/9720/files/myfavicon.png?v=1580676830&width=832 832w,
          //cdn.versacommerce.de/s/files/1/0251/7476/9720/files/myfavicon.png?v=1580676830&width=1200 1200w,
          //cdn.versacommerce.de/s/files/1/0251/7476/9720/files/myfavicon.png?v=1580676830&width=1920 1920w" sizes="(min-width: 1100px) 535px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)" width="2000" height="2007">

Obwohl für jedes image_tag automatisch ein srcset erzeugt wird, können Sie mit dem Schlüsselwortargument widths Ihr eigenes srcset Attribut angeben. Dieses Argument akzeptiert eine Zeichenkette mit durch Komma getrennten ganzzahligen Breiten.

{{ settings.favicon | image_url: width: 2000 | image_tag: widths: '200, 300, 400' }}

<img src="//cdn.versacommerce.de/s/files/1/0251/7476/9720/files/myfavicon.png?v=1580676830&width=2000" alt="" srcset="//cdn.versacommerce.de/s/files/1/0251/7476/9720/files/myfavicon.png?v=1580676830&width=200 200w,
         //cdn.versacommerce.de/s/files/1/0251/7476/9720/files/myfavicon.png?v=1580676830&width=300 300w,
         //cdn.versacommerce.de/s/files/1/0251/7476/9720/files/myfavicon.png?v=1580676830&width=400 400w" width="2000" height="2007">

Obwohl für jedes image_tag automatisch ein srcset erzeugt wird, können Sie auch ein benutzerdefiniertes srcset Schlüsselwortargument angeben. Das Argument srcset hat Vorrang vor widths. Die Einstellung eines benutzerdefinierten srcset wird nicht empfohlen, es sei denn, Sie möchten das Attribut vollständig entfernen, indem Sie es auf nil setzen.

{{ settings.favicon | image_url: width: 2000 | image_tag: srcset: nil }}

<img src="//cdn.versacommerce.de/s/files/1/0251/7476/9720/files/myfavicon.png?v=1580676830&width=2000" alt="" width="2000" height="2007">

Performance

image_tag akzeptiert ein preload Schlüsselwortargument, mit dem Sie Bilder identifizieren können, die Sie vorladen möchten.

Wenn preload auf true gesetzt ist, wird ein Ressourcen-Hinweis für das Bild als Link-Header mit einem rel -Wert von preload. Der Link-Header enthält auch imagesrcset und imagesizes, die mit den Attributen srcset und sizes des Bild-Tags übereinstimmen, sofern vorhanden.

Sie sollten diesen Parameter sparsam verwenden. Denken Sie zum Beispiel daran, nur Bilder vorzuladen, die nach dem Umbruch erscheinen. 

{{ settings.favicon | image_url: width: 200 | image_tag: Vorspannung: true }}
{{ settings.favicon | image_url: width: 400 | image_tag: sizes: '40vw', Vorspannung: true }}

Link: {{ ... andere Link-Hinweise ... }}, 
 <!--/cdn.versacommerce.de/s/files/1/0251/7476/9720/files/myfavicon.png?v=1580676830&width=200-->; rel=Vorspannung; as=image

Link: {{ ... andere Link-Hinweise ... }}, 
 <!--/cdn.versacommerce.de/s/files/1/0251/7476/9720/files/myfavicon.png?v=1580676830&width=400-->; rel=Vorspannung; as=image; imagesrcset=//cdn.versacommerce.de/s/files/1/0251/7476/9720/files/myfavicon.png?v=1580676830&width=352 352w; imagesizes=40vw
Sie können ein Bild auch "lazy" laden, indem Sie loading: 'lazy' als zusätzliches Attribut zum Tag hinzufügen.

Alt text

Sie können das Argument alt verwenden, um einen Alt-Text für das Bild festzulegen.

Wenn kein Wert angegeben wird, wird der Medien-Alt-Text verwendet. Wenn keine Bildbeschreibung vorhanden ist, wird dieser Wert standardmäßig als leere Zeichenkette angegeben.

Additional attributes

Alle zusätzlichen HTML-Attribute, die diesem Filter übergeben werden, werden auch dem resultierenden HTML-Tag hinzugefügt.

 <!-- Hinzufügen von CSS-Klassen zum Bild -->

{{ settings.favicon | image_url: width: 200 | image_tag: alt: 'My favicon', srcset: nil, class: 'css-class-1 css-class-2' }}

<img src="//cdn.versacommerce.de/s/files/1/0251/7476/9720/files/myfavicon.png?v=1580676830&width=200" alt="My favicon" width="200" height="200">

 <!-- Lazy-loading des Bildes -->

{{ settings.favicon | image_url: width: 200 | image_tag: srcset: nil, loading: 'lazy' }}

<img src="//cdn.versacommerce.de/s/files/1/0251/7476/9720/files/myfavicon.png?v=1580676830&width=200" width="200" height="200" loading="lazy">

payment_button

Gibt HTML für einen übergeordneten Container aus, der eine dynamische Kaufabwicklungsschaltfläche für ein Produkt enthält. Dieser Filter muss für das Objekt form innerhalb eines Produktformulars verwendet werden.

{{ form | payment_button }}

 <div data-shopify="payment-button" class="shopify-payment-button">
  
  ...

 </div>
Sie können keine dynamischen Checkout-Schaltflächen über AJAX-Anfragen rendern, auch nicht über die Section Rendering API. Die dynamische Checkout-Schaltfläche selbst wird durch JavaScript hinzugefügt, das von VersaCommerce über das content_for_header-Objekt eingebunden wird, das nur beim ersten Laden der Seite ausgeführt wird.

payment_terms

Dieser Filter steht nur berechtigten Händlern zur Verfügung, die zur Teilnahme am Shop Pay Ratenzahlungsprogramm eingeladen wurden. Wenn Sie ein VersaCommerce-Händler sind und noch keine Einladung für den frühen Zugang erhalten haben, können Sie sich auf die Warteliste setzen lassen.

Zeigt das Banner "Ratenzahlung " für ein Produkt an. Dieser Filter muss für das Objekt form innerhalb eines Produktformulars verwendet werden.

{{ form | payment_terms }}

 <shopify-payment-terms variant-id="..." shopify-meta="...">
  
  ...

 </shopify-payment-terms>

payment_type_svg_tag

Gibt das <svg> Tag des angeforderten Bildes der Zahlungsart zu Inlining-Zwecken zurück. Wird in Verbindung mit der Variablen shop. enabled_payment_types verwendet. Akzeptiert ein optionales class -Attribut, das auf den <svg> -Tag angewendet wird, um das Styling des Symbols zu steuern.

{% for type in shop.enabled_payment_types %}
  {{ type | payment_type_svg_tag: class: 'custom-class' }}
{% endfor %}

 <!-- Wenn das Geschäft Mastercard und Discover akzeptiert -->

 <svg class="custom-class" xmlns="http://www.w3.org/2000/svg">
  
  <circle fill="#EB001B" cx="15" cy="12" r="7"></circle>
  
  <circle fill="#F79E1B" cx="23" cy="12" r="7"></circle>
  ...

 </svg>


 <svg class="custom-class" xmlns="http://www.w3.org/2000/svg">
  
  <path fill="#494949" d="M9 11h20v2H9z"></path>
  ...

 </svg>

preload_tag

Erzeugt ein <link> -Tag mit einem rel -Attribut von preload, um das Laden eines bestimmten von VersaCommerce gehosteten Assets zu priorisieren. Die Asset-URL wird auch dem Link-Header mit einem rel -Attribut von preload hinzugefügt.

Sie sollten diesen Filter sparsam einsetzen. So sollten beispielsweise nur die Ressourcen vorgeladen werden, die für die Darstellung von "above-the-fold"-Inhalten erforderlich sind.

Wenn Sie ein Stylesheet vorladen wollen, verwenden Sie stylesheet_tag. Wenn Sie ein Bild vorladen möchten, verwenden Sie stattdessen image_tag.

Die Eingabe muss eine URL für ein Thema oder ein Shop-Asset sein. Dieser Filter erfordert ein as Schlüsselwortargument, das als as Attribut übergeben wird.

{{ 'some_font.woff' | asset_url | Vorspannung_tag: as: 'font' }}

 <link href="//cdn.versacommerce.de/s/files/1/0087/0462/t/394/assets/some_font.woff?28178" rel="Vorspannung" as="font">

Link: 
 <!--/cdn.versacommerce.de/s/files/1/0087/0462/t/394/assets/some_font.woff?28178-->; rel="Vorspannung"; as="font"
Dieser Filter setzt den Wert des rel-Attributs automatisch auf preload, so dass Sie keinen eigenen Wert angeben können.

Sie können auch zusätzliche Link-Attribute in den HTML-Tag und die Link-Kopfzeile aufnehmen, indem Sie sie als Schlüsselwortargumente hinzufügen. Die Werte dieser Argumente werden nicht überprüft, bevor sie übergeben werden.

{{ 'mobile_font.woff' | asset_url | Vorspannung_tag: as: 'font', media: 'mobile', type: 'font/woff' }}

 <link href="//cdn.versacommerce.de/s/files/1/0087/0462/t/394/assets/mobile_font.woff?28178" rel="Vorspannung" as="font" media="mobile" type="font/woff">

script_tag

Erzeugt ein Skript-Tag.

{{ 'shop.js' | asset_url | script_tag }}

<script src="//cdn.versacommerce.de/s/files/1/0087/0462/t/394/assets/shop.js?28178" type="text/javascript"></script>

stylesheet_tag

Erzeugt ein Stylesheet-Tag.

{{ 'shop.css' | asset_url | stylesheet_tag }}

<link href="//cdn.versacommerce.de/s/files/1/0087/0462/t/394/assets/shop.css?28178" rel="stylesheet" type="text/css" media="all" />

Der Filter stylesheet_tag akzeptiert die folgenden Parameter:

Parameter Description
media Sets the media attribute of the link element. When this attribute is applied, the stylesheet is loaded only if the media condition is true.
preload When this value is true, a resource hint for the stylesheet is sent as a Link header with a rel value of preload.You should use this parameter sparingly. For example, consider preloading only render-blocking stylesheets that are needed for initial functionality of the page, such as above-the-fold content. 
{{ 'mobile.css' | asset_url | stylesheet_tag: media: 'screen and (max-width: 600px)', Vorspannung: true }}

<link href="//cdn.versacommerce.de/s/files/1/0087/0462/t/394/assets/mobile.css?28178" rel="stylesheet" media="screen and (max-width: 600px)" />

time_tag

Konvertiert einen Zeitstempel in ein time Tag.

{{ article.published_at | time_tag }}

<time datetime="2018-12-31T18:00:00Z">Montag, Dezember 31, 2018 at 1:00 pm -0500</time>

Der Filter time_tag 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. Diese Parameter haben keinen Einfluss auf den Wert des Attributs datetime im Tag <time>.

{{ article.published_at | time_tag: '%a, %b %d, %Y' }}

<time datetime="2018-12-31T18:00:00Z">Mon, Dez. 31, 2018</time>

format

Sie können einen format Parameter an den time_tag Filter übergeben, um ein Datumsformat für die Sprache des Schaufensters auszugeben. Die verfügbaren Formate sind:

  • abbreviated_date
  • basic
  • date
  • date_at_time
  • default
  • on_date
{{ article.published_at | time_tag: format: 'date' }}

<time datetime="2018-12-31T18:00:00Z">Dezember 31, 2018</time>

In der folgenden Tabelle finden Sie eine Vorschau auf die verschiedenen Optionen, die unter format für verschiedene Sprachen angezeigt werden.

format English French Japanese
abbreviated_date Dec 31, 2018 31 déc 2018 2018年12月31日
basic 12/31/2018 31/12/2018 2018/12/31
date December 31, 2018 31 décembre 2018 2018年12月31日
date_at_time December 31, 2018 at 1:00 pm 31 décembre 2018 à 13:00 2018年12月31日 13:00
default Monday, December 31, 2018 at 1:00 pm -0500 lundi 31 décembre 2018 à 13:00 -0500 2018年12月31日(月曜日) 13:00 -0500
on_date on Dec 31, 2018 le 31 déc 2018 2018年12月31日で

datetime

Sie können einen datetime -Parameter mit strftime-Kurzformaten übergeben, um ein benutzerdefiniertes Format für das datetime -Attribut des <time> -Ausgabe-Tags zu verwenden.

{{ article.published_at | time_tag: '%a, %b %d, %Y', datetime: '%Y-%m-%d' }}

<time datetime="2016-02-24">Wed, 24 Feb, 2016</time>

Setting format options in locale files

Das Datumsformat kann auch in den Gebietsschemaeinstellungen Ihres Themas festgelegt werden:

"date_formats": {
  "monat_tag_jahr": "%B %d, %Y"
}

{{ article.published_at | time_tag: format: 'monat_tag_jahr' }}

<time datetime="2016-02-24T14:47:51Z">Februar 24, 2016</time>
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.