Skip to main content

How can I design the configuration PDF?

info

To change the PDF, you need basic knowledge of HTML and CSS. You may want to leave this to your web designer.

You can create a PDF for configuration. This can either be Mail verschickt or downloaded directly. Let's take a look at this first:

Download PDF directly​

The PDF is only downloaded directly if it is not sent by e-mail.

  • Open the editor of your configurator.
  • Click on
    Loading...
    in the sidebar.
  • Click on the pencil icon on the block containing the price and order buttons
  • Here you can create and maintain order buttons. Either use the existing one or click on
    Loading...
    to create a new one.
  • Uncheck Send to shop and Send internal mail (and normally in this case also Contact form, but at least Send e-mail)
  • Check the Download or send PDF box
  • Click on
    Loading...

Format PDFs​

Normally, PDFs are created in a neutral format. You can change this, but you will then need some knowledge of HTML. You may want to leave this to your web designer.

  • Open the editor of your configurator.
  • Click on
    Loading...
    in the sidebar.
  • Switch to the PDF tab. Here you can
    • select a font
    • Determine page margins
    • select a template: A PDF on which the print will take place.
    • change several modules (=template).
  • For the modules: Click on
    Loading...
    and select one of the templates:
    • content the entire document
    • customer section with customer data
    • images section with product images. To deliver these images, legen Sie Screenshot-Kameras an
    • variables table with the selected characteristics
    • bom (=Bill of Material) table with the bill of material, i.e. all purchased items
  • Templates are written in the language twig.
  • You can make the PDFs multilingual via locale.
  • Otherwise, take a look at the template to understand how you can change the PDFs.
  • Click on
    Loading...
    .
tip

You can test your template here on existing configurations. To do this, simply select an existing Configuration and the corresponding template and click on

Loading...

tip

The templates generate HTML, which is converted into a PDF using mpdf. Only a limited range of HTML and CSS is available.

tip

You can also create completely new templates. This allows you to send a quote to the customer, for example, but a work order to yourself. Then select the various templates in the settings for Mails.

Which variables are available in the PDF templates?​

  • app Data of the configurator
    • label Name
    • description Description
    • image URL of the image (currently still empty)
    • settings all settings
  • cfg data of the configuration
    • code unique code of the configuration
    • price price
    • customer customer data. Which fields are filled depends on how you have set up the contact form is structured:
      • name: Name of the customer
      • address: Street and house number of the customer
      • zip: Zip code of the customer
      • city: City of the customer
      • email: E-mail of the customer
      • phone: Telephone number of the customer
      • company: Company of the customer
      • taxID: VAT ID of the customer
    • variables: List of features selected by the customer:
      • label name of the characteristic
      • value name of the selected value
      • price possibly the surcharge for it
    • bom Bill of material with the implicitly selected articles:
      • qty quantity
      • price complete price information
        • article the selected article
          • no article number
          • name article name
          • description Article description
      • priceUnit unit price of the item
      • priceTotal Total price of the item
    • json The actual content of the configuration
      • summary List of features selected by the customer, combined with their items and prices:
        • group Name of the step
        • row Position of the feature in the group among the non-hidden ones, from 1
        • index Position of the feature in the group, from 0
        • variableLabel Name of the feature
        • variableKey if set, the key of the feature.
        • selectionLabel Selected or entered value
        • type The type of the feature, e.g. list, number or image
        • data depending on type further data:
          • url address of the image, for image
          • leftright position of the image left/right, from 0-100, default 50, for image
          • topbottom Position of the image at the top/bottom, from 0-100, default 50, for image
          • scale size of the image, from 0-100, default 75, for image
        • bom all articles inserted based on this feature
          • articleLines Article
          • surchargeLines surcharges
          • priceTotal total price
        • subvariables List of parts inserted in this variable, if applicable
    • files Uploaded images and screenshots
      • camera_0: Screenshot
      • camera_1: Screenshot
      • if applicable, further data such as imprints or uploaded files. The key is the key of the feature, if assigned, otherwise a random character string.
    • created_at: Date of creation
    • action ID of the button used to save. Must be compared with app.settings.actions.id.
  • dealerApp Settings of a dealer
    • settings Settings
      • logo Logo of the dealer
  • Locale Language, such as en or en
  • link Link to the configurator
  • full Complete definition of the configurator, should not normally be required

Output a specific feature​

If you want to output a very specific feature in the PDF, then first give this feature a key.

tip

To do this, switch to your profile (click on the email in the navigation bar and then Profile) and switch on the "Developer mode" there.

The input field for the key will then appear for a feature. You can enter any key you like here.

For example, if you have given a characteristic the key breite, you can access it as follows:

{% set myVar = cfg.json.summary | filter(l => l.variableKey=='breite') | first %}

{% if myVar %}
<p>{{ myVar.variableLabel }}: {{ myVar.selectionLabel }} Aufpreis: {{ myVar.bom.priceTotal | format_currency('EUR') }} </p>
{% endif %}

Change the names of the PDF files​

The names of PDF documents attached to emails or offered for download can be changed:

  • Open the editor of your configurator.
  • Click on
    Loading...
    in the sidebar.
  • Click on the pencil icon on the block containing the price and order buttons
  • Here you can maintain order buttons. Select one.
  • Enter the desired file name (including the ending .pdf!) under "File name of the pdf".
  • Click on
    Loading...

You can make replacements in the file name. E.g. for the entry of Anfrage-{code}.pdf for this purpose, that the PDf is given the name "Request-JHDBSGJ.pdf", for example, because the configuration code is entered. The following fields can be entered between the {}:

FieldMeaning
codeCode of the configuration
app.labelName of the configurator
app.codeCode of the configurator
customer.nameName of the customer
customer.addressStreet and house number of the customer
customer.zipZIP code of the customer
customer.cityCustomer's city
customer.emailcustomer's email
customer.phoneCustomer's phone number
customer.companycustomer's company
customer.taxIDcustomer's VAT ID

Of course, the customer data is only available if it has been entered in the contact form.