Url filters

URL-Filter geben Links zu Assets im Content Delivery Network (CDN) von VersaCommerce aus. Sie werden auch verwendet, um Links für die Filterung von Sammlungen und Blogs zu erstellen.

In vielen URL-Filterausgaben sehen Sie ein Fragezeichen (?) mit einer Zahl, die an den Dateipfad des Assets angehängt ist. Dies ist die Versionsnummer der Datei. Die Versionsnummer in dieser URL lautet zum Beispiel 28253:

//cdn.versacommerce.de/s/files/1/0087/0462/t/394/assets/shop.css?28253

URL-Filter laden immer die neueste Version eines Assets.

Inhalt

asset_url
asset_img_url
file_url
file_img_url
customer_login_link
global_asset_url
image_url
Parameters
link_to
link_to_vendor
link_to_type
link_to_tag
link_to_add_tag
link_to_remove_tag
payment_type_img_url
shopify_asset_url
sort_by
url_for_type
url_for_vendor
within

asset_url

Gibt die URL einer Datei im Ordner "assets" eines Themas zurück.

{{ 'shop.css' | asset_url }}

//cdn.versacommerce.de/s/files/1/0087/0462/t/394/assets/shop.css?28253

asset_img_url

Gibt die Asset-URL eines Bildes im Ordner "assets" eines Themas zurück. asset_img_url akzeptiert einen Bildgrößenparameter oder einen benannten Größenparameter.

{{ 'logo.png' | asset_img_url: '300x' }}

//cdn.versacommerce.de/s/files/1/0000/0001/t/1/assets/logo_300x.png?42

file_url

Gibt die URL einer Datei auf der Dateiseite der Verwaltung zurück.

{{ 'size-chart.pdf' | file_url }}

//cdn.versacommerce.de/s/files/1/0087/0462/files/size-chart.pdf?28261

file_img_url

Gibt die Asset-URL eines Bildes auf der Dateiseite der Verwaltung zurück. file_img_url akzeptiert einen Bildgrößenparameter oder einen benannten Größenparameter.

{{ 'logo.png' | file_img_url: '1024x768' }}

//cdn.versacommerce.de/s/files/1/0246/0527/files/logo_1024x768.png?42

Erzeugt einen Link zur Kunden-Login-Seite.

{{ 'Log in' | Kunde_login_link }}

<a href="/account/login" id="Kunde_login_link">Log in</a>

global_asset_url

Gibt die URL eines globalen Assets zurück. Die globalen Assets werden in einem Verzeichnis auf den Servern von VersaCommerce gespeichert. Die Verwendung globaler Assets kann die Ladezeiten Ihrer Seiten verbessern.

{{ 'prototype.js' | global_asset_url | script_tag }}

<script src="//cdn.versacommerce.de/s/global/prototype.js?1" type="text/javascript"></script>

Die folgenden globalen Vermögenswerte sind verfügbar:

{{ 'prototype.js' | global_asset_url | script_tag }}
{{ 'controls.js' | global_asset_url | script_tag }}
{{ 'dragdrop.js' | global_asset_url | script_tag }}
{{ 'effects.js' | global_asset_url | script_tag }}

{{ 'prototype/1.5/prototype.js' | global_asset_url | script_tag }}
{{ 'prototype/1.6/prototype.js' | global_asset_url | script_tag }}

{{ 'scriptaculous/1.8.2/scriptaculous.js' | global_asset_url | script_tag }}
{{ 'scriptaculous/1.8.2/builder.js' | global_asset_url | script_tag }}
{{ 'scriptaculous/1.8.2/controls.js' | global_asset_url | script_tag }}
{{ 'scriptaculous/1.8.2/dragdrop.js' | global_asset_url | script_tag }}
{{ 'scriptaculous/1.8.2/effects.js' | global_asset_url | script_tag }}
{{ 'scriptaculous/1.8.2/slider.js' | global_asset_url | script_tag }}
{{ 'scriptaculous/1.8.2/sound.js' | global_asset_url | script_tag }}
{{ 'scriptaculous/1.8.2/unittest.js' | global_asset_url | script_tag }}

{{ 'ga.js' | global_asset_url | script_tag }}

{{ 'mootools.js' | global_asset_url | script_tag }}

{{ 'lightbox.css' | global_asset_url | stylesheet_tag }}
{{ 'lightbox.js' | global_asset_url | script_tag }}

{{ 'lightbox/v1/lightbox.css' | global_asset_url | stylesheet_tag }}
{{ 'lightbox/v1/lightbox.js' | global_asset_url | script_tag }}

