Tworzenie szablonu dokumentu dla interesu lub klienta

Utworzono: 2017-06-14
Ostatnia aktualizacja: 2017-08-10

Liczba odwiedzin posta: 554

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.


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

  1. 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>
    

     
  2. 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

  1. Treść:
    
    <div class="print_template">
        <div class="template_outline">
            <h1>Umowa numer .......</h1>
            <div class="paragraph center">
                Umowa na <strong>{{deal.name}}</strong><br>
                zawarta w dniu ............... w {{company_city}} pomiędzy:<br>
                <br>
                <strong>{{company_name}}</strong> z siedzibą w {{company_city}}, {{company_postal_code}} przy ul. {{company_street}} {{company_street_number}}, NIP: {{company_tax_no}}, zwanym dalej <strong>sprzedawcą</strong><br>
                a<br>
                <strong>{{client.name}}</strong> z siedzibą w {{client.city}}, {{client.post_code}} przy ul. {{client.street}}, NIP: {{company_tax_no}}, reprezentowanym przez {{client.first_name}} {{client.last_name}}, zwanym dalej <strong>zamawiającym</strong>.<br>
                <br>
                <br>
            </div>
            <h2>§1 Przedmiot umowy</h2>
            <div class="paragraph">
                Treść paragrafu
            </div><br>
            <h2>§2 Oświadczenia</h2>
            <div class="paragraph">
                Treść paragrafu
            </div><br>
            <h2>§3 Rozliczenia</h2>
            <div class="paragraph">
                Treść paragrafu
            </div><br>
            <h2>§4 Dodatkowe usługi</h2>
            <div class="paragraph">
                Treść paragrafu
            </div><br>
            <h2>§5 Dodatkowe postanowienia</h2>
            <div class="paragraph">
                Treść paragrafu
            </div><br>
            <div class="footer">
                <table class="signs_footer">
                    <tr>
                        <td><strong>Zamawiający</strong><br>
                        {{client.first_name}} {{client.last_name}}</td>
                        <td><strong>Sprzedawca</strong><br>
                        {{deal.responsible_name}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    
    
    
    
    
    
    
  2. 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):

  1. <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>{{client.name}}</strong><br/>        
            {{client.street}}<br/>
            {{client.post_code}} {{client.city}}<br/>
            <br/>
            <span style="font-size:12px">{{client.first_name}} {{client.last_name}}</span>
        </div>
    
    </div> <!-- template -->
  2. 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):

  1. 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}}
    
    
  2. Kod CSS  - taki sam jak w przypadku powyższym - koperta C5 dla pojedyńczego klienta
    ...
 


Powrót


Dodaj komentarz