Фильтры используются вместе с тегом вывода. Их задача заключается в управлении данными. Пример использования фильтра по дате:
{{ article.published_at | Дата: '%d %B %Y' }}
Без применения фильтра Shopify просто вывел бы дату, в которую была опубликована запись, в том формате, в котором она хранится в базе данных. Иногда этот формат абсолютно не читабелен для людей. Но добавив символ | и включив фильтрацию даты, мы сможем самостоятельно изменять формат.
Начинаем с фрагмента данных слева (в данном случае, это дата), и затем, используя фильтр, выводим данные в читабельном формате. Это и есть главная и единственная задача фильтров: брать данные и определенным образом изменять их:
Вот еще один пример:
{{ 'style.css' | asset_url | stylesheet_tag }}
Здесь мы используем два фильтра с общей целью: создать полноценный элемент style в нашем файле разметки.
Начинаем с названия CSS-файла слева, и сначала применяем к нему фильтр asset_url. Так как мы понятия не имеем, где в Shopify расположен необходимый нам файл style.css, нам нужно, чтобы платформа самостоятельно разобралась с нужным адресом.
Для этого и нужен фильтр asset_url. Он берет название нашего файла, style.css и составляет полноценный путь до этого файла в папке assets. Важно отметить, что он не осуществляет проверку наличия этого файла. Примерно так все будет выглядеть в итоге:
//cdn.shopify.com/s/files/1/0222/9076/assets/style.css
Второй фильтр, stylesheet_tag, берет этот URL, и оборачивает его в тег style, который позже выводится в файл разметки. Таким будет финальный результат:
<link href="//cdn.shopify.com/s/files/1/0222/9076/t/10/assets/style.css?756" rel="stylesheet" type="text/css" media="all" />
Каждый фильтр берет результат из предшествующего фильтра, а затем изменяет его по-своему. Если после него больше нет фильтров, то результат отправляется в шаблон в HTML-формате. Существует множество полезных фильтров, и вот некоторые из тех, которые вы будете использовать постоянно:
- asset_url;
- stylesheet_tag;
- script_tag;
- date;
- pluralize;
- replace;
- handle;
- money и money_with_currency;
- product_img_url;
- link_to.