# InSales Frontend & Template Documentation для Context7.com

## Общая информация

InSales - российская платформа электронной коммерции с мощной системой шаблонизации на основе Liquid и JavaScript API.

**Шаблонизатор:** Liquid (форк Shopify Liquid)
**Frontend API:** Common.js v2
**Структура тем:** Liquid файлы + CSS/JS/Assets
**Документация:** liquidhub.ru

---

## 🎨 LIQUID ШАБЛОНИЗАТОР

### Структура файлов темы

```
root/
├── config/
├── media/          # CSS, JS, изображения, SVG
├── snippets/       # Переиспользуемые куски кода
└── templates/      # Основные шаблоны страниц
```

### Основные шаблоны

**Layouts:**
- `layouts.layout.liquid` - основной лэйаут
- `layouts.checkout.liquid` - лэйаут оформления заказа

**Страницы:**
- `index.liquid` - главная страница
- `collection.liquid` - категория товаров
- `product.liquid` - страница товара
- `cart.liquid` - корзина
- `page.liquid` - статическая страница
- `search.liquid` - поиск
- `blog.liquid` - блог
- `article.liquid` - статья блога

**Кастомные шаблоны:**
- `product.hits.liquid` - товары-хиты
- `collection.sale.liquid` - распродажа
- `page.contacts.liquid` - контакты

### Включение файлов

```liquid
<!-- Подключение сниппета -->
{% include 'header' %}

<!-- С параметром -->
{% include 'header' with "index" %}

<!-- С несколькими параметрами -->
{% assign logo_text = 'Моя компания' %}
{% include 'logo', use_image: false, logo_text: logo_text %}
```

### Подключение стилей и скриптов

**Склейка файлов через директивы:**

```scss
// main.scss
@import 'header';
@import 'footer';
@import 'slider';
```

```javascript
// plugins.js
#= require jquery.min
#= require swiper.min
#= require magnific-popup.min

// main.js  
#= require cart
#= require product
#= require collection
```

---

## 📋 ПЕРЕМЕННЫЕ LIQUID

### PRODUCT (Товар)

**Основные свойства:**
```liquid
{{ product.id }}                    <!-- ID товара -->
{{ product.title }}                 <!-- Название -->
{{ product.handle }}                <!-- Пермалинк -->
{{ product.permalink }}             <!-- Пермалинк -->
{{ product.url }}                   <!-- URL товара -->
{{ product.description }}           <!-- Описание -->
{{ product.short_description }}     <!-- Краткое описание -->
{{ product.available }}             <!-- Доступность (boolean) -->
{{ product.price }}                 <!-- Цена -->
{{ product.old_price }}             <!-- Старая цена -->
{{ product.price_min }}             <!-- Минимальная цена -->
{{ product.price_max }}             <!-- Максимальная цена -->
{{ product.price_varies? }}         <!-- Различаются ли цены вариантов -->
{{ product.old_price_varies? }}     <!-- Различаются ли старые цены -->
{{ product.unit }}                  <!-- Единица измерения -->
{{ product.rating }}                <!-- Рейтинг -->
{{ product.reviews_count }}         <!-- Количество отзывов -->
{{ product.show_variants? }}        <!-- Показывать варианты -->
{{ product.updated_at }}            <!-- Дата обновления -->
```

**Изображения:**
```liquid
{{ product.first_image.original_url }}    <!-- Основное изображение -->
{{ product.first_image.large_url }}       <!-- 480x480 -->
{{ product.first_image.medium_url }}      <!-- 240x240 -->
{{ product.first_image.compact_url }}     <!-- 160x160 -->
{{ product.first_image.thumb_url }}       <!-- 100x100 -->
{{ product.first_image.small_url }}       <!-- 48x48 -->
{{ product.first_image.title }}           <!-- Название изображения -->
{{ product.first_image.file_name }}       <!-- Имя файла -->

<!-- Все изображения -->
{% for image in product.images %}
  <img src="{{ image.medium_url }}" alt="{{ image.title }}" />
{% endfor %}
```

**Варианты товара:**
```liquid
{% for variant in product.variants %}
  <option value="{{ variant.id }}">
    {{ variant.title }} - {{ variant.price | money }}
  </option>
{% endfor %}

<!-- Свойства варианта -->
{{ variant.id }}                    <!-- ID варианта -->
{{ variant.title }}                 <!-- Название -->
{{ variant.price }}                 <!-- Цена -->
{{ variant.old_price }}             <!-- Старая цена -->
{{ variant.available }}             <!-- Доступность -->
{{ variant.quantity }}              <!-- Количество на складе -->
{{ variant.sku }}                   <!-- Артикул -->
{{ variant.barcode }}               <!-- Штрихкод -->
{{ variant.weight }}                <!-- Вес -->
{{ variant.first_image }}           <!-- Изображение варианта -->
```

