Зарегистрироваться

Фильтры Liquid

  1. Что такое фильтр и как им пользоваться?
  2. Список стандартных фильтров Liquid

Что такое фильтр и как им пользоваться?

Для преобразования выходных данных в более подходящий формат можно использовать фильтры. Фильтры - это обычные функции. Фильтр добавляется к используемой переменной в качестве атрибута, отделяясь символом

Например, {{ 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--"

Список стандартных фильтров Liquid

Фильтры для массивов

Фильтр
Назначение
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
Фильтр возвращает результат сложения input и operand. Если это строки, то они приводятся к формату "целое" перед сложением. 
{% assign number = 2 %}
{{ number | plus: 2 }}

Выведет "4"

minus
Фильтр возвращает результат вычитания operand из input. Если это строки, то они приводятся к формату "целое" перед вычитанием. 
{% assign number = 2 %}
{{ number | minus: 2 }}

Выведет "0"

times
Фильтр возвращает результат умножения 
{{ 10 | times: 2 }}

Выведет "20"

divided_by
Фильтр возвращает результат деления 
{{ 10 | divided_by: 2 }}

Выведет "5"

round
Фильтр возвращает результат округления operand до input знаков после разделителя.
round(input, operand) 
{{ 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
Фильтр используется для преобразовывания специальных html символов 
{{ "<p>test</p> <div class='block'></div>" | escape }}
#=> &lt;p&gt;test&lt;/p&gt; &lt;div class='block'&gt;&lt;/div&gt;

Выведет "<p>test</p> <div class='block'></div>"

newline_to_br
Фильтр добавляет тег конца строки перед каждым служебным символом "Новая строка" (символ, обозначаемый NL, \n, имеющий код 0ah). 
{% capture var %}
One
Two
Three
{% endcapture %}
{{ var | newline_to_br }}

Выведет "One <br>
Two <br>
Three <br>"

strip_html
Этот фильтр изымает из указанного текста все HTML-теги. Очень эффективен в сочетании с truncate. 
{{ '

Текст в теге
новая строка

' | strip_html | truncate: 20 }}

Выведет "Текст в теге нов..."

md5
Преобразует строку в 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_newlines
Фильтр изымает из указанной последовательности символов служебный символ "Новая строка" (символ, обозначаемый NL, \n, имеющий код 0ah).
url_encode
Пример 
{{ "john@liquidhub.ru" | url_encode }}

Выведет "john%40liquidhub.ru"

url_decode
Пример 
{{ 'john%40liquidhub.ru' | url_decode }}

Выведет "john@liquidhub.ru"

Фильтры для ссылок

asset_url
Возвращает ссылку на файл из темы. Если файла в теме нет, ссылка всё равно сформируется и переход по ссылке вернет 404 статус. 
{{ '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
Фильтр преобразует 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
Преобразует строку или Liquid переменную в JSON формат. 
<script type="text/javascript">
  var myObject = {
    text: {{ '<p>Строка в html теге</p>' | json }},
    product: {{ product | json }}
  }
  console.log(myObject);
</script>
custom_json
Получение полей liquid объектов в JSON формате 
<script type="text/javascript">
  var customArticle = {{ article | custom_json: 'title', 'id', 'author' }};
</script>
dark?
Проверяет, темный цвет или нет. Принимает только hex. 
{{ '#000000' | dark? }}

Выведет "true"

{{ '#ffffff' | dark? }}

Выведет "false"

change_lightness
Фильтр преобразует URL с учетом текущего языка 
{{ '#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
Фильтр создает из объекта изображения тег picture, в который добавляет изображение в формате .webp, а так же тег img с исходным форматом. 
{% 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).

Оставить оценку

Оценка успешно отправлена.
Она будет проверена администратором перед публикацией.
Нажимая кнопку «Отправить оценку», я принимаю пользовательское соглашение и политику конфиденциальности
Перед публикацией все оценки проходят модерацию

Оценки: 0

Остались вопросы?
Отправь тикет в техподдержку!
Создать вопрос
Еще нет своего магазина?
Создайте интернет-магазин на платформе inSales
Всё для продаж уже внутри!
Нажимая кнопку «Создать магазин», я принимаю публичную оферту, пользовательское соглашение и политику конфиденциальности
Недавно просмотренные статьи
    Каналы продаж
    Интернет-магазин Маркетплейсы
    Возможности
    Функционал платформы Шаблоны дизайна Приложения Доставка Мессенджеры Маркетинг и SEO Генератор UTM-меток
    Компания
    Университет inSales Пресс-центр Мероприятия Вакансии Реферальная программа Реселлерская программа Портал для разработчиков Документация по inSales API FAQ для партнёров
    Помощь
    Документация Как открыть интернет-магазин Частые вопросы Оферта и соглашения Комплаенс Ваша кибербезопасность Политика конфиденциальности Карта сайта
    8 495 649-83-14
    Москва
    info@insales.ru
    Отдел по работе с клиентами
    8 800 555-10-61
    Россия, звонок бесплатный
    Мобильное приложение
    Мы в социальных сетях
    © 2008-2025. Все права защищены. ООО «Инсейлс Рус» (InSales Rus LLC). ОГРН 1117746506514, ИНН 7714843760.
    Входит в реестр аккредитованных ИТ-компаний. Включена в единый реестр ПО РФ. Запись №8456
    © 2008-2025. Все права защищены.
    ООО «Инсейлс Рус» (InSales Rus LLC).
    ОГРН 1117746506514, ИНН 7714843760.
    Входит в реестр аккредитованных ИТ-компаний. Включена в единый реестр ПО РФ. Запись №8456
    Продолжая пользоваться сайтом,
    вы соглашаетесь с использованием cookie