Tworzenie szablonu dokumentu dla interesu lub klienta
Utworzono:
2017-06-14
Ostatnia aktualizacja: 2023-02-08
Ostatnia aktualizacja: 2023-02-08
Liczba odwiedzin posta: 3448
Sugester pozwala wygenerować dowolne dokumenty (np. oferty, umowy itp) bazujące na danych wprowadzonych w kliencie lub interesie (lub na liście klientów lub liście interesów). Aby wygenerować dokument wchodzimy na kartę klienta lub interesu (lub na listy klientów/interesów) a następnie w górnym menu kontekstowym klikamy "Własny szablon wydruku"
Korzystając z przykładowych zmiennych dostępnych na stronie tworzenia szablonu można stworzyć własny szablon dokumentu.
Klucz do zbudowania poprawnego tagu z poniższych zmiennych wygląda następująco:
(w przypadku klienta)
Korzystając np. z powyższych zmiennych tagi tworzymy następująco:
By wyświetlić email klienta wpisujemy przedrostek "client" dodajemy kropkę, wpisujemy "email". Wszystko otaczamy podwójnymi nawiasami i uzyskujemy tag {{client.name}}, który docelowo wyświetli nam email klienta.
Aby wyświetlić dodatkowe pole do klienta korzystamy z tagów string1 (i kolejne cyfry) uzyskując np {{client.string10}}
(w przypadku interesu)
Wygląda to analogicznie czyli: wpisujemy przedrostek "deal" dodajemy kropkę, wpisujemy np "name". Wszystko otaczamy podwójnymi nawiasami i uzyskujemy tag {{deal.name}}, który docelowo wyświetli nam nazwę interesu.
Jeżeli chcemy generować dokument (np raport) oparty na listach klientów lub interesów (w polu rodzaj mamy wybraną opcję CLIENTS lub DEALS)- aby uzyskać kolejne pozycje listy korzystamy z poniższego przykładu
Uwaga! Lista wszystkich zmiennych, z których możesz korzystać znajduje się na dole w oknie tworzenia nowego szablonu dokumentu
Korzystając z przykładowych zmiennych dostępnych na stronie tworzenia szablonu można stworzyć własny szablon dokumentu.
1. Tworzenie własnego szablonu dokumentu
Klucz do zbudowania poprawnego tagu z poniższych zmiennych wygląda następująco:
(w przypadku klienta)
"client": {
"id": 49,
"name": "testowy klient",
"first_name": "Jan",
"email": "testowy@mail.io",
"last_name": "Testowy",
"string1": Zielony,
Korzystając np. z powyższych zmiennych tagi tworzymy następująco:
By wyświetlić email klienta wpisujemy przedrostek "client" dodajemy kropkę, wpisujemy "email". Wszystko otaczamy podwójnymi nawiasami i uzyskujemy tag {{client.name}}, który docelowo wyświetli nam email klienta.
Aby wyświetlić dodatkowe pole do klienta korzystamy z tagów string1 (i kolejne cyfry) uzyskując np {{client.string10}}
(w przypadku interesu)
"deal": {
"id": 10000,
"name": "budowa domu",
Wygląda to analogicznie czyli: wpisujemy przedrostek "deal" dodajemy kropkę, wpisujemy np "name". Wszystko otaczamy podwójnymi nawiasami i uzyskujemy tag {{deal.name}}, który docelowo wyświetli nam nazwę interesu.
Jeżeli chcemy generować dokument (np raport) oparty na listach klientów lub interesów (w polu rodzaj mamy wybraną opcję CLIENTS lub DEALS)- aby uzyskać kolejne pozycje listy korzystamy z poniższego przykładu
{{#each clients}}
<h2>name: {{name}}</h2>
E-mail: {{email}}
First name: {{first_namel}}
Last name: {{last_namel}}
{{/each}}
Uwaga! Lista wszystkich zmiennych, z których możesz korzystać znajduje się na dole w oknie tworzenia nowego szablonu dokumentu
2. Gotowy skrypt szablonu i kod CSS przykładowych szablonów dokumentów
W naszym artykule Szablony dokumentów opisaliśmy dwa typy przykładowych szablonów dokumentów - Umowy i Oferty, jakie możesz stworzyć w Sugesterze. Wykorzystaj poniższy kod, aby dodać je do swojego konta.
Szablon dokumentu OFERTA
-
Treść:
<div class="print_template"> <div class="template_outline"> <table class="clean to_half"> <tbody> <tr> <td> <p><span id="document_type">Oferta</span><br> <span id="document_number">{{deal.string4}}</span></p> <p>Data: {{deal.date}}<br></p> </td> <td class="logo_inside"> <div id="logo"> <div id="logo_place" style="display:inline-block; position:relative;"></div> </div> </td> </tr> </tbody> </table> <hr> <table class="clean split_half"> <thead> <tr> <th><span class="seller">Oferta stworzona przez</span></th> <th><span class="buyer">Oferta dla</span></th> </tr> </thead> <tbody> <tr> <td> <p> <strong>{{company_name}}</strong><br> ul. {{company_street}} {{company_street_number}}<br> {{company_postal_code}} {{company_city}}<br> NIP: {{company_tax_no}} </p> </td> <td id="buyer"> <p> <strong>{{client.name}}</strong><br/> {{client.street}}<br/> {{client.post_code}} {{client.city}}<br/> {{client.first_name}} {{client.last_name}} </p> </td> </tr> </tbody> </table> <div> <br> <p>W odpowiedzi na zapytanie z dnia {{deal.date}} przedstawiam poniżej ofertę naszej firmy</p><br> </div> <table class="main_templ_table" id="pos_table"> <thead> <tr> <th>LP</th> <th>Nazwa towaru / usługi</th> <th>Cena</th> <th>Ilość</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>{{deal.name}}<span class="item_description" > {{deal.description}}</span></td> <td>{{deal.price}}</td> <td>{{deal.integer1}}</td> </tr> </tbody> </table> <div class="clear"></div> <div style="page-break-inside:avoid"> <div class="additional-info"> <br> <br> <p><strong>Warunki dostawy:</strong> <span> {{deal.string1}} </span></p><br> <p><strong>Warunki płatności:</strong> <span> {{deal.string2}} </span></p><br> <p><strong>Warunki upustu:</strong> <span> {{deal.string3}} </span></p><br> <p><strong>Oferta ważna do dnia:</strong> <span> {{deal.date1}} </span></p> </div> <table class="full_width" style="margin-top:100px"> <tbody> <tr> <td class="text_center half_width buyer_person" style="width:50%; text-align: center;"> {{client.first_name}} {{client.last_name}} </td> <td class="text_center half_width seller_person" style="width:50%; text-align: center;"> {{deal.responsible_name}} </td> </tr> </tbody> </table> </div><!-- /page break --> <br class="clear noprint"> </div><!-- template_outline --> </div>
-
Kod CSS:
@media all { p { margin-bottom: 8px; } body {} body.pdf-printing .print_template { padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; } .print_template { line-height: 12px; background-color: white; margin: auto auto 20px; min-width: 700px; overflow: visible; width: auto; border: 1px solid #ddd; box-shadow: 1px 3px 5px 0 rgba(0, 0, 0, 0.75); padding: 20px 20px 0; font-family: helvetica, "lucida grande", "lucida sans unicode"; font-size: 12px; } .description_long { font-size: 8pt; font-family: helvetica, "lucida grande", "lucida sans unicode"; } #document_type { font-size: 12pt; line-height: 1.25em; font-weight: bold; } #document_number { font-size: 26pt; line-height: 1em; font-weight: normal; } /*@page{size:A4 ;}*/ .clear { clear: both; } table p { margin-bottom: 0.5em; line-height: 1.4em; } .split_three strong { display: block; margin-bottom: 5px; } .split_three br { display: none } #custom_stamp { background-position: 96% 87% !important } /*TABELE*/ table {} tr { page-break-inside: avoid; } table { page-break-after: auto } tr { page-break-inside: avoid; page-break-after: auto } td { page-break-inside: avoid; page-break-after: auto } thead { display: table-header-group } .nobreak { page-break-inside: avoid; } table th, table td { margin: 0; padding: 0; } th.width0, td.width0 { min-width: 17px; width: 1%; white-space: nowrap } th.width1, td.width1 { width: 10%; min-width: 17px; } th.width2, td.width2 { width: 10%; min-width: 45px; } th.width3, td.width3 { min-width: 46px; width: 15%; } th.width4, td.width4 { width: 30%; min-width: 100px; } td.logo_inside, td.logo_inside { vertical-align: middle; text-align: center } td.logo_inside img { max-height: 187px; max-width: 250px; } td:empty { visibility: hidden; } table { border-collapse: collapse; empty-cells: hide; } html tr, html td { background-color: transparent; empty-cells: hide } table { margin: auto; clear: both; margin-top: 10px; border-collapse: collapse; empty-cells: hide; margin: 5px auto 5px auto; width: 100%; } table tr { vertical-align: top; } table, table th, table td { border: 0; background-color: transparent; text-align: left; vertical-align: top; } table.main_templ_table th, table.main_templ_table td, table.main_templ_table caption { text-align: right; border-collapse: collapse; border: 1px solid #d8d7d7; } table.main_templ_table th { font-weight: bold; background-color: #f1f1f1; border: 1px solid #bbbbbb; } table.main_templ_table th p, table td a { text-align: left; } table th { font-weight: bold; } table.to_right { float: right; width: 100%; } table.to_right th { text-align: right; } table.to_right td { width: 15%; text-align: right; } .split_half td { width: 50%; } .split_three td { width: 33%; } table.to_pay { margin: 40px auto 20px auto; background: transparent; } table.to_pay th, table.to_pay td { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } hr { margin: 10px auto; } .to_pay th { width: 120px; } .to_pay td, .to_pay th { padding: 10px 5px; } table th, table td { margin: 0; padding: 5px; } #exchange_currency { margin-top: 20px; } #exchange_currency td { border-top: 1px solid #ddd; padding-top: 10px !important; } #exchange_currency+table.clean.to_pay { margin-top: 0; } table td.empty { border: 0; } html body table tr:hover { background-color: transparent; } table.main_templ_table th.text_left, table.main_templ_table td.text_left, th.text_left, td.text_left { text-align: left; padding-left: 10px; } .number, .nowrap, td b, td.row1, td.row2, td.row3 { white-space: nowrap } th.width3+th.width1.nowrap { white-space: normal } html, body { margin: 0; padding: 0; } .nowrap, .no_wrap { white-space: nowrap !important; } .nowrap-lines { white-space: pre; } } @media print { body.pdf-printing .print_template, .print_template { padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; } @page :first { margin-top: 0in; margin-bottom: 0.5in; } @page { size: portrait; margin: 0in; padding: 0; margin-top: 0.5in; margin-bottom: 0.5in } .print_template { margin-top: 0.5in; margin-bottom: 0in; margin-left: 0.5in; margin-right: 0.5in; } table { page-break-inside: auto } td, tr { page-break-inside: avoid; page-break-after: auto } thead { display: table-header-group } tfoot { display: table-footer-group } .pull-right { float: right; } } @media screen { .print_template { width: 8.25in; } }
Szablon dokumentu UMOWA
-
Treść:
-
Kod CSS:
body.pdf-printing .print_template{padding:0!important;margin:0!important;border:0!important;box-shadow:none!important}.print_template{line-height:22px;background-color:#fff;margin:auto auto 20px;min-width:700px;overflow:visible;width:835px;border:1px solid #ddd;box-shadow:1px 3px 5px 0 rgba(0,0,0,0.75);padding:20px 20px 0;font-family:helvetica,"lucida grande","lucida sans unicode";font-size:12px}h1{padding-top:12pt;color:#000;font-weight:700;font-size:16pt;padding-bottom:3pt;font-family:"Arial";line-height:1;page-break-after:avoid;orphans:2;widows:2;text-align:center}h2{padding-top:0;color:#000;font-size:12pt;padding-bottom:3pt;font-family:"Arial";line-height:1;page-break-after:avoid;orphans:2;widows:2;text-align:center}.center{text-align:center}li{color:#000;font-size:12pt}p{margin:0;color:#000;font-size:12pt}.footer{margin-top:80px}table.signs_footer td{width:48%}table.signs_footer{width:100%}table.signs_footer td,table.signs_footer{border:0;text-align:center;padding:20px 0}
Szablon koperty C5 (dla pojedyńczego klienta):
-
<div class="template_outline">
<div id="seller"> <strong>{{../company_name}}</strong><br/> {{../company_street}} {{company_street_number}}<br /> {{../company_postal_code}} {{../company_city}} <br/>tel. {{../company_phone}} <br/>{{../company_email}} </div></div> <!-- template -->
-
Kod CSS:
body { font-family: arial, helvetica, "lucida grande", "lucida sans unicode"; } @media all { .template_outline { font-family: arial, helvetica, "lucida grande", "lucida sans unicode"; width: 16.2cm; height: 21.5cm; max-width: 16.2cm; max-height: 21.5cm; border: 1px dotted black; margin: auto; margin-top: 0px; font-size: 10pt; padding: 1cm; position: relative; } #seller { display: block; font-size: 7.5pt; line-height: 1.25em; -ms-transform: rotate(-90deg); /* IE 9 */ -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */ transform: rotate(-90deg); position: absolute; left: 0cm; top: 13.5cm; width: 8cm; height: 6cm; } #buyer { display: block; font-size: 13pt; line-height: 1.5em; font-weight: bold; -ms-transform: rotate(-90deg); /* IE 9 */ -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */ transform: rotate(-90deg); position: absolute; left: 8cm; top: 3cm; width: 9cm; height: 6cm; } #logo { display: block; border: 0px; max-width: 5cm; max-height: 1cm; margin-bottom: 0.2cm; } } @media print { @page { size: portrait; margin: 0in; padding: 0; margin-top: 1.4cm; margin-bottom: 0.5in } .template_outline { border: 0px !important; width: 14cm; height: 19cm; max-width: 14cm; max-height: 19cm; } #seller { left: 0cm; top: 12cm; } #buyer { left: 8cm; top: 3cm; } } @media screen { .template_outline { font-family: helvetica, "lucida grande", "lucida sans unicode"; height: 22.9cm; max-height: 22.9cm; } #seller { left: 0cm; top: 14.4cm; } #buyer { left: 8cm; top: 4.4cm; } } body.pdf-printing .template_outline { padding: 0!important; margin: 0!important; border: 0!important; box-shadow: none!important } body.pdf-printing .document-footer { display: none !important }
Szablon koperty C5 (dla listy klientów):
-
Kod CSS:
{{#each clients}}
<div class="template_outline"> <div id="seller"> <strong>{{../company_name}}</strong><br/> {{../company_street}} {{company_street_number}}<br /> {{../company_postal_code}} {{../company_city}} <br/>tel. {{../company_phone}} <br/>{{../company_email}} </div> <div id="buyer"> <strong>{{name}}</strong><br/> {{street}}<br/> {{post_code}} {{city}}<br/> <br/> <span style="font-size:12px">{{first_name}} {{last_name}}</span> </div> </div> <!-- template -->{{/each}}
- Kod CSS - taki sam jak w przypadku powyższym - koperta C5 dla pojedyńczego klienta
...
Zarządzaj całą swoją firmą w jednej aplikacji. Wypróbuj Sugester przez 30 dni za darmo!
Rozpocznij darmowy okres testowyPowrót
Dodaj komentarz