Как пользоваться сниппетами

Сниппеты в программировании — это небольшие фрагменты кода которые обычно повторно используются в коде программы (Статья на википедии).

Сниппеты на платформе InSales хранят в себе html код разметки и код написанный на шаблонизаторе liquid.

Сниппеты включаются в шаблоны через директиву include.

Пример:

Пример включения сниппета без передачи параметров.
{% include 'header' %}

Пример включения сниппета с передачей строки в виде параметра
{% include 'header' with "index" %}
При таком включении внутри сниппета header, параметр будет доступен в одноименной переменной {{ header }}

Пример кода сниппета header
{% if header == 'index' %}
# код для включения с параметром - index
{% else %}
# код обычного включения
{% endif %}

Пример включения сниппета с передачей нескольких параметров:
{% assign logo_text = 'Моя компания' %}
{% include 'logo', use_image: false, logo_text: logo_text %}
При таком виде включения, все передаваемые переменные стоит обнулять в конце кода сниппета, так как значения параметров кэшируется в переменные и можут быть использованы в следующих по коду сниппетах которые используют эти переменные. 

Пример кода сниппета logo
{% if use_image %}
  <img src="{{ 'logo.svg' | asset_url }}" />
{% else %}
  {{ logo_text }}
{% endif %}
{% assign use_image = null %}
{% assign logo_text = null %}

Сниппеты могут содержать в себе включение других сниппетов.

Пример сниппета header:

<div class="container">
  <div class="row">
    <div class="cell-2">
      {% include "logo", modificator: 'in-header', use_image: true %}
    </div>
    <div class="cell-6">
      {% include "menu", modificator: 'in-header', menu_class: 'main-menu', source_type: 'collection', source_handle: 'all', show_icon: true %}
    </div>
    <div class="cell-2">
      {% include "search", modificator: 'in-header' %}
    </div>
    <div class="cell-2">
      {% include "cart_widget", modificator: 'in-header' %}
    </div>
  </div>
</div>