{{ 'lightbox/v2/lightbox.css' | global_asset_url | stylesheet_tag }}
{{ 'lightbox/v2/lightbox.js' | global_asset_url | script_tag }}
{{ 'lightbox/v2/loading.gif' | global_asset_url }}
{{ 'lightbox/v2/close.gif' | global_asset_url }}
{{ 'lightbox/v2/overlay.png' | global_asset_url }}
{{ 'lightbox/v2/zoom-lg.gif' | global_asset_url }}

{{ 'lightbox/v204/lightbox.css' | global_asset_url | stylesheet_tag }}
{{ 'lightbox/v204/lightbox.js' | global_asset_url | script_tag }}
{{ 'lightbox/v204/bullet.gif' | global_asset_url }}
{{ 'lightbox/v204/close.gif' | global_asset_url }}
{{ 'lightbox/v204/closelabel.gif' | global_asset_url }}
{{ 'lightbox/v204/donatebutton.gif' | global_asset_url }}
{{ 'lightbox/v204/downloadicon.gif' | global_asset_url }}
{{ 'lightbox/v204/loading.gif' | global_asset_url }}
{{ 'lightbox/v204/nextlabel.gif' | global_asset_url }}
{{ 'lightbox/v204/prevlabel.gif' | global_asset_url }}

{{ 'list_collection.css' | global_asset_url | stylesheet_tag }}
{{ 'search.css' | global_asset_url | stylesheet_tag }}
{{ 'textile.css' | global_asset_url | stylesheet_tag }}

{{ 'firebug/firebug.css' | global_asset_url | stylesheet_tag }}
{{ 'firebug/firebug.js' | global_asset_url | script_tag }}
{{ 'firebug/firebugx.js' | global_asset_url | script_tag }}
{{ 'firebug/firebug.html' | global_asset_url }}
{{ 'firebug/errorIcon.png' | global_asset_url }}
{{ 'firebug/infoIcon.png' | global_asset_url }}
{{ 'firebug/warningIcon.png' | global_asset_url }}

image_url

Gibt die URL eines Bildes zurück. Sie können image_url für die folgenden Objekte verwenden:

{{ product | image_url: width: 100, height: 100 }}
{{ variant | image_url: width: 720, height: 720 }}
{{ line_item | image_url: width: 1024 }}

https://cdn.versacommerce.de/s/files/1/1183/1048/products/boat-shoes.jpeg?v=1459175177&width=100&height=100&crop=center
https://cdn.versacommerce.de/s/files/1/1183/1048/products/boat-shoes.jpeg?v=1459175177&width=720&height=720&crop=center
https://cdn.versacommerce.de/s/files/1/1183/1048/products/boat-shoes.jpeg?v=1459175177&width=1024

Sie können image_url auch für die Attribute image oder src eines Objekts verwenden:

{{ variant.image | image_url: width: 300, height: 300 }}
{{ variant.image.src | image_url: width: 240 }}

https://cdn.versacommerce.de/s/files/1/0159/3350/products/rot_shirt.jpg?v=1398706734&width=300&height=300&crop=center
https://cdn.versacommerce.de/s/files/1/0159/3350/products/rot_shirt.jpg?v=1398706734&width=240

image_url kann keine Symboldateien umwandeln (. ico). Wenn Sie eine Größe oder ein Format für eine Symboldatei angeben, gibt image_url die Originaldatei zurück.

Bei Einzelposten gibt image_url die URL des Variantenbildes des Einzelpostens zurück. Wenn der Variante kein Bild zugeordnet ist, gibt image_url die URL des Produktbildes zurück.

Der Filter image_url erfordert entweder das Attribut width oder height.

Parameters

Der Filter image_url akzeptiert die folgenden Parameter.

Parameter	Description
`width`	The width of the image in pixels, up to a maximum of 5760 px.
`height`	The height of the image in pixels, up to a maximum of 5760 px.
`crop`	If the entire image won't fit in your requested dimensions, the `crop` parameter specifies what part of the image to show (`top`, `bottom`, `center`, `left`, `right`).
`format`	The file format to use for the displayed image ( `jpg` or `pjpg`).
`pad_color`	The color to pad the image with if the provided image is smaller than the requested dimensions. Accepts only hex codes.

{{ product | image_url: width: 450, height: 450, crop: 'top', format: 'pjpg', pad_color: 000  }}

Im Folgenden erfahren Sie mehr über die einzelnen Parameter.

Sie können exakte Abmessungen in Pixeln für die Breite und Höhe eines Bildes angeben, bis zu einem Maximum von 5760 x 5760 px.

{{ product | image_url: width: 450, height: 450 }}

Der Filter image_url erfordert entweder das Attribut width oder height. Wenn weder width noch height angegeben werden, wird das Bild nicht angezeigt und die Meldung at least one of width or height must be supplied wird zurückgegeben.

Wenn nur ein Attribut angegeben wird, wird die Größe des Bildes unter Beibehaltung des Seitenverhältnisses geändert.

