Для преобразования выходных данных в более подходящий формат можно использовать фильтры. Фильтры - это обычные функции. Фильтр добавляется к используемой переменной в качестве атрибута, отделяясь символом
Например, {{ product.price }} - переменная, хранящая данные о цене товара. Для того, чтобы значение цены товара выводилось с указанием символа используемой валюты, можно добавить фильтр | money.
{{ product.price }} Выведется "100"
{{ product.price | money }} Выведется "100 руб."
Исходные данные в значении переменной при этом сохраняют своё прежнее значение.
Также можно применять несколько фильтров по очереди:
{{ product.price | money }} Выведется "100 руб."
{{ product.price | times: 2 | money }} Выведется "200 руб."
Если у фильтра больше одного аргумента, то остальные аргументы перечисляются справа от имени фильтра после символа ":" (двоеточие) через запятую:
{{ "The cat came back the very next day" | truncatewords: 4 }} Выведется "The cat came back..."
{{ "The cat came back the very next day" | truncatewords: 4, "--" }} Выведется "The cat came back--"
size{% assign string = 'wooden, deepsnow, season2006' %}
{% assign array = string | split: ', ' | reverse %}
{{ array | size }}Выведет "3"
first{% assign string = 'wooden, deepsnow, season2006' %}
{% assign array = string | split: ', '%}
{{ array | first }}Выведет "wooden"
last{% assign string = 'wooden, deepsnow, season2006' %}
{% assign array = string | split: ', '%}
{{ array | last }}Выведет "season2006"
split{% assign string = 'wooden, deepsnow, season2006' %}
{% assign array = string | split: ', '%}
{{array[0]}}Выведет "wooden"
join{% assign my_string = 'wooden, deepsnow, season2006' %}
{% assign my_array = my_string | split: ', '%}
{{ my_array | join: ', ' }}Выведет "wooden, deepsnow, season2006"
reverse{% assign string = 'wooden, deepsnow, season2006' %}
{% assign array = string | split: ', ' | reverse %}
{{ array | first }}
season2006Выведет "season2006"
{{ array | last }}Выведет "wooden"
sort// products = "a", "b", "A", "B"
{% assign products = collection.products | sort: 'title' %}
{% for product in products %}
{{ product.title }}
{% endfor %}
Выведет "A B a b"
map{% assign collection_titles = collections | map: 'title' %}
{% for collection_title in collection_titles %}
{{ collection_title }},
{% endfor %}
Выведет "каталог1,каталог2,каталог3,"
where{{ collections.all.products | where: "available", false | size }}concat{% assign fruits = "apples, oranges, peaches, tomatoes" | split: ", " %}
{% assign vegetables = "broccoli, carrots, lettuce, tomatoes" | split: ", " %}
{% assign plants = fruits | concat: vegetables %}
Выведет "apples","oranges","peaches","tomatoes","tomatoes","broccoli","carrots","lettuce","tomatoes"
uniq{% assign fruits = "apples, oranges, peaches, tomatoes, tomatoes" | split: ", " | uniq | json %}
Выведет "apples, oranges, peaches, tomatoes"
plus{% assign number = 2 %}
{{ number | plus: 2 }}Выведет "4"
minus{% assign number = 2 %}
{{ number | minus: 2 }}Выведет "0"
times{{ 10 | times: 2 }}Выведет "20"
divided_by{{ 10 | divided_by: 2 }}Выведет "5"
round{{ 4.6 | round: 0 }}Выведет "5"
{{ 4.3 | round: 0 }}Выведет "4"
{{ 4.5612 | round: 2 }}Выведет "4.56"
modulo{{ 12 | modulo: 5 }}Выведет "2"
to_integer{{ '10' | to_integer }}Выведет "10"
{{ nil | to_integer }}Выведет "0"
{% assign test = '10' | to_integer %}
{% if test > 9 %}
test > 9
{% endif %}Выведет "test > 9"
money{{ product.price | money }}Выведет "1 000 руб."
{{ 1000 | money }}Выведет "1 000 руб."
append{{ 'sales' | append: '.jpg' }}Выведет "sales.jpg"
prepend{{ 'sale' | prepend: 'Made a great ' }}Выведет "Made a great sale"
capitalize{{ 'capitalize me' | capitalize }}Выведет "Capitalize me"
replace// product.title = "Awesome Shoes"
{{ product.title | replace: 'Awesome', 'Mega' }}Выведет "Mega Shoes"
upcase{{ 'i want this to be uppercase' | upcase }}Выведет "I WANT THIS TO BE UPPERCASE"
downcase{{ 'UPPERCASE' | downcase }}Выведет "uppercase"
escape{{ "<p>test</p> <div class='block'></div>" | escape }}
#=> <p>test</p> <div class='block'></div>Выведет "<p>test</p> <div class='block'></div>"
newline_to_br{% capture var %}
One
Two
Three
{% endcapture %}
{{ var | newline_to_br }}Выведет "One <br>
Two <br>
Three <br>"
strip_html{{ 'Текст в теге
новая строка
' | strip_html | truncate: 20 }}
Выведет "Текст в теге нов..."
md5{{ 'test md5' | md5 }}Выведет "0e4e3b2681e8931c067a23c583c878d5"
remove{{ "Hello, world. Goodbye, world." | remove: "world" }}Выведет "Hello, . Goodbye, ."
remove_first{{ "Hello, world. Goodbye, world." | remove_first: "world" }}Выведет "Hello, . Goodbye, world."
lstrip{{ " So much room for activities! " | lstrip }}Выведет "So much room for activities!"
truncate{{ "The cat came back the very next day" | truncate: 13 }}The cat ca...
{{ "ABCDEFGHIJKLMNOPQRSTUVWXYZ" | truncate: 18, ", and so on" }}ABCDEFG, and so on
truncatewords{{ "The cat came back the very next day" | truncatewords: 4 }}Выведет "The cat came back..."
{{ "The cat came back the very next day" | truncatewords: 4, "--" }}Выведет "The cat came back--"
strip_newlinesurl_encode{{ "john@liquidhub.ru" | url_encode }}Выведет "john%40liquidhub.ru"
url_decode{{ 'john%40liquidhub.ru' | url_decode }}Выведет "john@liquidhub.ru"
asset_url{{ 'shop.css' | asset_url }}Выведет "//assets3.insales.ru/assets/1/7120/23504/v_1479117076/build/shop.css"
asset_url_if_exists{% assign path = "image.png" | asset_url_if_exists %}
{% if path %}
<img src="{{ path }}" />
{% else %}
Картинка отсутствует
{% endif %}file_url{{ 'image.png' | file_url }}add_param{{ '/product?lang=ru' | add_param: 'variant_id', 123456 }}Выведет "/product?lang=ru&variant_id=123456"
locale_url{{'/page/about' | locale_url}}Выведет "/page/about?lang=en"
default{{ product_price | default: 2.99 }}Выведет "2.99"
{% assign product_price = "" %}
{{ product_price | default: 2.99 }}Выведет "2.99"
date{{ 'now' | date: "%Y" }}%a - Сокращённое обозначение дня недели (``Sun'') %A - Полное обозначение дня недели (``Sunday'') %b - Сокращённое обозначение названия месяца (``Jan'') %B - Полное обозначение названия месяца (``January'') %c - Предпочтительное местное представление даты и времени %d - День месяца (01..31) %H - Час суток, 24-часовое представление (00..23) %I - Час суток, 12-часовое представление (01..12) %j - Номер дня года (001..366) %m - Номер месяца года (01..12) %M - Номер минуты часа (00..59) %p - Указатель времени суток (``AM'' or ``PM'') ''после полудня'' или ''до полудня'' соответственно %S - Секунда минуты (00..60) %U - Неделя текущего года, начиная с первого воскресенья года как первого дня первой недели (00..53) %W - Неделя текущего года, начиная с первого понедельника года как первого дня первой недели (00..53) %w - Номер дня недели (Воскресенью соответствует 0, 0..6) %x - Предпочтительное представление только даты, без указания времени %X - Предпочтительное представление только времени, без указания даты %y - Номер года двузначный (00..99) %Y - Номер года четырёхзначный %Z - Имя временной зоны %% - Обозначает символ ``%''
json<script type="text/javascript">
var myObject = {
text: {{ '<p>Строка в html теге</p>' | json }},
product: {{ product | json }}
}
console.log(myObject);
</script>
custom_json<script type="text/javascript">
var customArticle = {{ article | custom_json: 'title', 'id', 'author' }};
</script>
dark?{{ '#000000' | dark? }}Выведет "true"
{{ '#ffffff' | dark? }}Выведет "false"
change_lightness{{ '#0036b3' | change_lightness: -20 }}Выведет "#002270"
{{ '#0036b3' | change_lightness: 0 }}Выведет "#0036b3"
{{ '#0036b3' | change_lightness: 20 }}Выведет "#0049f5"
image_url<img src="{{ product.first_image | image_url: 800, resizing_type: 'fit_width' }}">
<img src="{{ article.image | image_url: 320, format: 'jpg' }}">
<img src="{{ collection.image | image_url: 600, format: 'webp' }}">Фильтр на вход принимает параметр в виде числа. Например если указать 200, то изображение уменьшится с сохранением пропорций до 200px по длинной стороне. 200x400 = > 100x200. Минимальный размер 16px. Максимальный размер 2048px. У фильтра есть второй не обязательный параметр - format. Этот параметр принимает 2 значения - 'jpg' или 'webp'. Параметр format преобразовывает png => jpg или любой формат в webp, что позволяет оптимизировать изображение. ! Если исходное изображение по размеру меньше указанного в фильтре, изображение будет растянуто до указанно значения. ! Не применяется к ассетам темы (содержимое папки media). Параметр resizing_type дает возможность заставить картинку изменять размер по ширине. Для этого необходимо выставить значение fit_width
webp_picture_tag{% assign image_title = product.title | escape %}
{{ product.first_image | webp_picture_tag: 600, class: 'product-image', data-index: 1, alt: image_title, title: image_title }}Выведет:
<picture>
<source srcset="https://static-eu.insales.ru/.../600/600/.../product.png@webp" type="image/webp">
<img src="https://static-eu.insales.ru/.../600/600..product.png" class="product-image" data-index="1" alt="товар" title="товар">
</picture>
{{ collection.image | webp_picture_tag: 600 }}Выведет:
<picture>
<source srcset="https://static-eu.insales.ru/.../600/600/.../image_original.jpg@webp" type="image/webp">
<img src="https://static-eu.insales.ru/r/.../600/600/.../image_original.jpg">
</picture>
Фильтр принимает обязательное значение (размер изображения) в формате числа. Через запятую можно указать атрибуты для тега img. Если у изображения товара заполнено имя, оно проставиться в атрибут title автоматически. ! Не применяется к ассетам темы (содержимое папки media).