**Свойства и характеристики:**
```liquid
<!-- Свойства товара -->
{% for option_name in product.options %}
  <h4>{{ option_name.title }}</h4>
  {% for option_value in option_name.values %}
    <span>{{ option_value.title }}</span>
  {% endfor %}
{% endfor %}

<!-- Параметры товара -->
{% for property in product.properties %}
  <dt>{{ property.name }}</dt>
  {% for characteristic in property.characteristics %}
    <dd>{{ characteristic.name }}</dd>
  {% endfor %}
{% endfor %}
```

**Связанные товары:**
```liquid
{% for related in product.related_products %}
  <a href="{{ related.url }}">{{ related.title }}</a>
{% endfor %}

{% for similar in product.similar_products %}
  <a href="{{ similar.url }}">{{ similar.title }}</a>
{% endfor %}
```

**Отзывы:**
```liquid
{% for review in product.reviews %}
  <div class="review">
    <h5>{{ review.author }}</h5>
    <div class="rating">{{ review.rating }}</div>
    <p>{{ review.content }}</p>
    <time>{{ review.created_at | date: '%d.%m.%Y' }}</time>
    
    {% if review.replied? %}
      <div class="manager-reply">
        {{ review.manager_reply }}
        <time>{{ review.replied_at | date: '%d.%m.%Y' }}</time>
      </div>
    {% endif %}
  </div>
{% endfor %}
```

### COLLECTION (Категория)

```liquid
{{ collection.id }}                 <!-- ID категории -->
{{ collection.title }}              <!-- Название -->
{{ collection.handle }}             <!-- Пермалинк -->
{{ collection.url }}                <!-- URL -->
{{ collection.description }}        <!-- Описание -->
{{ collection.products_count }}     <!-- Количество товаров -->
{{ collection.current? }}           <!-- Текущая категория -->
{{ collection.level }}              <!-- Уровень вложенности -->

<!-- Товары в категории -->
{% for product in collection.products %}
  {{ product.title }}
{% endfor %}

<!-- Подкатегории -->
{% for subcollection in collection.subcollections %}
  <a href="{{ subcollection.url }}">{{ subcollection.title }}</a>
{% endfor %}

<!-- Фильтры -->
{% for filter in collection.filters %}
  {{ filter.title }}
{% endfor %}
```

### CART (Корзина)

```liquid
{{ cart.items_count }}              <!-- Количество товаров -->
{{ cart.total_price }}              <!-- Общая сумма -->
{{ cart.items_price }}              <!-- Сумма товаров -->
{{ cart.items_weight }}             <!-- Общий вес -->
{{ cart.coupon }}                   <!-- Купон -->
{{ cart.coupon_error }}             <!-- Ошибка купона -->
{{ cart.enable_coupon? }}           <!-- Включены ли купоны -->

<!-- Товары в корзине -->
{% for item in cart.items %}
  <div class="cart-item">
    <h4>{{ item.title }}</h4>
    <span class="price">{{ item.sale_price | money }}</span>
    <span class="quantity">{{ item.quantity }}</span>
    <span class="total">{{ item.total_price | money }}</span>
    <p>{{ item.comment }}</p>
  </div>
{% endfor %}
```

### ORDER (Заказ)

```liquid
{{ order.id }}                      <!-- ID заказа -->
{{ order.number }}                  <!-- Номер заказа -->
{{ order.key }}                     <!-- Ключ заказа -->
{{ order.status }}                  <!-- Статус -->
{{ order.total_price }}             <!-- Общая сумма -->
{{ order.items_price }}             <!-- Сумма товаров -->
{{ order.delivery_price }}          <!-- Стоимость доставки -->
{{ order.delivery_title }}          <!-- Название доставки -->
{{ order.payment_title }}           <!-- Способ оплаты -->
{{ order.comment }}                 <!-- Комментарий -->
{{ order.creation_date }}           <!-- Дата создания -->
{{ order.delivery_date }}           <!-- Дата доставки -->
{{ order.paid? }}                   <!-- Оплачен ли -->

<!-- Товары в заказе -->
{% for item in order.items %}
  {{ item.title }} - {{ item.quantity }} шт.
{% endfor %}

<!-- Адрес доставки -->
{{ order.shipping_address.full_locality_name }}
{{ order.shipping_address.address }}
```

### CLIENT (Клиент)

