{% assign string = 'wooden, deepsnow, season2006' %}
{% assign array = string | split: ', ' | reverse %}
{{ array | size }}
#=> 3
{% assign string = 'wooden, deepsnow, season2006' %}
{% assign array = string | split: ', '%}
{{ array | first }}
#=> wooden
{% assign string = 'wooden, deepsnow, season2006' %}
{% assign array = string | split: ', '%}
{{ array | last }}
#=> season2006
{% assign string = 'wooden, deepsnow, season2006' %}
{% assign array = string | split: ', '%}
{{array[0]}} #=> wooden
{% assign my_string = 'wooden, deepsnow, season2006' %}
{% assign my_array = my_string | split: ', '%}
{{ my_array | join: ', ' }}
#=> wooden, deepsnow, season2006
{% assign string = 'wooden, deepsnow, season2006' %}
{% assign array = string | split: ', ' | reverse %}
{{ array | first }}
#=> season2006
{{ array | last }}
#=> wooden
<!-- products = "a", "b", "A", "B" -->
{% assign products = collection.products | sort: 'title' %}
{% for product in products %}
{{ product.title }}
{% endfor %}
#=> A B a b
{% assign collection_titles = collections | map: 'title' %}
{% for collection_title in collection_titles %}
{{ collection_title }},
{% endfor %}
#=> каталог1,каталог2,каталог3,
{{ collections.all.products | where: "available", false | size }}
{% 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"]
{% assign fruits = "apples, oranges, peaches, tomatoes, tomatoes" | split: ", " | uniq | json %}
=> [apples, oranges, peaches, tomatoes]
{% assign number = 2 %}
{{ number | plus: 2 }}
#=> 4
{% assign number = 2 %}
{{ number | minus: 2 }}
#=> 0
{{ 10 | times: 2 }}
#=> 20
{{ 10 | divided_by: 2 }}
#=> 5
{{ 4.6 | round: 0 }}
{{ 4.3 | round: 0 }}
{{ 4.5612 | round: 2 }}
#=> 5
#=> 4
#=> 4.56
{{ 12 | modulo: 5 }}
#=> 2
Привести строку к числу
{{ '10' | to_integer }}
=>10
{{ nil | to_integer }}
=> 0
{% assign test = '10' | to_integer %}
{% if test > 9 %}
test > 9
{% endif %}
=> test > 9
{{ 'shop.css' | asset_url }}
=> //assets3.insales.ru/assets/1/7120/23504/v_1479117076/build/shop.css
Возвращает ссылку на файл из темы. Если файла в теме нет, возвращается пустая строка.
{% assign path = "image.png" | asset_url_if_exists %}
{% if path %}
<img src="{{ path }}" />
{% else %}
Картинка отсутствует
{% endif %}
{{ 'image.png' | file_url }}
Добавить гет параметр к ссылке
{{ '/product?lang=ru' | add_param: 'variant_id', 123456 }}
=>
/product?lang=ru&variant_id=123456
Фильтр преобразует URL с учетом текущего языка
{{'/page/about' | locale_url}}
=> /page/about?lang=en
{{ product.price | money }}
#=> 1 000 руб.
{{ 1000 | money }}
#=> 1 000 руб.
{{ 'sales' | append: '.jpg' }}
#=> sales.jpg
{{ 'sale' | prepend: 'Made a great ' }}
#=> Made a great sale
{{ 'capitalize me' | capitalize }}
#=> Capitalize me
<!-- product.title = "Awesome Shoes" -->
{{ product.title | replace: 'Awesome', 'Mega' }}
#=> Mega Shoes
{{ 'i want this to be uppercase' | upcase }}
#=> I WANT THIS TO BE UPPERCASE
{{ 'UPPERCASE' | downcase }}
#=> uppercase
{{ "<p>test</p> <div class='block'></div>" | escape }}
#=> <p>test</p> <div class='block'></div>
{% capture var %}
One
Two
Three
{% endcapture %}
{{ var | newline_to_br }}
#=>
One <br>
Two<br>
Three<br>
{{ '<p>Текст в теге </br> новая строка</p>' | strip_html | truncate: 20 }}
>> Текст в теге нов...
{{ 'test md5' | md5 }}
#=> 0e4e3b2681e8931c067a23c583c878d5
{{ "Hello, world. Goodbye, world." | remove: "world" }}
#=> Hello, . Goodbye, .
{{ "Hello, world. Goodbye, world." | remove_first: "world" }}
#=> Hello, . Goodbye, world.
{{ " So much room for activities! " | lstrip }}
>> So much room for activities!
{{ "The cat came back the very next day" | truncate: 13 }}
The cat ca...
{{ "ABCDEFGHIJKLMNOPQRSTUVWXYZ" | truncate: 18, ", and so on" }}
ABCDEFG, and so on
{{ "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--
{{ "john@liquidhub.ru" | url_encode }}
=> john%40liquidhub.ru
{{ 'john%40liquidhub.ru' | url_decode }}
=> john@liquidhub.ru
{{ product_price | default: 2.99 }}
>> 2.99
{% assign product_price = "" %}
{{ product_price | default: 2.99 }}
>> 2.99
{{ 'now' | date: "%Y" }}
<script type="text/javascript">
var myObject = {
text: {{ '<p>Строка в html теге</p>' | json }},
product: {{ product | json }}
}
console.log(myObject);
</script>
<script type="text/javascript">
var customArticle = {{ article | custom_json: 'title', 'id', 'author' }};
</script>
Проверяет, темный цвет или нет. Принимает только hex.
{{ '#000000' | dark? }}
=> true
{{ '#ffffff' | dark? }}
=> false
Изменить яркость цвета
{{ '#0036b3' | change_lightness: -20 }}
=> #002270
{{ '#0036b3' | change_lightness: 0 }}
=> #0036b3
{{ '#0036b3' | change_lightness: 20 }}
=> #0049f5
Фильтр для указания размера изображения.
Фильтр на вход принимает параметр в виде числа.
Например если указать 200, то изображение уменьшится с сохранением пропорций до 200px по длинной стороне. 200x400 = > 100x200.
Минимальный размер 16px.
Максимальный размер 2048px.
У фильтра есть второй не обязательный параметр - format.
Этот параметр принимает 2 значения - 'jpg' или 'webp'.
Параметр format преобразовывает png => jpg или любой формат в webp, что позволяет оптимизировать изображение.
! Если исходное изображение по размеру меньше указанного в фильтре, изображение будет растянуто до указанно значения.
! Не применяется к ассетам темы (содержимое папки media).
Параметр resizing_type дает возможность заставить картинку изменять размер по ширине.
Для этого необходимо выставить значение fit_width
<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' }}">
Фильтр создает из объекта изображения тег picture, в который добавляет изображение в формате .webp, а так же тег img с исходным форматом.
Фильтр принимает обязательное значение (размер изображения) в формате числа.
Через запятую можно указать атрибуты для тега img. Если у изображения товара заполнено имя, оно проставиться в атрибут title автоматически.
! Не применяется к ассетам темы (содержимое папки media).
{% 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>
Фильтр select_option создает HTML-элемент <option> для использования внутри тега <select>. Он автоматически устанавливает атрибут selected, если переданное значение совпадает с выбранным значением.
▎Параметры
- value: Значение опции (будет использовано в атрибуте value).
- selected: Текущее выбранное значение.
- name: Отображаемое имя опции (текст внутри тега <option>).
▎Возвращаемое значение
Возвращает строку, представляющую HTML-элемент <option>.
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>
Фильтр link_to используется для создания HTML элемента ссылки (<a>) из заданного URL и текста ссылки. Кроме того, он допускает необязательный атрибут title для ссылки.
Параметры
Возвращаемое значение
Возвращает строку, представляющую собой HTML элемент <a>.
{{ "Перейти в корзину" | link_to: cart_url, "Ваша корзина" }}
<a href="/cart_items" title="Ваша корзина">Перейти в корзину</a>