URL filters

URL filters output links to assets on Haravan Hstatic. They are also used to create links for filtering collections and blogs.

In many URL filter outputs, you will see a question mark (?) with a number appended to the asset's file path. This is the file's version number. For example, the version number in this URL is 288:

//hstatic.net/434/1000006434/1000083751/logo.png?v=288

URL filters will always load the latest version of an asset.

Danh sách các bộ lọc url

asset_url

Returns the URL of a file in the "assets" folder of a theme.

Input

{{ 'shop.css' | asset_url }}

Output

//hstatic.net/434/1000006434/1000083751/shop.css?v=288

asset_img_url

Returns the asset URL of an image in the "assets" folder of a theme. asset_image_url accepts an image size parameter.

Input

{{ 'logo.png' | asset_img_url: 'small' }}

Output

//hstatic.net/434/1000006434/1000083751/logo_small.png?v=288

file_url

Returns the URL of a file in the Files page of the admin.

Input

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

Output

//hstatic.net/434/1000006434/1000083751/size-chart.pdf?v=288

file_img_url

Returns the asset URL of an image in the Files page of the admin. file_image_url accepts an image size parameter.

Input

{{ 'logo.png' | file_img_url: 'small' }}

Output

//hstatic.net/434/1000006434/1000083751/logo_small.png?v=288

Generates a link to the customer login page.

Input

{{ 'Log in' | customer_login_link }}

Output

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

global_asset_url

Returns the URL of a global asset. Global assets are kept in a directory on Haravan's servers. Using global assets can improve the load times of your pages.

Input

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

Output

<script src="http://hstatic.net/0/0/global/option_selection.js?v=1" type="text/javascript"></script>

The following global assets are available:

{{ 'option_selection.js' | global_asset_url | script_tag }}
{{ 'api.jquery.js' | global_asset_url | script_tag }}
{{ 'design/js/jquery.min.1.11.0.js' | global_asset_url | script_tag }}
{{ 'design/js/bootstrap.min.js' | global_asset_url | script_tag }}

img_url

Returns the URL of an image. Accepts an image size as a parameter. The img_url filter can be used on the following objects:

Input

{{ product | img_url: 'small' }}
{{ variant | img_url: 'small' }}
{{ line_item | img_url: 'small' }}
{{ image | img_url: 'small' }}
{{ collection | img_url: 'small' }}

Output

//hstatic.net/434/1000006434/1000083751/red_shirt.jpg
//hstatic.net/434/1000006434/1000083751/red_shirt.jpg
//hstatic.net/434/1000006434/1000083751/red_shirt.jpg
//hstatic.net/434/1000006434/1000083751/red_shirt.jpg
//hstatic.net/434/1000006434/1000083751/shirts_collection.jpg

>

Did you know?

For line items, img_url returns the URL of the line item's variant image. If the variant does not have an assigned image, img_url returns the URL of the product's featured image.

You can also use img_url on the image or src attributes of the above objects.

Input

{{ product.image | img_url: 'small' }}
{{ product.image.src | img_url: 'small' }}

Output

//hstatic.net/434/1000006434/1000083751/red_shirt.jpg
//hstatic.net/434/1000006434/1000083751/red_shirt.jpg

Generates an HTML link. The first parameter is the URL of the link, and the optional second parameter is the title of the link.

Input

{{ 'Haravan' | link_to: 'https://www.haravan.com','A link to Haravan' }}

Output

<a href="https://www.haravan.com" title="A link to Haravan">Haravan</a>

Creates an HTML link to a collection page that lists all products belonging to a vendor.

Input

{{ "Haravan" | link_to_vendor }}

Output

<a href="/collections/vendors?q=Haravan" title="Haravan">Haravan</a>

Creates an HTML link to a collection page that lists all products belonging to a product type.

Input

{{ "jeans" | link_to_type }}

Output

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

Creates a link to all products in a collection that have a given tag.

Input

collection.tags = ["Mens", "Womens", "Sale"]
{% for tag in collection.tags %}
  {{ tag | link_to_tag: tag }}
{% endfor %}

Output

<a title="Show products matching tag Mens" href="/collections/frontpage/mens">Mens</a>
<a title="Show products matching tag Womens" href="/collections/frontpage/womens">Womens</a>
<a title="Show products matching tag Sale" href="/collections/frontpage/sale">Sale</a>

