> For the complete documentation index, see [llms.txt](https://templates.keycrm.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://templates.keycrm.app/ru/voronkii.md).

# Для воронок

#### Инструкции:

* [Как использовать шаблоны из библиотеки и создавать свои шаблоны документов](https://help.keycrm.app/ru/rabota-s-zaiavkami/kak-sozdat-novyi-shablon-dokumienta-dlia-piechati);
* [Справочник доступных тегов, функций и фильтров Twig](https://help.keycrm.app/ru/keycrm-api/spravochnik-dostupnykh-tieghov-funktsii-i-fil-trov-twig);
* [Примеры решений и ответы на частые вопросы](https://help.keycrm.app/ru/rabota-s-zaiavkami/ch-avo-po-sozdaniiu-dokumientov-dlya-zayavok).

### 1. Товарный чек

{% tabs %}
{% tab title="Внешний вид" %}
![](/files/ffIoMN7W9tV4lpjaM6U0)
{% endtab %}

{% tab title="Код шаблона" %}
**Тип шаблона:** Воронки

```
<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Товарный чек</title>
</head>
<body>

<div class="container">

  {# ======================================================= #}
  {# БЛОК: ШАПКА — логотип и контакты магазина               #}
  {# Замените выделенный желтым текст на свои реальные данные    #}
  {# ======================================================= #}
  <table class="width100">
    <tbody>
    <tr>
      {# Логотип: замените src на прямую ссылку на свое изображение #}
      <td class="logo-wrapper" valign="top">
        <img src="https://blog.keycrm.app/wp-content/uploads/2025/12/cropped-keycrm-logo-blue-on-transparent-160x53.png" style="width: 200px;" alt="">
      </td>
      {# Адрес и email магазина #}
      <td valign="top">
        <span style="background-color: yellow">г.Киев ул. Крещатик, 1</span><br />
        <span style="background-color: yellow">test@ukr.net</span><br />
      </td>
      {# Телефоны магазина #}
      <td valign="top">
        <span style="background-color: yellow">тел.: +38(050)000-00-00</span><br />
        <span style="background-color: yellow">тел.: +38(095)000-00-00</span><br />
        <span style="background-color: yellow">тел.: +38(097)000-00-00</span><br />
      </td>
    </tr>
    </tbody>
  </table>

  <br /><br /><br />

  {# ======================================================= #}
  {# БЛОК: РЕКВИЗИТЫ — поставщик и получатель               #}
  {# Левый столбец: ваши данные (заменить желтое)              #}
  {# Правый столбец: данные контакта из CRM (авто)             #}
  {# ======================================================= #}
  <table class="width100">
    <tbody>
    <tr>
      <td valign="top" class="label" style="width:50%">
        <span style="background-color: yellow">Поставщик: Company Name</span><br />
        <span style="background-color: yellow">ФЛП Тест А.А.</span><br />
        <span style="background-color: yellow">г.Киев ул. Крещатик, 1</span><br />
        <span style="background-color: yellow">тел.: +38(050)000-00-00</span><br />
      </td>
      <td valign="top" class="label">
        {# Данные контакта подтягиваются из CRM автоматически #}
        Получатель: {{ model.contact_name }}<br />
        тел.: {{ model.contact_phone | default('не указано') }}<br />
        {# Email выводится только если он заполнен #}
        {% if model.contact_email %}
          email: {{ model.contact_email }}
        {% endif %}
      </td>
    </tr>
    </tbody>
  </table>

  <br />

  {# ======================================================= #}
  {# БЛОК: НАЗВАНИЕ ДОКУМЕНТА — номер и дата                     #}
  {# Массив месяцев для вывода даты словом ("15 мая")       #}
  {# ======================================================= #}
  {% set mnths = ['','января','февраля','марта','апреля','мая','июня','июля','августа','сентября','октября','ноября','декабря'] %}

  <p class="big-text text-center" style="margin-bottom: 10px">
    Товарный чек №{{ model.id }} от {{ model.created_at|date("j") }} {{ mnths[model.created_at|date("n")] }} {{ model.created_at|date("Y") }} г.
  </p>

  {# ======================================================= #}
  {# БЛОК: ТАБЛИЦА ТОВАРОВ                                    #}
  {# ======================================================= #}
  <table class="table-products width100 border products-table">
    <thead>
      <tr>
        <th class="text-center">№</th>
        <th class="name-col">Наименование товара</th>
        <th>Ед.</th>
        <th>Количество</th>
        <th>Цена</th>
        <th>Сумма</th>
      </tr>
    </thead>
    <tbody>
      {# Строки товаров — перебираем все позиции сделки #}
      {% for key, product in model.products %}
      <tr>
        <td class="text-center">{{ key + 1 }}</td>
        <td style="width:50%">{{ product.name }}</td>
        <td class="text-center">шт</td>
        <td class="text-center">{{ product.quantity }}</td>
        <td class="text-right">{{ product.price|format_currency('UAH', locale='ru') }}</td>
        <td class="text-right">{{ (product.quantity * product.price)|format_currency('UAH', locale='ru') }}</td>
      </tr>
      {% endfor %}

      {# Итоговая строка с общей суммой #}
      <tr>
        <td colspan="5" class="text-right"><strong>Всего:</strong></td>
        <td class="text-right">
          <strong>{{ model.products_sum|format_currency('UAH', locale='ru')  }}</strong>
        </td>
      </tr>
    </tbody>
  </table>

  {# ======================================================= #}
  {# БЛОК: ПОДВАЛ — количество позиций, сумма и подпись          #}
  {# ======================================================= #}
  <br /><br />
  <table>
    <tbody>
    <tr>
      <td>
        Всего наименований: {{ model.products|length }}, на сумму
        <strong>{{ model.products_sum|number_format(2, '.', ' ') }}</strong> грн.
      </td>
    </tr>
    <tr>
      <td style="width: 50%">
        Дата: <span class="label underline">{{ model.created_at|date("j") }} {{ mnths[model.created_at|date("n")] }} {{ model.created_at|date("Y") }} г.</span>
      </td>
      <td>Подпись поставщика: &nbsp;&nbsp;&nbsp; ____________________</td>
      <td></td>
    </tr>
    </tbody>
  </table>

</div>

</body>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html, body {
    height: 100%;
  }

  body {
    font-size: 16px;
    line-height: 1.3;
    min-width: 320px;
    font-family: sans-serif;
    overflow-x: hidden;
  }

  .container {
    margin-right: auto;
    margin-left: auto;
  }

  .text-center { text-align: center; }
  .text-right  { text-align: right; }

  .label { font-weight: bold; }

  .underline {
    text-decoration: underline;
    font-style: italic;
  }

  .big-text { font-size: 18px; }

  .width100 { width: 100%; }
  .width50  { width: 50%; }

  table {
    border-collapse: collapse;
    border-spacing: 0;
    height: auto;
  }

  table td {
    padding-right: 5px;
    padding-left: 5px;
    border: none;
  }

  table th {
    background: #d4d4d4;
  }

  /* Рамки для таблицы товаров */
  table.border td,
  table.border th {
    border: 1px solid black;
  }

  table.table-products {
    border: solid 2px black;
    width: calc(100% - 2px);
  }

  table.table-products th {
    padding: 20px 5px;
  }

  table.table-products td {
    padding: 5px;
  }

  table.table-sum {
    margin-top: 7px;
  }

  table.table-sum td {
    padding: 3px 5px 3px 15px;
  }

  /* =============================================
      РАЗБИВКА НА СТРАНИЦЫ
      ============================================= */

  /* Заголовок таблицы повторяется на каждой странице */
  table.products-table thead {
    display: table-header-group;
  }

  /* Строки tbody не разрываются между страницами */
  table.products-table tbody tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }
</style>
</html>
```

{% endtab %}
{% endtabs %}

### 2. Товарный чек №2

{% tabs %}
{% tab title="Внешний вид" %}
![](/files/irPGDXX5GWK41fE8TuPO)
{% endtab %}

{% tab title="Код шаблона" %}
**Тип шаблона:** Воронки

QR-коды можно сгенерировать, например, здесь: <https://www.qrcode-monkey.com/>.

После создания нужно сохранить картинки на вашем сервере (сайте) и вставить в шаблон ссылки на них.

```
<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Накладная</title>
</head>
<body>

<div class="container">

  {# ======================================================= #}
  {# БЛОК: ШАПКА — логотип и контакты магазина               #}
  {# Замените выделенный желтым текст на свои реальные данные    #}
  {# ======================================================= #}
  <table>
    <tbody>
    <tr>
      <td>
        {# Логотип: замените src на прямую ссылку на свое изображение #}
        <img src="https://blog.keycrm.app/wp-content/uploads/2025/12/cropped-keycrm-logo-blue-on-transparent-160x53.png" style="width: 180px;" alt="">
      </td>
    </tr>
    <tr>
      <td style="padding: 5px;">
        {# Название компании — заменить на свою #}
        <span style="background-color: yellow">Company Name</span>
      </td>
    </tr>
    <tr>
      <td style="padding: 5px;">
        <span style="background-color: yellow">г.Киев ул. Крещатик, 1</span>
      </td>
    </tr>
    <tr>
      <td style="padding: 5px;">
        <span style="background-color: yellow">email: test@ukr.net</span>
      </td>
    </tr>
    <tr>
      <td style="padding: 5px;">
        <span style="background-color: yellow">тел.: +38(050)000-00-00</span>
      </td>
    </tr>
    </tbody>
  </table>

  <br />

  {# ======================================================= #}
  {# БЛОК: ДАННЫЕ ПОКУПАТЕЛЯ И МЕНЕДЖЕРА                     #}
  {# ======================================================= #}
  <table style="padding-bottom: 10px; margin-bottom: 10px;">
    <tbody>
    <tr>
      <td style="padding: 10px 5px;">
        <strong>Покупатель:</strong> {{ model.contact_name }}
        {# Телефон выводится только если он есть #}
        {% if model.contact_phone %}
          {{ model.contact_phone }}
        {% endif %}
      </td>
    </tr>
    <tr>
      <td style="padding: 5px 5px 10px;">
        {# Имя менеджера подтягивается из CRM, телефон заменить на свой #}
        <strong>Менеджер:</strong> {{ model.manager }}
        <span style="background-color: yellow">моб/viber (095) 111-11-11</span>
      </td>
    </tr>
    </tbody>
  </table>

  <br />

  {# ======================================================= #}
  {# БЛОК: НАЗВАНИЕ ДОКУМЕНТА — номер и дата                     #}
  {# Массив месяцев для вывода даты словом ("15 мая")       #}
  {# ======================================================= #}
  {% set mnths = ['','января','февраля','марта','апреля','мая','июня','июля','августа','сентября','октября','ноября','декабря'] %}

  <p class="text-center" style="font-size: 16px; font-weight: bold; margin-bottom: 10px">
    Накладная №{{ model.id }} от {{ model.created_at|date("j") }} {{ mnths[model.created_at|date("n")] }} {{ model.created_at|date("Y") }} г.
  </p>

  {# ======================================================= #}
  {# БЛОК: ТАБЛИЦА ТОВАРОВ                                    #}
  {# ======================================================= #}
  <table class="table-products width100 border products-table">
    <thead>
      <tr>
        <th class="text-center">№</th>
        <th class="name-col">Наименование</th>
        <th>Кол-во</th>
        <th>Ед.</th>
        <th>Цена</th>
        <th>Сумма</th>
      </tr>
    </thead>
    <tbody>
      {# Строки товаров — перебираем все позиции сделки #}
      {% for key, product in model.products %}
      <tr>
        <td class="text-center" style="font-size: 12px;"><strong>{{ key + 1 }}</strong></td>
        <td style="width:50%; font-size: 12px;">{{ product.name }}</td>
        <td class="text-center" style="font-size: 12px;">{{ product.quantity }}</td>
        <td class="text-center" style="font-size: 12px;">{{ product.unit_type }}</td>
        <td class="text-right" style="font-size: 12px;">{{ product.price|format_currency('UAH', locale='ru') }}</td>
        <td class="text-right" style="font-size: 12px;">{{ (product.quantity * product.price)|format_currency('UAH', locale='ru') }}</td>
      </tr>
      {% endfor %}
      {# Итоговая строка с общей суммой #}
      <tr>
        <td colspan="5" class="text-right"><strong>Всего:</strong></td>
        <td class="text-right">
          <strong>{{ model.products_sum|format_currency('UAH', locale='ru')  }}</strong>
        </td>
      </tr>
    </tbody>
  </table>

  {# ======================================================= #}
  {# БЛОК: ИТОГ — количество позиций и общая сумма          #}
  {# ======================================================= #}
  <br /><br />
  <table>
    <tbody>
    <tr>
      <td>
        <strong>Всего наименований {{ model.products|length }}, на сумму {{ model.products_sum|format_currency('UAH', locale='ru') }}</strong>
      </td>
    </tr>
    </tbody>
  </table>

  <br />

  {# ======================================================= #}
  {# БЛОК: СУММА ПРОПИСЬЮ                                     #}
  {# Логика склонения гривен/копеек встроенная               #}
  {# ======================================================= #}
  <table>
    <tbody>
    <tr>
      <td>
        <p>
          {# Целая часть суммы (гривны) #}
          {% set gtc = model.products_sum|round(0, 'floor') %}
          {# Дробная часть (копейки) #}
          {% set gtr = ((model.products_sum - gtc) * 100)|round(0, 'floor') %}
          <strong>{{ (gtc|format_number(style="spellout", locale="ru"))|capitalize }}
          {# Склонение слова "гривна" #}
          {% set currencySuffix = (gtc % 100 >= 11 and gtc % 100 <= 14) ? 'гривен' : (gtc % 10 == 1) ?
          'гривна' : (gtc % 10 >= 2 and gtc % 10 <= 4) ? 'гривны' : 'гривен' %}
          {{ currencySuffix }}
          {{ (gtr < 10 ? '0' ~ gtr : gtr) }}
          {# Склонение слова "копейка" #}
          {% set centsSuffix = (gtr >= 11 and gtr <= 14) ? 'копеек' : (gtr % 10 == 1) ?
          'копейка' : (gtr % 10 >= 2 and gtr % 10 <= 4) ? 'копейки' : 'копеек' %}
          {{ centsSuffix }}
          </strong>
        </p>
      </td>
    </tr>
    </tbody>
  </table>

  <br />

  {# ======================================================= #}
  {# БЛОК: ПОДПИСЬ ПРОДАВЦА                                   #}
  {# Замените ФИО продавца (выделено желтым)                  #}
  {# ======================================================= #}
  <table class="width100" style="padding-bottom: 30px; margin-bottom: 30px;">
    <tbody>
    <tr style="font-size: 12px;">
      <td>Продавец</td>
      <td style="border-bottom: 1px solid black;"></td>
      {# ФИО продавца — заменить на свое #}
      <td><span style="background-color: yellow">Фамилия Имя Отчество</span></td>
    </tr>
    <tr>
      <td style="padding: 5px;"></td>
      <td class="text-center" style="padding: 5px;">Подпись</td>
      <td style="padding: 5px;"></td>
    </tr>
    </tbody>
  </table>

  <br />

  {# ======================================================= #}
  {# БЛОК: БЛАГОДАРНОСТЬ И КОНТАКТЫ (QR-коды)                #}
  {# Замените ссылки на QR-коды своих Telegram/Viber        #}
  {# ======================================================= #}
  <table class="width100" style="padding-bottom: 10px; margin-bottom: 10px;">
    <tbody>
    <tr>
      <td class="text-center" style="font-size: 12px;">Спасибо за заказ!</td>
    </tr>
    <tr>
      <td class="text-center" style="font-size: 12px;">Нам очень важно, чтобы вы были довольны нашими изделиями и сервисом</td>
    </tr>
    <tr>
      <td class="text-center" style="padding: 5px; font-size: 12px;">По любому вопросу вы можете написать нам в вайбер или телеграм:</td>
    </tr>
    </tbody>
  </table>

  <table class="width100">
    <tbody>
    <tr>
      <td class="text-center" style="width: 50%; font-size: 12px;">Telegram</td>
      <td class="text-center" style="width: 50%; font-size: 12px;">Viber</td>
    </tr>
    <tr>
      {# QR-код Telegram: замените src на ссылку своего QR #}
      <td class="text-center" style="width: 50%;">
        <img src="https://blog.keycrm.app/keycrm/qr/keycrm-telegram-qr.png" style="width: 150px;" alt="">
      </td>
      {# QR-код Viber: замените src на ссылку своего QR #}
      <td class="text-center" style="width: 50%; padding: 5px;">
        <img src="https://blog.keycrm.app/keycrm/qr/keycrm-viber-qr.png" style="width: 150px;" alt="">
      </td>
    </tr>
    </tbody>
  </table>

</div>

</body>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html, body {
    height: 100%;
  }

  body {
    font-size: 12px;
    line-height: 1.3;
    min-width: 320px;
    font-family: sans-serif;
    overflow-x: hidden;
  }

  .container {
    margin-right: auto;
    margin-left: auto;
  }

  .text-center { text-align: center; }
  .text-right  { text-align: right; }
  .label       { font-weight: bold; }

  .underline {
    text-decoration: underline;
    font-style: italic;
  }

  .big-text { font-size: 14px; }

  .width100 { width: 100%; }

  table {
    border-collapse: collapse;
    border-spacing: 0;
    height: auto;
  }

  table td {
    padding-right: 5px;
    padding-left: 5px;
    border: none;
  }

  /* Линия под каждой строкой таблицы товаров */
  table.border td,
  table.border th {
    border-bottom: 1px solid black;
  }

  table.table-products {
    width: calc(100% - 2px);
  }

  table.table-products th {
    padding: 5px;
  }

  table.table-products td {
    padding: 5px;
  }

  table.table-sum {
    margin-top: 7px;
  }

  table.table-sum td {
    padding: 3px 5px 3px 15px;
  }

  /* =============================================
      РАЗБИВКА НА СТРАНИЦЫ
      ============================================= */

  /* Заголовок таблицы повторяется на каждой странице */
  table.products-table thead {
    display: table-header-group;
  }

  /* Строки tbody не разрываются между страницами */
  table.products-table tbody tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Блоки после таблицы держим вместе */
  table.width100:not(.products-table) {
    page-break-inside: avoid;
    break-inside: avoid;
  }
</style>
</html>
```

{% endtab %}
{% endtabs %}

### 3. Счет на оплату

{% tabs %}
{% tab title="Внешний вид" %}
![](/files/8wMq5RDQdFaFnR1pWpJn)
{% endtab %}

{% tab title="Код шаблона" %}
**Тип шаблона:** Воронки

```
<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Счет на оплату</title>
</head>
<body>

<div class="container">

  {# ======================================================= #}
  {# БЛОК: ШАПКА — название документа с номером и датой      #}
  {# Массив месяцев для вывода даты словом ("15 мая")       #}
  {# ======================================================= #}
  {% set mnths = ['','января','февраля','марта','апреля','мая','июня','июля','августа','сентября','октября','ноября','декабря'] %}

  <table style="padding-bottom: 10px; border-bottom: solid 3px black; margin-bottom: 10px;">
    <tbody>
    <tr>
      <td style="font-size: 20px; font-weight: bold; width: 90%">
        Счет на оплату № {{ model.title }} от {{ model.created_at|date("j") }} {{ mnths[model.created_at|date("n")] }} {{ model.created_at|date("Y") }} г.
      </td>
    </tr>
    </tbody>
  </table>

  {# ======================================================= #}
  {# БЛОК: РЕКВИЗИТЫ — поставщик и покупатель                #}
  {# Замените выделенный желтым текст на свои реальные данные    #}
  {# ======================================================= #}
  <table>
    <tbody>
    <tr>
      <td valign="top">
        <span style="text-decoration: underline">Поставщик:</span>
      </td>
      <td valign="top" style="padding-bottom: 7px;">
        {# Название организации — заменить на свою #}
        <strong><span style="background-color: yellow">ООО "Название вашей компании"</span></strong>
        <div style="padding-left: 15px; font-size: 90%;">
          {# Реквизиты — заменить на свои #}
          <span style="background-color: yellow">адрес г.Город ул. Название улицы, 0, АО КБ "НАЗВАНИЕ БАНКА" № счета: UA000000000000, код ЕГРПОУ 0000000. Директор Фамилия И.О.</span><br/>
        </div>
      </td>
    </tr>
    <tr>
      <td valign="top">
        <span style="text-decoration: underline">Покупатель:</span>
      </td>
      <td valign="top" style="padding-bottom: 7px;">
        {# Имя контакта подтягивается из CRM автоматически #}
        <strong>{{ model.contact_name }}</strong>
        <div style="padding-left: 15px; font-size: 90%;">
          {% if model.contact_phone %}
            {{ model.contact_phone }},
          {% endif %}
          {% if model.contact_email %}
            {{ model.contact_email }}
          {% endif %}
        </div>
      </td>
    </tr>
    <tr>
      <td valign="top">
        <span style="text-decoration: underline">Предмет:</span>
      </td>
      <td valign="top" style="padding-bottom: 7px;">
        <div style="padding-left: 15px; font-size: 90%;">
          <span>Поставщик обязуется поставить и передать в собственность Покупателя товар, указанный в настоящем Счете, вместе с товаросопроводительной документацией, а Покупатель обязуется принять и оплатить его с учетом цен, указанных в настоящем Счете.</span><br/>
        </div>
      </td>
    </tr>
    <tr>
      <td valign="top">
        <span style="text-decoration: underline">Срок:</span>
      </td>
      <td valign="top" style="padding-bottom: 7px;">
        {# Измените срок, если нужно #}
        <span>Не позднее 40 дней от даты осуществления предоплаты за товар.</span>
      </td>
    </tr>
    <tr>
      <td valign="top">
        <span style="text-decoration: underline">Договор:</span>
      </td>
      <td valign="top" style="padding-bottom: 7px;">
        {# Измените номер и дату договора на свои #}
        <span><span style="background-color: yellow">Договора Поставки № 00-0000-00 от 00.00.0000 года</span></span>
      </td>
    </tr>
    </tbody>
  </table>

  <br/>

  {# ======================================================= #}
  {# БЛОК: ТАБЛИЦА ТОВАРОВ                                    #}
  {# ======================================================= #}
  <table class="table-products width100 border products-table">
    <thead>
      <tr>
        <th class="text-center">№</th>
        <th>Артикул</th>
        <th class="name-col">Название товара</th>
        <th>Количество</th>
        <th>Цена</th>
        <th>Сумма</th>
      </tr>
    </thead>
    <tbody>
      {# Строки товаров — перебираем все позиции сделки #}
      {% for key, product in model.products %}
      <tr>
        <td class="text-center">{{ key + 1 }}</td>
        <td class="text-center">{{ product.sku }}</td>
        <td style="width:50%">{{ product.name }}</td>
        <td class="text-center">{{ product.quantity }} {{ product.unit_type }}</td>
        <td class="text-right">{{ product.price|format_currency('UAH', locale='ru') }}</td>
        <td class="text-right">{{ (product.quantity * product.price)|format_currency('UAH', locale='ru') }}</td>
      </tr>
      {% endfor %}

      {# Итоговая строка с общей суммой #}
      <tr>
        <td colspan="5" class="text-right"><strong>Итого:</strong></td>
        <td class="text-right"><strong>{{ model.products_sum|format_currency('UAH', locale='ru') }}</strong></td>
      </tr>
    </tbody>
  </table>

  <br/>

  {# ======================================================= #}
  {# БЛОК: ИТОГ — количество позиций и общая сумма          #}
  {# ======================================================= #}
  <table>
    <tbody>
    <tr>
      <td>
        <strong>Всего наименований {{ model.products|length }}, на сумму {{ model.products_sum|format_currency('UAH', locale='ru') }}</strong>
      </td>
    </tr>
    </tbody>
  </table>

  <br/>

  {# ======================================================= #}
  {# БЛОК: СУММА ПРОПИСЬЮ                                     #}
  {# Логика склонения гривен/копеек встроенная               #}
  {# ======================================================= #}
  <table>
    <tbody>
    <tr>
      <td>
        <p>
          {# Целая часть суммы (гривны) #}
          {% set gtc = model.products_sum|round(0, 'floor') %}
          {# Дробная часть (копейки) #}
          {% set gtr = ((model.products_sum - gtc) * 100)|round(0, 'floor') %}
          <strong>{{ (gtc|format_number(style="spellout", locale="ru"))|capitalize }}
          {# Склонение слова "гривна" #}
          {% set currencySuffix = (gtc % 100 >= 11 and gtc % 100 <= 14) ? 'гривен' : (gtc % 10 == 1) ?
          'гривна' : (gtc % 10 >= 2 and gtc % 10 <= 4) ? 'гривны' : 'гривен' %}
          {{ currencySuffix }}
          {{ (gtr < 10 ? '0' ~ gtr : gtr) }}
          {# Склонение слова "копейка" #}
          {% set centsSuffix = (gtr >= 11 and gtr <= 14) ? 'копеек' : (gtr % 10 == 1) ?
          'копейка' : (gtr % 10 >= 2 and gtr % 10 <= 4) ? 'копейки' : 'копеек' %}
          {{ centsSuffix }}
          </strong>
        </p>
      </td>
    </tr>
    </tbody>
  </table>

  <br/>

  {# ======================================================= #}
  {# БЛОК: ПОДПИСЬ — срок действия счета и ответственное лицо #}
  {# Замените ФИО ответственного лица (выделено желтым)      #}
  {# ======================================================= #}
  <table class="width100" style="border-top: solid 3px black;">
    <tbody>
    <tr>
      <td valign="top" style="padding-top: 15px; padding-right: 30px;" width="50%">
        {# Измените срок действия счета, если нужно #}
        <span style="font-size: 90%;"><strong>Срок действия Счета в течение 3 суток с момента предоставления Покупателю.</strong></span>
      </td>
      <td valign="top" style="padding-top: 15px; padding-right: 30px; display: flex; justify-content: space-between; border-bottom: solid 1px black;">
        <strong>Выписал(а)</strong>
        {# ФИО ответственного лица — заменить на свое #}
        <strong><span style="background-color: yellow">Фамилия И.О.</span></strong>
      </td>
    </tr>
    </tbody>
  </table>

</div>

</body>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html, body {
    height: 100%;
  }

  body {
    font-size: 16px;
    line-height: 1.3;
    min-width: 320px;
    font-family: sans-serif;
    overflow-x: hidden;
  }

  .container {
    margin-right: auto;
    margin-left: auto;
  }

  .text-center { text-align: center; }
  .text-right  { text-align: right; }
  .label       { font-weight: bold; }

  .underline {
    text-decoration: underline;
    font-style: italic;
  }

  .big-text { font-size: 18px; }

  .width100 { width: 100%; }

  table {
    border-collapse: collapse;
    border-spacing: 0;
    height: auto;
  }

  table td {
    padding-right: 5px;
    padding-left: 5px;
    border: none;
  }

  table th {
    background: #d4d4d4;
  }

  /* Рамки для таблицы товаров */
  table.border td,
  table.border th {
    border: 1px solid black;
  }

  table.table-products {
    border: solid 2px black;
    width: calc(100% - 2px);
  }

  table.table-products th {
    padding: 15px 5px;
  }

  table.table-products td {
    padding: 5px;
  }

  table.table-sum {
    margin-top: 7px;
  }

  table.table-sum td {
    padding: 3px 5px 3px 15px;
  }

  /* =============================================
     РАЗБИВКА НА СТРАНИЦЫ
     ============================================= */

  /* Заголовок таблицы повторяется на каждой странице */
  table.products-table thead {
    display: table-header-group;
  }

  /* Строки tbody не разрываются между страницами */
  table.products-table tbody tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Блоки после таблицы держим вместе */
  table:not(.products-table):not(.border) {
    page-break-inside: avoid;
    break-inside: avoid;
  }
</style>
</html>

```

{% endtab %}
{% endtabs %}

## 4. Коммерческое предложение

{% tabs %}
{% tab title="Внешний вид" %}

<figure><img src="/files/plB16cPm7eplkCyzHDeU" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Код шаблона" %}
**Тип шаблона:** Воронки

```
<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Коммерческое предложение</title>
</head>
<body>

<div class="container">

{# ======================================================= #}
{# БЛОК: ШАПКА — логотип и контакты компании               #}
{# Замените выделенный желтым текст на свои реальные данные #}
{# ======================================================= #}
<table style="width:100%; margin-bottom: 10px;">
  <tbody>
  <tr>
    <td valign="middle" style="width:50%">
      {# Логотип: замените src на прямую ссылку на свое изображение #}
      <img src="https://blog.keycrm.app/wp-content/uploads/2025/12/cropped-keycrm-logo-blue-on-transparent-160x53.png" style="height:100px" alt="">
    </td>
    <td valign="middle" style="width:50%">
      {# Название компании и контакты — заменить на свои #}
      <p style="margin:0; font-style:italic;"><span style="background-color:yellow">Компания "Название"</span></p>
      <p style="font-style:italic;"><span style="background-color:yellow">+38(050)000-00-00</span></p>
      <p style="font-style:italic;"><span style="background-color:yellow">+38(067)000-00-00</span></p>
      {# Сайт компании — заменить на свой #}
      <a href="https://blog.keycrm.app/"><strong><span style="background-color:yellow">blog.keycrm.app</span></strong></a>
    </td>
  </tr>
  </tbody>
</table>

<br>

{# ======================================================= #}
{# БЛОК: ЗАГОЛОВОК ДОКУМЕНТА — номер и дата                #}
{# ======================================================= #}
<p class="text-center"><strong>Специальное коммерческое предложение № {{ model.id }}</strong></p>
<p class="text-right">{{ "now"|date("d.m.Y") }}</p>

<br>

{# ======================================================= #}
{# БЛОК: ТАБЛИЦЯ ТОВАРОВ                                    #}
{# ======================================================= #}
<table class="table-products medium-text width100 products-table">
  <thead>
    <tr class="border-row">
      <th class="text-center">№</th>
      <th>Фото</th>
      <th>Наименование</th>
      <th>Цена</th>
      <th>Количество</th>
      <th>Сумма</th>
    </tr>
  </thead>
  <tbody>
    {# Строки товаров — перебираем все позиции сделки #}
    {% for key, product in model.products %}
    <tr class="border-row">
      <td class="text-center">{{ key + 1 }}</td>
      <td><img src="{{ product.picture }}" width="70" style="border:0; background:lightgrey; height:70px; margin-top:5px;"/></td>
      <td style="width:35%">{{ product.name }}</td>
      <td class="text-center">{{ product.price|number_format(2, '.', ' ') }}</td>
      <td class="text-center">{{ product.quantity }}</td>
      <td class="text-center">{{ (product.quantity * product.price)|number_format(2, '.', ' ') }}</td>
    </tr>
    {% endfor %}

    {# Итоговая строка с общей суммой #}
    <tr class="border-row">
      <td colspan="5" class="text-right">Сумма:</td>
      <td class="text-center">{{ model.products_sum }}</td>
    </tr>
  </tbody>
</table>

<br>

{# ======================================================= #}
{# БЛОК: ПРИМЕЧАНИЯ — условия ценообразования               #}
{# ======================================================= #}
<p style="margin:0; text-indent:1ch; color:red;">● Цены указаны с учетом доставки.</p>
<p style="margin:0; text-indent:1ch; color:red;">● Цена может изменяться в зависимости от курса валюты.</p>

<br><br>

{# ======================================================= #}
{# БЛОК: КОММЕРЧЕСКОЕ ПРЕДЛОЖЕНИЕ — текст                  #}
{# Измените текст на свой при необходимости                #}
{# ======================================================= #}
<p class="text-left"><strong>Мы предлагаем:</strong><br>
  Высокий уровень качества продукции и узнаваемости бренда.<br>
  Конкурентную цену на рынке и высокую маржинальность.<br>
  Быстрая обратная связь. Мы знаем ценность вашего времени, поэтому оперативно обрабатываем ваши заявки.<br>
  Гибкую систему оплаты и условия сотрудничества.<br>
  Качественную маркетинговую поддержку: рекламные материалы, создание совместных маркетинговых кампаний.
</p>

</div>

</body>
<style>
  .page_break {
    page-break-after: always;
  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html, body {
    height: 100%;
  }

  body {
    font-size: 16px;
    line-height: 1.3;
    min-width: 320px;
    font-family: sans-serif;
    overflow-x: hidden;
  }

  .container {
    margin-right: auto;
    margin-left: auto;
  }

  .text-center { text-align: center; }
  .text-right  { text-align: right; }
  .text-left   { text-align: left; }
  .label       { font-weight: bold; }

  .underline {
    text-decoration: underline;
    font-style: italic;
  }

  .big-text    { font-size: 18px; }
  .medium-text { font-size: 14px; }
  .small-text  { font-size: 12px; }

  .width100 { width: calc(100% - 2px); }

  /* Строки с рамками */
  .border-row td,
  .border-row th {
    border: 1px solid black;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
    height: auto;
  }

  table td {
    padding-right: 5px;
    padding-left: 5px;
    border: none;
  }

  table th {
    background: #C5C9E4;
  }

  table.table-products th {
    padding: 15px 5px;
  }

  table.table-products td {
    padding: 5px;
  }

  table.table-payment-details td {
    padding: 3px;
  }

  table.table-sum {
    margin-top: 7px;
  }

  table.table-sum td {
    padding: 3px 5px 3px 15px;
  }

  .flex-child {
    padding: 15px;
  }

  /* =============================================
     РАЗБИВКА НА СТРАНИЦЫ
     Эти правила работают и в PDF-генерации keyCRM,
     и при обычной печати через браузер.
     ============================================= */

  /* Заголовок таблицы повторяется на каждой странице */
  table.products-table thead {
    display: table-header-group;
  }

  /* Строки tbody не разрываются между страницами */
  table.products-table tbody tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }
</style>
</html>
                <td class="text-center" style="border: 1px solid black;">{{ model.products_sum }}</td>    
            </tr>    
    </table>
    <p class="text-right" style="position: relative; top: -26px; right: 180px;">Сумма (без НДС):</p>
    
    <p style="margin: 0; text-indent: 1ch; color: red;">● Цены указаны с учетом доставки.
</p>
    <p style="margin: 0; text-indent: 1ch; color: red">● Цена может варьироваться в зависимости от курса валюты.</p>

    </br></br>
    
    <p class="text-left"><strong>Мы предлагаем:</strong></br>
     Высокий уровень качества продукции и узнаваемости бренда.</br>
     Конкурентная цена на рынке и высокая маржинальность.</br>
     Быстрая обратная связь. Мы знаем ценность вашего времени, поэтому оперативно обрабатываем ваши заявки.</br>
     Гибкая система оплаты и условия сотрудничества.</br>
     Качественную маркетинговую поддержку: рекламные материалы, создание совместных маркетинговых компаний.</p>
    
    
</div>

</body>
<style>

  .page_break {
    page-break-after:always;
  }
    
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html, body {
    height: 100%;
  }
  body {
    font-size: 16px;
    line-height: 1.3;
    min-width: 320px;
    font-family: sans-serif;
    overflow-x: hidden;
  }

  .container {
    margin-right: auto;
    margin-left: auto;
  }

  .text-center {
    text-align: center;
  }

  .text-right {
    text-align: right;
  }

  .label {
    font-weight: bold;
  }

  .underline {
    text-decoration: underline;
    font-style: italic;
  }

  .big-text {
    font-size: 18px;
  }
  .medium-text {
    font-size: 14px;
  }
  .small-text {
    font-size: 12px;
  }

  .width100 {
    width: 100%;
  }
  
  .border-row td, .border-row th {
      border: 1px solid black;
  }

  table {
    border-collapse:collapse;
    border-spacing:0;
    height: auto;
  }

  table td {
    padding-right: 5px;
    padding-left: 5px;
    border: none;
  }

  table th {
    background: #C5C9E4;
  }

  table.border td,
  table.border th {
    border: 1px solid black;
  }

  table.table-products {
    /*border: solid 2px black;*/
  }

  table.table-products th {
    padding: 15px 5px;
  }
  table.table-products td {
    padding: 5px;
  }
  
  table.table-payment-details td {
    padding: 3px;
  }

  table.table-sum {
    margin-top: 7px;
  }

  table.table-sum td {
    padding: 3px 5px 3px 15px;
  }
  
  .flex-child {  
  padding: 15px;
  }
</style>
</html>
```

{% endtab %}
{% endtabs %}
