> 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/ua/voronki.md).

# Для воронок

#### Інструкції:

* [Як використовувати шаблони з бібліотеки та створювати власні шаблони документів](https://help.keycrm.app/uk/work-with-pipeline/iak-stvoriti-novii-shablon-dokumienta-dlia-druku-dlia-administratoriv);
* [Довідник доступних тегів, функцій та фільтрів Twig](https://help.keycrm.app/uk/process-automation-api-and-more/dovidnik-dostupnikh-funktsii-ta-fil-triv-twig);
* [Приклади рішень та відповіді на поширені запитання](https://help.keycrm.app/uk/work-with-pipeline/faq-creating-documents-in-pipeline).

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

{% tabs %}
{% tab title="Зовнішній вигляд" %}
![](/files/b3jqOkPVwPsrQEowR5Or)
{% endtab %}

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

```
<!doctype html>
<html lang="uk">
<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='uk') }}</td>
        <td class="text-right">{{ (product.quantity * product.price)|format_currency('UAH', locale='uk') }}</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='uk')  }}</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/HAGyVoScAmnKRX24szNo)
{% endtab %}

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

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

Після генерації потрібно зберегти картинки на вашому сервері (сайті) та вставити в шаблон посилання на них.

{% code fullWidth="true" %}

```
<!doctype html>
<html lang="uk">
<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='uk') }}</td>
        <td class="text-right" style="font-size: 12px;">{{ (product.quantity * product.price)|format_currency('UAH', locale='uk') }}</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='uk')  }}</strong>
        </td>
      </tr>
    </tbody>
  </table>

  {# ======================================================= #}
  {# БЛОК: ПІДСУМОК — кількість позицій і загальна сума      #}
  {# ======================================================= #}
  <br /><br />
  <table>
    <tbody>
    <tr>
      <td>
        <strong>Всього найменувань {{ model.products|length }}, на суму {{ model.products_sum|format_currency('UAH', locale='uk') }}</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="uk"))|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>
```

{% endcode %}
{% endtab %}
{% endtabs %}

### 3. Рахунок на оплату

{% tabs %}
{% tab title="Зовнішній вигляд" %}
![](/files/IV8CQoBlI8o1RTNEZd4r)
{% endtab %}

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

```
<!doctype html>
<html lang="uk">
<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='uk') }}</td>
        <td class="text-right">{{ (product.quantity * product.price)|format_currency('UAH', locale='uk') }}</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='uk') }}</strong></td>
      </tr>
    </tbody>
  </table>

  <br/>

  {# ======================================================= #}
  {# БЛОК: ПІДСУМОК — кількість позицій і загальна сума      #}
  {# ======================================================= #}
  <table>
    <tbody>
    <tr>
      <td>
        <strong>Всього найменувань {{ model.products|length }}, на суму {{ model.products_sum|format_currency('UAH', locale='uk') }}</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="uk"))|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/YUs6Trbloajw5podB3aQ" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

```
<!doctype html>
<html lang="uk">
<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>

{# ======================================================= #}
{# БЛОК: ШАПКА — логотип і контакти компанії               #}
{# Замініть виділений жовтим текст на свої реальні дані    #}
{# ======================================================= #}
<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>

</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>
    <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 %}
