Setting up documents

Ticketmatic allows you to create documents for contacts and orders. Users can generate a PDF from these documents for 1 or more selected contacts or orders and these can be printed or sent by e-mail. This can be used for example for generating order receipts, invoices or address slips.

Documents are easily created and modified using familiar web technologies: html, css and the twig templating language. Powerful preview capabilities allow you to preview documents directly, using real data.

Some layout features:

* use custom fonts * use assets like images or icons * use both standard paper sizes like A4 or Boca or completely custom sizes

Field definitions give you full control over the content of the document. You can make certain parts of the document dynamic, dependent on certain conditions. You can among others:

* display contact or order info fields * display informational messages or images like general conditions * display information that is context specific. For example: you can show a specific message for a contact with certain properties or you can display a logo if the order was sold through a specific sales channel.

Documents are managed in the Documents module in the Settings app. Click the button below to go there:

Go to documents

Getting started: creating an new document

Click on the + Add button for the contact type
Fill in Name and Description
Go to the <> HTML tab, you will see an empty document being generated.

Adding dynamic placeholders

Paste the following html:

 1<html>
 2<head>
 3    <meta charset="UTF-8">
 4</head>
 5<body>
 6<div id="address">
 7    <strong>{{ contact.lastname }} {{ contact.firstname }}</strong><br/>
 8    {{ contact.street1 }} {{ contact.street2 }}<br/>
 9    {{ contact.zip }} {{ contact.city }}<br/>
10    {{ contact.country }}
11</div>
12</body>
13</html>

You will see the contact information appearing in the Preview pane.

The html template is actually a twig-template and you can use the features of this template language to create a truly dynamic document. More info on the Twig template language

When you build the contact document, you have an object contact at your disposal that contains as properties all placeholders for the contact as defined in the field definitions. Some standard properties are firstname or lastname. For example: {{contact.firstname}} will be replaced by the first name for the contact.

You have different objects at your disposal depending on the document type. Use the ? Placeholders button to get a list of all placeholders you can use for the current document. For order documents, you have the same objects at your disposal as in the order mail template. More info on order mail templates

Layout the address slip

Go to the {} CSS tab and add following css:

 1@page {
 2    padding: 0;
 3    margin: 0pt 0pt 0pt 0pt;
 4    size: 152mm 82mm;
 5}
 6
 7@font-face {
 8    font-family: 'SourceSansPro';
 9    src: url("documents/addressslip/SourceSansPro-Regular.otf") format("opentype");
10}
11
12
13body {
14    font-family: 'SourceSansPro', Arial, sans-serif;
15    font-size: 14px;
16    color: #333;
17    margin-left:10px;
18    margin-right: 10px;
19}
20
21#address {
22    position:absolute;
23    right:150px;
24    top:150px;
25}

We specify an @page rule to define the size of the page and we use an @font-face rule to link a custom font. In order to position the address correctly, we use absolute positioning for the #address div.

Finally, we will add a logo. Add the following to the html, just below the body tag:

1<div id="logo" style="position:absolute; left: 30px; top: 20px">
2    <img src="documents/addressslip/logo.svg" width="80">
3</div>

You see that we link to an asset in the Assets module

The layout possibilities for documents are very similar to ticketlayouts. [Take a look at ‘Setting up ticketlayouts’ for more info](settings/configure_ticket_sales/ticketlayout]

More features

Using a multipage document

You can create documents that are longer than a single page.

To force a page break use:

1<div id="terms" style="page-break-before:always">

There are three CSS properties for controlling page breaks:

* `page-break-before` to force or suppress page breaks that occur immediately before an element, * `page-break-after` to force or suppress page breaks that occur immediately after an element, * `page-break-inside` to suppress page breaks that occur inside an element.

These three properties can be applied to block-level elements, table rows and table row groups that occur within an in-flow element (ie. inside the normal flow of the document, not inside a float or an absolutely positioned block).

In the example, you will see a header and footer that is repeated on every page.

To accomplish this:

Add in the html a div for the pageheader and the pagefooter:

 1<div class="pageheader">
 2    <div id="topbar"  style="background: #003CDF; width: 100%; height: 15px;"></div>
 3    <div id="logo"  style="padding-top: 5pt">
 4        <img src="documents/orderconfirmation/logo.svg" width="80">
 5    </div>
 6    <p class="light">
 7        25 Main Street, 9000 Gent<br>
 8        info@thevenue.be | www.thevenue.be | BTW: 0000.000.000
 9    </p>
10
11</div>
12
13<div class="pagefooter">
14    <span translate>TICKETS & INFO</span><br>
15    25 Main Street, 9000 Gent<br>
16    info@thevenue.be | www.thevenue.be
17</div>

Add css to specify that these divs should be used as fixed header and footer:

 1@page {
 2    @top { content: flow(header); }
 3    @bottom { content: flow(footer); }
 4}
 5
 6.pageheader{
 7    flow: static(header);
 8}
 9
10.footer{
11    flow: static(footer);
12}

Page headers and footers are created by placing content in the margin boxes at the top or bottom of the page box.

Page headers may be placed in the following margin boxes:

* `@top-left-corner` * `@top-left` * `@top` or `@top-center` * `@top-right` * `@top-right-corner`

Page footers may be placed in the following margin boxes:

* `@bottom-left-corner` * `@bottom-left` * `@bottom` or `@bottom-center` * `@bottom-right` * `@bottom-right-corner`

The content property determines the content of margin boxes. The default value of the content property is normal, in which case the margin box is empty. The content property may be used to place document content in the margin box. Any block-level element can be removed from the normal flow and placed in a page margin box.

The @page rule @top { content: flow(header); } specifies that the top margin box is a new static flow named “header”.

The rule for the pageheader element flow: static(header); moves it to the “header” static flow, removing it from the default normal flow.