```liquid
{% if client %}
  {{ client.name }}                 <!-- Имя -->
  {{ client.email }}                <!-- Email -->
  {{ client.phone }}                <!-- Телефон -->
  {{ client.bonus_points }}         <!-- Бонусные баллы -->
  {{ client.group_discount }}       <!-- Групповая скидка -->
  {{ client.registered }}           <!-- Зарегистрирован ли -->
{% endif %}
```

### ACCOUNT (Аккаунт/Магазин)

```liquid
{{ account.title }}                 <!-- Название магазина -->
{{ account.email }}                 <!-- Email магазина -->
{{ account.phone }}                 <!-- Телефон -->
{{ account.url }}                   <!-- URL магазина -->
{{ account.currency_code }}         <!-- Код валюты -->
{{ account.reviews_enabled? }}      <!-- Включены ли отзывы -->
{{ account.enable_clients? }}       <!-- Включена ли регистрация -->
```

### BLOG & ARTICLE (Блог и статьи)

```liquid
<!-- Блог -->
{{ blog.title }}                    <!-- Название блога -->
{{ blog.handle }}                   <!-- Пермалинк -->
{{ blog.url }}                      <!-- URL -->

<!-- Статьи -->
{% for article in blog.articles %}
  <article>
    <h2>{{ article.title }}</h2>
    <p>{{ article.author }}</p>
    <time>{{ article.created_at | date: '%d.%m.%Y' }}</time>
    <div>{{ article.preview }}</div>
    <a href="{{ article.url }}">Читать далее</a>
  </article>
{% endfor %}

<!-- Отдельная статья -->
{{ article.content }}               <!-- Содержимое статьи -->
{{ article.image.original_url }}    <!-- Изображение -->
```

### SEARCH (Поиск)

```liquid
{% if search.performed? %}
  <p>По запросу "{{ search.query }}" найдено:</p>
  {% for result in search.results %}
    <a href="{{ result.url }}">{{ result.title }}</a>
  {% endfor %}
{% endif %}
```

### PAGINATION (Пагинация)

```liquid
{{ paginate.current_page }}         <!-- Текущая страница -->
{{ paginate.pages }}                <!-- Всего страниц -->
{{ paginate.items }}                <!-- Всего элементов -->

{% if paginate.previous %}
  <a href="{{ paginate.previous.url }}">Предыдущая</a>
{% endif %}

{% for part in paginate.parts %}
  {% if part.is_link %}
    <a href="{{ part.url }}">{{ part.title }}</a>
  {% else %}
    <span>{{ part.title }}</span>
  {% endif %}
{% endfor %}

{% if paginate.next %}
  <a href="{{ paginate.next.url }}">Следующая</a>
{% endif %}
```

### HELPERS (Вспомогательные)

```liquid
<!-- В циклах -->
{{ forloop.index }}                 <!-- Текущий индекс (1-based) -->
{{ forloop.index0 }}                <!-- Текущий индекс (0-based) -->
{{ forloop.rindex }}                <!-- Обратный индекс -->
{{ forloop.first }}                 <!-- Первый элемент -->
{{ forloop.last }}                  <!-- Последний элемент -->
{{ forloop.length }}                <!-- Длина цикла -->

<!-- Изображения -->
{{ images }}                        <!-- Массив всех изображений -->
```

---

## 🔧 ФИЛЬТРЫ LIQUID

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

```liquid
{{ array | size }}                  <!-- Размер массива -->
{{ array | first }}                 <!-- Первый элемент -->
{{ array | last }}                  <!-- Последний элемент -->
{{ array | reverse }}               <!-- Обратный порядок -->
{{ array | sort }}                  <!-- Сортировка -->
{{ array | uniq }}                  <!-- Уникальные значения -->
{{ array | join: ', ' }}            <!-- Склейка через разделитель -->
{{ array | map: 'title' }}          <!-- Извлечение свойства -->
{{ array | where: 'available', true }} <!-- Фильтрация -->
{{ array1 | concat: array2 }}       <!-- Объединение массивов -->
```

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

```liquid
{{ price | plus: 100 }}             <!-- Сложение -->
{{ price | minus: 50 }}             <!-- Вычитание -->
{{ price | times: 2 }}              <!-- Умножение -->
{{ price | divided_by: 3 }}         <!-- Деление -->
{{ price | modulo: 10 }}            <!-- Остаток от деления -->
{{ price | round }}                 <!-- Округление -->
{{ price | round: 2 }}              <!-- Округление до 2 знаков -->
{{ string_number | to_integer }}    <!-- Преобразование в число -->
```

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

