0% Complete
0/0 Steps
  1. Developers
    Работа с шопифай
    7 Topics
    |
    6 Quizzes
  2. Designers
    Shopify basics
    11 Topics
    |
    1 Quiz
  3. Введение по Liquid
    8 Topics
    |
    1 Quiz
  4. Liquid basics
    1 Quiz
Lesson 3, Topic 8
In Progress

Введение по Liquid: Фильтры

11.01.2022
Lesson Progress
0% Complete

Фильтры используются вместе с тегом вывода. Их задача заключается в управлении данными. Пример использования фильтра по дате:

{{ article.published_at | Дата: '%d %B %Y' }}

Без применения фильтра Shopify просто вывел бы дату, в которую была опубликована запись, в том формате, в котором она хранится в базе данных. Иногда этот формат абсолютно не читабелен для людей. Но добавив символ | и включив фильтрацию даты, мы сможем самостоятельно изменять формат.

Начинаем с фрагмента данных слева (в данном случае, это дата), и затем, используя фильтр, выводим данные в читабельном формате. Это и есть главная и единственная задача фильтров: брать данные и определенным образом изменять их:

Фильтры
В шпаргалке приведены все доступные фильтры в Liquid

Вот еще один пример:

{{ '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.