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 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 {{ contact lastname }} {{ contact firstname }} {{ contact street1 }} {{ contact street2 }} {{ contact zip }} {{ contact city }} {{ contact country }} 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 http //twig sensiolabs org/ 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 order mails docid\ cwb pdcptbfugtnkikojs layout the address slip go to the {} css tab and add following css @page { padding 0; margin 0pt 0pt 0pt 0pt; size 152mm 82mm; } @font face { font family 'sourcesanspro'; src url("documents/addressslip/sourcesanspro regular otf") format("opentype"); } body { font family 'sourcesanspro', arial, sans serif; font size 14px; color #333; margin left 10px; margin right 10px; } \#address { position\ absolute; right 150px; top 150px; } 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 you see that we link to an asset in the assets module the layout possibilities for documents are very similar to ticketlayouts ticket layouts docid\ w9n qrlgqo5qxo mey7 d more features using a multipage document you can create documents that are longer than a single page to force a page break use 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) using a fixed header and footer 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 25 main street, 9000 gent info\@thevenue be | www thevenue be | btw 0000 000 000 tickets & info 25 main street, 9000 gent info\@thevenue be | www thevenue be add css to specify that these divs should be used as fixed header and footer @page { @top { content flow(header); } @bottom { content flow(footer); } } pageheader{ flow static(header); } footer{ flow static(footer); } 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