```liquid
{{ text | append: ' suffix' }}      <!-- Добавить в конец -->
{{ text | prepend: 'prefix ' }}     <!-- Добавить в начало -->
{{ text | capitalize }}             <!-- Первая буква заглавная -->
{{ text | upcase }}                 <!-- Верхний регистр -->
{{ text | downcase }}               <!-- Нижний регистр -->
{{ text | escape }}                 <!-- HTML-экранирование -->
{{ text | strip_html }}             <!-- Удалить HTML теги -->
{{ text | newline_to_br }}          <!-- \n в <br> -->
{{ text | truncate: 100 }}          <!-- Обрезать до 100 символов -->
{{ text | truncatewords: 10 }}      <!-- Обрезать до 10 слов -->
{{ text | replace: 'old', 'new' }}  <!-- Замена -->
{{ text | remove: 'word' }}         <!-- Удаление -->
{{ text | remove_first: 'word' }}   <!-- Удалить первое вхождение -->
{{ text | lstrip }}                 <!-- Удалить пробелы слева -->
{{ text | strip_newlines }}         <!-- Удалить переносы строк -->
{{ text | url_encode }}             <!-- URL-кодирование -->
{{ text | url_decode }}             <!-- URL-декодирование -->
{{ text | md5 }}                    <!-- MD5 хеш -->
```

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

```liquid
{{ 'style.css' | asset_url }}      <!-- URL файла из media -->
{{ 'logo.png' | asset_url_if_exists }} <!-- URL если файл существует -->
{{ file | file_url }}              <!-- URL файла -->
{{ url | add_param: 'key', 'value' }} <!-- Добавить параметр к URL -->
{{ path | locale_url }}            <!-- URL с локалью -->
```

### Фильтры для денег

```liquid
{{ price | money }}                 <!-- Форматирование цены -->
```

### Фильтры для дат

```liquid
{{ date | date: '%d.%m.%Y' }}       <!-- Форматирование даты -->
{{ date | date: '%d %B %Y' }}       <!-- 15 января 2023 -->
```

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

```liquid
{{ value | default: 'fallback' }}   <!-- Значение по умолчанию -->
{{ object | json }}                 <!-- JSON сериализация -->
{{ object | custom_json }}          <!-- Кастомная JSON сериализация -->
{{ color | dark? }}                 <!-- Темный ли цвет -->
{{ color | change_lightness: 20 }}  <!-- Изменить яркость -->
```

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

```liquid
{{ image | image_url: '300x300' }}  <!-- Изменение размера -->
{{ image | webp_picture_tag }}      <!-- WebP picture тег -->
```

### HTML фильтры

```liquid
{{ options | select_option }}       <!-- HTML select options -->
{{ url, text | link_to }}           <!-- HTML ссылка -->
```

---

## 🔄 ОПЕРАТОРЫ И КОНСТРУКЦИИ

### Условные конструкции

```liquid
{% if condition %}
  <!-- код -->
{% elsif another_condition %}
  <!-- код -->
{% else %}
  <!-- код -->
{% endif %}

{% unless condition %}
  <!-- код если условие НЕ выполнено -->
{% endunless %}

{% case variable %}
  {% when 'value1' %}
    <!-- код -->
  {% when 'value2' %}
    <!-- код -->
  {% else %}
    <!-- код по умолчанию -->
{% endcase %}
```

### Логические операторы

```liquid
{% if price > 1000 %}              <!-- Больше -->
{% if price < 500 %}               <!-- Меньше -->
{% if price >= 1000 %}             <!-- Больше или равно -->
{% if price <= 500 %}              <!-- Меньше или равно -->
{% if price == 1000 %}             <!-- Равно -->
{% if price != 1000 %}             <!-- Не равно -->
{% if product.available and price > 0 %} <!-- И -->
{% if product.available or price == 0 %} <!-- ИЛИ -->
{% if title contains 'слово' %}    <!-- Содержит -->
```

### Циклы

```liquid
{% for product in collection.products %}
  {{ product.title }}
  
  {% if forloop.first %}
    <!-- Первый элемент -->
  {% endif %}
  
  {% if forloop.last %}
    <!-- Последний элемент -->
  {% endif %}
{% endfor %}

<!-- С лимитом -->
{% for product in collection.products limit: 5 %}
  {{ product.title }}
{% endfor %}

<!-- С отступом -->
{% for product in collection.products offset: 2 %}
  {{ product.title }}
{% endfor %}

<!-- Прерывание цикла -->
{% for product in collection.products %}
  {% if product.price > 10000 %}
    {% break %}
  {% endif %}
  {{ product.title }}
{% endfor %}

<!-- Пропуск итерации -->
{% for product in collection.products %}
  {% unless product.available %}
    {% continue %}
  {% endunless %}
  {{ product.title }}
{% endfor %}

<!-- Чередование значений -->
{% for item in cart.items %}
  <tr class="{% cycle 'odd', 'even' %}">
    {{ item.title }}
  </tr>
{% endfor %}
```

