In diesem Artikel findest du die Anleitung zum Erstellen einer Dokumentvorlage für Rechnungen mit QR Code.
Limitierungen:
- Es können nur einseitige Rechnungen erstellt werden
- Der bereitgestellte Code ist für CHF erstellt.
- Der Ländercode für jeden Empfänger ausserhalb der Schweiz sollte manuell in der Vorlage geändert werden
Bitte beachte, dass du deine IBAN ohne Leerzeichen in der Konfiguration angeben musst, da einige Banken die Leerzeichen nicht lesen/verarbeiten und deine Kund*innen dadurch eine Fehlermeldung erhalten können.
.
QR-code Rechnung machen
- Erstelle ein neues Briefpapier ohne Abstand and den Rändern. Das kannst du unter Konfigurationen → Briefpapier → Briefpapier hinzufügen tun.
Wichtig hierbei, ist dass alle Abstände auf 0 gesetzt sind: - Erstelle eine neue Rechnungsvorlage (oder dupliziere die Basisvorlage) unter Konfigurationen → Dokumentenvorlagen → Rechnung “Einzelne Position” → duplizieren. Das Duplizieren der Vorlage ist wichtig, um sie anschließend bearbeiten zu können.
- Gib deiner Rechnungsvorlage einen passenden Titel, zum Beispiel:
- Füge nun deiner Dokumentenvorlage eine “2-Spalten-Aufteilung” ganz unten hinzu, wie folgt:
“2-Spalten-Aufteilung” auswählen
Nach ganz unten in die Dokumentenvorlage ziehen. - Ziehe nun alle Module der Reihenfolge nach auf die linke Spalte der “2-Spalten-Aufteilung”. Wähle hierzu jeweils immer das komplette Textfeld, wie folgt:
Füge als Erstes, die Kundendaten ganz oben zu:
Ziehe dieses in das linke Feld der “2-Spalten-Aufteilung”
Führe dies nun mit allen Textfeldern der Reihe nach durch:
Ziehe nun die komplette linke Spalte so weit nach rechts, wie möglich: - Füge nun, ganz unten im Dokument, einen “Text” Inhalt hinzu
Wähle das “Text” Feld:
und ziehe es ganz nach unten im Dokument.
Klicke bei diesem Textfeld nun auf Bearbeiten
Hier, auf das "<>" (Quelltext) Symbol klicken - Kopiere nun den folgenden HTML-Code, füge Ihn in deinem Quelltext ein und klicke anschließend 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&margin=0&cht=qr&chs=543x543&chld=H|0&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> - Kopiere & füge nun den folgenden CSS-Code hinzu und klicke anschließend auf “Speichern”
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;
}
- Passe im letzten Schritt noch dein Briefpapier an und wähle das am Anfang erstelle aus: