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

size Возвращает длинну массива

Возвращает длинну массива
Liquid
        
          

{% assign string = 'wooden, deepsnow, season2006' %}
{% assign array = string | split: ', ' | reverse %}
{{ array | size }}
#=> 3

first Фильтр возвращает первый элемент из массива

Фильтр возвращает первый элемент из массива
Liquid
        
          

{% assign string = 'wooden, deepsnow, season2006' %}
{% assign array = string | split: ', '%}
{{ array | first }}
#=> wooden

last Фильтр возвращает последний элемент из массива

Фильтр возвращает последний элемент из массива
Liquid
        
          

{% assign string = 'wooden, deepsnow, season2006' %}
{% assign array = string | split: ', '%}
{{ array | last }}
#=> season2006

split Разбивает строку на массив подстрок по указанному разделителю

Разбивает строку на массив подстрок по указанному разделителю
Liquid
        
          

{% assign string = 'wooden, deepsnow, season2006' %}
{% assign array = string | split: ', '%}
{{array[0]}} #=> wooden

join Фильтр объединяет массив в строку, используя как разделитель элементов указанную последовательность символов.

Фильтр объединяет массив в строку, используя как разделитель элементов указанную последовательность символов.
Liquid
        
          

{% assign my_string = 'wooden, deepsnow, season2006' %}
{% assign my_array = my_string | split: ', '%}
{{ my_array | join: ', ' }}
#=> wooden, deepsnow, season2006

reverse Меняет порядок элементов в массиве.

Меняет порядок элементов в массиве.
Liquid
        
          

{% assign string = 'wooden, deepsnow, season2006' %}
{% assign array = string | split: ', ' | reverse %}
{{ array | first }}
#=> season2006
{{ array | last }}
#=> wooden

sort Фильтр используется для сортировки массива. Второй параметр - необязательный.

Фильтр используется для сортировки массива. Второй параметр - необязательный.
Liquid
        
          

<!-- products = "a", "b", "A", "B" -->
{% assign products = collection.products | sort: 'title' %}
{% for product in products %}
  {{ product.title }}
{% endfor %}

#=> A B a b

map Принимает атрибут элемента массива в качестве параметра и создает массив из значения каждого элемента массива.

Принимает атрибут элемента массива в качестве параметра и создает массив из значения каждого элемента массива.
Liquid
        
          

{% assign collection_titles = collections | map: 'title' %}

{% for collection_title in collection_titles %}
  {{ collection_title }},
{% endfor %}

#=> каталог1,каталог2,каталог3,

where Отфильтровать массив по полям и их значениям

Отфильтровать массив по полям и их значениям
Liquid
        
          

{{ collections.all.products | where: "available", false | size }}

concat Объединение двух массивов в один

Объединение двух массивов в один
Liquid
        
          