### Специальные теги

```liquid
<!-- Захват контента в переменную -->
{% capture variable_name %}
  Любой контент {{ product.title }}
{% endcapture %}

<!-- Кеширование -->
{% cache 'cache_key', expires_in: 3600 %}
  <!-- Контент для кеширования -->
{% endcache %}

<!-- Вывод справочной информации -->
{% help 'product' %}
```

---

## ⚡ COMMON.JS V2 API

### Подключение

В `settings_data.json`:
```json
{
  "common_js_version": "v2"
}
```

### Основные модули

**EventBus** - система событий
**Cart** - работа с корзиной  
**Products** - работа с товарами
**AjaxSearch** - живой поиск
**Compare** - сравнение товаров
**Template** - шаблонизация
**ajaxAPI** - AJAX запросы
**Shop** - данные магазина

### Работа с товарами

```javascript
// Получение данных товара
$.post('/products_by_id/123.json')
  .done(function(product) {
    console.log(product);
  });

// Обновление информации о варианте
Products.updateProduct(productData);

// События товара
EventBus.subscribe('product:updated', function(product) {
  // Обработка обновления товара
});
```

### Работа с корзиной

```javascript
// Добавление в корзину
Cart.addItem({
  variant_id: 123,
  quantity: 1,
  comment: 'Комментарий'
});

// Обновление количества
Cart.updateItem(itemId, quantity);

// Удаление из корзины
Cart.removeItem(itemId);

// События корзины
EventBus.subscribe('cart:add', function(item) {
  // Товар добавлен в корзину
});

EventBus.subscribe('cart:update', function(cart) {
  // Корзина обновлена
});
```

### Живой поиск

```javascript
// Инициализация поиска
AjaxSearch.init({
  selector: '#search-input',
  resultsContainer: '#search-results'
});

// Кастомная обработка результатов
AjaxSearch.onResults = function(results) {
  // Обработка результатов поиска
};
```

### Сравнение товаров

```javascript
// Добавление в сравнение
Compare.addProduct(productId);

// Удаление из сравнения
Compare.removeProduct(productId);

// Получение списка сравнения
var compareList = Compare.getList();
```

### Избранное

```javascript
// Добавление в избранное (кастомная реализация)
function addToFavorites(productId) {
  var favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
  if (favorites.indexOf(productId) === -1) {
    favorites.push(productId);
    localStorage.setItem('favorites', JSON.stringify(favorites));
  }
}
```

### Lodash шаблоны

```javascript
// Создание шаблона
var template = _.template('<h1><%= title %></h1>');

// Рендер с данными
var html = template({ title: 'Заголовок' });

// В InSales
<script type="text/template" data-template-id="product-card">
  <div class="product-card">
    <h3><%= product.title %></h3>
    <span class="price"><%= Shop.money.format(product.price) %></span>
  </div>
</script>
```

---

## 📡 AJAX API ENDPOINTS

### Товары

```javascript
// Получение товара по ID
GET /products_by_id/{id}.json

// Поиск товаров
GET /search.json?q={query}

// Похожие товары
GET /products/{id}/related.json

// Товары категории
GET /collection/{handle}.json
```

### Корзина

```javascript
// Добавление в корзину
POST /cart_items.json
{
  "variant_id": 123,
  "quantity": 1,
  "comment": "Комментарий"
}

// Обновление корзины
PUT /cart_items/{id}.json
{
  "quantity": 2
}

// Удаление из корзины
DELETE /cart_items/{id}.json

// Получение корзины
GET /cart_items.json
```

### Клиенты

```javascript
// Регистрация
POST /client_account.json

// Вход
POST /client_account/session.json

// Получение данных клиента
GET /client_account.json
```

### Отзывы

```javascript
// Добавление отзыва
POST /products/{id}/reviews.json
{
  "review": {
    "author": "Имя",
    "email": "email@example.com", 
    "content": "Текст отзыва",
    "rating": 5
  }
}
```

---

## 🛍️ ПРИМЕРЫ ФОРМ

### Форма добавления в корзину

```liquid
<form action="{{ cart_url }}" method="post" data-product-id="{{ product.id }}">
  {% if product.show_variants? %}
    <select name="variant_id" data-product-variants>
      {% for variant in product.variants %}
        <option value="{{ variant.id }}"
                {% unless variant.available %}disabled{% endunless %}>
          {{ variant.title | escape }} - {{ variant.price | money }}
        </option>
      {% endfor %}
    </select>
  {% else %}
    <input type="hidden" name="variant_id" value="{{ product.variants.first.id }}">
  {% endif %}
  
  <input type="number" name="quantity" value="1" min="1">
  <input type="text" name="comment" placeholder="Комментарий">
  
  <button type="submit" data-item-add
          {% unless product.available %}disabled{% endunless %}>
    {% if product.available %}
      Добавить в корзину
    {% else %}
      Нет в наличии
    {% endif %}
  </button>
</form>
```

