# Read here / Читай тут

### Ukrainian / Українською

У бібліотеці зібрані готові шаблони документів для щоденної роботи бізнесу: замовлень, доставок, воронок, складських операцій та інших процесів.

Шаблони створені з використанням HTML, CSS та [Twig](https://twig.symfony.com/doc/). Доступні теги, фільтри та функції описані в нашому [довіднику](https://help.keycrm.app/uk/process-automation-api-and-more/dovidnik-dostupnikh-funktsii-ta-fil-triv-twig).

> **Зверніть увагу!** Обирайте шаблон саме для потрібного розділу. Змінні відрізняються в різних типах шаблонів, тому шаблони для замовлень, наприклад, не будуть працювати у воронках.

**Інструкції по роботі з шаблонами:**

* [Для шаблонів замовлень та доставок](https://help.keycrm.app/uk/work-with-orders#druk-dokumentiv-po-zamovlenni);
* [Для шаблонів воронок](https://help.keycrm.app/uk/work-with-pipeline#druk-dokumentiv-po-kartci);
* [Для складських документів](https://help.keycrm.app/uk/products-and-warehouse-management#druk-dokumientiv-po-sklads-kim-opieratsiiam).

Якщо ви не знайшли шаблон, який відповідає вашим потребам, ви можете використати один із готових варіантів та адаптувати його самостійно або за допомогою програміста. У більшості випадків це не потребує складних доопрацювань.

Якщо ви створили власний шаблон, який суттєво відрізняється від представлених у бібліотеці, ви можете надіслати нам його код. Ми розглянемо можливість додавання шаблону до каталогу, щоб він став доступним для інших користувачів.

### English

The library contains ready-made document templates for day-to-day business operations: orders, deliveries, pipelines, warehouse operations, and other processes.

The templates are built using HTML, CSS, and [Twig](https://twig.symfony.com/doc/). The available tags, filters, and functions are described in our reference [guide](https://help.keycrm.app/uk/process-automation-api-and-more/dovidnik-dostupnikh-funktsii-ta-fil-triv-twig).

> **Please note!** Be sure to select the template for the specific section you need. Variables differ across different types of templates, so templates for orders, for example, will not work in pipelines.

**Instructions for working with templates:**

* [For order and delivery templates](https://help.keycrm.app/en/orders#printing-of-documents-for-order);
* [For pipeline templates](https://help.keycrm.app/en/working-with-pipelines-applications-leads-deals#printing-documents-and-exporting);
* [For warehouse documents](https://help.keycrm.app/uk/products-and-warehouse-management#druk-dokumientiv-po-sklads-kim-opieratsiiam).

If you haven’t found a template that meets your needs, you can use one of the ready-made options and adapt it yourself or with the help of a programmer. In most cases, this doesn’t require complex modifications.

If you have created your own template that differs significantly from those in the library, you can send us its code. We will consider adding the template to the catalog so that it becomes available to other users.

### Russian / Русский

В библиотеке собраны готовые шаблоны документов для повседневной работы бизнеса: заказов, доставок, воронки продаж, складских операций и других процессов.

Шаблоны созданы с использованием HTML, CSS и [Twig](https://twig.symfony.com/doc/). Доступные теги, фильтры и функции описаны в нашем [справочнике](https://help.keycrm.app/ru/keycrm-api/spravochnik-dostupnykh-tieghov-funktsii-i-fil-trov-twig).

> **Обратите внимание!** Выбирайте шаблон именно для нужного раздела. Переменные различаются в разных типах шаблонов, поэтому шаблоны для заказов, например, не будут работать в воронках.

**Инструкции по работе с шаблонами:**

* [Для шаблонов заказов и доставок](https://help.keycrm.app/ru/order-management#pecat-dokumentov-po-zakazu);
* [Для шаблонов воронок](https://help.keycrm.app/ru/rabota-s-zaiavkami#pecat-dokumentov-po-zaavke);
* [Для складских документов](https://help.keycrm.app/ru/products-and-warehouse-management#pecat-dokumentov-po-sklads-kim-operaciam).

Если вы не нашли шаблон, который соответствует вашим потребностям, вы можете использовать один из готовых вариантов и адаптировать его самостоятельно или с помощью программиста. В большинстве случаев это не требует сложных доработок.

Если вы создали собственный шаблон, который существенно отличается от представленных в библиотеке, вы можете прислать нам его код. Мы рассмотрим возможность добавления шаблона в каталог, чтобы он стал доступен для других пользователей.


# International

### 1. Invoice

{% tabs %}
{% tab title="View" %}

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

{% tab title="Template code" %}
**Template type:** Orders

```
<!doctype html>
<html lang="en">
<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>Invoice</title>
</head>
<body>

<div class="container">

  <table class="width100">
    <tbody>
    <tr>
      <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: 220px;" alt="">
      </td>
      <td valign="top">
        <span style="background-color: yellow">Kyiv, Honchara St., 52</span><br />
        <span style="background-color: yellow">googrider@ukr.net</span><br />
      </td>
      <td valign="top">
        <span style="background-color: yellow">тел.: (044)777-77-77</span><br />
        <span style="background-color: yellow">тел.: (095)777-77-77</span><br />
        <span style="background-color: yellow">тел.: (067)777-77-77</span><br />
      </td>
    </tr>
    </tbody>
  </table>
  
  <br /><br /><br />

  <table class="width100">
    <tbody>
    <tr>
      <td valign="top" class="label" style="width:50%">
          <span style="background-color: yellow">Supplier: FAA unique presents</span><br />
          <span style="background-color: yellow">Private Entrepreneur Neomenko A.F.</span><br />
          <span style="background-color: yellow">Kyiv, Honchara St., 52</span><br />
          <span style="background-color: yellow">тел.: (044)777-77-77</span><br />
      </td>
      <td valign="top" class="label">
          Recipient: {{ model.client_name }}<br />
          tel.: {{ model.client_phone }}<br />
          {% if model.client_email %}
            email: {{ model.client_email }}
          {% endif %}
      </td>
    </tr>
    </tbody>
  </table>
  <br />

  <p class="big-text text-center" style="margin-bottom: 10px">
    {% set mnths = ['','January','February','March','April','May','June','July','August','September','October','November','December'] %}
    
    Invoice №{{ model.id }} dated {{ model.created_at|date("j") }} {{ mnths[model.created_at|date("n")] }} {{ model.created_at|date("Y") }}
  </p>

  <table class="width100 border">
    <thead class="table-products">
      <tr>
        <th class="text-center">№</th>
        <th>Product Code</th>
        <th class="name-col">Product Name</th>
        <th>Unit</th>
        <th>Quantity</th>
        <th>Price</th>
        <th>Total</th>
      </tr>
      
      {% for key, product in model.products %}
      <tr>
        <td class="text-center">{{key + 1}}</td>
        <td class="text-center">{{ product.product_sku }}</td>
        <td style="width:50%">{{ product.product_name }}</td>
        <td class="text-center">{{ product.product_unit_type }}</td>
        <td class="text-center">{{ product.product_quantity }}</td>
        <td class="text-center">{{ product.price_sold|format_currency('USD', locale='en') }}</td>
        <td class="text-right">{{ (product.product_quantity * product.price_sold)|format_currency('USD', locale='en') }}</td>
      </tr>
      {% endfor %}
    </thead>
    <tbody>
        {% if model.discount_amount or model.shipping_price  %}
        <tr>
          <td colspan="6" class="text-right">Total for products:</td>
          <td class="text-right">{{ model.total_price|format_currency('USD', locale='en') }}</td>
        </tr>
        {% endif %}

        {% if model.discount_amount %}
        <tr>
          <td colspan="6" class="text-right">Discount:</td>
          <td class="text-right">{{ model.discount_amount|format_currency('USD', locale='en') }}</td>
        </tr>
        {% endif %}

        {% if model.shipping_price %}
        <tr>
          <td colspan="6" class="text-right">Shipping:</td>
          <td class="text-right">{{ model.shipping_price|format_currency('USD', locale='en') }}</td>
        </tr>
        {% endif %}

        <tr>
          <td colspan="6" class="text-right">Total:</td>
          <td class="text-right">{{ model.grand_total|format_currency('USD', locale='en') }}</td>
        </tr>
   </tbody>
  </table>
  
  <br /><br />
  <table class="table-sum width100">
    <tr>
      <td colspan="2">
          Total items {{ model.products|length }}, for the amount of {{ model.grand_total|format_currency('USD', locale='en') }}
      </td>
      <td></td>
    </tr>
    <tr>
      <td>Date: <span class="label underline">{{ model.created_at|date("j") }} {{ mnths[model.created_at|date("n")] }} {{ model.created_at|date("Y") }}</span>    </td>
      <td>Supplier's signature: &nbsp;&nbsp;&nbsp; ____________________</td>
      <td></td>
    </tr>
  </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: 99%;
  }

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

  table td {
    padding: 5px;
  }

  table th {
    background: #d4d4d4;
  }

  table thead td,
  table thead th {
    border: 1px solid black;
  }
  
  table.table-products {
      border: solid 2px black;
  }

  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;
  }

</style>
</html>

```

{% endtab %}
{% endtabs %}

### 2. Etsy-like Invoice

{% tabs %}
{% tab title="View" %}
![](/files/QINuUObrn4cFUkvjO7Iy)
{% endtab %}

{% tab title="Template code" %}
**Template type:** Orders

```
<!doctype html>
<html lang="en">
<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">
</head>
<body>

<div class="container">
    
    <div style="font-size: 24px; margin-bottom: 10px;">
        <strong style="background-color: yellow">ShopName</strong>
    </div>
    
    <div style="margin-bottom: 40px;">
        <span style="background-color: yellow">https://etsy.com/shop/YOURSHOP</span>
    </div>

    <table class="content">
        <tbody>
        <tr>
            <td valign="top" style="width: 26%; padding-right: 20px;">

                <h3 class="label">Ship to</h3>
                <p>{{ model.recipient_full_name }}</p>
                <p>
                    {{ model.shipping_receive_point }}
                    {{ model.shipping_address_city }},
                    {{ model.shipping_address_region }}
                    {{ model.shipping_address_zip }}
                </p>
                <p>{{ model.shipping_address_country }}</p>

                <h3 class="label" style="margin-top: 20px;">Scheduled to ship by</h3>
                <p>{{ model.shipping_date_actual|date("M d, Y") }}</p>
                
                <div style="height: 1px; background: black; margin-top: 20px;"></div>
                
                <h3 class="label" style="margin-top: 20px;">Ship from</h3>
                <p><span style="background-color: yellow">Full name</span></p>
                <p>
                    <span style="background-color: yellow">Khreschatyk 26/104</span>
                    <span style="background-color: yellow">Kyiv</span>
                    <span style="background-color: yellow">Kyiv region</span>
                    <span style="background-color: yellow">79001</span>
                </p>
                <p><span style="background-color: yellow">Ukraine</span></p>

                <h3 class="label" style="margin-top: 20px;">Order</h3>
                <p>{{ model.source_uuid }}</p>

                <h3 class="label" style="margin-top: 20px;">Order date</h3>
                <p>{{ model.created_at|date("M d, Y") }}</p>

                <h3 class="label" style="margin-top: 20px;">Buyer</h3>
                <p>{{ model.client_name }}</p>

                <h3 class="label" style="margin-top: 20px;">Payment method</h3>
                <p><span style="background-color: yellow">Paid via PayPal</span></p>

            </td>
            
            <td  valign="top" width="74%">
                <h3 class="label">
                    {{ model.products|reduce((carry, item) => carry + item.product_quantity, 0) }} items
                </h3>
                <table class="products">
                    <tbody>
                    {% for product in model.products %}
                        <tr>
                            <td>
                                <img src="{{ product.product_image }}" width="70" style="border: 0; background: lightgrey; min-height: 70px;" />
                            </td>
                            <td style="padding-right: 25px; padding-left: 25px;">
                                <span class="label">{{ product.product_name }}</span>

                                <p>{{ product.product_properties|nl2br }}</p>
                            </td>
                            <td style="white-space: nowrap;">
                                {{ product.product_quantity }} x {{ product.price_sold|format_currency(currency, locale='en') }}
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>

                <div class="total-order">

                    <table>
                        <tr>
                            <td>Item total</td>
                            <td width="160">{{ model.total_price|format_currency(currency, locale='en') }}</td>
                        </tr>
                        <tr>
                            <td>Shop discount</td>
                            <td>- {{ model.discount_amount|format_currency(currency, locale='en') }}</td>
                        </tr>
                        <tr>
                            <td>Shipping total</td>
                            <td>{{ model.shipping_price|format_currency(currency, locale='en') }}</td>
                        </tr>
                        <tr>
                            <td>Subtotal</td>
                            <td>{{ (model.total_price - model.discount_amount + model.shipping_price)|format_currency(currency, locale='en') }}</td>
                        </tr>
                        <tr>
                            <td>Tax</td>
                            <td>{{ model.taxes|format_currency(currency, locale='en') }}</td>
                        </tr>
                        <tr>
                            <td class="label">Order total</td>
                            <td class="label">{{ model.grand_total|format_currency(currency, locale='en') }}</td>
                        </tr>
                    </table>

                </div>
            </td>
        </tr>
        </tbody>
    </table>
</div>

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

    html, body {
        height: 100%;
    }

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

    .label {
        font-size: 16px;
        font-weight: 700;
    }
    
    .products {
        width: 100%;
        margin: 12px 0;
        border-collapse: collapse;
    }
    
    .products tr {
        border: solid 1px black;
        border-width: 1px 0;
    }
    
    .products tr td {
        line-height: 150%;
        padding: 15px 0;
        vertical-align: top;
    }
    
    .products .label {
        display: block;
        padding-bottom: 8px;
    }

    .total-order table {
        width: 100%;
        margin-bottom: 30px;
        text-align: right;
    }

    .total-order table td {
        padding: 5px;
    }

</style>
</html>
```

{% endtab %}
{% endtabs %}

### 3. Proforma Invoice (for customs)

{% tabs %}
{% tab title="View" %}

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

{% tab title="Template code" %}
**Template type:** Orders

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container">

    {% set mnths = ['','січня','лютого','березня','квітня','травня','червня','липня',
    'серпня','вересня','жовтня','листопада','грудня'] %}

    <div style="display: flex; justify-content: center; flex-direction: column; align-items: center;">
        <p style="font-size: 20px"><strong>Proforma Invoice / Рахунок проформа</strong></p>
    </div>
    <div style="display: flex;justify-content: space-between;flex-direction: row;">
        <div style="display: flex; justify-content: center; flex-direction: column; align-items: flex-start;">
            </br>
            <p>Sender / Відправник:</p>
            <p style="background-color: yellow">NAME NAME</p>
            <p style="background-color: yellow">test@ukr.net</p>
            <p style="background-color: yellow">Kyivska 1</p>
            <p style="background-color: yellow">Brovary 07401</p>
            <p style="background-color: yellow">Ukraine</p>
            <p style="background-color: yellow">+38(011)-111-11-11</p>
        </div>
        <div style="display: flex; justify-content: center; flex-direction: column; align-items: flex-start;">
            </br>
            <p>Consignee / Отримувач:</p>
            <p>{{ model.client_name }}</p>
            <p>{{ model.client_email }}</p>
            <p>{{ model.shipping_address_region }}</p>
            <p>{{ model.shipping_receive_point }}</p>
            <p>{{ model.shipping_address_country }}</p>
            <p>{{ model.client_phone }}</p>
        </div>
    </div>
    </br>
    <table class="table-products width100 border">
        <tbody>
        <tr>
            <td colspan="3"><p style="font-size: 18px"><strong>Proforma Invoice № {{ model.id }}</strong></p></td>
            <td colspan="3"><p style="font-size: 18px" class="text-right"><strong>Date: {{
                        model.created_at|date("d/m/Y") }}</strong></p></td>
        </tr>
        </br>
        <tr>
            <th class="text-center">№</th>
            <th>Discription of Products / Опис продукції</th>
            <th>Quantity /</br>Кількість</br>(pcs)</th>
            <th>Unit Price /</br>Ціна за одиницю</br>(USD/pcs)</th>
            <th>Total Amount /</br>Загальна сума</br>(USD)</th>
            <th>Country of</br>origin</br>Країна</br>походження</th>
        </tr>
        {% for key, product in model.products %}
        <tr>
            <td class="text-center">{{key + 1}}</td>
            <td class="text-center">{{ product.product_name }}</td>
            <td class="text-center">{{ product.product_quantity }}</td>
            <td class="text-center">{{ product.price_sold|number_format(2, '.', '') }}</td>
            <td class="text-center">{{ (product.product_quantity * product.price_sold)|number_format(2, '.', '') }}</td>
            <td class="text-center">{{ product.product_comment }}</td>
        </tr>
        {% endfor %}
        <tr>
            <td colspan="3"><p style="font-size: 14px">Packing / Пакування:</p></td>
            <td colspan="3"><p style="font-size: 14px">{{ model.shipping_price }}</p></td>
        </tr>
        <tr>
            <td colspan="3"><p style="font-size: 14px">Commercial sample / Комерційний зразок</p></td>
            <td colspan="3" class="text-left total-cell">
                <div style="display: flex;justify-content: space-between;">
                    <p>TOTAL AMOUNT:</p>
                    <p>{{ model.total_price|number_format(2, '.', '') }} USD</p>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
    </br>
    <p class="text-left" style="font-size: 20px;position: relative;right: -20%;background-color: yellow;"><strong>Name Name</strong></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.5;
        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: 99%;
    }

    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;
    } */

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

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

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

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

    .flex-child {
        padding: 15px;
    }

</style>
</html>
```

{% endtab %}
{% endtabs %}


# Для замовлень

Приклади шаблонів документів для замовлень українською мовою.

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

* [Як використовувати шаблони з бібліотеки та створювати власні шаблони документів](https://help.keycrm.app/uk/work-with-orders/iak-stvoriti-novii-shablon-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-orders/faq-creation-of-documents-for-protection).

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

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

{% tab title="Код шаблону" %}
**Тип шаблону:** Замовлення

```html
<!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">demo@ukr.net</span><br />
      </td>
      {# Телефони магазину #}
      <td valign="top">
        <span style="background-color: yellow">тел.: (011)777-77-77</span><br />
        <span style="background-color: yellow">тел.: (011)777-77-77</span><br />
        <span style="background-color: yellow">тел.: (011)777-77-77</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">Постачальник: Test test</span><br />
        <span style="background-color: yellow">ФОП Тест Т.Т</span><br />
        <span style="background-color: yellow">м.Київ вул. Хрещатик, 1</span><br />
        <span style="background-color: yellow">тел.: (011)777-77-77</span><br />
      </td>
      <td valign="top" class="label">
        {# Дані клієнта підтягуються з CRM автоматично #}
        Одержувач: {{ model.client_name }}<br />
        тел.: {{ model.client_phone | default('не вказано') }}<br />
        {# Email виводиться тільки якщо він заповнений у замовленні #}
        {% if model.client_email %}
          email: {{ model.client_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>

  {# ======================================================= #}
  {# БЛОК: ТАБЛИЦЯ ТОВАРІВ                                   #}
  {# thead повторюється автоматично на кожній сторінці       #}
  {# (CSS: display:table-header-group)                       #}
  {# Рядки товарів не розриваються між сторінками            #}
  {# (CSS: page-break-inside:avoid на tbody tr)              #}
  {# ======================================================= #}
  <table class="width100 border">
    <thead>
      <tr>
        <th class="text-center">№</th>
        <th>Артикулу</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 class="text-center">{{ product.product_sku }}</td>
        <td style="width:50%">{{ product.product_name }}</td>
        <td class="text-center">{{ product.product_unit_type }}</td>
        <td class="text-center">{{ product.product_quantity }}</td>
        <td class="text-center">{{ product.price_sold|format_currency('UAH', locale='uk') }}</td>
        <td class="text-right">{{ (product.product_quantity * product.price_sold)|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endfor %}

      {# ======================================================= #}
      {# ПІДСУМКИ — виводяться після всіх рядків товарів         #}
      {# ======================================================= #}

      {# "Всього за товари" — тільки якщо є знижка або доставка #}
      {% if model.discount_amount or model.shipping_price %}
      <tr>
        <td colspan="6" class="text-right">Всього за товари:</td>
        <td class="text-right">{{ model.total_price|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endif %}

      {# Знижка до замовлення — тільки якщо є #}
      {% if model.discount_amount %}
      <tr>
        <td colspan="6" class="text-right">Знижка:</td>
        <td class="text-right">{{ model.discount_amount|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endif %}

      {# Доставка — тільки якщо є #}
      {% if model.shipping_price %}
      <tr>
        <td colspan="6" class="text-right">Доставка:</td>
        <td class="text-right">{{ model.shipping_price|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endif %}

      {# Фінальна сума — відображається завжди #}
      <tr>
        <td colspan="6" class="text-right"><strong>Сума:</strong></td>
        <td class="text-right"><strong>{{ model.grand_total|format_currency('UAH', locale='uk') }}</strong></td>
      </tr>
    </tbody>
  </table>

  {# ======================================================= #}
  {# БЛОК: ПІДВАЛ — загальна кількість, сума і підпис        #}
  {# ======================================================= #}
  <br /><br />
  <table class="table-sum width100">
    <tr>
      <td colspan="2">
        Всього найменувань {{ model.products|length }}, на суму {{ model.grand_total|format_currency('UAH', locale='uk') }}
      </td>
      <td></td>
    </tr>
    <tr>
      <td>Дата: <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>
  </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: calc(100% - 2px);
  }

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

  table td {
    padding: 5px;
  }

  table th {
    background: #d4d4d4;
  }

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

  table.border th {
    padding: 20px 5px;
  }

  table.border td {
    padding: 5px;
  }

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

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

  /* =============================================
     РОЗБИТТЯ НА СТОРІНКИ
     ============================================= */

  /* Заголовок таблиці повторюється на кожній сторінці */
  table.border thead {
    display: table-header-group;
  }

  /* Рядки tbody не розриваються між сторінками */
  table.border tbody tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Підвал тримаємо разом, не відривати від підсумків */
  table.table-sum {
    page-break-inside: avoid;
    break-inside: avoid;
  }
</style>
</html>
```

{% endtab %}
{% endtabs %}

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

{% tabs %}
{% tab title="Зовнішній вигляд" %}
Дякуємо нашому користувачу Аскольду Кузіну за наданий шаблон

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

{% tab title="Код шаблону" %}
**Тип шаблону:** Замовлення

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

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

```html
<!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">

  {# ======================================================= #}
  {# БЛОК: ШАПКА — логотип і контакти магазину               #}
  {# Замініть src логотипу та контактні дані на свої         #}
  {# ======================================================= #}
  <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;">
        м.Київ вул. Хрещатик, 1
      </td>
    </tr>
    <tr>
      <td style="padding: 5px;">
        моб/viber (011) 777-77-77
      </td>
    </tr>
    <tr>
      <td style="padding: 5px;">
        <span>demo.com.ua</span>
      </td>
    </tr>
    </tbody>
  </table>

  <br />

  {# ======================================================= #}
  {# БЛОК: ДАНІ ПОКУПЦЯ І АДРЕСА ДОСТАВКИ                    #}
  {# Підтягуються з CRM автоматично                          #}
  {# ======================================================= #}
  <table style="padding-bottom: 10px; margin-bottom: 10px;">
    <tbody>
    <tr>
      <td style="padding: 10px 5px;">
        <strong>Покупець:</strong> {{ model.client_name }}
        {# Телефон виводиться тільки якщо він є в замовленні #}
        {% if model.client_phone %}
        {{ model.client_phone }},
        {% endif %}
      </td>
    </tr>
    <tr>
      <td style="padding: 5px 5px 10px;">
        <strong>Адреса доставки:</strong>
        {# Служба доставки виводиться тільки якщо вона є #}
        {% if model.shipping_type %}
        {{ model.shipping_type }},
        {% endif %}
        {# Адреса виводиться тільки якщо вона є #}
        {% if model.shipping_address %}
        {{ model.shipping_address }},<br />
        {% endif %}
      </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>

  {# ======================================================= #}
  {# БЛОК: ТАБЛИЦЯ ТОВАРІВ                                   #}
  {# thead повторюється автоматично на кожній сторінці       #}
  {# (CSS: display:table-header-group)                       #}
  {# Рядки товарів не розриваються між сторінками            #}
  {# (CSS: page-break-inside:avoid на tbody tr)              #}
  {# ======================================================= #}
  <table class="width100 products-table">
    <thead>
      <tr>
        <th class="text-center">№</th>
        <th>Артикул</th>
        <th class="name-col">Назва товару</th>
        <th>Од.</th>
        <th>Кількість</th>
        <th>Ціна</th>
        <th>Сума</th>
      </tr>
    </thead>
    <tbody>
      {# Рядки товарів — перебираємо всі позиції замовлення #}
      {% for key, product in model.products %}
      <tr class="product-row">
        <td class="text-center">{{ key + 1 }}</td>
        <td class="text-center">{{ product.product_sku }}</td>
        <td style="width:50%">{{ product.product_name }}</td>
        <td class="text-center">{{ product.product_unit_type }}</td>
        <td class="text-center">{{ product.product_quantity }}</td>
        <td class="text-center">{{ product.price_sold|format_currency('UAH', locale='uk') }}</td>
        <td class="text-right">{{ (product.product_quantity * product.price_sold)|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endfor %}

      {# ======================================================= #}
      {# ПІДСУМКИ — виводяться після всіх рядків товарів         #}
      {# ======================================================= #}

      {# "Всього за товари" — тільки якщо є знижка або доставка #}
      {% if model.discount_amount or model.shipping_price %}
      <tr>
        <td colspan="6" class="text-right">Всього за товари:</td>
        <td class="text-right">{{ model.total_price|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endif %}

      {# Знижка — тільки якщо є #}
      {% if model.discount_amount %}
      <tr>
        <td colspan="6" class="text-right">Знижка:</td>
        <td class="text-right">{{ model.discount_amount|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endif %}

      {# Доставка — тільки якщо є #}
      {% if model.shipping_price %}
      <tr>
        <td colspan="6" class="text-right">Доставка:</td>
        <td class="text-right">{{ model.shipping_price|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endif %}

      {# Фінальна сума — відображається завжди #}
      <tr>
        <td colspan="6" class="text-right"><strong>Сума:</strong></td>
        <td class="text-right"><strong>{{ model.grand_total|format_currency('UAH', locale='uk') }}</strong></t
      </tr>
    </tbody>
  </table>

  <br />

  {# ======================================================= #}
  {# БЛОК: ПІДСУМОК — кількість позицій і сума прописом      #}
  {# ======================================================= #}
  <table style="padding-bottom: 10px; margin-bottom: 10px;">
    <tr>
      <td style="padding: 5px;">
        Всього найменувань {{ model.products|length }}, на суму {{ model.grand_total|format_currency('UAH', locale='uk') }}
      </td>
    </tr>
    <tr>
      <td style="padding: 5px;">
        {# Сума прописом: ціла частина (гривні) #}
        {% set gtc = model.grand_total|round(0, 'floor') %}
        {# Дробова частина (копійки) #}
        {% set gtr = ((model.grand_total - 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>
      </td>
    </tr>
  </table>

  <br />

  {# ======================================================= #}
  {# БЛОК: ПІДПИС ПРОДАВЦЯ                                   #}
  {# Замініть "Іванов Іван" на ім'я відповідальної особи     #}
  {# ======================================================= #}
  <table class="width100" style="padding-bottom: 30px; margin-bottom: 30px;">
    <tbody>
    <tr>
      <td style="font-size: 12px;">Продавець</td>
      <td style="border-bottom: 1px solid black;"></td>
      {# Замініть на ім'я відповідальної особи #}
      <td style="font-size: 12px;">Іванов Іван</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      #}
  {# QR-коди можна згенерувати, наприклад, тут: https://www.qrcode-monkey.com/ #}
  {# Після генерації, потрібно зберегти картинки на вашому сервері (сайті), та вставити в шаблон посилання на них.#}
  {# ======================================================= #}
  <table class="width100" style="padding-bottom: 10px; margin-bottom: 10px;">
    <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>
  </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: calc(100% - 2px);
  }

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

  table thead td,
  table thead th {
    padding: 5px;
    border-bottom: 1px solid black;
  }

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

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

  /* =============================================
     РОЗБИТТЯ НА СТОРІНКИ
     ============================================= */

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

  /* Лінія під кожним рядком товару */
  table.products-table tbody tr.product-row td {
    border-bottom: 1px solid black;
  }

  /* Рядки 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/Ea5JRDHIvMUYFPzOhOV0)
{% endtab %}

{% tab title="Код шаблону" %}
**Тип шаблону:** Замовлення

```html
<!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">

  {# ======================================================= #}
  {# БЛОК: ШАПКА — логотип і назва документа                 #}
  {# Замініть src логотипу на своє зображення                #}
  {# ======================================================= #}
  {% set mnths = ['','січня','лютого','березня','квітня','травня','червня','липня','серпня','вересня','жовтня','листопада','грудня'] %}

  <table style="padding-bottom: 10px; border-bottom: solid 3px black; margin-bottom: 10px;">
    <tbody>
    <tr>
      <td>
        {# Логотип: замініть src на пряме посилання на своє зображення #}
        <img src="https://blog.keycrm.app/wp-content/uploads/2025/12/cropped-keycrm-logo-blue-on-transparent-160x53.png" style="height: 40px" alt="">
      </td>
      <td style="font-size: 20px; font-weight: bold; width: 90%">
        Видаткова накладна № {{ model.id }} від {{ model.created_at|date("j") }} {{ mnths[model.created_at|date("n")] }} {{ model.created_at|date("Y") }} р.
      </td>
    </tr>
    </tbody>
  </table>

  {# ======================================================= #}
  {# БЛОК: РЕКВІЗИТИ — постачальник і покупець               #}
  {# Замініть виділений жовтим текст на свої реальні дані    #}
  {# Дані покупця підтягуються з CRM автоматично             #}
  {# ======================================================= #}
  <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">П/р 000000000000, у банку НАЗВА БАНКУ, м. Місто МФО 000000,</span><br />
          <span style="background-color: yellow">вул. Назва вулиці, буд № 0, м. Місто 00000, тел.: (000) 000-00-00,</span><br />
          <span style="background-color: yellow">код за ЄДРПОУ 00000000, ІПН 00000000000, № свід. 00000000,</span><br />
          <span style="background-color: yellow">Є платником податку на прибуток на загальних підставах.</span>
        </div>
      </td>
    </tr>
    <tr>
      <td valign="top">
        <span style="text-decoration: underline">Покупець:</span>
      </td>
      <td valign="top" style="padding-bottom: 7px;">
        {# Ім'я клієнта підтягується з CRM автоматично #}
        <strong>{{ model.client_name }}</strong>
        <div style="padding-left: 15px; font-size: 90%;">
          {% if model.shipping_address %}
            {{ model.shipping_address }},<br />
          {% endif %}
          {% if model.client_phone %}
            {{ model.client_phone }},
          {% endif %}
          {% if model.client_email %}
            {{ model.client_email }}
          {% endif %}
        </div>
      </td>
    </tr>
    <tr>
      <td valign="top">
        <span style="text-decoration: underline">Договір:</span>
      </td>
      <td valign="top" style="padding-bottom: 7px;">
        {# Змініть назву договору якщо потрібно #}
        <span>Основний договір</span>
      </td>
    </tr>
    <tr>
      <td valign="top">
        <span style="text-decoration: underline">Умови постачання:</span>
      </td>
      <td valign="top" style="padding-bottom: 7px;">
        {# Тип доставки підтягується з CRM автоматично #}
        {{ model.shipping_type }}
      </td>
    </tr>
    </tbody>
  </table>

  <br />

  {# ======================================================= #}
  {# БЛОК: ТАБЛИЦЯ ТОВАРІВ                                   #}
  {# thead повторюється автоматично на кожній сторінці       #}
  {# (CSS: display:table-header-group)                       #}
  {# Рядки товарів не розриваються між сторінками            #}
  {# (CSS: page-break-inside:avoid на tbody tr)              #}
  {# ======================================================= #}
  <table class="width100 border products-table">
    <thead>
      <tr>
        <th class="text-center">№</th>
        <th>Код товару</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 class="text-center">{{ product.product_sku }}</td>
        <td style="width:50%">{{ product.product_name }}</td>
        <td class="text-center">{{ product.product_unit_type }}</td>
        <td class="text-center">{{ product.product_quantity }}</td>
        <td class="text-center">{{ product.price_sold|format_currency('UAH', locale='uk') }}</td>
        <td class="text-right">{{ (product.product_quantity * product.price_sold)|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endfor %}

      {# ======================================================= #}
      {# ПІДСУМКИ — виводяться після всіх рядків товарів         #}
      {# ======================================================= #}

      {# "Всього за товари" — тільки якщо є знижка або доставка #}
      {% if model.discount_amount or model.shipping_price %}
      <tr>
        <td colspan="6" class="text-right">Всього за товари:</td>
        <td class="text-right">{{ model.total_price|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endif %}

      {# Знижка — тільки якщо є #}
      {% if model.discount_amount %}
      <tr>
        <td colspan="6" class="text-right">Знижка:</td>
        <td class="text-right">{{ model.discount_amount|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endif %}

      {# Доставка — тільки якщо є #}
      {% if model.shipping_price %}
      <tr>
        <td colspan="6" class="text-right">Доставка:</td>
        <td class="text-right">{{ model.shipping_price|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endif %}

      {# Фінальна сума — відображається завжди #}
      <tr>
        <td colspan="6" class="text-right"><strong>Сума:</strong></td>
        <td class="text-right"><strong>{{ model.grand_total|format_currency('UAH', locale='uk') }}</strong></td>
      </tr>
    </tbody>
  </table>

  <br />

  {# ======================================================= #}
  {# БЛОК: ПІДСУМОК — загальна кількість і сума              #}
  {# ======================================================= #}
  <table>
    <tr>
      <td>
        <strong>Всього найменувань {{ model.products|length }}, на суму {{ model.grand_total|format_currency('UAH', locale='uk') }}</strong>
      </td>
    </tr>
  </table>

  <br />

  {# ======================================================= #}
  {# БЛОК: МІСЦЕ СКЛАДАННЯ                                   #}
  {# Замініть адресу на свою                                 #}
  {# ======================================================= #}
  <table>
    <tr>
      <td>
        Місце складання:
      </td>
      <td>
        {# Замініть на адресу свого складу або офісу #}
        <span style="background-color: yellow">м. Київ, вул. Хрещатик 1</span>
      </td>
    </tr>
  </table>

  <br />

  {# ======================================================= #}
  {# БЛОК: ПІДПИСИ — постачальник і отримувач                #}
  {# ======================================================= #}
  <table class="width100" style="border-top: solid 3px black;">
    <tr>
      <td valign="top" style="padding-top: 15px; padding-right: 30px;" width="50%">
        <div style="padding-bottom: 35px; margin-bottom: 15px; border-bottom: solid 2px black;">
          <strong>Від постачальника*</strong>
        </div>
        <span style="font-size: 90%;">* Відповідальний за здійснення господарської операції та правильність її оформлення</span>
      </td>
      <td valign="top" style="padding-top: 15px; padding-right: 30px;">
        <div style="padding-bottom: 35px; margin-bottom: 15px; border-bottom: solid 2px black;">
          <strong>Отримав(ла)</strong>
        </div>
        <span style="font-size: 90%;">За довіреністю &nbsp;&nbsp;&nbsp;&nbsp; № &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; від </span>
      </td>
    </tr>
  </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: calc(100% - 2px);
  }

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

  table td {
    padding: 5px;
  }

  table th {
    background: #d4d4d4;
  }

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

  table.border th {
    padding: 15px 5px;
  }

  table.border 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/tvvHuNjbuuLUPd2HDrMl" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Код шаблону" %}
**Тип шаблону:** Замовлення

```html
<!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.id }} від {{ model.created_at|date("j") }} {{ mnths[model.created_at|date("n")] }} {{ model.created_at|date("Y") }} р.
      </td>
    </tr>
    </tbody>
  </table>

  {# ======================================================= #}
  {# БЛОК: РЕКВІЗИТИ — постачальник і покупець               #}
  {# Замініть виділений жовтим текст на свої реальні дані    #}
  {# Дані покупця підтягуються з CRM автоматично             #}
  {# ======================================================= #}
  <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.client_name }}</strong>
        <div style="padding-left: 15px; font-size: 90%;">
          {% if model.client_phone %}
            {{ model.client_phone }},
          {% endif %}
          {% if model.client_email %}
            {{ model.client_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>Договору Поставки № {{ model.id }} від {{ model.created_at|date("j") }} {{ mnths[model.created_at|date("n")] }} {{ model.created_at|date("Y") }} р.</span>
      </td>
    </tr>
    </tbody>
  </table>

  <br/>

  {# ======================================================= #}
  {# БЛОК: ТАБЛИЦЯ ТОВАРІВ                                   #}
  {# thead повторюється автоматично на кожній сторінці       #}
  {# (CSS: display:table-header-group)                       #}
  {# Рядки товарів не розриваються між сторінками            #}
  {# (CSS: page-break-inside:avoid на tbody tr)              #}
  {# ======================================================= #}
  <table class="width100 border products-table">
    <thead>
      <tr>
        <th class="text-center">№</th>
        <th class="text-center">Зображення</th>
        <th>Артикул</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>
        {# Зображення товару — підтягується з CRM #}
        <td class="text-center"><img src="{{ product.product_image }}" style="width: 60px;"></td>
        <td class="text-center">{{ product.product_sku }}</td>
        <td style="width:30%">{{ product.product_name }} {{ product.product_properties }}</td>
        <td class="text-center">{{ product.product_quantity }} {{ product.product_unit_type }}</td>
        <td class="text-right">{{ product.product_price|format_currency('UAH', locale='uk') }}</td>
        {# Знижка по товару: якщо є — рахуємо суму, якщо немає — виводимо 0 #}
        <td class="text-right">{{ product.product_discount != '-' ? (product.product_quantity * product.product_discount)|format_currency('UAH', locale='uk') : '0' }}</td>
        <td class="text-right">{{ (product.product_quantity * product.price_sold)|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endfor %}

      {# ======================================================= #}
      {# ПІДСУМКИ — виводяться після всіх рядків товарів         #}
      {# ======================================================= #}

      {# "Всього за товари" — завжди #}
      <tr>
        <td colspan="7" class="text-right">Всього за товари:</td>
        <td class="text-right">{{ model.total_price|format_currency('UAH', locale='uk') }}</td>
      </tr>

      {# Знижка до замовлення — тільки якщо є #}
      {% if model.discount_amount %}
      <tr>
        <td colspan="7" class="text-right">Знижка до замовлення:</td>
        <td class="text-right">{{ model.discount_amount|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endif %}

      {# Доставка — тільки якщо є #}
      {% if model.shipping_price %}
      <tr>
        <td colspan="7" class="text-right">Доставка:</td>
        <td class="text-right">{{ model.shipping_price|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endif %}

      {# Фінальна сума — відображається завжди #}
      <tr>
        <td colspan="7" class="text-right"><strong>Загальна вартість:</strong></td>
        <td class="text-right"><strong>{{ model.grand_total|format_currency('UAH', locale='uk') }}</strong></td>
      </tr>
    </tbody>
  </table>

  <br/>

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

  <br/>

  {# ======================================================= #}
  {# БЛОК: СУМА ПРОПИСОМ                                     #}
  {# Логіка відмінювання гривень/копійок вбудована           #}
  {# ======================================================= #}
  <table>
    <tr>
      <td>
        <p>
          {# Ціла частина суми (гривні) #}
          {% set gtc = model.grand_total|round(0, 'floor') %}
          {# Дробова частина (копійки) #}
          {% set gtr = ((model.grand_total - 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>
  </table>

  <br/>

  {# ======================================================= #}
  {# БЛОК: ПІДПИС — строк дії рахунку і відповідальна особа  #}
  {# Замініть ПІБ відповідальної особи (виділено жовтим)     #}
  {# ======================================================= #}
  <table class="width100" style="border-top: solid 3px black;">
    <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>
  </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: calc(100% - 2px);
  }

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

  table th {
    background: #d4d4d4;
  }

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

  table.border th {
    padding: 15px 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 %}

### 5. Рахунок з ПДВ

{% tabs %}
{% tab title="Зовнішній вигляд" %}

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

{% tab title="Код шаблону" %}
**Тип шаблону:** Замовлення

```html
<!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">

  <p class="text-center small-text" 
     style="width:100%; margin:0; padding:10px">
   Увага! Оплата цього рахунку означає погодження з умовами поставки товарів. Повідомлення про оплату є обов'язковим, в 
іншому випадку не гарантується наявність товарів на складі. Товар відпускається за фактом надходження коштів на п/р 
Постачальника, самовивозом, за наявності довіреності та паспорта.
  </p>  
    </br>
    
 <table class="outer">
  <!-- Заголовок -->
  <tr>
    <td colspan="7" class="title">
      Зразок заповнення платіжного доручення
    </td>
  </tr>

  <!-- Основний блок -->
  <tr>
    <!-- Лівий блок -->
    <td style="width:60%;">
       <div style="display: flex; align-items: center; margin-bottom: 8px;">
  <span>Одержувач</span>
  <span style="margin-left:20px;white-space: nowrap;background-color: yellow"><strong>Фізична особа-підприємець<br>Тест Тест Тест</strong></span>
</div>
      <br>

     <div style="display: flex; align-items: center; margin-bottom: 8px;">
  <span>Код</span>
  <span class="bordered" style="margin-left: 50px; background-color: yellow">111111111</span>
</div>


      <div style="margin-bottom:3px">
        <div  style="padding-bottom:15px">Банк одержувача</div>
        <div class="label" style="padding-bottom:9px; background-color: yellow">ПАТ КБ "ПРИВАТБАНК"</div>
      </div>


<td  style="text-align:center; padding-top:100px;">
      <span class="label">Код банку</span><br>
      <span class="bordered" style="background-color: yellow">111111</span>
    </td>
    </td>

    <!-- Правий блок -->
    <td   style="width:20%; text-align:center;">

      <div><span class="label">КРЕДИТ рах. N</span></div>
      <div class="bordered" style="margin-top:6px;background-color: yellow">UA000000000000000000000000000</div><br>

    </td>
  </tr>
</table>
    <br/>

  {# ======================================================= #}
  {# БЛОК: ШАПКА — логотип і назва документа                 #}
  {# Замініть src логотипу на своє зображення                #}
  {# ======================================================= #}
  {% set mnths = ['','січня','лютого','березня','квітня','травня','червня','липня','серпня','вересня','жовтня','листопада','грудня'] %}

  <table style="padding-bottom: 10px; border-bottom: solid 3px black; margin-bottom: 10px;">
    <tbody>
    <tr>
      <td>
        {# Логотип: замініть src на пряме посилання на своє зображення #}
        <img src="https://blog.keycrm.app/wp-content/uploads/2025/12/cropped-keycrm-logo-blue-on-transparent-160x53.png" style="height: 40px" alt="">
      </td>
      <td style="font-size: 20px; font-weight: bold; width: 90%">
        Рахунок на оплату № {{ model.id }} від {{ "now"|date("j") }} {{ mnths["now"|date("n")] }} {{ "now"|date("Y") }} р.
      </td>
    </tr>
    </tbody>
  </table>

  {# ======================================================= #}
  {# БЛОК: РЕКВІЗИТИ — постачальник і покупець               #}
  {# Замініть виділений жовтим текст на свої реальні дані    #}
  {# Дані покупця підтягуються з CRM автоматично             #}
  {# ======================================================= #}
  <table>
    <tbody>
    <tr>
      <td valign="top">
        <span style="text-decoration: underline">Постачальник:</span>
      </td>
      <td valign="top" style="padding-bottom: 7px;">
        {# Назва організації та реквізити — замінити на свої #}
        <span style="padding-left: 15px;font-weight: 600; background-color: yellow;">Фізична особа-підприємець Тест Тест Тест</span>
        <div style="padding-left: 15px; font-size: 90%;background-color: yellow;">
          <span style="">Юридична адреса: м. Київ, вул. Назва вулиці, буд. 1,</span><br />
          <span style="">Тел.: +38 (000) 000-00-00, e-mail: test@gmail.com,</span><br />
          <span style="">Р/р UA000000000000000000000000000, Банк ПАТ КБ"ПРИВАТБАНК", МФО 351533,</span><br />
          <span style="">ІПН 11111111</span><br />
          <span style="">Платник єдиного податку 2 група</span>
        </div>
      </td>
    </tr>
    <tr>
      <td valign="top">
        <span style="text-decoration: underline">Покупець:</span>
      </td>
      <td valign="top" style="padding-bottom: 7px;">
        {# Ім'я клієнта підтягується з CRM автоматично #}
        <span style="padding-left: 15px;font-weight: 600">{% if model.company.name %}{{ model.company.name }}{% else %}{{ model.client_name }}{% endif %} 
</span>
        <div style="padding-left: 15px; font-size: 90%;">
          {#{% if model.shipping_address %}#}
          {#  {{ model.shipping_address }},<br />#}
          {#{% endif %}#}
          {% if model.client_phone %}
            {{ model.client_phone }}
          {% endif %}
          {#{% if model.client_email %}#}
          {#  {{ model.client_email }}#}
          {#{% endif %}#}
        </div>
      </td>
    </tr>
    <tr>
      <td valign="top">
        <span style="">Договір:</span>
      </td>
      <td valign="top" style="padding-bottom: 7px; padding-left: 15px;">
        {# Змініть назву договору якщо потрібно #}
        <span>Усний</span>
      </td>
    </tr>
    {#<tr>#}
    {#  <td valign="top">#}
    {#    <span style="">Розр.док</span>#}
    {#  </td>#}
    {#  <td valign="top" style="padding-bottom: 7px;padding-left: 15px;">#}
        {# Тип доставки підтягується з CRM автоматично #}
    {#    Рахунок на оплату № {{ model.id }} від {{ model.created_at|date("j") }} {{ mnths[model.created_at|date("n")] }} {{ model.created_at|date("Y") }} р.#}
    {#</tr>#}
    </tbody>
  </table>

  <br />

  {# ======================================================= #}
  {# БЛОК: ТАБЛИЦЯ ТОВАРІВ                                   #}
  {# thead повторюється автоматично на кожній сторінці       #}
  {# (CSS: display:table-header-group)                       #}
  {# Рядки товарів не розриваються між сторінками            #}
  {# (CSS: page-break-inside:avoid на tbody tr)              #}
  {# ======================================================= #}
  <table class="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.product_sku }}</td>
        <td style="width:45%">{{ product.product_name }}</td>
        <td class="text-center">{{ product.product_quantity }} {{ product.product_unit_type }} </td>
        <td class="text-center">{{ product.price_sold|number_format(2, ',', '')}}</td>
        <td class="text-right">{{ (product.product_quantity * product.price_sold)|number_format(2, ',', '') }}</td>
      </tr>
      {% endfor %}
       </tbody>

      {# ======================================================= #}
      {# ПІДСУМКИ — виводяться після всіх рядків товарів         #}
      {# ======================================================= #}
    <tfoot>

      {# "Всього за товари" — тільки якщо є знижка або доставка #}
      {#{% if model.discount_amount or model.shipping_price %}#}
      {#<tr>#}
      {#  <td colspan="5" class="text-right">Всього за товари:</td>#}
      {#  <td class="text-right">{{ model.total_price|format_currency('UAH', locale='uk') }}</td>#}
      {#</tr>#}
      {#{% endif %}#}

      {# Знижка — тільки якщо є #}
      {#{% if model.discount_amount %}#}
      {#<tr>#}
      {#  <td colspan="5" class="text-right">Знижка:</td>#}
      {#  <td class="text-right">{{ model.discount_amount|format_currency('UAH', locale='uk') }}</td>#}
      {#</tr>#}
      {#{% endif %}#}

      {# Доставка — тільки якщо є #}
      {#{% if model.shipping_price %}#}
      {#<tr>#}
      {#  <td colspan="5" class="text-right">Доставка:</td>#}
      {#  <td class="text-right">{{ model.shipping_price|format_currency('UAH', locale='uk') }}</td>#}
      {#</tr>#}
      {#{% endif %}#}

      {# Фінальна сума — відображається завжди #}
     <tr>
         <td colspan="2"><strong style="white-space: nowrap;">Рахунок дійсний до {{ "now"|date_modify("+24 hours")|date("d.m.Y") }}
</strong></td>
        <td colspan="3" class="text-right"><strong>Разом:</strong></td>
        <td class="text-right"><strong>{{ model.grand_total|number_format(2, ',', '') }}</strong></td>
      </tr>
     </tfoot>
  </table>
  
  <div style = "border: solid 3px black;">
      <div style = "color:red; font-weight:bold;font-size: medium;padding-bottom:30px">Важливо! Вкажіть, будь ласка, наступне призначення платежу:</div>
      <div style = "color:red;font-size: medium; font-weight:bold;">Оплата за товар згідно рахунку № {{ model.id }} від {{ "now"|date("j") }} {{ mnths["now"|date("n")] }} {{ "now"|date("Y") }} р.
</div>
  </div>
 

  <br />

  {# ======================================================= #}
  {# БЛОК: ПІДСУМОК — загальна кількість і сума              #}
  {# ======================================================= #}
  <table>
    <tr>
      <td>
    <span>Всього найменувань {{ model.products|length }}, на суму {{ model.grand_total|number_format(2, ',', '') }} грн.</span>
      </td>
    </tr>
    
     <tr>
      <td>
    <strong>
     {% set gtc = model.grand_total|round(0, 'floor') %}
{% set gtr = (model.grand_total * 100)|round(0, 'floor') % 100 %}

{# --- гривні --- #}
{% set spelled_gtc = gtc|format_number(style="spellout", locale="uk") %}
{% if gtc % 10 == 2 and gtc % 100 != 12 %}
  {% set spelled_gtc = spelled_gtc|replace({'два':'дві'}) %}
{% endif %}
{% if gtc % 10 == 1 and gtc % 100 != 11 %}
  {% set spelled_gtc = spelled_gtc|replace({'один':'одна'}) %}
{% endif %}

 {{ spelled_gtc|capitalize }}
{% if gtc % 10 == 1 and gtc % 100 != 11 %}
  гривня
{% elseif (gtc % 10 in [2,3,4]) and (gtc % 100 not in [12,13,14]) %}
  гривні
{% else %}
  гривень
{% endif %}
{# --- копійки --- #}
{% if gtr == 0 %}
  00 копійок
{% else %}
  {% set spelled_gtr = gtr|format_number(style="spellout", locale="uk") %}
  {% if gtr % 10 == 2 and gtr % 100 != 12 %}
    {% set spelled_gtr = spelled_gtr|replace({'два':'дві'}) %}
  {% endif %}
  {% if gtr % 10 == 1 and gtr % 100 != 11 %}
    {% set spelled_gtr = spelled_gtr|replace({'один':'одна'}) %}
  {% endif %}

  {{ spelled_gtr }} 
  {% if gtr % 10 == 1 and gtr % 100 != 11 %}
    копійка
  {% elseif (gtr % 10 in [2,3,4]) and (gtr % 100 not in [12,13,14]) %}
    копійки
  {% else %}
    копійок
  {% endif %}
{% endif %}
</strong>
      </td>
    </tr>
  </table>

  <br />

  {# ======================================================= #}
  {# БЛОК: МІСЦЕ СКЛАДАННЯ                                   #}
  {# Замініть адресу на свою                                 #}
  {# ======================================================= #}
  {#<table>#}
  {#  <tr>#}
  {#    <td>#}
  {#      Місце складання:#}
  {#    </td>#}
  {#    <td>#}
        {# Замініть на адресу свого складу або офісу #}
  {#      <span style="background-color: yellow">м. Київ, вул. Хрещатик 1</span>#}
  {#    </td>#}
  {#  </tr>#}
  {#</table>#}

  <br />

  {# ======================================================= #}
  {# БЛОК: ПІДПИСИ — постачальник і отримувач                #}
  {# ======================================================= #}
  <table class="width100" style="border-top: solid 3px black;">
    <tr>
<td valign="top" style="padding-top: 30px; padding-right: 30px;" width="50%">
  <div style="margin-bottom: 15px; border-bottom: solid 2px black; position: relative;">
    
    <!-- Текст -->
    <span style="white-space: nowrap;"> Виписав(ла):&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Тест Тест Тест</span>
    
    <!-- Додайте своє посилання на зображення з підписом -->
    <img src="https://keycrm.s3.de.io.cloud.ovh.net/storage/demo/uploads/2026-07-21/6leKConB0LRRMYBcxGBgNpUKl9E2BAZK.png" alt="Підпис"
         style="position: absolute; top: -23px; left: 50%; transform: translateX(-50%);
                height: 70px; z-index: 10;">
  </div>
</td>


      <td valign="top" style="padding-top: 30px; padding-right: 30px;">
        <div style="padding-bottom: 18px; margin-bottom: 15px; border-bottom: solid 2px black;">
        </div>
      </td>
    </tr>
  </table>

</div>

</body>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  @page {
  size: A4 portrait;   /* або landscape */
  margin: 20mm;        /* відступи від краю аркуша */
}


  html, body {
    height: 100%;
  }

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

  .container {
    margin-right: auto;
    margin-left: auto;
  }
.outer {
    border: 1px solid black; 
    width:100%; 
    margin: 0 auto;
    box-sizing: border-box;
    max-width: 800px;
  }
  
   .title {
    text-align: center;
    font-weight: bold;
    padding: 6px;
  }
  .label { font-weight: bold; }
  .bordered {
    border: 2px solid #000;
    padding: 7px 45px;
    font-weight: bold;
    text-align: center;
    display: inline-block;
  }
  .bordered-two{
     
     border-right: 2px solid #000;
     border-bottom: 2px solid #000;
     border-left:2px solid #000;
    padding: 7px 45px;
    font-weight: bold;
    text-align: center;
    display: inline-block; 
  }
  
  .small-text {
        font-size: 12px;
    }
    
     .smallest-text {
        font-size: 11px;
    }
  .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: calc(100% - 2px);
  }

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

  table td {
    padding: 5px;
  }

  table th {
    background: #d4d4d4;
  }

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

  table.border th {
    padding: 15px 5px;
  }

  table.border 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 %}

### 6. "Лист на митницю" (при відправці за кордон)

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

{% tab title="Код шаблону" %}
**Тип шаблону:** Доставка

```html
<!doctype html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="author" content="KeyCRM">
  <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="Content-Type" content="text/html; charset=utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Митна декларація</title>
</head>
<body>

{# ======================================================= #}
{# БЛОК: ШАПКА — адресат і дані декларанта                 #}
{# Замініть виділений жовтим текст на свої реальні дані    #}
{# ======================================================= #}
<table class="head-table">
  <tr>
    <td valign="bottom"><p class="big bold italic">"______"_________________20__року</p></td>
    <td valign="bottom" class="border-bottom">
      <p class="big italic bold">В.о. начальника Київської ДМС України</p>
    </td>
  </tr>
  <tr>
    <td valign="top" class="small text-center bold">(заповнюється митницею)</td>
    <td valign="top" class="small bold">(найменування митного органу)</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td valign="bottom" class="border-bottom">
      {# ПІБ керівника митного органу — замінити на своє #}
      <span class="big"><span style="background-color: yellow">Прізвище Імʼя По-Батькові</span></span>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td valign="top" class="small">(прiзвище, iм'я та по батьковi)</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td valign="bottom" class="border-bottom">
      {# Адреса проживання фізичної особи — замінити на свою #}
      <span class="big"><span style="background-color: yellow">м. Місто, вул. Назва вулиці 00/000</span></span>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td valign="top" class="small">(мiсце проживання фiзичної особи)</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td valign="bottom" colspan="2" class="big text-center border-bottom">
      {# ПІБ та паспортні дані декларанта — замінити на свої #}
      <span style="background-color: yellow">Прізвище Імʼя По-Батькові</span>
      <span style="padding: 0 30px"></span>
      <span style="background-color: yellow">ІХ: 000000</span>
    </td>
  </tr>
  <tr>
    <td colspan="2" valign="top">
      <p class="text-center">(прiзвище, iм'я та по батьковi фiзичної особи, паспортні дані)</p>
    </td>
  </tr>
  <tr>
    <td colspan="2" valign="top">
      <p class="big">
        заявляє вiдомостi про товари та iншу iнформацiю, необхiдну для здiйснення митних формальностей.
      </p>
    </td>
  </tr>
</table>

{# ======================================================= #}
{# БЛОК: ТРАНСПОРТНИЙ ДОКУМЕНТ І РАХУНОК                   #}
{# Трекінг-код підтягується з відправлення автоматично     #}
{# ======================================================= #}
<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p class="big">Номер транспортного документа</p></td>
    <td valign="bottom" class="border-bottom full-width">
      <p class="space-text">
        {# Трекінг-код підтягується з CRM автоматично #}
        <span class="big">{{ model.tracking_code }}</span>
        <span class="big bold italic">Від.</span>
        <span class="big">{{ "now"|date("d.m.Y") }}р.</span>
      </p>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Рахунок</p></td>
    <td valign="bottom" class="border-bottom full-width">
      <p class="space-text">
        <span class="bold">б/н</span>
        <span class="bold italic">від.</span>
        <span>{{ "now"|date("d.m.Y") }}р.</span>
      </p>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr style="height: 11px;">
    <td valign="top">&nbsp;</td>
    <td valign="top" class="small text-center">(номер, дата)</td>
  </tr>
</table>

{# ======================================================= #}
{# БЛОК: ВІДОМОСТІ ПРО ВІДПРАВЛЕННЯ                        #}
{# Дані підтягуються з відправлення (shipment) автоматично #}
{# ======================================================= #}
<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Країна вiдправлення (призначення)</p></td>
    <td valign="bottom" class="border-bottom full-width">
      {# Країна підтягується з адреси доставки замовлення #}
      <p>{{ model.shipping_address_country }}</p>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Вiдправник (одержувач)</p></td>
    <td valign="bottom" class="border-bottom full-width">
      {# Назва відправника підтягується з відправлення #}
      <p>{{ shipment.name }}</p>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Кiлькiсть мiсць</p></td>
    <td valign="bottom" class="border-bottom full-width"><p>1</p></td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Загальна вага (кiлограмiв)</p></td>
    <td valign="bottom" class="border-bottom full-width">
      {# Вага підтягується з відправлення #}
      <p>{{ shipment.weight }} кг</p>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Загальна митна вартiсть</p></td>
    <td valign="bottom" class="border-bottom full-width">
      <p>
        {# Сума всіх товарів відправлення: ціна × кількість #}
        {{ shipment.items|reduce((carry, item) => carry + (item.price * item.quantity), 0)|round(2) }}
        {{ shipment.currency }}
      </p>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Митний режим</p></td>
    <td valign="bottom" class="border-bottom full-width"><p class="bold italic">експорт</p></td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Умови поставки</p></td>
    <td valign="bottom" class="border-bottom full-width">
      {# Умови поставки — замінити на свої якщо потрібно #}
      <span style="background-color: yellow">CPT</span>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Характер угоди</p></td>
    <td valign="bottom" class="border-bottom full-width"><p></p></td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" colspan="2"><p>Дозволи уповноважених органів (назва, номер, дата)</p></td>
  </tr>
</table>

<br />

{# ======================================================= #}
{# БЛОК: ТАБЛИЦЯ ТОВАРІВ ВІДПРАВЛЕННЯ                      #}
{# Перебираємо shipment.items — товари з відправлення,     #}
{# не з замовлення (model.products)                        #}
{# thead повторюється автоматично на кожній сторінці       #}
{# (CSS: display:table-header-group)                       #}
{# Рядки не розриваються між сторінками                    #}
{# (CSS: page-break-inside:avoid на tbody tr)              #}
{# ======================================================= #}
<table class="goods-table">
  <thead>
    <tr>
      <th><p>Номер товару</p></th>
      <th><p>Найменування товару, його звичайний торговельний опис</p></th>
      <th><p>Код товару згiдно з УКТЗЕД</p></th>
      <th><p>Вартiсть товару у валютi України або iноземнiй валютi</p></th>
    </tr>
  </thead>
  <tbody>
    {% for item in shipment.items %}
    <tr>
      <td><p class="text-center">{{ loop.index }}</p></td>
      {# Опис товару обрізаємо до 35 символів #}
      <td><p>{{ item.description_local|slice(0, 35) }}</p></td>
      <td><p class="text-center">{{ item.hs_code }}</p></td>
      <td><p class="text-center">{{ item.price }} {{ shipment.currency }}</p></td>
    </tr>
    {% endfor %}
  </tbody>
</table>

{# ======================================================= #}
{# БЛОК: ПІДПИСИ — декларант і митний орган                #}
{# Замініть ПІБ декларанта (виділено жовтим)               #}
{# ======================================================= #}
<table class="signature-table">
  <tr>
    <td valign="bottom">Декларант або уповноважена ним особа</td>
    <td class="border-bottom"></td>
    <td valign="bottom" class="text-center border-bottom">
      {# ПІБ декларанта — замінити на своє #}
      <span style="background-color: yellow">Прізвище Імʼя По-Батькові</span>
    </td>
  </tr>
  <tr>
    <td></td>
    <td valign="top" class="text-center">(пiдпис)</td>
    <td valign="top" class="text-center">(iнiцiали, прiзвище)</td>
  </tr>
  <tr>
    <td class="border-bottom"></td>
    <td class="border-bottom"></td>
    <td valign="bottom" class="border-bottom"></td>
  </tr>
  <tr>
    <td valign="top" class="text-center">(найменування посади посадової особи митного органу)</td>
    <td valign="top" class="text-center">(пiдпис)</td>
    <td valign="top" class="text-center">(iнiцiали, прiзвище)</td>
  </tr>
</table>

{# ======================================================= #}
{# БЛОК: МІСЦЕ ДЛЯ ПЕЧАТКИ                                 #}
{# ======================================================= #}
<table class="stamp-table">
  <tr>
    <td>Місце для відбитка особистої номерної печатки</td>
  </tr>
</table>

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

  html, body {
    height: 100%;
  }

  body {
    color: #333;
    font-size: 12px;
    line-height: 1.3;
    min-width: 320px;
    font-family: 'Times New Roman', sans-serif;
  }

  img {
    border-style: none;
  }

  @page {
    size: auto;
    margin: 5mm 10mm;
  }

  .italic { font-style: italic; }
  .bold   { font-weight: bold; }
  .big    { font-size: 14px; }

  .small {
    font-size: 11px;
    line-height: 11px;
  }

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

  .space-text span {
    margin-right: 10px;
  }

  .nowrap    { white-space: nowrap; }

  .full-width {
    width: 90%;
    padding-left: 20px;
  }

  .border-bottom {
    border-bottom: 1px solid black;
  }

  /* =============================================
     ШАПКА ДОКУМЕНТА
     ============================================= */
  .head-table {
    width: 100%;
  }

  .head-table td {
    height: 22px;
    padding-right: 5px;
    padding-left: 5px;
  }

  .head-table td:first-child { width: 40%; }
  .head-table td:last-child  { width: 60%; }

  /* =============================================
     РЯДКИ З ДАНИМИ ВІДПРАВЛЕННЯ
     ============================================= */
  .second-table {
    width: 100%;
  }

  .second-table td {
    height: 25px;
    padding-right: 5px;
    padding-left: 5px;
  }

  .second-table td.nowrap    { padding-right: 20px; }
  .second-table td.full-width { padding-left: 20px; }

  /* =============================================
     ТАБЛИЦЯ ТОВАРІВ
     ============================================= */
  .goods-table {
    width: calc(100% - 2px);
    border-collapse: collapse;
    border: 1px solid black;
    margin-bottom: 20px;
  }

  .goods-table th,
  .goods-table td {
    border: 1px solid black;
    padding: 5px;
  }

  .goods-table th:nth-child(1),
  .goods-table td:nth-child(1) { width: 6%; }

  .goods-table th:nth-child(2),
  .goods-table td:nth-child(2) { width: 47%; }

  .goods-table th:nth-child(3),
  .goods-table td:nth-child(3) { width: 20%; }

  .goods-table th:nth-child(4),
  .goods-table td:nth-child(4) { width: 16%; }

  .goods-table th { font-weight: bold; }

  /* =============================================
     РОЗБИТТЯ НА СТОРІНКИ
     Заголовок таблиці товарів повторюється
     автоматично на кожній сторінці.
     Рядки товарів не розриваються між сторінками.
     ============================================= */
  .goods-table thead {
    display: table-header-group;
  }

  .goods-table tbody tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* =============================================
     ПІДПИСИ
     ============================================= */
  .signature-table {
    width: 100%;
    border-spacing: 10px 0;
    border-collapse: separate;
    margin-bottom: 20px;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .signature-table td {
    height: 25px;
    padding-right: 5px;
    padding-left: 5px;
  }

  .signature-table td:nth-child(1) { width: 45%; }
  .signature-table td:nth-child(2) { width: 15%; }
  .signature-table td:nth-child(3) { width: 40%; }

  /* =============================================
     МІСЦЕ ДЛЯ ПЕЧАТКИ
     ============================================= */
  .stamp-table {
    width: 30%;
    border: solid 1px black;
    text-align: center;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .stamp-table td {
    padding: 30px;
  }
</style>
</html>
    }

    .bold {
        font-weight: bold;
    }

    .big {
        font-size: 14px;
    }
    
    .small { 
        font-size: 11px;
        line-height: 11px;
    }

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

    .space-text span{
        margin-right: 10px;
    }
    
    .nowrap { 
        white-space: nowrap;
    }
    
    .full-width {
        width: 90%;
        padding-left: 20px;
    }

    .border-bottom {
        border-bottom: 1px solid black;
    }

    /*head-table*/
    .head-table {
        width: 100%;
    }

    .head-table .border-bottom {
        border-bottom: solid 1px black;
    }

    .head-table td {
        height: 22px;
        padding-right: 5px;
        padding-left: 5px;
    }

    .head-table td:first-child {
        width: 40%;
    }

    .head-table td:last-child {
        width: 60%;
    }

    /*second-table*/
    .second-table {
        width: 100%;
    }

    .second-table .slim-row td {
        height: 10px;
    }

    .second-table td {
        height: 25px;
        padding-right: 5px;
        padding-left: 5px;
    }
    
    .second-table td.nowrap {
        padding-right: 20px;
    }
    
    .second-table td.full-width {
        padding-left: 20px;
    }

    /*goods-table*/
    .goods-table {
        width: 100%;
        border-color: black;
        margin-bottom: 20px;
    }

    .goods-table th:nth-child(1),
    .goods-table td:nth-child(1) {
        width: 6%;
    }

    .goods-table th:nth-child(2),
    .goods-table td:nth-child(2) {
        width: 47%;
    }

    .goods-table th:nth-child(3),
    .goods-table td:nth-child(3) {
        width: 20%;
    }

    .goods-table th:nth-child(4),
    .goods-table td:nth-child(4) {
        width: 16%;
    }

    .goods-table th {
        padding: 5px;
        font-style: bold;
    }

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

    /*signature-table*/
    .signature-table {
        width: 100%;
        border-spacing: 10px 0;
        margin-bottom: 20px;
    }
    .signature-table td {
        height: 25px;
        padding-right: 5px;
        padding-left: 5px;
    }

    .signature-table td:nth-child(1) {
        width: 45%;
    }

    .signature-table td:nth-child(2) {
        width: 15%;
    }

    .signature-table td:nth-child(3) {
        width: 40%;
    }

    .stamp-table {
        width: 30%;
        border: solid 1px black;
        text-align: center;
    }

    .stamp-table td {
        padding: 30px;
    }
</style>
</html>
```

{% endtab %}
{% endtabs %}

### 7. Proforma Invoice для відправки закордон (митний інвойс)

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

{% tab title="Код шаблону" %}
**Тип шаблону:** Доставка

```html
<!doctype html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="author" content="KeyCRM">
  <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="Content-Type" content="text/html; charset=utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Proforma Invoice</title>
</head>
<body>

{# ======================================================= #}
{# БЛОК: ЗАГОЛОВОК ДОКУМЕНТА                               #}
{# ======================================================= #}
<div class="bold text-center">PROFORMA INVOICE</div>

<div>
  <div class="margin"></div>
  {# Дата і трекінг-номер підтягуються автоматично #}
  <table class="head-table mt-10 mb-10">
    <tbody>
    <tr>
      <td>DATE (дата)</td>
      <td class="text-center">{{ "now"|date("m/d/Y") }} / {{ "now"|date("d/m/Y") }}</td>
    </tr>
    <tr>
      <td>TRK.NO. (номер накладної)</td>
      <td class="text-center">{{ model.tracking_code }}</td>
    </tr>
    </tbody>
  </table>
</div>

{# ======================================================= #}
{# БЛОК: ВІДПРАВНИК (SHIPPER)                              #}
{# Замініть виділений жовтим текст на свої реальні дані    #}
{# ======================================================= #}
<div class="clean-float"><span class="bold">SHIPPER</span> (вантажовідправник)</div>
<table class="second-table">
  <tbody>
  <tr>
    <td>Company name (назва компанії)</td>
    <td>
      {# Назва ФОП/компанії — замінити на свою #}
      Individual entrepreneur <span style="background-color: yellow">FIRST_NAME LAST_NAME</span> /
      ФОП <span style="background-color: yellow">ПРІЗВИЩЕ ІМʼЯ ПО-БАТЬКОВІ</span>
    </td>
  </tr>
  <tr>
    <td>TAX ID (ІПН)</td>
    {# ІПН — замінити на свій #}
    <td><span style="background-color: yellow">&lt; ІПН &gt;</span></td>
  </tr>
  <tr>
    <td>Contact person (контактна особа)</td>
    <td>
      {# Контактна особа — замінити на свою #}
      <span style="background-color: yellow">FIRST_NAME LAST_NAME</span> /
      <span style="background-color: yellow">ПРІЗВИЩЕ ІМʼЯ ПО-БАТЬКОВІ</span>
    </td>
  </tr>
  <tr>
    <td>Address (адреса)</td>
    {# Адреса відправника — замінити на свою #}
    <td><span style="background-color: yellow">Kyiv st. Khreshchatyk, 1 / м.Київ вул. Хрещатик, 1</span></td>
  </tr>
  <tr>
    <td>City (місто)</td>
    {# Місто відправника — замінити на своє #}
    <td><span style="background-color: yellow">Kyiv / Київ</span></td>
  </tr>
  <tr>
    <td>Postal code (поштовий індекс)</td>
    {# Індекс підтягується з адреси відправлення #}
    <td>{{ shipment.address.postal_code }}</td>
  </tr>
  <tr>
    <td>Country (країна)</td>
    {# Країна відправника — замінити якщо потрібно #}
    <td><span style="background-color: yellow">Ukraine / Україна</span></td>
  </tr>
  <tr>
    <td>Phone/fax nr. (телефон/факс)</td>
    {# Телефон підтягується з адреси відправлення #}
    <td>{{ shipment.address.phone }}</td>
  </tr>
  </tbody>
</table>

{# ======================================================= #}
{# БЛОК: ОДЕРЖУВАЧ (SHIP TO)                               #}
{# Дані підтягуються з CRM автоматично                     #}
{# ======================================================= #}
<div class="mt-10"><span class="bold">SHIP TO</span> (вантажоодержувач)</div>
<table class="second-table">
  <tbody>
  <tr>
    <td>Company name (назва компанії)</td>
    <td>{{ shipment.name }}</td>
  </tr>
  <tr>
    <td>Contact person (контактна особа)</td>
    <td>{{ shipment.name }}</td>
  </tr>
  <tr>
    <td>Address (адреса)</td>
    <td>{{ model.shipping_receive_point }}</td>
  </tr>
  <tr>
    <td>City (місто)</td>
    <td>{{ model.shipping_address_city }}</td>
  </tr>
  <tr>
    <td>Postal code (поштовий індекс)</td>
    <td>{{ model.shipping_address_zip }}</td>
  </tr>
  <tr>
    <td>Country (країна)</td>
    <td>{{ model.shipping_address_country }}</td>
  </tr>
  <tr>
    <td>Phone/fax nr. (телефон/факс)</td>
    <td>{{ shipment.phone }}</td>
  </tr>
  </tbody>
</table>

{# ======================================================= #}
{# БЛОК: ТАБЛИЦЯ ТОВАРІВ ВІДПРАВЛЕННЯ                      #}
{# Перебираємо shipment.items — товари з відправлення      #}
{# Рядок-заголовок у <thead> повторюється на кожній стор.  #}
{# (CSS: display:table-header-group)                       #}
{# Рядки товарів не розриваються між сторінками            #}
{# (CSS: page-break-inside:avoid на tbody tr)              #}
{# ======================================================= #}
<table class="goods-table mt-10">
  <thead>
    <tr class="text-center">
      <td>
        <div class="bold">No. Units</div>
        <div>Кількість</div>
      </td>
      <td>
        <div class="bold">Complete description of goods</div>
        <div>Найменування вантажу</div>
      </td>
      <td>
        <div class="bold">Harmonized tariff code</div>
        <div>Код по УКТЗЕД</div>
      </td>
      <td>
        <div class="bold">Country of origin</div>
        <div>Країна походження</div>
      </td>
      <td>
        <div class="bold">Unit Value</div>
        <div>Ціна за одиницю</div>
      </td>
      <td>
        <div class="bold">Total Value</div>
        <div>Загальна вартість</div>
      </td>
    </tr>
  </thead>
  <tbody>
    {# Рядки товарів — перебираємо всі позиції відправлення #}
    {% for item in shipment.items %}
    <tr>
      <td class="text-center">{{ item.quantity }}</td>
      {# Опис товару: англійською і локальною мовою, обрізається до 35 символів #}
      <td>{{ item.description_eng|slice(0, 35) }} / {{ item.description_local|slice(0, 35) }}</td>
      <td>{{ item.hs_code }}</td>
      {# Країна походження — замінити якщо потрібно #}
      <td>Ukraine / Україна</td>
      <td class="text-center">{{ item.price }} {{ shipment.currency }}</td>
      <td class="text-center">{{ (item.price * item.quantity)|round(2) }} {{ shipment.currency }}</td>
    </tr>
    {% endfor %}

    {# Рядок з підсумковою вартістю всіх товарів #}
    <tr>
      <td colspan="5"><strong>TOTAL VALUE</strong></td>
      <td class="text-center">
        <strong>
          {{ shipment.items|reduce((carry, item) => carry + (item.price * item.quantity), 0)|round(2) }}
          {{ shipment.currency }}
        </strong>
      </td>
    </tr>
  </tbody>
</table>

{# ======================================================= #}
{# БЛОК: ДОДАТКОВІ ВІДОМОСТІ — вага, кількість, мета       #}
{# ======================================================= #}
<div style="padding: 0 40px;">
  <table class="second-table no-border">
    <tbody>
    <tr>
      <td class="nowrap">
        <span class="bold mr-10">Total weight, kg</span>
        <span>(Загальна вага)</span>
      </td>
      {# Вага підтягується з відправлення #}
      <td class="full-width border-bottom">{{ shipment.weight }}</td>
    </tr>
    </tbody>
  </table>

  <table class="second-table no-border">
    <tbody>
    <tr>
      <td class="nowrap">
        <span class="bold mr-10">Number of packages</span>
        <span>(Кількість пакетів)</span>
      </td>
      <td class="full-width border-bottom">1</td>
    </tr>
    </tbody>
  </table>

  <table class="second-table no-border">
    <tbody>
    <tr>
      <td class="nowrap">
        <span class="bold mr-10">Reason for export</span>
        <span>(Мета експорту)</span>
      </td>
      {# Мета експорту — замінити якщо потрібно #}
      <td class="full-width border-bottom">
        <span style="background-color: yellow">SALE / ПРОДАЖ</span>
      </td>
    </tr>
    </tbody>
  </table>

  <p class="mt-10">I declare that the above information is true and correct to the best of my knowledge.</p>
</div>

{# ======================================================= #}
{# БЛОК: ПІДПИС І ПЕЧАТКА                                  #}
{# ======================================================= #}
<div class="middle">
  <div>SIGNATURE</div>
  <div>COMPANY STAMP</div>
</div>

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

  body {
    font-family: 'Times New Roman', Verdana, Arial, sans-serif;
    font-size: 14px;
    padding: 0;
    margin: 0;
  }

  img {
    border-style: none;
  }

  .italic     { font-style: italic; }
  .bold       { font-weight: 600; }
  .text-center { text-align: center; }

  .space-text span { margin-right: 10px; }

  .border-bottom { border-bottom: 1px solid black !important; }

  .clean-float { clear: right; }

  .mt-10 { margin-top: 10px; }
  .mb-10 { margin-bottom: 10px; }
  .mr-10 { margin-right: 10px; }
  .nowrap { white-space: nowrap; }

  .middle {
    margin-top: 50px;
    margin-left: 50%;
  }

  .second-table.no-border td { border: none; }

  .margin {
    display: inline-block;
    width: 28%;
  }

  /* =============================================
     ШАПКА — дата і трекінг-номер
     ============================================= */
  .head-table {
    display: inline-table;
    width: 70%;
    border-collapse: collapse;
  }

  .head-table td {
    height: 18px;
    padding: 0 5px;
    border: solid 1px black;
    line-height: 1;
  }

  .head-table td:first-child { width: 60%; }
  .head-table td:last-child  { width: 40%; }

  /* =============================================
     ТАБЛИЦІ ВІДПРАВНИКА І ОДЕРЖУВАЧА
     ============================================= */
  .second-table {
    width: 100%;
    border-collapse: collapse;
  }

  .second-table td {
    height: 18px;
    padding: 0 5px;
    border: solid 1px black;
  }

  .second-table td:first-child { width: 40%; }
  .second-table td:last-child  { width: 60%; }

  .second-table td.nowrap     { padding-right: 20px; width: auto; }
  .second-table td.full-width { padding-left: 20px; width: 90%; }

  /* =============================================
     ТАБЛИЦЯ ТОВАРІВ
     ============================================= */
  .goods-table {
    width: calc(100% - 2px);
    border: solid 1px black;
    border-collapse: collapse;
    margin-bottom: 20px;
  }

  .goods-table th,
  .goods-table td {
    border: solid 1px black;
    padding: 5px;
  }

  .goods-table td:nth-child(1) { width: 6%; }
  .goods-table td:nth-child(2) { width: 42%; }
  .goods-table td:nth-child(3) { width: 13%; }
  .goods-table td:nth-child(4) { width: 13%; }
  .goods-table td:nth-child(5) { width: 13%; }
  .goods-table td:nth-child(6) { width: 13%; }

  /* =============================================
     РОЗБИТТЯ НА СТОРІНКИ
     Заголовок таблиці товарів повторюється
     автоматично на кожній сторінці.
     Рядки товарів не розриваються між сторінками.
     ============================================= */
  .goods-table thead {
    display: table-header-group;
  }

  .goods-table tbody tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Блок підпису тримаємо разом */
  .middle {
    page-break-inside: avoid;
    break-inside: avoid;
  }
</style>
</html>.</span>
      </p>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Рахунок</p></td>
    <td valign="bottom" class="border-bottom full-width">
      <p class="space-text">
        <span class="bold">б/н</span>
        <span class="bold italic">від.</span>
        <span>{{ "now"|date("d.m.Y") }}р.</span>
      </p>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr style="height: 11px;">
    <td valign="top">&nbsp;</td>
    <td valign="top" class="small text-center">(номер, дата)</td>
  </tr>
</table>

{# ======================================================= #}
{# БЛОК: ВІДОМОСТІ ПРО ВІДПРАВЛЕННЯ                        #}
{# Дані підтягуються з відправлення (shipment) автоматично #}
{# ======================================================= #}
<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Країна вiдправлення (призначення)</p></td>
    <td valign="bottom" class="border-bottom full-width">
      {# Країна підтягується з адреси доставки замовлення #}
      <p>{{ model.shipping_address_country }}</p>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Вiдправник (одержувач)</p></td>
    <td valign="bottom" class="border-bottom full-width">
      {# Назва відправника підтягується з відправлення #}
      <p>{{ shipment.name }}</p>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Кiлькiсть мiсць</p></td>
    <td valign="bottom" class="border-bottom full-width"><p>1</p></td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Загальна вага (кiлограмiв)</p></td>
    <td valign="bottom" class="border-bottom full-width">
      {# Вага підтягується з відправлення #}
      <p>{{ shipment.weight }} кг</p>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Загальна митна вартiсть</p></td>
    <td valign="bottom" class="border-bottom full-width">
      <p>
        {# Сума всіх товарів відправлення: ціна × кількість #}
        {{ shipment.items|reduce((carry, item) => carry + (item.price * item.quantity), 0)|round(2) }}
        {{ shipment.currency }}
      </p>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Митний режим</p></td>
    <td valign="bottom" class="border-bottom full-width"><p class="bold italic">експорт</p></td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Умови поставки</p></td>
    <td valign="bottom" class="border-bottom full-width">
      {# Умови поставки — замінити на свої якщо потрібно #}
      <span style="background-color: yellow">CPT</span>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Характер угоди</p></td>
    <td valign="bottom" class="border-bottom full-width"><p></p></td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" colspan="2"><p>Дозволи уповноважених органів (назва, номер, дата)</p></td>
  </tr>
</table>

<br />

{# ======================================================= #}
{# БЛОК: ТАБЛИЦЯ ТОВАРІВ ВІДПРАВЛЕННЯ                      #}
{# Перебираємо shipment.items — товари з відправлення,     #}
{# не з замовлення (model.products)                        #}
{# thead повторюється автоматично на кожній сторінці       #}
{# (CSS: display:table-header-group)                       #}
{# Рядки не розриваються між сторінками                    #}
{# (CSS: page-break-inside:avoid на tbody tr)              #}
{# ======================================================= #}
<table class="goods-table">
  <thead>
    <tr>
      <th><p>Номер товару</p></th>
      <th><p>Найменування товару, його звичайний торговельний опис</p></th>
      <th><p>Код товару згiдно з УКТЗЕД</p></th>
      <th><p>Вартiсть товару у валютi України або iноземнiй валютi</p></th>
    </tr>
  </thead>
  <tbody>
    {% for item in shipment.items %}
    <tr>
      <td><p class="text-center">{{ loop.index }}</p></td>
      {# Опис товару обрізаємо до 35 символів #}
      <td><p>{{ item.description_local|slice(0, 35) }}</p></td>
      <td><p class="text-center">{{ item.hs_code }}</p></td>
      <td><p class="text-center">{{ item.price }} {{ shipment.currency }}</p></td>
    </tr>
    {% endfor %}
  </tbody>
</table>

{# ======================================================= #}
{# БЛОК: ПІДПИСИ — декларант і митний орган                #}
{# Замініть ПІБ декларанта (виділено жовтим)               #}
{# ======================================================= #}
<table class="signature-table">
  <tr>
    <td valign="bottom">Декларант або уповноважена ним особа</td>
    <td class="border-bottom"></td>
    <td valign="bottom" class="text-center border-bottom">
      {# ПІБ декларанта — замінити на своє #}
      <span style="background-color: yellow">Прізвище Імʼя По-Батькові</span>
    </td>
  </tr>
  <tr>
    <td></td>
    <td valign="top" class="text-center">(пiдпис)</td>
    <td valign="top" class="text-center">(iнiцiали, прiзвище)</td>
  </tr>
  <tr>
    <td class="border-bottom"></td>
    <td class="border-bottom"></td>
    <td valign="bottom" class="border-bottom"></td>
  </tr>
  <tr>
    <td valign="top" class="text-center">(найменування посади посадової особи митного органу)</td>
    <td valign="top" class="text-center">(пiдпис)</td>
    <td valign="top" class="text-center">(iнiцiали, прiзвище)</td>
  </tr>
</table>

{# ======================================================= #}
{# БЛОК: МІСЦЕ ДЛЯ ПЕЧАТКИ                                 #}
{# ======================================================= #}
<table class="stamp-table">
  <tr>
    <td>Місце для відбитка особистої номерної печатки</td>
  </tr>
</table>

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

  html, body {
    height: 100%;
  }

  body {
    color: #333;
    font-size: 12px;
    line-height: 1.3;
    min-width: 320px;
    font-family: 'Times New Roman', sans-serif;
  }

  img {
    border-style: none;
  }

  @page {
    size: auto;
    margin: 5mm 10mm;
  }

  .italic { font-style: italic; }
  .bold   { font-weight: bold; }
  .big    { font-size: 14px; }

  .small {
    font-size: 11px;
    line-height: 11px;
  }

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

  .space-text span {
    margin-right: 10px;
  }

  .nowrap    { white-space: nowrap; }

  .full-width {
    width: 90%;
    padding-left: 20px;
  }

  .border-bottom {
    border-bottom: 1px solid black;
  }

  /* =============================================
     ШАПКА ДОКУМЕНТА
     ============================================= */
  .head-table {
    width: 100%;
  }

  .head-table td {
    height: 22px;
    padding-right: 5px;
    padding-left: 5px;
  }

  .head-table td:first-child { width: 40%; }
  .head-table td:last-child  { width: 60%; }

  /* =============================================
     РЯДКИ З ДАНИМИ ВІДПРАВЛЕННЯ
     ============================================= */
  .second-table {
    width: 100%;
  }

  .second-table td {
    height: 25px;
    padding-right: 5px;
    padding-left: 5px;
  }

  .second-table td.nowrap    { padding-right: 20px; }
  .second-table td.full-width { padding-left: 20px; }

  /* =============================================
     ТАБЛИЦЯ ТОВАРІВ
     ============================================= */
  .goods-table {
    width: calc(100% - 2px);
    border-collapse: collapse;
    border: 1px solid black;
    margin-bottom: 20px;
  }

  .goods-table th,
  .goods-table td {
    border: 1px solid black;
    padding: 5px;
  }

  .goods-table th:nth-child(1),
  .goods-table td:nth-child(1) { width: 6%; }

  .goods-table th:nth-child(2),
  .goods-table td:nth-child(2) { width: 47%; }

  .goods-table th:nth-child(3),
  .goods-table td:nth-child(3) { width: 20%; }

  .goods-table th:nth-child(4),
  .goods-table td:nth-child(4) { width: 16%; }

  .goods-table th { font-weight: bold; }

  /* =============================================
     РОЗБИТТЯ НА СТОРІНКИ
     Заголовок таблиці товарів повторюється
     автоматично на кожній сторінці.
     Рядки товарів не розриваються між сторінками.
     ============================================= */
  .goods-table thead {
    display: table-header-group;
  }

  .goods-table tbody tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* =============================================
     ПІДПИСИ
     ============================================= */
  .signature-table {
    width: 100%;
    border-spacing: 10px 0;
    border-collapse: separate;
    margin-bottom: 20px;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .signature-table td {
    height: 25px;
    padding-right: 5px;
    padding-left: 5px;
  }

  .signature-table td:nth-child(1) { width: 45%; }
  .signature-table td:nth-child(2) { width: 15%; }
  .signature-table td:nth-child(3) { width: 40%; }

  /* =============================================
     МІСЦЕ ДЛЯ ПЕЧАТКИ
     ============================================= */
  .stamp-table {
    width: 30%;
    border: solid 1px black;
    text-align: center;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .stamp-table td {
    padding: 30px;
  }
</style>
</html>
    }

    .bold {
        font-weight: bold;
    }

    .big {
        font-size: 14px;
    }
    
    .small { 
        font-size: 11px;
        line-height: 11px;
    }

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

    .space-text span{
        margin-right: 10px;
    }
    
    .nowrap { 
        white-space: nowrap;
    }
    
    .full-width {
        width: 90%;
        padding-left: 20px;
    }

    .border-bottom {
        border-bottom: 1px solid black;
    }

    /*head-table*/
    .head-table {
        width: 100%;
    }

    .head-table .border-bottom {
        border-bottom: solid 1px black;
    }

    .head-table td {
        height: 22px;
        padding-right: 5px;
        padding-left: 5px;
    }

    .head-table td:first-child {
        width: 40%;
    }

    .head-table td:last-child {
        width: 60%;
    }

    /*second-table*/
    .second-table {
        width: 100%;
    }

    .second-table .slim-row td {
        height: 10px;
    }

    .second-table td {
        height: 25px;
        padding-right: 5px;
        padding-left: 5px;
    }
    
    .second-table td.nowrap {
        padding-right: 20px;
    }
    
    .second-table td.full-width {
        padding-left: 20px;
    }

    /*goods-table*/
    .goods-table {
        width: 100%;
        border-color: black;
        margin-bottom: 20px;
    }

    .goods-table th:nth-child(1),
    .goods-table td:nth-child(1) {
        width: 6%;
    }

    .goods-table th:nth-child(2),
    .goods-table td:nth-child(2) {
        width: 47%;
    }

    .goods-table th:nth-child(3),
    .goods-table td:nth-child(3) {
        width: 20%;
    }

    .goods-table th:nth-child(4),
    .goods-table td:nth-child(4) {
        width: 16%;
    }

    .goods-table th {
        padding: 5px;
        font-style: bold;
    }

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

    /*signature-table*/
    .signature-table {
        width: 100%;
        border-spacing: 10px 0;
        margin-bottom: 20px;
    }
    .signature-table td {
        height: 25px;
        padding-right: 5px;
        padding-left: 5px;
    }

    .signature-table td:nth-child(1) {
        width: 45%;
    }

    .signature-table td:nth-child(2) {
        width: 15%;
    }

    .signature-table td:nth-child(3) {
        width: 40%;
    }

    .stamp-table {
        width: 30%;
        border: solid 1px black;
        text-align: center;
    }

    .stamp-table td {
        padding: 30px;
    }
</style>
</html>
```

{% endtab %}
{% endtabs %}


# Для воронок

Приклади шаблонів документів для воронок українською мовою.

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

* [Як використовувати шаблони з бібліотеки та створювати власні шаблони документів](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 %}


# Для складських операцій

Приклади шаблонів документів для складських операцій українською мовою.

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

* [Як використовувати шаблони з бібліотеки та створювати власні шаблони документів](https://help.keycrm.app/uk/products-and-warehouse-management/iak-stvoriti-shablon-ta-drukuvati-dokumienti);
* [Довідник доступних тегів, функцій та фільтрів Twig](https://help.keycrm.app/uk/process-automation-api-and-more/dovidnik-dostupnikh-funktsii-ta-fil-triv-twig);
* [Приклади рішень та відповіді на поширені запитання](https://help.keycrm.app/uk/products-and-warehouse-management/pitannia-vidpovidi-faq-po-stvorienniu-dokumientiv-po-sklads-kim-opieratsiiam).

### 1. Оприбуткування

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

{% tab title="Код шаблону" %}
**Тип шаблону:** Складські операції

```
<!doctype html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <title>Оприбуткування товарів</title>
</head>
<body>

<div class="container">

    <!-- Заголовок -->
    <h2 class="text-center">АКТ ОПРИБУТКУВАННЯ ТОВАРІВ №: {{ model.id }}</h2>

    <br>

    <!-- Демо реквізити компанії -->
    <table class="width100">
        <tr>
            <td valign="top" class="label" style="width:50%">
                <span style="background-color: yellow">Постачальник: Ваша компанія</span><br />
                <span style="background-color: yellow">ФОП / ТОВ</span><br />
                <span style="background-color: yellow">м. Київ, вул. Прикладна, 1</span><br />
                <span style="background-color: yellow">тел.: (000)000-00-00</span><br />
            </td>

            <td valign="top">
                <strong>Дата:</strong> {{ model.created_at|date("d.m.Y H:i") }}<br>
                <strong>Тип операції:</strong> {{ model.event }}<br>
                <strong>Менеджер:</strong> {{ model.manager }}<br>
                <strong>Склад:</strong> {{ model.destination }}
            </td>
        </tr>
    </table>

    {% if model.comment %}
        <br>
        <strong>Коментар:</strong> {{ model.comment }}
    {% endif %}

    <br><br>

    <!-- Таблиця товарів -->
    <table class="width100 border">
        <thead>
        <tr>
            <th>№</th>
            <th>Зображення</th>
            <th>Артикул</th>
            <th>Назва товару</th>
            <th>Ціна закупівлі</th>
            <th>Кількість</th>
            <th>Сума закупівлі</th>
        </tr>
        </thead>
        <tbody>

        {% set total = 0 %}
        {% set total_qty = 0 %}
        {% set currency = model.inventories[0].currency_code ?? 'UAH' %}

        {% for key, inventory in model.inventories %}
            {% set row_sum = inventory.quantity * inventory.price %}
            {% set total = total + row_sum %}
            {% set total_qty = total_qty + inventory.quantity %}

            <tr>
                <td class="text-center">{{ key + 1 }}</td>
                <td class="text-center"><img src="{{ inventory.offer_picture }}" style="width: 60px;"></td>
                <td class="text-center">{{ inventory.offer_sku }}</td>
                <td class="text-center">{{ inventory.product_name }}</td>
                <td class="text-center">
                    {{ inventory.price|format_currency(currency, locale='uk') }}
                </td>
                <td class="text-center">{{ inventory.quantity }}</td>
                <td class="text-center">
                    {{ row_sum|format_currency(currency, locale='uk') }}
                </td>
            </tr>
        {% endfor %}

        </tbody>

        <!-- Підсумки -->
<tfoot>
<tr>
    <td colspan="5" class="text-right"><strong>Разом:</strong></td>
    <td class="text-center"><strong>{{ total_qty }} {{ model.inventories[0].product_unit_type ?? '' }}</strong></td>
    <td class="text-center">
        <strong>{{ total|format_currency(currency, locale='uk') }}</strong>
    </td>
</tr>
</tfoot>
    </table>

    <br><br>

<!-- Додатковий підсумок -->
   <p>
    <strong>Всього позицій:</strong> {{ model.inventories|length }} <br>
    
    <strong>Загальна кількість:</strong> 
    {{ total_qty }} 
    {{ model.inventories[0].product_unit_type ?? '' }} <br>
    
    <strong>Загальна сума закупівлі:</strong> 
    {{ total|format_currency(currency, locale='uk') }}
</p>

    <br><br>

    <!-- Підписи -->
    <table class="width100">
        <tr>
            <td>Прийняв: _______________________</td>
            <td class="text-right">Підпис: _______________________</td>
        </tr>
    </table>

</div>

</body>

<style>
    body {
        font-family: sans-serif;
        font-size: 14px;
    }

    .container {
        width: 100%;
    }

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

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

    .label {
        font-weight: bold;
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }

    th, td {
        border: 1px solid #000;
        padding: 6px;
    }

    th {
        background: #eee;
    }

    .border {
        border: 2px solid #000;
    }
</style>

</html>

```

{% endtab %}
{% endtabs %}

### 2. Переміщення

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

{% tab title="Код шаблону" %}
**Тип шаблону:** Складські операції

{% code fullWidth="true" %}

```
<!doctype html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <title>Переміщення товарів</title>
</head>
<body>

<div class="container">

    <!-- Заголовок -->
    <h2 class="text-center">
        НАКЛАДНА ПЕРЕМІЩЕННЯ №: {{ model.id }}
    </h2>

    <br>

    <!-- Демо реквізити -->
    <table class="width100">
        <tr>
            <td valign="top" class="label" style="width:50%">
                <span style="background-color: yellow">Ваша компанія</span><br />
                <span style="background-color: yellow">ФОП / ТОВ</span><br />
                <span style="background-color: yellow">м. Київ, вул. Прикладна, 1</span><br />
                <span style="background-color: yellow">тел.: (000)000-00-00</span><br />
            </td>

            <td valign="top">
                <strong>Дата:</strong> {{ model.created_at|date("d.m.Y H:i") }}<br>
                <strong>Менеджер:</strong> {{ model.manager }}<br>
                <strong>Тип:</strong> {{ model.event }}
            </td>
        </tr>
    </table>

    <br>

    <!-- Склади -->
    <table class="width100 border">
        <tr>
            <td>
                <strong>Склад-відправник:</strong><br>
                {{ model.target }}
            </td>
            <td>
                <strong>Склад-отримувач:</strong><br>
                {{ model.destination }}
            </td>
        </tr>
    </table>

    {% if model.comment %}
        <br>
        <strong>Коментар:</strong> {{ model.comment }}
    {% endif %}

    <br><br>

    <!-- Таблиця товарів -->
    <table class="width100 border">
        <thead>
        <tr>
            <th>№</th>
            <th>Зображення</th>
            <th>Артикул</th>
            <th>Назва товару</th>
            <th>Од.</th>
            <th>Кількість (відправлено)</th>
            <th>Кількість (отримано)</th>
            <th>Ціна</th>
            <th>Сума</th>
        </tr>
        </thead>
        <tbody>

        {% set total = 0 %}
        {% set total_qty = 0 %}
        {% set currency = model.inventories[0].currency_code ?? 'UAH' %}

        {% for key, inventory in model.inventories %}
            {% set row_sum = inventory.quantity * inventory.price %}
            {% set total = total + row_sum %}
            {% set total_qty = total_qty + inventory.quantity %}

            <tr>
                <td class="text-center">{{ key + 1 }}</td>
                <td class="text-center">
                    <img src="{{ inventory.offer_picture }}" style="width: 50px;">
                </td>
                <td class="text-center">{{ inventory.offer_sku }}</td>
                <td>{{ inventory.product_name }}</td>
                <td class="text-center">{{ inventory.product_unit_type }}</td>

                <!-- відправлено -->
                <td class="text-center">
                    {{ inventory.quantity }}
                </td>

                <!-- отримано (порожнє для заповнення) -->
                <td class="text-center">
                    __________
                </td>

                <td class="text-right">
                    {{ inventory.price|format_currency(currency, locale='uk') }}
                </td>

                <td class="text-right">
                    {{ row_sum|format_currency(currency, locale='uk') }}
                </td>
            </tr>
        {% endfor %}

        </tbody>

        <!-- Підсумки -->
        <tfoot>
        <tr>
            <td colspan="5" class="text-right"><strong>Разом:</strong></td>
            <td class="text-center">
                <strong>{{ total_qty }}</strong>
            </td>
            <td></td>
            <td></td>
            <td class="text-right">
                <strong>{{ total|format_currency(currency, locale='uk') }}</strong>
            </td>
        </tr>
        </tfoot>
    </table>

    <br><br>

    <!-- Додатковий підсумок -->
    <p>
        <strong>Всього позицій:</strong> {{ model.inventories|length }} <br>

        <strong>Відправлено:</strong>
        {{ total_qty }} {{ model.inventories[0].product_unit_type ?? '' }} <br>

        <strong>Сума товарів:</strong>
        {{ total|format_currency(currency, locale='uk') }}
    </p>

    <br><br>

    <!-- Підписи -->
    <table class="width100">
        <tr>
            <td>
                Відвантажив (склад-відправник): <br><br>
                _______________________
            </td>

            <td>
                Прийняв (склад-отримувач): <br><br>
                _______________________
            </td>
        </tr>
    </table>

</div>

</body>

<style>
    body {
        font-family: sans-serif;
        font-size: 14px;
    }

    .container {
        width: 100%;
    }

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

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

    .label {
        font-weight: bold;
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }

    th, td {
        border: 1px solid #000;
        padding: 6px;
    }

    th {
        background: #eee;
    }

    .border {
        border: 2px solid #000;
    }
</style>

</html>

```

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

### 3. Інвентаризація

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

{% tab title="Код шаблону" %}
**Тип шаблону:** Складські операції

```
<!doctype html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <title>Інвентаризація</title>
</head>
<body>

<div class="container">

    <!-- Заголовок -->
    <h2 class="text-center">
        АКТ ІНВЕНТАРИЗАЦІЇ №: {{ model.id }}
    </h2>

    <br>

    <!-- Демо реквізити -->
    <table class="width100">
        <tr>
            <td valign="top" class="label" style="width:50%">
                <span style="background-color: yellow">Ваша компанія</span><br />
                <span style="background-color: yellow">ФОП / ТОВ</span><br />
                <span style="background-color: yellow">м. Київ, вул. Прикладна, 1</span><br />
                <span style="background-color: yellow">тел.: (000)000-00-00</span><br />
            </td>

            <td valign="top">
                <strong>Дата:</strong> {{ model.created_at|date("d.m.Y H:i") }}<br>
                <strong>Менеджер:</strong> {{ model.manager }}<br>
                <strong>Склад:</strong> {{ model.destination }}<br>
                <strong>Тип:</strong> {{ model.event }}
            </td>
        </tr>
    </table>

    {% if model.comment %}
        <br>
        <strong>Коментар:</strong> {{ model.comment }}
    {% endif %}

    <br><br>

    <!-- Таблиця -->
    <table class="width100 border">
        <thead>
        <tr>
            <th>№</th>
            <th>Зображення</th>
            <th>Артикул</th>
            <th>Назва товару</th>
            <th>Од.</th>
            <th>Було в системі</th>
            <th>Фактично</th>
            <th>Різниця</th>
        </tr>
        </thead>
        <tbody>

       {% set total_system = 0 %}
{% set total_fact = 0 %}
{% set total_diff = 0 %}

{% for key, inventory in model.inventories %}

    {% set system_qty = inventory.quantity_before ? inventory.quantity_before : 0 %}

    {# quantity = це різниця #}
    {% set diff = inventory.quantity ? inventory.quantity : 0 %}

    {# фактичний залишок = було + різниця #}
    {% set fact_qty = system_qty + diff %}

    {% set total_system = total_system + system_qty %}
    {% set total_fact = total_fact + fact_qty %}
    {% set total_diff = total_diff + diff %}

    <tr>
        <td class="text-center">{{ key + 1 }}</td>

        <td class="text-center">
            <img src="{{ inventory.offer_picture }}" style="width: 50px;">
        </td>

        <td class="text-center">{{ inventory.offer_sku }}</td>

        <td>
            {{ inventory.product_name }}
        </td>

        <td class="text-center">{{ inventory.product_unit_type }}</td>

        <!-- було -->
        <td class="text-center">
            {{ system_qty }}
        </td>

        <!-- фактично -->
        <td class="text-center">
            {{ fact_qty }}
        </td>

        <!-- різниця -->
        <td class="text-center">
            {% if diff > 0 %}
                +{{ diff }}
            {% else %}
                {{ diff }}
            {% endif %}
        </td>
    </tr>

{% endfor %}

        </tbody>

        <!-- Підсумки -->
        <tfoot>
        <tr>
            <td colspan="5" class="text-right"><strong>Разом:</strong></td>

            <td class="text-center">
                <strong>{{ total_system }}</strong>
            </td>

            <td class="text-center">
                <strong>{{ total_fact }}</strong>
            </td>

            <td class="text-center">
                <strong>
                    {% if total_diff > 0 %}
                        +{{ total_diff }}
                    {% else %}
                        {{ total_diff }}
                    {% endif %}
                </strong>
            </td>
        </tr>
        </tfoot>
    </table>

    <br><br>

    <!-- Додатковий підсумок -->
    <p>
        <strong>Всього позицій:</strong> {{ model.inventories|length }} <br>

        <strong>Було в системі:</strong>
        {{ total_system }} {{ model.inventories[0].product_unit_type ?? '' }} <br>

        <strong>Фактично:</strong>
        {{ total_fact }} {{ model.inventories[0].product_unit_type ?? '' }} <br>

        <strong>Різниця:</strong>
        {% if total_diff > 0 %}
            +{{ total_diff }}
        {% else %}
            {{ total_diff }}
        {% endif %}
    </p>

    <br><br>

    <!-- Підписи -->
    <table class="width100">
        <tr>
            <td>
                Провів інвентаризацію: <br><br>
                _______________________
            </td>

            <td>
                Перевірив: <br><br>
                _______________________
            </td>
        </tr>
    </table>

</div>

</body>

<style>
    body {
        font-family: sans-serif;
        font-size: 14px;
    }

    .container {
        width: 100%;
    }

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

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

    .label {
        font-weight: bold;
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }

    th, td {
        border: 1px solid #000;
        padding: 6px;
    }

    th {
        background: #eee;
    }

    .border {
        border: 2px solid #000;
    }
</style>

</html>
     
    


```

{% endtab %}
{% endtabs %}


# Для заказов

Примеры шаблонов документов для заказов на русском языке.

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

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

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

{% tabs %}
{% tab title="Внешний вид" %}
![](/files/oWwAe8qCbe8WRbpTOeQB)
{% 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">demo@ukr.net</span><br />
      </td>
      {# Телефоны магазина #}
      <td valign="top">
        <span style="background-color: yellow">тел.: (011)777-77-77</span><br />
        <span style="background-color: yellow">тел.: (011)777-77-77</span><br />
        <span style="background-color: yellow">тел.: (011)777-77-77</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">Поставщик: Test test</span><br />
        <span style="background-color: yellow">ФЛП Тест Т.Т.</span><br />
        <span style="background-color: yellow">г. Киев, ул. Крещатик, 1</span><br />
        <span style="background-color: yellow">тел.: (011)777-77-77</span><br />
      </td>
      <td valign="top" class="label">
        {# Данные клиента подтягиваются из CRM автоматически #}
        Получатель: {{ model.client_name }}<br />
        тел.: {{ model.client_phone | default('не указано') }}<br />
        {# Email выводится только если он заполнен в заказе #}
        {% if model.client_email %}
          email: {{ model.client_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>

  {# ======================================================= #}
  {# БЛОК: ТАБЛИЦА ТОВАРОВ                                   #}
  {# thead автоматически повторяется на каждой странице      #}
  {# (CSS: display:table-header-group)                       #}
  {# Строки товаров не разрываются между страницами          #}
  {# (CSS: page-break-inside:avoid на tbody tr)              #}
  {# ======================================================= #}
  <table class="width100 border">
    <thead>
      <tr>
        <th class="text-center">№</th>
        <th>Артикул</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 class="text-center">{{ product.product_sku }}</td>
        <td style="width:50%">{{ product.product_name }}</td>
        <td class="text-center">{{ product.product_unit_type }}</td>
        <td class="text-center">{{ product.product_quantity }}</td>
        <td class="text-center">{{ product.price_sold|format_currency('UAH', locale='uk') }}</td>
        <td class="text-right">{{ (product.product_quantity * product.price_sold)|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endfor %}

      {# ======================================================= #}
      {# ИТОГИ — выводятся после всех строк товаров            #}
      {# ======================================================= #}

      {# "Всего за товары" — только если есть скидка или доставка #}
      {% if model.discount_amount or model.shipping_price %}
      <tr>
        <td colspan="6" class="text-right">Всего за товары:</td>
        <td class="text-right">{{ model.total_price|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endif %}

      {# Скидка на заказ — только если есть #}
      {% if model.discount_amount %}
      <tr>
        <td colspan="6" class="text-right">Скидка:</td>
        <td class="text-right">{{ model.discount_amount|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endif %}

      {# Доставка — только если есть #}
      {% if model.shipping_price %}
      <tr>
        <td colspan="6" class="text-right">Доставка:</td>
        <td class="text-right">{{ model.shipping_price|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endif %}

      {# Итоговая сумма — отображается всегда #}
      <tr>
        <td colspan="6" class="text-right"><strong>Итого:</strong></td>
        <td class="text-right"><strong>{{ model.grand_total|format_currency('UAH', locale='uk') }}</strong></td>
      </tr>
    </tbody>
  </table>

  {# ======================================================= #}
  {# БЛОК: ПОДВАЛ — общее количество, сумма и подпись        #}
  {# ======================================================= #}
  <br /><br />
  <table class="table-sum width100">
    <tr>
      <td colspan="2">
        Всего наименований {{ model.products|length }}, на сумму {{ model.grand_total|format_currency('UAH', locale='uk') }}
      </td>
      <td></td>
    </tr>
    <tr>
      <td>Дата: <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>
  </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: calc(100% - 2px);
  }

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

  table td {
    padding: 5px;
  }

  table th {
    background: #d4d4d4;
  }

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

  table.border th {
    padding: 20px 5px;
  }

  table.border td {
    padding: 5px;
  }

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

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

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

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

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

  /* Подвал держим вместе, не отрывать от итогов */
  table.table-sum {
    page-break-inside: avoid;
    break-inside: avoid;
  }
</style>
</html>
```

{% endtab %}
{% endtabs %}

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

{% tabs %}
{% tab title="Внешний вид" %}
![](/files/PJarsRBmeVORmdk9lp3c)
{% 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">

  {# ======================================================= #}
  {# БЛОК: ШАПКА — логотип и контакты магазина       #}
  {# Замените src логотипа и контактные данные на свои       #}
  {# ======================================================= #}
  <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;">
        г. Киев, ул. Крещатик, 1
      </td>
    </tr>
    <tr>
      <td style="padding: 5px;">
        моб/viber (011) 777-77-77
      </td>
    </tr>
    <tr>
      <td style="padding: 5px;">
        <span>demo.com.ua</span>
      </td>
    </tr>
    </tbody>
  </table>

  <br />

  {# ======================================================= #}
  {# БЛОК: ДАННЫЕ ПОКУПАТЕЛЯ И АДРЕС ДОСТАВКИ                #}
  {# Подтягиваются из CRM автоматически                      #}
  {# ======================================================= #}
  <table style="padding-bottom: 10px; margin-bottom: 10px;">
    <tbody>
    <tr>
      <td style="padding: 10px 5px;">
        <strong>Покупатель:</strong> {{ model.client_name }}
        {# Телефон выводится только если он есть в заказе #}
        {% if model.client_phone %}
        {{ model.client_phone }},
        {% endif %}
      </td>
    </tr>
    <tr>
      <td style="padding: 5px 5px 10px;">
        <strong>Адрес доставки:</strong>
        {# Служба доставки выводится только если она есть #}
        {% if model.shipping_type %}
        {{ model.shipping_type }},
        {% endif %}
        {# Адрес выводится только если он есть #}
        {% if model.shipping_address %}
        {{ model.shipping_address }},<br />
        {% endif %}
      </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>

  {# ======================================================= #}
  {# БЛОК: ТАБЛИЦА ТОВАРОВ                                   #}
  {# thead повторяется автоматически на каждой странице      #}
  {# (CSS: display:table-header-group)                       #}
  {# Строки товаров не разрываются между страницами          #}
  {# (CSS: page-break-inside:avoid на tbody tr)              #}
  {# ======================================================= #}
  <table class="width100 products-table">
    <thead>
      <tr>
        <th class="text-center">№</th>
        <th>Артикул</th>
        <th class="name-col">Наименование товара</th>
        <th>Ед.</th>
        <th>Количество</th>
        <th>Цена</th>
        <th>Сумма</th>
      </tr>
    </thead>
    <tbody>
      {# Строки товаров — перебираем все позиции заказа #}
      {% for key, product in model.products %}
      <tr class="product-row">
        <td class="text-center">{{ key + 1 }}</td>
        <td class="text-center">{{ product.product_sku }}</td>
        <td style="width:50%">{{ product.product_name }}</td>
        <td class="text-center">{{ product.product_unit_type }}</td>
        <td class="text-center">{{ product.product_quantity }}</td>
        <td class="text-center">{{ product.price_sold|format_currency('UAH', locale='ru') }}</td>
        <td class="text-right">{{ (product.product_quantity * product.price_sold)|format_currency('UAH', locale='ru') }}</td>
      </tr>
      {% endfor %}

      {# ======================================================= #}
      {# ИТОГИ — выводятся после всех строк товаров              #}
      {# ======================================================= #}

      {# "Всего за товары" — только если есть скидка или доставка #}
      {% if model.discount_amount or model.shipping_price %}
      <tr>
        <td colspan="6" class="text-right">Всего за товары:</td>
        <td class="text-right">{{ model.total_price|format_currency('UAH', locale='ru') }}</td>
      </tr>
      {% endif %}

      {# Скидка — только если есть #}
      {% if model.discount_amount %}
      <tr>
        <td colspan="6" class="text-right">Скидка:</td>
        <td class="text-right">{{ model.discount_amount|format_currency('UAH', locale='ru') }}</td>
      </tr>
      {% endif %}

      {# Доставка — только если есть #}
      {% if model.shipping_price %}
      <tr>
        <td colspan="6" class="text-right">Доставка:</td>
        <td class="text-right">{{ model.shipping_price|format_currency('UAH', locale='ru') }}</td>
      </tr>
      {% endif %}

      {# Финальная сумма — отображается всегда #}
      <tr>
        <td colspan="6" class="text-right"><strong>Сумма:</strong></td>
        <td class="text-right"><strong>{{ model.grand_total|format_currency('UAH', locale='ru') }}</strong></td>
      </tr>
    </tbody>
  </table>

  <br />

  {# ======================================================= #}
  {# БЛОК: ИТОГ — количество позиций и сумма прописью        #}
  {# ======================================================= #}
  <table style="padding-bottom: 10px; margin-bottom: 10px;">
    <tr>
      <td style="padding: 5px;">
        Всего наименований {{ model.products|length }}, на сумму {{ model.grand_total|format_currency('UAH', locale='ru') }}
      </td>
    </tr>
    <tr>
      <td style="padding: 5px;">
        {# Сумма прописью: целая часть (гривны) #}
        {% set gtc = model.grand_total|round(0, 'floor') %}
        {# Дробная часть (копейки) #}
        {% set gtr = ((model.grand_total - 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>
      </td>
    </tr>
  </table>

  <br />

  {# ======================================================= #}
  {# БЛОК: ПОДПИСЬ ПРОДАВЦА                                  #}
  {# Замените "Иванов Иван" на имя ответственного лица       #}
  {# ======================================================= #}
  <table class="width100" style="padding-bottom: 30px; margin-bottom: 30px;">
    <tbody>
    <tr>
      <td style="font-size: 12px;">Продавец</td>
      <td style="border-bottom: 1px solid black;"></td>
      {# Замените на имя ответственного лица #}
      <td style="font-size: 12px;">Иванов Иван</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         #}
  {# QR-коды можно сгенерировать, например, здесь: https://www.qrcode-monkey.com/ #}
  {# После генерации нужно сохранить картинки на вашем сервере (сайте) и вставить в шаблон ссылки на них. #}
  {# ======================================================= #}
  <table class="width100" style="padding-bottom: 10px; margin-bottom: 10px;">
    <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>
  </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: calc(100% - 2px);
  }

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

  table thead td,
  table thead th {
    padding: 5px;
    border-bottom: 1px solid black;
  }

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

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

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

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

  /* Линия под каждой строкой товара */
  table.products-table tbody tr.product-row td {
    border-bottom: 1px solid black;
  }

  /* Строки 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/o9jPcyyssqUCUrbsyeFz)
{% 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">

  {# ======================================================= #}
  {# БЛОК: ШАПКА — логотип и название документа              #}
  {# Замените src логотипа на свое изображение               #}
  {# ======================================================= #}
  {% set mnths = ['','января','февраля','марта','апреля','мая','июня','июля','августа','сентября','октября','ноября','декабря'] %}

  <table style="padding-bottom: 10px; border-bottom: solid 3px black; margin-bottom: 10px;">
    <tbody>
    <tr>
      <td>
        {# Логотип: замените src на прямую ссылку на свое изображение #}
        <img src="https://blog.keycrm.app/wp-content/uploads/2025/12/cropped-keycrm-logo-blue-on-transparent-160x53.png" style="height: 40px" alt="">
      </td>
      <td style="font-size: 20px; font-weight: bold; width: 90%">
        Расходная накладная № {{ model.id }} от {{ model.created_at|date("j") }} {{ mnths[model.created_at|date("n")] }} {{ model.created_at|date("Y") }} г.
      </td>
    </tr>
    </tbody>
  </table>

  {# ======================================================= #}
  {# БЛОК: РЕКВИЗИТЫ — поставщик и покупатель                #}
  {# Замените выделенный желтым текст на свои реальные данные    #}
  {# Данные покупателя подтягиваются из CRM автоматически              #}
  {# ======================================================= #}
  <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">Р/с 000000000000, в банке НАЗВАНИЕ БАНКА, г. Город МФО 000000,</span><br />
          <span style="background-color: yellow">ул. Название улицы, д. № 0, г. Город 00000, тел.: (000) 000-00-00,</span><br />
          <span style="background-color: yellow">код по ЕГРПОУ 00000000, ИНН 00000000000, № свид. 00000000,</span><br />
          <span style="background-color: yellow">Является плательщиком налога на прибыль на общих основаниях.</span>
        </div>
      </td>
    </tr>
    <tr>
      <td valign="top">
        <span style="text-decoration: underline">Покупатель:</span>
      </td>
      <td valign="top" style="padding-bottom: 7px;">
        {# Имя клиента подтягивается из CRM автоматически #}
        <strong>{{ model.client_name }}</strong>
        <div style="padding-left: 15px; font-size: 90%;">
          {% if model.shipping_address %}
            {{ model.shipping_address }},<br />
          {% endif %}
          {% if model.client_phone %}
            {{ model.client_phone }},
          {% endif %}
          {% if model.client_email %}
            {{ model.client_email }}
          {% endif %}
        </div>
      </td>
    </tr>
    <tr>
      <td valign="top">
        <span style="text-decoration: underline">Договор:</span>
      </td>
      <td valign="top" style="padding-bottom: 7px;">
        {# Измените название договора если нужно #}
        <span>Основной договор</span>
      </td>
    </tr>
    <tr>
      <td valign="top">
        <span style="text-decoration: underline">Условия поставки:</span>
      </td>
      <td valign="top" style="padding-bottom: 7px;">
        {# Тип доставки подтягивается из CRM автоматически #}
        {{ model.shipping_type }}
      </td>
    </tr>
    </tbody>
  </table>

  <br />

  {# ======================================================= #}
  {# БЛОК: ТАБЛИЦА ТОВАРОВ                                   #}
  {# thead повторяется автоматически на каждой странице       #}
  {# (CSS: display:table-header-group)                       #}
  {# Строки товаров не разрываются между страницами            #}
  {# (CSS: page-break-inside:avoid на tbody tr)              #}
  {# ======================================================= #}
  <table class="width100 border products-table">
    <thead>
      <tr>
        <th class="text-center">№</th>
        <th>Код товара</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 class="text-center">{{ product.product_sku }}</td>
        <td style="width:50%">{{ product.product_name }}</td>
        <td class="text-center">{{ product.product_unit_type }}</td>
        <td class="text-center">{{ product.product_quantity }}</td>
        <td class="text-center">{{ product.price_sold|format_currency('UAH', locale='ru') }}</td>
        <td class="text-right">{{ (product.product_quantity * product.price_sold)|format_currency('UAH', locale='ru') }}</td>
      </tr>
      {% endfor %}

      {# ======================================================= #}
      {# ИТОГИ — выводятся после всех строк товаров              #}
      {# ======================================================= #}

      {# "Всего за товары" — только если есть скидка или доставка #}
      {% if model.discount_amount or model.shipping_price %}
      <tr>
        <td colspan="6" class="text-right">Всего за товары:</td>
        <td class="text-right">{{ model.total_price|format_currency('UAH', locale='ru') }}</td>
      </tr>
      {% endif %}

      {# Скидка — только если есть #}
      {% if model.discount_amount %}
      <tr>
        <td colspan="6" class="text-right">Скидка:</td>
        <td class="text-right">{{ model.discount_amount|format_currency('UAH', locale='ru') }}</td>
      </tr>
      {% endif %}

      {# Доставка — только если есть #}
      {% if model.shipping_price %}
      <tr>
        <td colspan="6" class="text-right">Доставка:</td>
        <td class="text-right">{{ model.shipping_price|format_currency('UAH', locale='ru') }}</td>
      </tr>
      {% endif %}

      {# Финальная сумма — отображается всегда #}
      <tr>
        <td colspan="6" class="text-right"><strong>Сумма:</strong></td>
        <td class="text-right"><strong>{{ model.grand_total|format_currency('UAH', locale='ru') }}</strong></td>
      </tr>
    </tbody>
  </table>

  <br />

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

  <br />

  {# ======================================================= #}
  {# БЛОК: МЕСТО СОСТАВЛЕНИЯ                                 #}
  {# Замените адрес на свой                                  #}
  {# ======================================================= #}
  <table>
    <tr>
      <td>
        Место составления:
      </td>
      <td>
        {# Замените на адрес своего склада или офиса #}
        <span style="background-color: yellow">г. Киев, ул. Крещатик, 1</span>
      </td>
    </tr>
  </table>

  <br />

  {# ======================================================= #}
  {# БЛОК: ПОДПИСИ — поставщик и получатель                  #}
  {# ======================================================= #}
  <table class="width100" style="border-top: solid 3px black;">
    <tr>
      <td valign="top" style="padding-top: 15px; padding-right: 30px;" width="50%">
        <div style="padding-bottom: 35px; margin-bottom: 15px; border-bottom: solid 2px black;">
          <strong>От поставщика*</strong>
        </div>
        <span style="font-size: 90%;">* Ответственный за осуществление хозяйственной операции и правильность ее оформления</span>
      </td>
      <td valign="top" style="padding-top: 15px; padding-right: 30px;">
        <div style="padding-bottom: 35px; margin-bottom: 15px; border-bottom: solid 2px black;">
          <strong>Получил(а)</strong>
        </div>
        <span style="font-size: 90%;">По доверенности &nbsp;&nbsp;&nbsp;&nbsp; № &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; от </span>
      </td>
    </tr>
  </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: calc(100% - 2px);
  }

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

  table td {
    padding: 5px;
  }

  table th {
    background: #d4d4d4;
  }

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

  table.border th {
    padding: 15px 5px;
  }

  table.border 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="Внешний вид" %}
![](/files/FfQVnD834GuSAo6BrMqS)
{% 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.id }} от {{ model.created_at|date("j") }} {{ mnths[model.created_at|date("n")] }} {{ model.created_at|date("Y") }} г.
      </td>
    </tr>
    </tbody>
  </table>

  {# ======================================================= #}
  {# БЛОК: РЕКВИЗИТЫ — поставщик и покупатель                #}
  {# Замените выделенный желтым текст на свои реальные данные    #}
  {# Данные покупателя подтягиваются из CRM автоматически              #}
  {# ======================================================= #}
  <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.client_name }}</strong>
        <div style="padding-left: 15px; font-size: 90%;">
          {% if model.client_phone %}
            {{ model.client_phone }},
          {% endif %}
          {% if model.client_email %}
            {{ model.client_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>Договора Поставки № {{ model.id }} от {{ model.created_at|date("j") }} {{ mnths[model.created_at|date("n")] }} {{ model.created_at|date("Y") }} г.</span>
      </td>
    </tr>
    </tbody>
  </table>

  <br/>

  {# ======================================================= #}
  {# БЛОК: ТАБЛИЦА ТОВАРОВ                                   #}
  {# thead повторяется автоматически на каждой странице       #}
  {# (CSS: display:table-header-group)                       #}
  {# Строки товаров не разрываются между страницами            #}
  {# (CSS: page-break-inside:avoid на tbody tr)              #}
  {# ======================================================= #}
  <table class="width100 border products-table">
    <thead>
      <tr>
        <th class="text-center">№</th>
        <th class="text-center">Изображение</th>
        <th>Артикул</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>
        {# Изображение товара — подтягивается из CRM #}
        <td class="text-center"><img src="{{ product.product_image }}" style="width: 60px;"></td>
        <td class="text-center">{{ product.product_sku }}</td>
        <td style="width:30%">{{ product.product_name }} {{ product.product_properties }}</td>
        <td class="text-center">{{ product.product_quantity }} {{ product.product_unit_type }}</td>
        <td class="text-right">{{ product.product_price|format_currency('UAH', locale='ru') }}</td>
        {# Скидка по товара: если есть — считаем сумму, если нет — выводим 0 #}
        <td class="text-right">{{ product.product_discount != '-' ? (product.product_quantity * product.product_discount)|format_currency('UAH', locale='ru') : '0' }}</td>
        <td class="text-right">{{ (product.product_quantity * product.price_sold)|format_currency('UAH', locale='ru') }}</td>
      </tr>
      {% endfor %}

      {# ======================================================= #}
      {# ИТОГИ — выводятся после всех строк товаров              #}
      {# ======================================================= #}

      {# "Всего за товары" — всегда #}
      <tr>
        <td colspan="7" class="text-right">Всего за товары:</td>
        <td class="text-right">{{ model.total_price|format_currency('UAH', locale='ru') }}</td>
      </tr>

      {# Скидка к заказу — только если есть #}
      {% if model.discount_amount %}
      <tr>
        <td colspan="7" class="text-right">Скидка к заказу:</td>
        <td class="text-right">{{ model.discount_amount|format_currency('UAH', locale='ru') }}</td>
      </tr>
      {% endif %}

      {# Доставка — только если есть #}
      {% if model.shipping_price %}
      <tr>
        <td colspan="7" class="text-right">Доставка:</td>
        <td class="text-right">{{ model.shipping_price|format_currency('UAH', locale='ru') }}</td>
      </tr>
      {% endif %}

      {# Финальная сумма — отображается всегда #}
      <tr>
        <td colspan="7" class="text-right"><strong>Общая стоимость:</strong></td>
        <td class="text-right"><strong>{{ model.grand_total|format_currency('UAH', locale='ru') }}</strong></td>
      </tr>
    </tbody>
  </table>

  <br/>

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

  <br/>

  {# ======================================================= #}
  {# БЛОК: СУММА ПРОПИСЬЮ                                     #}
  {# Логика склонения гривен/копеек встроенная               #}
  {# ======================================================= #}
  <table>
    <tr>
      <td>
        <p>
          {# Целая часть суммы (гривны) #}
          {% set gtc = model.grand_total|round(0, 'floor') %}
          {# Дробная часть (копейки) #}
          {% set gtr = ((model.grand_total - 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>
  </table>

  <br/>

  {# ======================================================= #}
  {# БЛОК: ПОДПИСЬ — срок действия счета и ответственное лицо #}
  {# Замените ФИО ответственного лица (выделено желтым)      #}
  {# ======================================================= #}
  <table class="width100" style="border-top: solid 3px black;">
    <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>
  </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: calc(100% - 2px);
  }

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

  table th {
    background: #d4d4d4;
  }

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

  table.border th {
    padding: 15px 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 %}

### 5. "Письмо на таможню" (при отправке за границу)

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

{% tab title="Код шаблона" %}
**Тип шаблона:** Доставка

```
<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="author" content="KeyCRM">
  <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="Content-Type" content="text/html; charset=utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Таможенная декларация</title>
</head>
<body>

{# ======================================================= #}
{# БЛОК: ШАПКА — адресат и данные декларанта               #}
{# Замените выделенный желтым текст на свои реальные данные    #}
{# ======================================================= #}
<table class="head-table">
  <tr>
    <td valign="bottom"><p class="big bold italic">"______"_________________20__года</p></td>
    <td valign="bottom" class="border-bottom">
      <p class="big italic bold">И.о. начальника Киевской ГТС Украины</p>
    </td>
  </tr>
  <tr>
    <td valign="top" class="small text-center bold">(заполняется таможней)</td>
    <td valign="top" class="small bold">(наименование таможенного органа)</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td valign="bottom" class="border-bottom">
      {# ФИО руководителя таможенного органа — заменить на свое #}
      <span class="big"><span style="background-color: yellow">Фамилия Имя Отчество</span></span>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td valign="top" class="small">(фамилия, имя и отчество)</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td valign="bottom" class="border-bottom">
      {# Адрес проживания физического лица — заменить на свой #}
      <span class="big"><span style="background-color: yellow">г. Город, ул. Название улицы 00/000</span></span>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td valign="top" class="small">(место проживания физического лица)</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td valign="bottom" colspan="2" class="big text-center border-bottom">
      {# ФИО и passportные данные декларанта — заменить на свои #}
      <span style="background-color: yellow">Фамилия Имя Отчество</span>
      <span style="padding: 0 30px"></span>
      <span style="background-color: yellow">ИХ: 000000</span>
    </td>
  </tr>
  <tr>
    <td colspan="2" valign="top">
      <p class="text-center">(фамилия, имя и отчество физического лица, паспортные данные)</p>
    </td>
  </tr>
  <tr>
    <td colspan="2" valign="top">
      <p class="big">
        заявляет сведения о товарах и другую информацию, необходимую для осуществления таможенных формальностей.
      </p>
    </td>
  </tr>
</table>

{# ======================================================= #}
{# БЛОК: ТРАНСПОРТНЫЙ ДОКУМЕНТ И СЧЕТ                     #}
{# Трекинг-код подтягивается из отправления автоматически     #}
{# ======================================================= #}
<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p class="big">Номер транспортного документа</p></td>
    <td valign="bottom" class="border-bottom full-width">
      <p class="space-text">
        {# Трекинг-код подтягивается из CRM автоматически #}
        <span class="big">{{ model.tracking_code }}</span>
        <span class="big bold italic">От.</span>
        <span class="big">{{ "now"|date("d.m.Y") }}г.</span>
      </p>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Счет</p></td>
    <td valign="bottom" class="border-bottom full-width">
      <p class="space-text">
        <span class="bold">б/н</span>
        <span class="bold italic">от.</span>
        <span>{{ "now"|date("d.m.Y") }}г.</span>
      </p>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr style="height: 11px;">
    <td valign="top">&nbsp;</td>
    <td valign="top" class="small text-center">(номер, дата)</td>
  </tr>
</table>

{# ======================================================= #}
{# БЛОК: СВЕДЕНИЯ ОБ ОТПРАВЛЕНИИ                         #}
{# Данные подтягиваются из отправления (shipment) автоматически #}
{# ======================================================= #}
<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Страна отправления (назначения)</p></td>
    <td valign="bottom" class="border-bottom full-width">
      {# Страна подтягивается из адреса доставки заказа #}
      <p>{{ model.shipping_address_country }}</p>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Отправитель (получатель)</p></td>
    <td valign="bottom" class="border-bottom full-width">
      {# Название отправителя подтягивается из отправления #}
      <p>{{ shipment.name }}</p>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Количество мест</p></td>
    <td valign="bottom" class="border-bottom full-width"><p>1</p></td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Общий вес (килограммов)</p></td>
    <td valign="bottom" class="border-bottom full-width">
      {# Вес подтягивается из отправления #}
      <p>{{ shipment.weight }} кг</p>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Общая таможенная стоимость</p></td>
    <td valign="bottom" class="border-bottom full-width">
      <p>
        {# Сумма всех товаров отправления: цена × количество #}
        {{ shipment.items|reduce((carry, item) => carry + (item.price * item.quantity), 0)|round(2) }}
        {{ shipment.currency }}
      </p>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Таможенный режим</p></td>
    <td valign="bottom" class="border-bottom full-width"><p class="bold italic">экспорт</p></td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Условия поставки</p></td>
    <td valign="bottom" class="border-bottom full-width">
      {# Условия поставки — заменить на свои если нужно #}
      <span style="background-color: yellow">CPT</span>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Характер сделки</p></td>
    <td valign="bottom" class="border-bottom full-width"><p></p></td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" colspan="2"><p>Разрешения уполномоченных органов (название, номер, дата)</p></td>
  </tr>
</table>

<br />

{# ======================================================= #}
{# БЛОК: ТАБЛИЦА ТОВАРОВ ОТПРАВЛЕНИЯ                       #}
{# Перебираем shipment.items — товары из отправления,      #}
{# не из заказа (model.products)                           #}
{# thead повторяется автоматически на каждой странице       #}
{# (CSS: display:table-header-group)                       #}
{# Строки не разрываются между страницами                    #}
{# (CSS: page-break-inside:avoid на tbody tr)               #}
{# ======================================================= #}
<table class="goods-table">
  <thead>
    <tr>
      <th><p>Номер товара</p></th>
      <th><p>Наименование товара, его обычное торговое описание</p></th>
      <th><p>Код товара согласно УКТВЭД</p></th>
      <th><p>Стоимость товара в валюте Украины или иностранной валюте</p></th>
    </tr>
  </thead>
  <tbody>
    {% for item in shipment.items %}
    <tr>
      <td><p class="text-center">{{ loop.index }}</p></td>
      {# Описание товара обрезаем до 35 символов #}
      <td><p>{{ item.description_local|slice(0, 35) }}</p></td>
      <td><p class="text-center">{{ item.hs_code }}</p></td>
      <td><p class="text-center">{{ item.price }} {{ shipment.currency }}</p></td>
    </tr>
    {% endfor %}
  </tbody>
</table>

{# ======================================================= #}
{# БЛОК: ПОДПИСИ — декларант и таможенный орган            #}
{# Замените ФИО декларанта (выделено желтым)                #}
{# ======================================================= #}
<table class="signature-table">
  <tr>
    <td valign="bottom">Декларант или уполномоченное им лицо</td>
    <td class="border-bottom"></td>
    <td valign="bottom" class="text-center border-bottom">
      {# ФИО декларанта — заменить на свое #}
      <span style="background-color: yellow">Фамилия Имя Отчество</span>
    </td>
  </tr>
  <tr>
    <td></td>
    <td valign="top" class="text-center">(подпись)</td>
    <td valign="top" class="text-center">(инициалы, фамилия)</td>
  </tr>
  <tr>
    <td class="border-bottom"></td>
    <td class="border-bottom"></td>
    <td valign="bottom" class="border-bottom"></td>
  </tr>
  <tr>
    <td valign="top" class="text-center">(наименование должности должностного лица таможенного органа)</td>
    <td valign="top" class="text-center">(подпись)</td>
    <td valign="top" class="text-center">(инициалы, фамилия)</td>
  </tr>
</table>

{# ======================================================= #}
{# БЛОК: МЕСТО ДЛЯ ПЕЧАТИ                                   #}
{# ======================================================= #}
<table class="stamp-table">
  <tr>
    <td>Место для оттиска личной номерной печати</td>
  </tr>
</table>

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

  html, body {
    height: 100%;
  }

  body {
    color: #333;
    font-size: 12px;
    line-height: 1.3;
    min-width: 320px;
    font-family: 'Times New Roman', sans-serif;
  }

  img {
    border-style: none;
  }

  @page {
    size: auto;
    margin: 5mm 10mm;
  }

  .italic { font-style: italic; }
  .bold   { font-weight: bold; }
  .big    { font-size: 14px; }

  .small {
    font-size: 11px;
    line-height: 11px;
  }

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

  .space-text span {
    margin-right: 10px;
  }

  .nowrap    { white-space: nowrap; }

  .full-width {
    width: 90%;
    padding-left: 20px;
  }

  .border-bottom {
    border-bottom: 1px solid black;
  }

  /* =============================================
     ШАПКА ДОКУМЕНТА
     ============================================= */
  .head-table {
    width: 100%;
  }

  .head-table td {
    height: 22px;
    padding-right: 5px;
    padding-left: 5px;
  }

  .head-table td:first-child { width: 40%; }
  .head-table td:last-child  { width: 60%; }

  /* =============================================
     СТРОКИ С ДАННЫМИ ОТПРАВЛЕНИЯ
     ============================================= */
  .second-table {
    width: 100%;
  }

  .second-table td {
    height: 25px;
    padding-right: 5px;
    padding-left: 5px;
  }

  .second-table td.nowrap    { padding-right: 20px; }
  .second-table td.full-width { padding-left: 20px; }

  /* =============================================
     ТАБЛИЦЯ ТОВАРОВ
     ============================================= */
  .goods-table {
    width: calc(100% - 2px);
    border-collapse: collapse;
    border: 1px solid black;
    margin-bottom: 20px;
  }

  .goods-table th,
  .goods-table td {
    border: 1px solid black;
    padding: 5px;
  }

  .goods-table th:nth-child(1),
  .goods-table td:nth-child(1) { width: 6%; }

  .goods-table th:nth-child(2),
  .goods-table td:nth-child(2) { width: 47%; }

  .goods-table th:nth-child(3),
  .goods-table td:nth-child(3) { width: 20%; }

  .goods-table th:nth-child(4),
  .goods-table td:nth-child(4) { width: 16%; }

  .goods-table th { font-weight: bold; }

  /* =============================================
     РАЗБИВКА НА СТРАНИЦЫ
     Заголовок таблицы товаров повторяется
     автоматически на каждой странице.
     Строки товаров не разрываются между страницами.
     ============================================= */
  .goods-table thead {
    display: table-header-group;
  }

  .goods-table tbody tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* =============================================
     ПОДПИСИ
     ============================================= */
  .signature-table {
    width: 100%;
    border-spacing: 10px 0;
    border-collapse: separate;
    margin-bottom: 20px;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .signature-table td {
    height: 25px;
    padding-right: 5px;
    padding-left: 5px;
  }

  .signature-table td:nth-child(1) { width: 45%; }
  .signature-table td:nth-child(2) { width: 15%; }
  .signature-table td:nth-child(3) { width: 40%; }

  /* =============================================
     МЕСТО ДЛЯ ПЕЧАТИ
     ============================================= */
  .stamp-table {
    width: 30%;
    border: solid 1px black;
    text-align: center;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .stamp-table td {
    padding: 30px;
  }
</style>
</html>
```

{% endtab %}
{% endtabs %}

### 6. Proforma Invoice для отправки зарубеж (таможенный инвойс)

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

{% tab title="Код шаблона" %}
**Тип шаблона:** Доставка

```
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="KeyCRM">
    <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="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<div class="bold text-center">PROFORMA INVOICE</div>
<div>
    <div class="margin"></div>
    <table class="head-table mt-10 mb-10">
        <tbody>
        <tr>
            <td>DATE (дата)</td>
            <td class="text-center">{{ "now"|date("m/d/Y") }} / {{ "now"|date("d/m/Y") }}</td>
        </tr>
        <tr>
            <td>TRK.NO. (номер накладной UPS)</td>
            <td class="text-center">{{ model.tracking_code }}</td>
        </tr>
        </tbody>
    </table>
</div>
<div class="clean-float"><span class="bold">SHIPPER</span> (грузоотправитель)</div>
<table class="second-table">
    <tbody>
    <tr>
        <td>Company name (название компании)</td>
        <td>
            Individual entrepreneur <span style="background-color: yellow">FIRST_NAME LAST_NAME</span>/
            ИП <span style="background-color: yellow">ФАМИЛИЯ ИМЯ ОТЧЕСТВО</span>
        </td>
    </tr>
    <tr>
        <td>TAX ID (ИНН)</td>
        <td><span style="background-color: yellow">< ИНН ></span></td>
    </tr>
    <tr>
        <td>Contact person (контактное лицо)</td>
        <td>
            <span style="background-color: yellow">FIRST_NAME LAST_NAME</span>/
            <span style="background-color: yellow">ФАМИЛИЯ ИМЯ ОТЧЕСТВО</span>
        </td>
    </tr>
    <tr>
        <td>Address (адрес)</td>
        <td>
            <span style="background-color: yellow">Kiev st. Khreshchatyk, 1/г.Киев ул. Хрещатик, 1</span>
        </td>
    </tr>
    <tr>
        <td>City (город)</td>
        <td><span style="background-color: yellow">Kyiv/Киев</span></td>
    </tr>
    <tr>
        <td>Postal code (почтовый индекс)</td>
        <td>{{ shipment.address.postal_code }}</td>
    </tr>
    <tr>
        <td>Country (страна)</td>
        <td style="background-color: yellow">Ukraine/Украина</td>
    </tr>
    <tr>
        <td>Phone/fax nr. (телефон/факс)</td>
        <td>{{ shipment.address.phone }}</td>
    </tr>
    </tbody>
</table>
<div class="mt-10"><span class="bold">SHIP TO</span> (грузополучатель)</div>
<table class="second-table">
    <tbody>
    <tr>
        <td>Company name (название компании)</td>
        <td>{{ shipment.name }}</td>
    </tr>
    <tr>
        <td>Contact person (контактное лицо)</td>
        <td>{{ shipment.name }}</td>
    </tr>
    <tr>
        <td>Address (адрес)</td>
        <td>{{ model.shipping_receive_point }}</td>
    </tr>
    <tr>
        <td>City (город)</td>
        <td>{{ model.shipping_address_city }}</td>
    </tr>
    <tr>
        <td>Postal code (почтовый индекс)</td>
        <td>{{ model.shipping_address_zip }}</td>
    </tr>
    <tr>
        <td>Country (страна)</td>
        <td>{{ model.shipping_address_country }}</td>
    </tr>
    <tr>
        <td>Phone/fax nr. (телефон/факс)</td>
        <td>{{ shipment.phone }}</td>
    </tr>
    </tbody>
</table>

<table class="goods-table mt-10">
    <tbody>
    <tr class="text-center">
        <td>
            <div class="bold">No. Units</div>
            <div>Кол-во</div>
        </td>
        <td>
            <div class="bold">Complete description of goods</div>
            <div>Наименование груза</div>
        </td>
        <td>
            <div class="bold">Harmonized tariff code</div>
            <div>Код по ТНВЭД</div>
        </td>
        <td>
            <div class="bold">Country of origin</div>
            <div>Страна происхождения</div>
        </td>
        <td>
            <div class="bold">Unit Value</div>
            <div>Цена за единицу</div>
        </td>
        <td>
            <div class="bold">Total Value</div>
            <div>Общая стоимость</div>
        </td>
    </tr>
    {% for item in shipment.items %}
    <tr>
        <td class="text-center">{{ item.quantity }}</td>
        <td>{{ item.description_eng|slice(0, 35) }} / {{ item.description_local|slice(0, 35) }}</td>
        <td>{{ item.hs_code }}</td>
        <td>Ukraine/Украина</td>
        <td class="text-center">{{ item.price }} {{ shipment.currency }}</td>
        <td class="text-center">{{ item.price * item.quantity }} {{ shipment.currency }}</td>
    </tr>
    {% endfor %}
    <tr>
        <td colspan="5">TOTAL VALUE</td>
        <td class="text-center">
            {{ shipment.items|reduce((carry, item) => carry + (item.price * item.quantity), 0)|round(2) }}
            {{ shipment.currency }}
        </td>
    </tr>
    </tbody>
</table>

<div style="padding: 0 40px;">
    <table class="second-table no-border">
        <tbody>
        <tr>
            <td class="nowrap">
                <span class="bold mr-10">Total weight, kg</span>
                <span>(Общий вес)</span>
            </td>
            <td class="full-width border-bottom">
                {{ shipment.weight }}
            </td>
        </tr>
    </table>
    <table class="second-table no-border">
        <tr>
            <td class="nowrap">
                <span class="bold mr-10">Number of packages</span>
                <span>(Количество  пакетов)</span>
            </td>
            <td class="full-width border-bottom">
                1
            </td>
        </tr>
    </table>
    <table class="second-table no-border">
        <tr>
            <td class="nowrap">
                <span class="bold mr-10">Reason for export</span>
                <span>(Цель экспорта)</span>
            </td>
            <td class="full-width border-bottom">
                <span style="background-color: yellow">SALE / ПРОДАЖА</span>
            </td>
        </tr>
        </tbody>
    </table>
    
    <p class="mt-10">I declare that the above information is true and correct to the best of my knowledge.</p>
</div>

<div class="middle">
    <div>SIGNATURE</div>
    <div>COMPANY STAMP</div>
</div>
</body>
<style>
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        font-family: 'Times New Roman', Verdana, Arial, sans-serif;
        font-size: 14px;
        padding: 0;
        margin: 0;
    }
    
    img {
        border-style: none;
    }

    .italic {
        font-style: italic;
    }

    .bold {
        font-weight: 600;
    }

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

    .space-text span{
        margin-right: 10px;
    }

    .border-bottom {
        border-bottom: 1px solid black !important;
    }

    .clean-float {
        clear: right;
    }

    .mt-10 {
        margin-top: 10px;
    }

    .mb-10 {
        margin-bottom: 10px;
    }

    .mr-10 {
        margin-right: 10px;
    }

    .middle {
        margin-top: 50px;
        margin-left: 50%;
    }
    
    .nowrap {
        white-space: nowrap;
    }

    .second-table.no-border td{
        border: none;
    }

    .margin {
        display: inline-block;
        width: 28%;
    }

    /*head-table*/
    .head-table {
        display: inline-table;
        width: 70%;
        border-collapse: collapse;
    }

    .head-table td {
        height: 18px;
        padding: 0 5px;
        border: solid 1px black;
        line-height: 1;
    }

    .head-table td:first-child {
        width: 60%;
    }

    .head-table td:last-child {
        width: 40%;
    }

    /*second-table*/
    .second-table {
        width: 100%;
        border-collapse: collapse;
    }

    .second-table .slim-row td {
        height: 10px;
    }

    .second-table td, .goods-table td {
        height: 18px;
        padding-right: 5px;
        border: solid 1px black;
        padding-left: 5px;
    }
    
    .second-table td:first-child {
        width: 40%;
    }

    .second-table td:last-child {
        width: 60%;
    }

    .second-table td.nowrap {
        padding-right: 20px;
        width: auto;
    }

    .second-table td.full-width {
        padding-left: 20px;
        width: 90%;
    }

    /*goods-table*/
    .goods-table {
        width: 100%;
        border: solid 1px black;
        border-collapse: collapse;
        margin-bottom: 20px;
    }

    .goods-table td:nth-child(1) {
        width: 6%;
    }

    .goods-table td:nth-child(2) {
        width: 42%;
    }

    .goods-table td:nth-child(3) {
        width: 13%;
    }

    .goods-table td:nth-child(4) {
        width: 13%;
    }

    .goods-table td:nth-child(5) {
        width: 13%;
    }

    .goods-table td:nth-child(6) {
        width: 13%;
    }

    .goods-table td {
        padding: 5px;
    }
</style>
</html>
```

{% endtab %}
{% endtabs %}


# Для воронок

Примеры шаблонов документов для воронок на русском языке.

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

* [Как использовать шаблоны из библиотеки и создавать свои шаблоны документов](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 %}


# Для складских операций

Примеры шаблонов документов для складских операций на русском языке.

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

* [Как использовать шаблоны из библиотеки и создавать свои шаблоны документов](https://help.keycrm.app/ru/products-and-warehouse-management/kak-sozdat-novyi-shablon-dokumienta-dlia-skladu-dlia-piechati-dlia-administratorov);
* [Справочник доступных тегов, функций и фильтров Twig](https://help.keycrm.app/ru/keycrm-api/spravochnik-dostupnykh-tieghov-funktsii-i-fil-trov-twig);
* [Примеры решений и ответы на частые вопросы](https://help.keycrm.app/ru/products-and-warehouse-management/voprosy-i-otviety-faq-po-sozdaniiu-dokumientov-dlia-skladskikh-opieratsii).

### 1. Оприходование

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

{% tab title="Код шаблона" %}
**Тип шаблона:** Складские операции.

```
<!doctype html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <title>Оприходование товаров</title>
</head>
<body>

<div class="container">

    <!-- Заголовок -->
    <h2 class="text-center">АКТ ОПРИХОДОВАНИЯ ТОВАРОВ №: {{ model.id }}</h2>

    <br>

    <!-- Демо реквизиты компании -->
    <table class="width100">
        <tr>
            <td valign="top" class="label" style="width:50%">
                <span style="background-color: yellow">Поставщик: Ваша компания</span><br />
                <span style="background-color: yellow">ФЛП / ООО</span><br />
                <span style="background-color: yellow">г. Киев, ул. Примерная, 1</span><br />
                <span style="background-color: yellow">тел.: (000)000-00-00</span><br />
            </td>

            <td valign="top">
                <strong>Дата:</strong> {{ model.created_at|date("d.m.Y H:i") }}<br>
                <strong>Тип операции:</strong> {{ model.event }}<br>
                <strong>Менеджер:</strong> {{ model.manager }}<br>
                <strong>Склад:</strong> {{ model.destination }}
            </td>
        </tr>
    </table>

    {% if model.comment %}
        <br>
        <strong>Комментарий:</strong> {{ model.comment }}
    {% endif %}

    <br><br>

    <!-- Таблица товаров -->
    <table class="width100 border">
        <thead>
        <tr>
            <th>№</th>
            <th>Изображение</th>
            <th>Артикул</th>
            <th>Название товара</th>
            <th>Закупочная цена</th>
            <th>Количество</th>
            <th>Сумма закупки</th>
        </tr>
        </thead>
        <tbody>

        {% set total = 0 %}
        {% set total_qty = 0 %}
        {% set currency = model.inventories[0].currency_code ?? 'UAH' %}

        {% for key, inventory in model.inventories %}
            {% set row_sum = inventory.quantity * inventory.price %}
            {% set total = total + row_sum %}
            {% set total_qty = total_qty + inventory.quantity %}

            <tr>
                <td class="text-center">{{ key + 1 }}</td>
                <td class="text-center"><img src="{{ inventory.offer_picture }}" style="width: 60px;"></td>
                <td class="text-center">{{ inventory.offer_sku }}</td>
                <td class="text-center">{{ inventory.product_name }}</td>
                <td class="text-center">
                    {{ inventory.price|format_currency(currency, locale='uk') }}
                </td>
                <td class="text-center">{{ inventory.quantity }}</td>
                <td class="text-center">
                    {{ row_sum|format_currency(currency, locale='uk') }}
                </td>
            </tr>
        {% endfor %}

        </tbody>

        <!-- Итоги -->
<tfoot>
<tr>
    <td colspan="5" class="text-right"><strong>Итого:</strong></td>
    <td class="text-center"><strong>{{ total_qty }} {{ model.inventories[0].product_unit_type ?? '' }}</strong></td>
    <td class="text-center">
        <strong>{{ total|format_currency(currency, locale='uk') }}</strong>
    </td>
</tr>
</tfoot>
    </table>

    <br><br>

<!-- Дополнительный итог -->
   <p>
    <strong>Всего позиций:</strong> {{ model.inventories|length }} <br>
    
    <strong>Общее количество:</strong> 
    {{ total_qty }} 
    {{ model.inventories[0].product_unit_type ?? '' }} <br>
    
    <strong>Общая сумма закупки:</strong> 
    {{ total|format_currency(currency, locale='uk') }}
</p>

    <br><br>

    <!-- Подписи -->
    <table class="width100">
        <tr>
            <td>Принял: _______________________</td>
            <td class="text-right">Подпись: _______________________</td>
        </tr>
    </table>

</div>

</body>

<style>
    body {
        font-family: sans-serif;
        font-size: 14px;
    }

    .container {
        width: 100%;
    }

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

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

    .label {
        font-weight: bold;
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }

    th, td {
        border: 1px solid #000;
        padding: 6px;
    }

    th {
        background: #eee;
    }

    .border {
        border: 2px solid #000;
    }
</style>

</html>
```

{% endtab %}
{% endtabs %}

### 2. Перемещение

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

{% tab title="Код шаблона" %}
**Тип шаблона:** Складские операции.

{% code fullWidth="true" %}

```
<!doctype html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <title>Перемещение товаров</title>
</head>
<body>

<div class="container">

    <!-- Заголовок -->
    <h2 class="text-center">
        НАКЛАДНАЯ ПЕРЕМЕЩЕНИЯ №: {{ model.id }}
    </h2>

    <br>

    <!-- Демо реквизиты -->
    <table class="width100">
        <tr>
            <td valign="top" class="label" style="width:50%">
                <span style="background-color: yellow">Ваша компания</span><br />
                <span style="background-color: yellow">ФЛП / ООО</span><br />
                <span style="background-color: yellow">г. Киев, ул. Примерная, 1</span><br />
                <span style="background-color: yellow">тел.: (000)000-00-00</span><br />
            </td>

            <td valign="top">
                <strong>Дата:</strong> {{ model.created_at|date("d.m.Y H:i") }}<br>
                <strong>Менеджер:</strong> {{ model.manager }}<br>
                <strong>Тип:</strong> {{ model.event }}
            </td>
        </tr>
    </table>

    <br>

    <!-- Склады -->
    <table class="width100 border">
        <tr>
            <td>
                <strong>Склад-отправитель:</strong><br>
                {{ model.target }}
            </td>
            <td>
                <strong>Склад-получатель:</strong><br>
                {{ model.destination }}
            </td>
        </tr>
    </table>

    {% if model.comment %}
        <br>
        <strong>Комментарий:</strong> {{ model.comment }}
    {% endif %}

    <br><br>

    <!-- Таблица товаров -->
    <table class="width100 border">
        <thead>
        <tr>
            <th>№</th>
            <th>Изображение</th>
            <th>Артикул</th>
            <th>Название товара</th>
            <th>Ед.</th>
            <th>Количество (отправлено)</th>
            <th>Количество (получено)</th>
            <th>Цена</th>
            <th>Сумма</th>
        </tr>
        </thead>
        <tbody>

        {% set total = 0 %}
        {% set total_qty = 0 %}
        {% set currency = model.inventories[0].currency_code ?? 'UAH' %}

        {% for key, inventory in model.inventories %}
            {% set row_sum = inventory.quantity * inventory.price %}
            {% set total = total + row_sum %}
            {% set total_qty = total_qty + inventory.quantity %}

            <tr>
                <td class="text-center">{{ key + 1 }}</td>
                <td class="text-center">
                    <img src="{{ inventory.offer_picture }}" style="width: 50px;">
                </td>
                <td class="text-center">{{ inventory.offer_sku }}</td>
                <td>{{ inventory.product_name }}</td>
                <td class="text-center">{{ inventory.product_unit_type }}</td>

                <!-- отправлено -->
                <td class="text-center">
                    {{ inventory.quantity }}
                </td>

                <!-- получено (пустое для заполнения) -->
                <td class="text-center">
                    __________
                </td>

                <td class="text-right">
                    {{ inventory.price|format_currency(currency, locale='uk') }}
                </td>

                <td class="text-right">
                    {{ row_sum|format_currency(currency, locale='uk') }}
                </td>
            </tr>
        {% endfor %}

        </tbody>

        <!-- Итоги -->
        <tfoot>
        <tr>
            <td colspan="5" class="text-right"><strong>Итого:</strong></td>
            <td class="text-center">
                <strong>{{ total_qty }}</strong>
            </td>
            <td></td>
            <td></td>
            <td class="text-right">
                <strong>{{ total|format_currency(currency, locale='uk') }}</strong>
            </td>
        </tr>
        </tfoot>
    </table>

    <br><br>

    <!-- Дополнительный итог -->
    <p>
        <strong>Всего позиций:</strong> {{ model.inventories|length }} <br>

        <strong>Отправлено:</strong>
        {{ total_qty }} {{ model.inventories[0].product_unit_type ?? '' }} <br>

        <strong>Сумма товаров:</strong>
        {{ total|format_currency(currency, locale='uk') }}
    </p>

    <br><br>

    <!-- Подписи -->
    <table class="width100">
        <tr>
            <td>
                Отгрузил (склад-отправитель): <br><br>
                _______________________
            </td>

            <td>
                Принял (склад-получатель): <br><br>
                _______________________
            </td>
        </tr>
    </table>

</div>

</body>

<style>
    body {
        font-family: sans-serif;
        font-size: 14px;
    }

    .container {
        width: 100%;
    }

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

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

    .label {
        font-weight: bold;
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }

    th, td {
        border: 1px solid #000;
        padding: 6px;
    }

    th {
        background: #eee;
    }

    .border {
        border: 2px solid #000;
    }
</style>

</html>
```

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

### 3. Инвентаризация

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

{% tab title="Код шаблона" %}
**Тип шаблона:** Складские операции.

```
<!doctype html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <title>Инвентаризация</title>
</head>
<body>

<div class="container">

    <!-- Заголовок -->
    <h2 class="text-center">
        АКТ ИНВЕНТАРИЗАЦИИ №: {{ model.id }}
    </h2>

    <br>

    <!-- Демо реквизиты -->
    <table class="width100">
        <tr>
            <td valign="top" class="label" style="width:50%">
                <span style="background-color: yellow">Ваша компания</span><br />
                <span style="background-color: yellow">ФЛП / ООО</span><br />
                <span style="background-color: yellow">г. Киев, ул. Примерная, 1</span><br />
                <span style="background-color: yellow">тел.: (000)000-00-00</span><br />
            </td>

            <td valign="top">
                <strong>Дата:</strong> {{ model.created_at|date("d.m.Y H:i") }}<br>
                <strong>Менеджер:</strong> {{ model.manager }}<br>
                <strong>Склад:</strong> {{ model.destination }}<br>
                <strong>Тип:</strong> {{ model.event }}
            </td>
        </tr>
    </table>

    {% if model.comment %}
        <br>
        <strong>Комментарий:</strong> {{ model.comment }}
    {% endif %}

    <br><br>

    <!-- Таблица -->
    <table class="width100 border">
        <thead>
        <tr>
            <th>№</th>
            <th>Изображение</th>
            <th>Артикул</th>
            <th>Название товара</th>
            <th>Ед.</th>
            <th>Было в системе</th>
            <th>Фактически</th>
            <th>Разница</th>
        </tr>
        </thead>
        <tbody>

       {% set total_system = 0 %}
{% set total_fact = 0 %}
{% set total_diff = 0 %}

{% for key, inventory in model.inventories %}

    {% set system_qty = inventory.quantity_before ? inventory.quantity_before : 0 %}

    {# quantity = это разница #}
    {% set diff = inventory.quantity ? inventory.quantity : 0 %}

    {# фактический остаток = было + разница #}
    {% set fact_qty = system_qty + diff %}

    {% set total_system = total_system + system_qty %}
    {% set total_fact = total_fact + fact_qty %}
    {% set total_diff = total_diff + diff %}

    <tr>
        <td class="text-center">{{ key + 1 }}</td>

        <td class="text-center">
            <img src="{{ inventory.offer_picture }}" style="width: 50px;">
        </td>

        <td class="text-center">{{ inventory.offer_sku }}</td>

        <td>
            {{ inventory.product_name }}
        </td>

        <td class="text-center">{{ inventory.product_unit_type }}</td>

        <!-- было -->
        <td class="text-center">
            {{ system_qty }}
        </td>

        <!-- фактически -->
        <td class="text-center">
            {{ fact_qty }}
        </td>

        <!-- разница -->
        <td class="text-center">
            {% if diff > 0 %}
                +{{ diff }}
            {% else %}
                {{ diff }}
            {% endif %}
        </td>
    </tr>

{% endfor %}

        </tbody>

        <!-- Итоги -->
        <tfoot>
        <tr>
            <td colspan="5" class="text-right"><strong>Итого:</strong></td>

            <td class="text-center">
                <strong>{{ total_system }}</strong>
            </td>

            <td class="text-center">
                <strong>{{ total_fact }}</strong>
            </td>

            <td class="text-center">
                <strong>
                    {% if total_diff > 0 %}
                        +{{ total_diff }}
                    {% else %}
                        {{ total_diff }}
                    {% endif %}
                </strong>
            </td>
        </tr>
        </tfoot>
    </table>

    <br><br>

    <!-- Дополнительный итог -->
    <p>
        <strong>Всего позиций:</strong> {{ model.inventories|length }} <br>

        <strong>Было в системе:</strong>
        {{ total_system }} {{ model.inventories[0].product_unit_type ?? '' }} <br>

        <strong>Фактически:</strong>
        {{ total_fact }} {{ model.inventories[0].product_unit_type ?? '' }} <br>

        <strong>Разница:</strong>
        {% if total_diff > 0 %}
            +{{ total_diff }}
        {% else %}
            {{ total_diff }}
        {% endif %}
    </p>

    <br><br>

    <!-- Подписи -->
    <table class="width100">
        <tr>
            <td>
                Провёл инвентаризацию: <br><br>
                _______________________
            </td>

            <td>
                Проверил: <br><br>
                _______________________
            </td>
        </tr>
    </table>

</div>

</body>

<style>
    body {
        font-family: sans-serif;
        font-size: 14px;
    }

    .container {
        width: 100%;
    }

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

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

    .label {
        font-weight: bold;
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }

    th, td {
        border: 1px solid #000;
        padding: 6px;
    }

    th {
        background: #eee;
    }

    .border {
        border: 2px solid #000;
    }
</style>

</html>
```

{% endtab %}
{% endtabs %}