Creates a link to all products in a collection that have a given tag as well as any tags that have been already selected.

Input

collection.tags = ["Mens", "Womens", "Sale"]
{% for tag in collection.tags %}
  {{ tag | link_to_add_tag: tag }}
{% endfor %}

Output

If you're on "/collections/frontpage/mens":
<a title="Show products matching tag Mens" href="/collections/frontpage/mens">Mens</a>
<a title="Show products matching tag Womens" href="/collections/frontpage/womens+mens">Womens</a>
<a title="Show products matching tag Sale" href="/collections/frontpage/sale+mens">Sale</a>

Generates a link to all products in a collection that have the given tag and all the previous tags that might have been added already.

Input

collection.tags = ["Mens", "Womens", "Sale"]
{% for tag in collection.tags %}
  {{ tag | link_to_add_tag: tag }}
{% endfor %}

Output

<!-- If you're on "/collections/frontpage/mens": -->
<a title="Remove tag Mens" href="/collections/frontpage">Mens</a>
<a title="Remove tag Womens" href="/collections/frontpage/mens">Womens</a>
<a title="Remove tag Sale" href="/collections/frontpage/mens">Sale</a>

payment_type_img_url

Returns the URL of the payment type's SVG image. Used in conjunction with the shop.enabled_payment_types variable.

Input

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

Output

If shop accepts American Express, MasterCard and Visa
<img src="//hstatic.net/434/1000006434/1000083751/creditcards_american_express.svg">
<img src="//hstatic.net/434/1000006434/1000083751/creditcards_master.svg">
<img src="//hstatic.net/434/1000006434/1000083751/creditcards_visa.svg">

product_img_url

Generates the product image URL. Accepts an image size as a parameter.

Input

{{ product.featured_image | product_img_url: "medium" }}

Output

//hstatic.net/434/1000006434/1000083751/shirt14_medium.jpeg

The available size parameters are listed below:

Parameters: image sizes
size Description
pico Returns the image at a maximum size of 16 by 16 pixels.
icon Returns the image at a maximum size of 32 by 32 pixels.
thumb Returns the image at a maximum size of 50 by 50 pixels.
small Returns the image at a maximum size of 100 by 100 pixels.
compact Returns the image at a maximum size of 160 by 160 pixels.
medium Returns the image at a maximum size of 240 by 240 pixels.
large Returns the image at a maximum size of 480 by 480 pixels.
grande Returns the image at a maximum size of 600 by 600 pixels.
original

Deprecated - do not use this when creating themes.

Returns the image at a maximum size of 1024 by 1024 pixels.
1024x1024 Returns the image at a maximum size of 1024 by 1024 pixels.
2048x2048 Returns the image at a maximum size of 2048 by 2048 pixels.
master Returns the largest possible image (the current maximum image size is 2048 x 2048 pixels).

collection_img_url

Returns the collection image's URL. Accepts the same size parameters as product_img_url.

Did you know?
This filter is deprecated. Use the [img_url](#img-url) filter instead.

Input

{{ collection.image | collection_img_url: 'medium' }}

Output

//hstatic.net/434/1000006434/1000083751/collection-image_medium.png

haravan_asset_url

Returns the URL of a global assets that are found on Haravan's servers. Globally-hosted assets include:

  • option_selection.js
  • api.jquery.js
  • haravan_common.js
  • customer_area.js
  • currencies.js
  • customer.css

Input

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

Output

<script src="//hstatic.net/434/1000006434/1000083751/option_selection.js" type="text/javascript"></script>

url_for_type

Creates a URL that links to a collection page containing products with a specific product type.

Input

{{ "T-shirt" | url_for_type }}

Output

/collections/types?q=T-shirt

url_for_vendor

Creates a URL that links to a collection page containing products with a specific product vendor.

Input

{{ "Haravan" | url_for_vendor }}

Output

/collections/vendors?q=Haravan

within

Creates a collection-aware product URL by prepending /collections/collection-handle to a product URL, where collection-handle is the handle of the collection that is currently being viewed.

Input

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

Output

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

When a product is collection-aware, its product template can access the collection output of the collection that it belongs to. This allows you to add in collection-related content, such as related products.

results matching ""

    No results matching ""