### Форма быстрого заказа

```liquid
<form action="/quick_order" method="post">
  <input type="hidden" name="variant_id" value="{{ variant.id }}">
  <input type="text" name="client[name]" placeholder="Ваше имя" required>
  <input type="tel" name="client[phone]" placeholder="Телефон" required>
  <button type="submit">Заказать в 1 клик</button>
</form>
```

### Форма отзыва

```liquid
<form action="{{ product.url }}" method="post">
  <input type="hidden" name="review[product_id]" value="{{ product.id }}">
  <input type="text" name="review[author]" placeholder="Ваше имя" required>
  <input type="email" name="review[email]" placeholder="Email" required>
  
  <div class="rating">
    {% for i in (1..5) %}
      <input type="radio" name="review[rating]" value="{{ i }}" id="star{{ i }}">
      <label for="star{{ i }}">{{ i }}</label>
    {% endfor %}
  </div>
  
  <textarea name="review[content]" placeholder="Ваш отзыв" required></textarea>
  <button type="submit">Отправить отзыв</button>
</form>
```

---

## 🎯 ПРАКТИЧЕСКИЕ ПРИМЕРЫ

### Карточка товара с вариантами

```liquid
<div class="product-card" data-product-id="{{ product.id }}">
  <div class="product-images">
    {% for image in product.images %}
      <img src="{{ image.medium_url }}" alt="{{ product.title }}"
           {% if forloop.first %}class="active"{% endif %}>
    {% endfor %}
  </div>
  
  <h1 data-product-title>{{ product.title }}</h1>
  
  <div class="product-prices">
    {% if product.old_price %}
      <span class="old-price" data-product-old-price>
        {{ product.old_price | money }}
      </span>
    {% endif %}
    <span class="price" data-product-price>
      {{ product.price | money }}
    </span>
  </div>
  
  <div class="product-availability" data-product-available>
    {% if product.available %}
      В наличии
    {% else %}
      Нет в наличии
    {% endif %}
  </div>
  
  {% if product.sku %}
    <div class="product-sku" data-product-sku>
      Артикул: {{ product.variants.first.sku }}
    </div>
  {% endif %}
  
  {{ product.description }}
  
  <!-- Форма добавления в корзину -->
  <form action="{{ cart_url }}" method="post" data-product-form>
    <!-- ... форма ... -->
  </form>
</div>
```

### Корзина с AJAX обновлением

```liquid
<div class="cart" data-cart>
  <div class="cart-items" data-cart-items>
    {% for item in cart.items %}
      <div class="cart-item" data-item-id="{{ item.id }}">
        <img src="{{ item.product.first_image.compact_url }}" alt="{{ item.title }}">
        <h4>{{ item.title }}</h4>
        
        <div class="quantity-controls">
          <button type="button" data-quantity-change="-1">-</button>
          <input type="number" value="{{ item.quantity }}" data-quantity>
          <button type="button" data-quantity-change="1">+</button>
        </div>
        
        <span class="item-price">{{ item.sale_price | money }}</span>
        <span class="item-total">{{ item.total_price | money }}</span>
        
        <button type="button" data-item-remove>Удалить</button>
      </div>
    {% endfor %}
  </div>
  
  <div class="cart-total">
    <strong>Итого: <span data-cart-total>{{ cart.total_price | money }}</span></strong>
  </div>
  
  <a href="/order" class="checkout-btn">Оформить заказ</a>
</div>
```

### Фильтры в категории

```liquid
<div class="collection-filters">
  {% for filter in collection.filters %}
    <div class="filter-group">
      <h4>{{ filter.title }}</h4>
      
      {% case filter.type %}
        {% when 'price' %}
          <input type="range" name="price_min" value="{{ filter.min_value }}">
          <input type="range" name="price_max" value="{{ filter.max_value }}">
          
        {% when 'property' %}
          {% for characteristic in filter.characteristics %}
            <label>
              <input type="checkbox" name="characteristics[]" 
                     value="{{ characteristic.id }}"
                     {% if characteristic.current? %}checked{% endif %}>
              {{ characteristic.name }} ({{ characteristic.products_count }})
            </label>
          {% endfor %}
          
        {% when 'option' %}
          {% for option_value in filter.option_values %}
            <label>
              <input type="checkbox" name="option_values[]"
                     value="{{ option_value.id }}"
                     {% if option_value.selected %}checked{% endif %}>
              {{ option_value.title }} ({{ option_value.products_count }})
            </label>
          {% endfor %}
      {% endcase %}
    </div>
  {% endfor %}
</div>
```

