International
Last updated
Last updated
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/keycrm/images/keycrm-logo-blue-on-white.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: ____________________</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>
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>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>
