Anleitung zur Erstellung einer QR-Code Rechnung (Schweiz)

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

.

QR-code Rechnung machen

  1. 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:mceclip0.png

  2. 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. 
  3. Gib deiner Rechnungsvorlage einen passenden Titel, zum Beispiel:
    mceclip1.png
  4. Füge nun deiner Dokumentenvorlage eine “2-Spalten-Aufteilung” ganz unten hinzu, wie folgt:
    “2-Spalten-Aufteilung” auswählen
    mceclip2.png

     Nach ganz unten in die Dokumentenvorlage ziehen.
    mceclip3.png
  5. 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:

    mceclip4.png

    Ziehe dieses in das linke Feld der “2-Spalten-Aufteilung”
    mceclip5.png
    Führe dies nun mit allen Textfeldern der Reihe nach durch:
    mceclip6.png


    Ziehe nun die komplette linke Spalte so weit nach rechts, wie möglich:
    mceclip7.png

    mceclip8.png


  6. Füge nun, ganz unten im Dokument, einen “Text” Inhalt hinzu

    Wähle das “Text” Feld:

    mceclip9.png
    und ziehe es ganz nach unten im Dokument.

    mceclip11.png
    Klicke bei diesem Textfeld nun auf Bearbeiten
    mceclip12.png
    Hier, auf das "<>" (Quelltext) Symbol klicken

    mceclip13.png

  7. 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&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 & füge nun den folgenden CSS-Code hinzu und klicke anschließend auf “Speichern”
    mceclip14.png


    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. Passe im letzten Schritt noch dein Briefpapier an und wähle das am Anfang erstelle aus:

    mceclip15.png
War dieser Beitrag hilfreich?
0 von 0 fanden dies hilfreich