### Поиск с автодополнением

```liquid
<form class="search-form">
  <input type="text" name="q" placeholder="Поиск товаров..." 
         data-ajax-search autocomplete="off">
  <button type="submit">Найти</button>
  
  <div class="search-results" data-search-results style="display: none;">
    <!-- Результаты через AJAX -->
  </div>
</form>

<script>
$(document).ready(function() {
  $('[data-ajax-search]').on('input', function() {
    var query = $(this).val();
    
    if (query.length >= 2) {
      $.get('/search.json', { q: query }, function(data) {
        var results = '';
        $.each(data.products, function(i, product) {
          results += '<div class="search-result">';
          results += '<img src="' + product.first_image.compact_url + '">';
          results += '<a href="' + product.url + '">' + product.title + '</a>';
          results += '<span>' + Shop.money.format(product.price) + '</span>';
          results += '</div>';
        });
        
        $('[data-search-results]').html(results).show();
      });
    } else {
      $('[data-search-results]').hide();
    }
  });
});
</script>
```

---

## 🔧 SETUP.JSON - Конфигурация темы

### Структура setup.json

```json
{
  "categories": {
    "sale": "Распродажа",
    "new": "Новинки"
  },
  
  "collections": {
    "featured": {
      "title": "Рекомендуемые товары",
      "products": ["product-1", "product-2"]
    }
  },
  
  "products": {
    "product-1": {
      "title": "Товар 1",
      "price": "1000.0",
      "variants": {
        "variant-1": {
          "title": "Размер M",
          "price": "1000.0"
        }
      }
    }
  },
  
  "pages": {
    "delivery": "Доставка",
    "payment": {
      "title": "Оплата", 
      "content": "Информация об оплате"
    }
  },
  
  "blogs": {
    "news": {
      "title": "Новости",
      "articles": {
        "article-1": {
          "title": "Новая коллекция",
          "content": "Описание коллекции",
          "author": "Администратор"
        }
      }
    }
  },
  
  "menus": {
    "main-menu": "Главное меню",
    "footer-menu": "Меню в подвале"
  },
  
  "menu_items": {
    "main-menu": {
      "Главная": "/",
      "Каталог": "/collections/all",
      "О нас": "/pages/about"
    }
  },
  
  "properties": {
    "brand": {
      "title": "Бренд",
      "characteristics": {
        "nike": "Nike",
        "adidas": "Adidas"
      }
    }
  }
}
```

---

## 📱 АДАПТИВНОСТЬ И МОБИЛЬНЫЕ УСТРОЙСТВА

### Responsive изображения

```liquid
<!-- Адаптивные изображения -->
<picture>
  <source media="(min-width: 768px)" srcset="{{ image.large_url }}">
  <source media="(min-width: 480px)" srcset="{{ image.medium_url }}">
  <img src="{{ image.compact_url }}" alt="{{ image.title }}">
</picture>

<!-- WebP поддержка -->
{{ image | webp_picture_tag }}
```

### Мобильное меню

```liquid
<nav class="mobile-menu">
  <button class="menu-toggle">☰</button>
  
  <div class="menu-overlay">
    <div class="menu-content">
      {% for link in linklists.main-menu.links %}
        <a href="{{ link.url }}" 
           {% if link.current? %}class="active"{% endif %}>
          {{ link.title }}
        </a>
        
        {% if link.links.size > 0 %}
          <div class="submenu">
            {% for sublink in link.links %}
              <a href="{{ sublink.url }}">{{ sublink.title }}</a>
            {% endfor %}
          </div>
        {% endif %}
      {% endfor %}
    </div>
  </div>
</nav>
```

---

## 🚀 ОПТИМИЗАЦИЯ И ПРОИЗВОДИТЕЛЬНОСТЬ

### Ленивая загрузка изображений

```liquid
<img data-src="{{ image.medium_url }}" 
     src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'%3E%3C/svg%3E"
     alt="{{ image.title }}"
     loading="lazy"
     class="lazy">
```

### Кеширование

```liquid
{% cache 'product-' | append: product.id, expires_in: 3600 %}
  <!-- Кешируемый контент -->
  {{ product.title }}
  {{ product.description }}
{% endcache %}
```

### Минификация и сжатие