{% 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 Убирает дубли элементов массива

Убирает дубли элементов массива
Liquid
        
          

{% assign fruits = "apples, oranges, peaches, tomatoes, tomatoes" | split: ", " | uniq | json  %} 

=> [apples, oranges, peaches, tomatoes]

Математические фильтры

plus Фильтр возвращает результат сложения input и operand. Если это строки, то они приводятся к формату "целое" перед сложением.

Фильтр возвращает результат сложения input и operand. Если это строки, то они приводятся к формату "целое" перед сложением.
Liquid
        
          

{% assign number = 2 %}
{{ number | plus: 2 }}
#=> 4

minus Фильтр возвращает результат вычитания operand из input. Если это строки, то они приводятся к формату "целое" перед вычитанием.

Фильтр возвращает результат вычитания operand из input. Если это строки, то они приводятся к формату "целое" перед вычитанием.
Liquid
        
          

{% assign number = 2 %}
{{ number | minus: 2 }}
#=> 0

times Фильтр возвращает результат умножеия

Фильтр возвращает результат умножеия
Liquid
        
          

{{ 10 | times: 2 }}
#=> 20

divided_by Фильтр возвращает результат деления

Фильтр возвращает результат деления
Liquid
        
          

{{ 10 | divided_by: 2 }}
#=> 5

round round(input, operand) Фильтр возвращает результат округления operand до input знаков после разделителя.

round(input, operand)
Фильтр возвращает результат округления operand до input знаков после разделителя.
Liquid
        
          

{{ 4.6 | round: 0 }}
{{ 4.3 | round: 0 }}
{{ 4.5612 | round: 2 }}
#=> 5
#=> 4
#=> 4.56

modulo Модуль числа. Возвращает остаток после деления

Модуль числа. Возвращает остаток после деления
Liquid
        
          

{{ 12 | modulo: 5 }}
#=> 2

to_integer Привести строку к числу

Привести строку к числу

code
        
          

{{ '10' | to_integer }}
=>10


{{ nil | to_integer }}
=> 0

{% assign test = '10' | to_integer %}
{% if test > 9 %}
test > 9
{% endif %}
=> test > 9

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

asset_url Возвращает ссылку на файл из темы. Если файла в теме нет, ссылка всё равно сформируется и переход по ссылке вернет 404 статус.

Возвращает ссылку на файл из темы.
Если файла в теме нет, ссылка всё равно сформируется и переход по ссылке вернет 404 статус.
Liquid
        
          
{{ 'shop.css' | asset_url }}
=> //assets3.insales.ru/assets/1/7120/23504/v_1479117076/build/shop.css

asset_url_if_exists Возвращает ссылку на файл из темы. Если файла в теме нет, возвращается пустая строка.

Возвращает ссылку на файл из темы. Если файла в теме нет, возвращается пустая строка.

Liquid
        
          

{% assign path = "image.png" | asset_url_if_exists %}
{% if path %}
  <img src="{{ path }}" />
{% else %}
  Картинка отсутствует
{% endif %}

file_url Фильтр формирует полный путь до файла из раздела Сайт->Файлы

Фильтр формирует полный путь до файла из раздела Сайт->Файлы
Liquid
        
          
{{ 'image.png' | file_url }}

add_param Добавить гет параметр к ссылке

Добавить гет параметр к ссылке

code
        
          

{{ '/product?lang=ru' | add_param: 'variant_id', 123456 }}
=>
/product?lang=ru&variant_id=123456

locale_url Фильтр преобразует URL с учетом текущего языка

Фильтр преобразует URL с учетом текущего языка

code
        
          
{{'/page/about' | locale_url}}
=> /page/about?lang=en

Строковые фильтры

money Добавляет символ валюты к числу. В соответствии с настройками в бэк-офисе. Посмотреть или изменить настройки можно тут: Настройки -> Настройки магазина -> Валюты Фильтр обрабатывает только цифры.

Добавляет символ валюты к числу. В соответствии с настройками в бэк-офисе.
Посмотреть или изменить настройки можно тут:
Настройки -> Настройки магазина -> Валюты

Фильтр обрабатывает только цифры.
Liquid
        
          
{{ product.price | money }}

#=> 1 000 руб.

{{ 1000 | money }}

#=> 1 000 руб.

append Добавить символы к концу строки

Добавить символы к концу строки
Liquid
        
          

{{ 'sales' | append: '.jpg' }}
#=> sales.jpg

prepend Добавить символы к началу строки

Добавить символы к началу строки
Liquid
        
          

{{ 'sale' | prepend: 'Made a great ' }}

#=> Made a great sale

capitalize Фильтр используется для преобразования первой буквы строки в заглавную

Фильтр используется для преобразования первой буквы строки в заглавную
Liquid
        
          

{{ 'capitalize me' | capitalize }}
#=> Capitalize me

replace Заменяет все вхождения строки с подстроки.

Заменяет все вхождения строки с подстроки.
Liquid
        
          

<!-- product.title = "Awesome Shoes" -->
{{ product.title | replace: 'Awesome', 'Mega' }}

#=> Mega Shoes

upcase Фильтр преобразовывает строку к верхнему регистру.

Фильтр преобразовывает строку к верхнему регистру.
Liquid
        
          

{{ 'i want this to be uppercase' | upcase }}
#=> I WANT THIS TO BE UPPERCASE

downcase Фильтр преобразовывает строку к нижнему регистру.

Фильтр преобразовывает строку к нижнему регистру.
Liquid
        
          

{{ 'UPPERCASE' | downcase }}
#=> uppercase

escape Фильтр используется для преобразовывания специальных html символов

Фильтр используется для преобразовывания специальных html символов
Liquid
        
          

{{ "<p>test</p> <div class='block'></div>" | escape }}
#=> &lt;p&gt;test&lt;/p&gt; &lt;div class='block'&gt;&lt;/div&gt;

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

Фильтр добавляет тег конца строки
перед каждым служебным символом "Новая строка" (символ, обозначаемый NL, \n, имеющий код 0ah).
Liquid
        
          

{% capture var %}
One
Two
Three
{% endcapture %}
{{ var | newline_to_br }}

#=>

One <br>
Two<br>
Three<br>

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

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

{{ '<p>Текст в теге </br> новая строка</p>' | strip_html | truncate: 20 }}

>> Текст в теге нов...

md5 Преобразует строку в MD5 хеш.

Преобразует строку в MD5 хеш.
Liquid
        
          

{{ 'test md5' | md5 }}

#=> 0e4e3b2681e8931c067a23c583c878d5

remove Удаляет все вхождения подстроки из строки.

Удаляет все вхождения подстроки из строки.
Liquid
        
          

{{ "Hello, world. Goodbye, world." | remove: "world" }}
#=> Hello, . Goodbye, .

remove_first Удаляет только первое вхождение подстроки из строки.

Удаляет только первое вхождение подстроки из строки.
Liquid
        
          

{{ "Hello, world. Goodbye, world." | remove_first: "world" }}
#=> Hello, . Goodbye, world.

lstrip Удалить табы, пробелы, переносы в начале строки

Удалить табы, пробелы, переносы в начале строки
Liquid
        
          

{{ " So much room for activities! " | lstrip }}
>> So much room for activities!

truncate Фильтр укорачивает строки до указанного количества символов удалением конца строки.

Фильтр укорачивает строки до указанного количества символов удалением конца строки.
Liquid
        
          

{{ "The cat came back the very next day" | truncate: 13 }}
The cat ca...


{{ "ABCDEFGHIJKLMNOPQRSTUVWXYZ" | truncate: 18, ", and so on" }}
ABCDEFG, and so on

truncatewords Фильтр укорачивает строку до указанного количества символов удалением конца строки.

Фильтр укорачивает строку до указанного количества символов удалением конца строки.
Liquid
        
          
{{ "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).

Фильтр изымает из указанной последовательности символов служебный символ "Новая строка" (символ, обозначаемый NL, \n, имеющий код 0ah).

url_encode

Liquid
        
          

{{ "john@liquidhub.ru" | url_encode }}

=> john%40liquidhub.ru

url_decode

Liquid
        
          

{{ 'john%40liquidhub.ru' | url_decode }}

=> john@liquidhub.ru

Дополнительные фильтры

default Задать значение поумолчанию

Задать значение поумолчанию
Liquid
        
          

{{ product_price | default: 2.99 }}
>> 2.99
{% assign product_price = "" %}
{{ product_price | default: 2.99 }}
>> 2.99

date Фильтр преобразует формат даты в указанный (все даты - григорианского календаря)

Фильтр преобразует формат даты в указанный (все даты - григорианского календаря)
  • %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 - Имя временной зоны
  • %% - Обозначает символ ``%''
Liquid
        
          
{{ 'now' | date: "%Y" }}

json Преобразует строку или Liquid переменную в JSON формат.

Преобразует строку или Liquid переменную в JSON формат.
Liquid
        
          

<script type="text/javascript">
  var myObject = {
    text: {{ '<p>Строка в html теге</p>' | json }},
    product: {{ product | json }}
  }
  console.log(myObject);
</script>

custom_json Получение полей liquid объектов в JSON формате

Получение полей liquid объектов в JSON формате
Liquid
        
          

<script type="text/javascript">
  var customArticle = {{ article | custom_json: 'title', 'id', 'author' }};
</script>

dark? Проверяет, темный цвет или нет. Принимает только hex.

Проверяет, темный цвет или нет. Принимает только hex.

code
        
          

{{ '#000000' | dark? }}
=> true

{{ '#ffffff' | dark? }}
=> false

 

 

change_lightness Изменить яркость цвета

Изменить яркость цвета

code
        
          

{{ '#0036b3' | change_lightness: -20 }}
=> #002270
{{ '#0036b3' | change_lightness: 0 }}
=> #0036b3
{{ '#0036b3' | change_lightness: 20 }}
=> #0049f5

Фильтры для изображений

image_url Фильтр для указания размера изображения.

Фильтр для указания размера изображения.

Фильтр на вход принимает параметр в виде числа.
Например если указать 200, то изображение уменьшится с сохранением пропорций до 200px по длинной стороне. 200x400 = > 100x200.
Минимальный размер 16px.
Максимальный размер 2048px.

У фильтра есть второй не обязательный параметр - format.
Этот параметр принимает 2 значения - 'jpg' или 'webp'.
Параметр format преобразовывает png => jpg или любой формат в webp, что позволяет оптимизировать изображение.

! Если исходное изображение по размеру меньше указанного в фильтре, изображение будет растянуто до указанно значения.

Не применяется к ассетам темы (содержимое папки media).

Параметр resizing_type дает возможность заставить картинку изменять размер по ширине.
Для этого необходимо выставить значение fit_width

 

Liquid
        
          

<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' }}">

webp_picture_tag Фильтр создает из объекта изображения тег picture, в который добавляет изображение в формате .webp, а так же тег img с исходным форматом.

Фильтр создает из объекта изображения тег picture, в который добавляет изображение в формате .webp, а так же тег img с исходным форматом.

Фильтр принимает обязательное значение (размер изображения) в формате числа.

Через запятую можно указать атрибуты для тега img. Если у изображения товара заполнено имя, оно проставиться в атрибут title автоматически. 

Не применяется к ассетам темы (содержимое папки media).

Liquid
        
          

{% 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>

HTML

select_option

Фильтр select_option создает HTML-элемент <option> для использования внутри тега <select>. Он автоматически устанавливает атрибут selected, если переданное значение совпадает с выбранным значением.

▎Параметры

- value: Значение опции (будет использовано в атрибуте value).
- selected: Текущее выбранное значение.
- name: Отображаемое имя опции (текст внутри тега <option>).

▎Возвращаемое значение

Возвращает строку, представляющую HTML-элемент <option>.

Liquid
        
          

1. Базовое использование:

{% assign current_value = "2" %}
{{ "1" | select_option: current_value, "Опция 1" }}
{{ "2" | select_option: current_value, "Опция 2" }}
{{ "3" | select_option: current_value, "Опция 3" }}


Результат:
<option value='1'>Опция 1</option>
<option selected value='2'>Опция 2</option>
<option value='3'>Опция 3</option>


Пример для селекта с выбором количества товаров на странице

<form action="{{collection.url}}" method="get">
    <select name="page_size">
        {{ "24" | select_option: page_size, "24 товара" }}
        {{ "48" | select_option: page_size, "48 товара" }}
        {{ "72" | select_option: page_size, "72 товара" }}
    </select>
</form>

Новости и статьи
Обновления платформы
Документация по API insales
API для написания интеграций
Разработка приложений
Пошаговая документация
Партнерская программа
Станьте партнером InSales
Продолжая пользоваться сайтом, вы
соглашаетесь с использованием cookie