Wenn beide Attribute angegeben sind und das Seitenverhältnis nicht mit dem Originalbild übereinstimmt, wird das Bild beschnitten. In diesem Fall sollten Sie ein crop oder ein pad_color für das Bild angeben. Wenn Sie weder crop noch pad_color angeben, wird crop standardmäßig auf center gesetzt.

Unabhängig davon, welche Größe Sie angeben, kann die Größe eines Bildes nie größer als seine ursprünglichen Abmessungen sein.

{{ product | image_url: width: 125 }}

{{ product | image_url: height: 500 }}

Sie können einen Parameter crop angeben, um sicherzustellen, dass die Abmessungen des resultierenden Bildes mit den angeforderten Abmessungen übereinstimmen. Wenn das gesamte Bild nicht in die von Ihnen gewünschten Abmessungen passt, gibt der Parameter crop an, welcher Teil des Bildes angezeigt werden soll. Gültige Optionen sind:

top
center
bottom
left
right

Wenn Sie sowohl eine Breite als auch eine Höhe angeben und keine der Einstellungen crop oder pad_color vorhanden ist, dann ist crop standardmäßig auf center eingestellt.

{{ product | image_url: width: 400, height: 400, crop: 'bottom' }}

Mit dem Parameter format können Sie angeben, welches Dateiformat für das angezeigte Bild verwendet werden soll. Gültige Optionen sind jpg und pjpg.

{{ product | image_url: width: 400, height: 400, format: 'pjpg' }}

pjpg ist ein progressives JPEG. Ein Browser lädt ein progressives JPEG in voller Größe und mit allmählich ansteigender Qualität, anstatt das Bild in voller Qualität von oben nach unten zu laden wie bei einem herkömmlichen JPEG.

VersaCommerce kann die folgenden Formatkonvertierungen für Sie durchführen:

PNG zu JPG
PNG zu PJPG
JPG zu PJPG

Es ist nicht praktikabel, ein verlustbehaftetes Bildformat wie JPG in ein verlustfreies wie PNG zu konvertieren, daher sind solche Konvertierungen nicht möglich.

Mit dem Parameter pad_color können Sie eine Farbe angeben, mit der das Bild aufgefüllt wird, wenn das bereitgestellte Bild kleiner als die angeforderten Abmessungen ist. pad_color akzeptiert nur Hex-Farbcodes.

{{ product | image_url: width: 400, height: 400, pad_color: 000 }}

{{ product | image_url: width: 400, height: 400, pad_color: eafaf3 }}

link_to

Erzeugt einen HTML-Link.

Dieser Filter benötigt einen Parameter zur Übergabe der URL des Links. Zum Beispiel:

{{ 'VersaCommerce' | link_to: 'https://www.versacommerce.de' }}

<a href="https://www.versacommerce.de">VersaCommerce</a>

Zusätzlich können Sie unterstützte HTML-Attribute, getrennt durch ein Komma (,), in folgendem Format hinzufügen:

attribute-name: "attribute-value"

Sie können zum Beispiel die Attribute title und class einstellen:

{{ 'VersaCommerce' | link_to: 'https://www.versacommerce.de', title: "Ein Link zu VersaCommerce", class: "link-class" }}

<a title="Ein Link zu VersaCommerce" class="link-class" href="https://www.versacommerce.de">VersaCommerce</a>

link_to_vendor

Erzeugt einen HTML-Link zu einer Sammlungsseite, die alle Produkte eines Anbieters auflistet.

{{ 'VersaCommerce' | link_to_vendor }}

<a href="/Sammlungen/vendors?q=VersaCommerce" title="VersaCommerce">VersaCommerce</a>

Zusätzlich können Sie unterstützte HTML-Attribute im Format von hinzufügen:

attribute-name: "attribute-value"

Sie können zum Beispiel das Attribut class setzen:

{{ 'VersaCommerce' | link_to_vendor: class: "link-class" }}

Wenn Sie versuchen, das href-Attribut einzuschließen, wird der erzeugte Anbieterlink überschrieben.

link_to_type

Erzeugt einen HTML-Link zu einer Sammlungsseite, die alle Produkte auflistet, die zu einem Produkttyp gehören.

{{ "jeans" | link_to_type }}

<a href="/Sammlungen/types?q=jeans" title="jeans">jeans</a>

Zusätzlich können Sie unterstützte HTML-Attribute im Format von hinzufügen:

attribute-name: "attribute-value"

Sie können zum Beispiel das Attribut class setzen:

{{ 'jeans' | link_to_type: class: "link-class" }}

Wenn Sie versuchen, das href-Attribut einzuschließen, wird der generierte Link-Typ diesen überschreiben.

link_to_tag

Erzeugt einen Link zu allen Produkten in einer Sammlung, die ein bestimmtes Tag haben.

