In diesem Artikel findest du die Anleitungen zum Erstellen einer Dokumentvorlage für Rechnungen mit QR-Code.

Einschränkungen:

• Es können nur einseitige Rechnungen erstellt werden.
• Der bereitgestellte Code ist für CHF ausgelegt. 
• Der Ländercode für Empfänger außerhalb der Schweiz muss in der Vorlage manuell angepasst werden.

.

Erstellen einer Rechnung mit QR-Code

Erstelle eine neue Kopfzeile ohne Ränder.

1. Gehe zu settingsKonfigurationen > Kommunikation > Briefpapier.
2. Klicke auf Briefpapier hinzufügen.

3. Setze alle Ränder auf 0.
   

   Erstelle eine neue Rechnungs-Vorlage.

4. Gehe zu settings Konfigurationen > Kommunikation > Dokumentvorlagen > Rechnung. Es ist wichtig, die Vorlage zu duplizieren, damit du sie anschließend bearbeiten kannst. 
5. Gib deiner Rechnungs-Vorlage einen Namen.
   

6. Füge nun am unteren Ende des Dokuments einen Text-Inhalt hinzu. Wähle „Text“ aus dem Menü rechts und ziehe es an das Ende des Dokuments.
   
   
   
   
   Klicke bei diesem Textfeld nun auf Bearbeiten
   
    

   Hier, auf das "<>" (Quelltext) Symbol klicken
   
   
    

7. Kopiere den folgenden HTML-Code. Füge ihn in deinen Quellcode ein und klicke auf OK.

   
   
   
    

   Klicke hier um den HTML Code anzuzeigen!

   
   <table class="qr">
   <tbody>
   
   <tr>
   
   <td class="left">
   
   <div class="left-content">
   
   <h3>Empfangsschein</h3>
   
   <strong>Konto / Zahlbar an</strong><br/>{$company.bank_account|wordwrap:4:' ': true}<br/>{$company.company_name}<br/>{$company.location_street} {$company.location_housenumber}<br/>{$company.location_postalcode}<br/>{$company.location_city} {$company.country}<br/><br/><br/>
   
   <strong>Zahlbar durch</strong><br/>{$f.customer.displayname}<br/>{$f.customer.invoice_street} {$f.customer.invoice_number}<br/>{$f.customer.invoice_postalcode} {$f.customer.invoice_city} <br/>{iff $f.customer.invoice_country != $company.country}{$f.customer.invoice_country}{/iff} <br/>
   
   <table class="currency">
   
   <tbody>
   
   <tr>
   
   <td><strong>Währung</strong></td>
   
   <td><strong>Betrag</strong></td>
   
   </tr>
   
   <tr>
   
   <td>CHF</td>
   
   <td>{$f.price_invat,noformat|replace:',':' '}</td>
   
   </tr>
   
   </tbody>
   
   </table>
   
   </div>
   
   </td>
   
   <td class="right">
   
   <div class="right-content">
   
   <table class="payment">
   
   <tbody>
   
   <tr>
   
   <td>
   
   <h3>Zahlteil</h3>
   
   <div class="qr-code">
   
   <img src="https://qr-generator.io/?swiss=1&amp;margin=0&amp;cht=qr&amp;chs=543x543&amp;chld=H|0&amp;chl=SPC%0A0200%0A1%0A{$company.bank_account}%0AS%0A{$company.company_name}%0A{$company.location_street}%0A{$company.location_housenumber}%0A{$company.location_postalcode}%0A{$company.location_city}%0ACH%0A%0A%0A%0A%0A%0A%0A%0A{$f.price_invat,noformat|replace:',':''}%0ACHF%0AS%0A{$f.customer.displayname}%0A{$f.customer.invoice_street}%0A{$f.customer.invoice_number}%0A{$f.customer.invoice_postalcode}%0A{$f.customer.invoice_city}%0ACH%0ANON%0A%0A{$f.subject}%0AEPD"/>
   
   </div>
   
   <table class="currency">
   
   <tbody>
   
   <tr>
   
   <td><strong>Währung</strong></td>
   
   <td><strong>Betrag</strong></td>
   
   </tr>
   
   <tr>
   
   <td>CHF</td>
   
   <td>{$f.price_invat,noformat|replace:',':' '}</td>
   
   </tr>
   
   </tbody>
   
   </table>
   
   </td>
   
   <td><strong>Konto / Zahlbar an</strong><br/>{$company.bank_account|wordwrap:4:' ': true}<br/>{$company.company_name}<br/>{$company.location_street} {$company.location_housenumber}<br/>{$company.location_postalcode}<br/>{$company.location_city} {$company.country}<br/><br/><br/>
   
   <strong>Zahlbar durch</strong><br/>{$f.customer.displayname}<br/>{$f.customer.invoice_street} {$f.customer.invoice_number}<br/>{$f.customer.invoice_postalcode} {$f.customer.invoice_city}<br/>{iff $f.customer.invoice_country != $company.country}{$f.customer.invoice_country}{/iff}</td>
   
   </tr>
   
   </tbody>
   
   </table>
   
   </div>
   
   </td>
   
   </tr>
   
   </tbody>
   
   </table>
   
   
    

8. Kopiere nun den folgenden CSS-Code, füge ihn in CSS bearbeiten ein und klicke dann auf Bestätigen.
   
   
   
    

   Klicke hier um den CSS Code anzuzeigen!

   body > .templatesection table td {

       height: 191mm;

   }

   body > .templatesection table td td {

       height: auto;

   }

   table.qr td {

       vertical-align: top;

       font-family: Arial;

   }

   table.qr td.left {

       font-size: 8pt;

   }

   table.qr td.right, table.payment td {

       font-size: 10pt;

   }

   table.qr td.left strong {

       font-size: 6pt;

   }

   table.qr td.right strong {

       font-size: 8pt;

   }

   table.qr td h3 {

       font-size: 11pt;

       padding-bottom: 12px;

       padding-top: 0px;

       margin: 0px;

   }

   table.qr td.left {

       width: 62mm;

       height: 105mm;

       border-top: 0.75pt solid black;

       border-right: 0.75pt solid black;

   }

   .left-content, .right-content {

       padding: 5mm;

   }

   table.qr td.right {

       width: 148mm;

       height: 105mm;

       border-top: 0.75pt solid black;

   }

   .qr-code {

       width: 46mm;

       height: 46mm;

       margin-top: 5mm;

       margin-bottom: 5mm;

   }

   .qr-code img {

       width: 46mm;

       height: 46mm;

   }

   
    

9. Wähle schließlich die Kopfzeile aus, die du zu Beginn erstellt hattest.
10. Vergiss nicht, alle vorgenommenen Änderungen zu speichern.