```scss
// Используйте SCSS для оптимизации
$breakpoints: (
  mobile: 480px,
  tablet: 768px,
  desktop: 1024px
);

@mixin respond-to($breakpoint) {
  @media (min-width: map-get($breakpoints, $breakpoint)) {
    @content;
  }
}
```

---

## 🔒 БЕЗОПАСНОСТЬ

### Экранирование данных

```liquid
<!-- Всегда экранируйте пользовательские данные -->
{{ comment.content | escape }}
{{ search.query | escape }}

<!-- Для HTML используйте strip_html -->
{{ user_content | strip_html }}
```

### CSRF защита

```liquid
<!-- В формах всегда включайте CSRF токен -->
<form method="post">
  {{ form.csrf_token }}
  <!-- поля формы -->
</form>
```

---

## 📊 АНАЛИТИКА И МЕТРИКИ

### Google Analytics

```liquid
<!-- В layouts.layout.liquid -->
{% if account.google_analytics_id %}
<script async src="https://www.googletagmanager.com/gtag/js?id={{ account.google_analytics_id }}"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '{{ account.google_analytics_id }}');
</script>
{% endif %}
```

### Отслеживание событий

```javascript
// Отслеживание добавления в корзину
EventBus.subscribe('cart:add', function(item) {
  gtag('event', 'add_to_cart', {
    'currency': 'RUB',
    'value': item.sale_price,
    'items': [{
      'item_id': item.variant.sku,
      'item_name': item.title,
      'quantity': item.quantity
    }]
  });
});
```

---

## 🎨 CSS ФРЕЙМВОРКИ И БИБЛИОТЕКИ

### Популярные библиотеки для InSales

**CSS:**
- Bootstrap 5
- Tailwind CSS
- Bulma

**JavaScript:**
- Swiper.js (слайдеры)
- Fancybox (галереи)
- Select2 (селекты)
- Magnific Popup (попапы)

**Иконки:**
- Font Awesome
- Feather Icons
- Heroicons

### Подключение через CDN

```liquid
<!-- В layouts.layout.liquid -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
```

---

## 🛠️ ИНСТРУМЕНТЫ РАЗРАБОТКИ

### InSales Uploader

```bash
# Установка
npm install -g insales-uploader

# Инициализация
insales theme:init

# Загрузка темы
insales theme:download

# Выгрузка изменений
insales theme:upload

# Просмотр логов
insales theme:watch
```

### Структура проекта

```
project/
├── src/
│   ├── scss/
│   ├── js/
│   └── images/
├── config/
├── media/
├── snippets/
├── templates/
├── gulpfile.js
├── package.json
└── .insalesrc
```

---

## 🔍 ОТЛАДКА И ТЕСТИРОВАНИЕ

### Режим разработки

```liquid
{% if account.subdomain == 'test-shop' %}
  <!-- Код для тестирования -->
  <script>
    console.log('Debug mode enabled');
  </script>
{% endif %}
```

### Полезные хелперы

```liquid
<!-- Вывод всех переменных объекта -->
{{ product | json }}

<!-- Проверка существования переменной -->
{% if product.custom_field %}
  {{ product.custom_field }}
{% endif %}

<!-- Отладочная информация -->
{% comment %}
  Текущая страница: {{ template }}
  ID товара: {{ product.id }}
  Доступность: {{ product.available }}
{% endcomment %}
```

---

## 📚 ДОПОЛНИТЕЛЬНЫЕ РЕСУРСЫ

### Официальная документация
- **LiquidHub:** https://liquidhub.ru/
- **InSales API:** https://api.insales.ru/
- **GitHub репозитории:** https://github.com/liquid-hub/

### Полезные ссылки
- **Документация Liquid:** https://liquidhub.ru/collection/shpargalka-liquid
- **Фильтры:** https://liquidhub.ru/collection/filtry-liquid
- **Операторы:** https://liquidhub.ru/collection/operatory_i_konstruktsii
- **Common.js v2:** https://docs.liquidhub.ru/common.v2.js/

### Сообщество
- **Telegram:** @insalesthemes
- **GitHub:** liquid-hub organization

---

## ⚠️ ВАЖНЫЕ ЗАМЕЧАНИЯ

1. **Версия Common.js:** Убедитесь что используете v2 для современных возможностей
2. **Кеширование:** Используйте кеш для тяжелых операций
3. **Производительность:** Оптимизируйте изображения и минифицируйте код
4. **Безопасность:** Всегда экранируйте пользовательские данные
5. **Адаптивность:** Тестируйте на всех устройствах
6. **SEO:** Используйте правильные meta теги и структурированные данные

---

*Этот документ содержит полную информацию для разработки фронтенда интернет-магазинов на платформе InSales. Используйте его как справочник при работе с Liquid шаблонизатором и JavaScript API.*