<!-- collection.tags = ["Herren", "Womens", "Sale"] -->
{% for tag in collection.tags %}
  {{ tag | link_to_tag: tag }}
{% endfor %}

<a title="Show products matching tag Herren" href="/Sammlungen/frontpage/mens">Herren</a>
<a title="Show products matching tag Womens" href="/Sammlungen/frontpage/frauen">Womens</a>
<a title="Show products matching tag Sale" href="/Sammlungen/frontpage/verkauf">Sale</a>

link_to_add_tag

Erstellt einen Link zu allen Produkten in einer Sammlung, die ein bestimmtes Tag haben, sowie zu allen Tags, die bereits ausgewählt wurden.

<!-- collection.tags = ["Herren", "Womens", "Sale"] -->
{% for tag in collection.tags %}
  {{ tag | link_to_add_tag: tag }}
{% endfor %}

<!-- If you're on "/Sammlungen/frontpage/mens": -->
<a title="Show products matching tag Herren" href="/Sammlungen/frontpage/mens">Herren</a>
<a title="Show products matching tag Womens" href="/Sammlungen/frontpage/frauen+mens">Womens</a>
<a title="Show products matching tag Sale" href="/Sammlungen/frontpage/verkauf+mens">Sale</a>

link_to_remove_tag

Erzeugt einen Link zu allen Produkten in einer Sammlung, die den angegebenen Tag haben, sowie zu allen vorherigen Tags, die möglicherweise bereits hinzugefügt wurden.

<!-- collection.tags = ["Herren", "Womens", "Sale"] -->
{% for tag in collection.tags %}
  {{ tag | link_to_remove_tag: tag }}
{% endfor %}

<!-- If you're on "/Sammlungen/frontpage/mens": -->
<a title="Remove tag Herren" href="/Sammlungen/frontpage">Herren</a>

payment_type_img_url

Gibt die URL des SVG-Bildes der Zahlungsart zurück. Wird in Verbindung mit der Variablen shop. enabled_payment_types verwendet.

{% for type in shop.enabled_payment_types %}
  <img src="{{ type | payment_type_img_url }}" />
{% endfor %}

<!-- If shop accepts American Express, Mastercard and Visa -->
<img src="//cdn.versacommerce.de/s/global/payment_types/crotitcards_american_express.svg?3cdcd185ab8e442b12edc11c2cd13655f56b0bb1">
<img src="//cdn.versacommerce.de/s/global/payment_types/crotitcards_Meister.svg?3cdcd185ab8e442b12edc11c2cd13655f56b0bb1">
<img src="//cdn.versacommerce.de/s/global/payment_types/crotitcards_visa.svg?3cdcd185ab8e442b12edc11c2cd13655f56b0bb1">

shopify_asset_url

Gibt die URL eines globalen Assets zurück, das sich auf den Servern von VersaCommerce befindet. Zu den weltweit gehosteten Vermögenswerten gehören:

option_selection. js
api. jquery. js
shopify_common. js
kunden_bereich. js
währungen. js
kunde. css

{{ 'option_selection.js' | shopify_asset_url | script_tag }}

<script src="//cdn.versacommerce.de/s/shopify/option_selection.js?20cf2ffc74856c1f49a46f6e0abc4acf6ae5bb34" type="text/javascript"></script>

sort_by

Erzeugt eine URL zu einer Sammlungsseite mit dem angegebenen Parameter sort_by. Dieser Filter muss auf eine Sammel-URL angewendet werden.

{{ collection.url | sort_by: 'best-verkaufte' }}

/Sammlungen/widgets?sort_by=best-verkaufte

Sie können den Filter sort_by an den Filter url_for_type oder url_for_vendor anhängen.

url_for_type

Erstellt eine URL, die auf eine Sammlungsseite verweist, die Produkte mit einem bestimmten Produkttyp enthält.

{{ "T-shirt" | url_for_type }}

/Sammlungen/types?q=T-shirt

url_for_vendor

Erzeugt eine URL, die auf eine Sammlungsseite verweist, die Produkte mit einem bestimmten Produktanbieter enthält.

{{ "VersaCommerce" | url_for_vendor }}

/Sammlungen/vendors?q=VersaCommerce

within

Erstellt eine sammlungsspezifische Produkt-URL, indem /collections/collection-handle einer Produkt-URL vorangestellt wird, wobei collection-handle das Handle der Sammlung ist, die gerade angezeigt wird.

<a href="{{ product.url | within: collection }}">{{ product.title }}</a>

<a href="/Sammlungen/frontpage/products/alien-poster">Alien Poster</a>

Wenn ein Produkt sammlungsfähig ist, kann seine Produktvorlage auf die Sammlungsausgabe der Sammlung, zu der es gehört, zugreifen. Auf diese Weise können Sie kollektionsbezogene Inhalte hinzufügen, z. B. verwandte Produkte.