# Sablon: cimkék és az alap szerkezet

> A számlasablon helyőrzői ([[PDFLOGO]], [[ORDERINFO]] stb.), a HTML szerkezet, az azonosítók és az osztályok.

A számla egy HTML-sablonból (`template.php`) készül. A sablonban **cimkék** (helyőrzők) vannak dupla szögletes zárójelben, például `[[PDFLOGO]]`. A bővítmény a PDF előállításakor a cimkéket a rendelés és a beállítások adataival cseréli le.

Mielőtt a sablont szerkeszted, másold a témád mappájába (lásd [Sablon testreszabása](https://hub.hellowp.io/hu/plugins/woocommerce-pdf-invoice/sablon-testreszabas/)):

```
wp-content/themes/A_TEMAD/pdf_templates/template.php
```

Minden módosításnál két helyen kell dolgozni: a `template.php`-ban a cimkét kell a kívánt helyre tenni, a kódot pedig a téma `functions.php` fájljába kell írni (vagy egy saját kiegészítő bővítménybe).

## A fejléc cimkéi

| Cimke | Mit ír ki |
|---|---|
| `[[PDFFONTFAMILY]]` | A számlán használt betűtípus gyors módosítására |
| `[[PDFPAIDINFULLOVERLAY]]` | A „PAID IN FULL” felirat (átfedés) CSS-ének módosítására |
| `[[PDFCURRENCYSYMBOLFONT]]` | A pénznemszimbólumok CSS-ének módosítására |
| `[[PDFINVOICEADDITIONALCSS]]` | Saját CSS hozzáadására egy függvénnyel |
| `[[PDFLOGO]]` | A beállításokban megadott logó (ha nincs logó, a cégnév) |
| `[[PDFCOMPANYNAME]]` | A **Cégnév** beállítás |
| `[[PDFCOMPANYDETAILS]]` | A **Céginformációk** beállításban megadott cím |
| `[[PDFINVOICENUMHEADING]]` | A számlaszám címkéje |
| `[[PDFINVOICENUM]]` | A rendelés számlaszáma |
| `[[PDFORDERENUMHEADING]]` | A rendelésszám címkéje |
| `[[PDFORDERENUM]]` | A rendelés száma |
| `[[PDFINVOICEDATEHEADING]]` | A számla dátumának címkéje |
| `[[PDFINVOICEDATE]]` | A számla dátuma |
| `[[PDFORDERDATEHEADING]]` | A rendelés dátumának címkéje |
| `[[PDFORDERDATE]]` | A rendelés dátuma |
| `[[PDFINVOICE_PAYMETHOD_HEADING]]` | A fizetési mód címkéje |
| `[[PDFINVOICEPAYMENTMETHOD]]` | A rendelés fizetési módja |
| `[[PDFINVOICE_SHIPMETHOD_HEADING]]` | A szállítási mód címkéje |
| `[[PDFSHIPPINGMETHOD]]` | A rendelés szállítási módja |
| `[[PDFSHIPMENTTRACKING]]` | A csomagkövetés címsora és adatai, ha vannak a rendelésen |
| `[[PDFINVOICE_BILLINGDETAILS_HEADING]]` | A számlázási adatok címsora |
| `[[PDFBILLINGADDRESS]]` | A számlázási cím |
| `[[PDFBILLINGTEL]]` | A számlázási telefonszám |
| `[[PDFBILLINGEMAIL]]` | A számlázási e-mail-cím |
| `[[PDFBILLINGVATNUMBER]]` | A számlázási adószám, ha van a rendelésen |
| `[[PDFINVOICE_SHIPPINGDETAILS_HEADING]]` | A szállítási adatok címsora |
| `[[PDFSHIPPINGADDRESS]]` | A szállítási cím |

## A lábléc cimkéi

| Cimke | Mit ír ki |
|---|---|
| `[[PDFREGISTEREDNAME_SECTION]]` | A **Bejegyzett név** beállítás |
| `[[PDFREGISTEREDADDRESS_SECTION]]` | A **Bejegyzett székhely** beállítás |
| `[[PDFCOMPANYNUMBER_SECTION]]` | A **Cégjegyzékszám** beállítás |
| `[[PDFTAXNUMBER_SECTION]]` | Az **Adószám** beállítás |

Az alap sablon a láblécben a `_SECTION` nélküli változatokat (`[[PDFREGISTEREDNAME]]`, `[[PDFREGISTEREDADDRESS]]`, `[[PDFCOMPANYNUMBER]]`, `[[PDFTAXNUMBER]]`) használja, a címkeszöveget pedig a sablon írja ki előttük.

## A fő rész cimkéi

| Cimke | Mit ír ki |
|---|---|
| `[[ORDERINFOHEADER]]` | A rendelés részleteinek címsora |
| `[[ORDERINFO]]` | A rendelés termékeinek táblázata |
| `[[PDFBARCODES]]` | Vonalkód, ha van a rendelésen |
| `[[PDFORDERNOTES]]` | A rendelés megjegyzései |
| `[[PDFORDERTOTALS]]` | Az összesítő rész (részösszeg, szállítás, kedvezmény, adó, végösszeg) |

Az összesítő részt külön cimkékre is bonthatod: `[[PDFORDERSUBTOTAL]]`, `[[PDFORDERSHIPPING]]`, `[[PDFORDERDISCOUNT]]`, `[[PDFORDERTAX]]`, `[[PDFORDERTOTAL]]`. Így tetszőleges sorrendben, a `[[PDFORDERTOTALS]]` helyett használhatod őket. Részletek: [Terméktáblázat és összesítő](https://hub.hellowp.io/hu/plugins/woocommerce-pdf-invoice/fejlesztoknek-tablazat-es-osszegek/).

## Az alap `template.php`

A sablon három fő blokkból áll: `#header` (fejléc, rögzített), `#footer` (lábléc, rögzített) és `#content` (tartalom). A lap margóját az `@page` szabály adja, a fejléc és a lábléc magasságának egyeznie kell a margó megfelelő értékével.

```html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
@page {
  margin: 480px 50px 150px 50px;
}
#header {
  position: fixed;
  left: 0px;
  top: -460px;
  right: 0px;
  height: 480px; /* egyezzen az @page első margójával */
  text-align: center;
}
#footer {
  position: fixed;
  left: 0px;
  bottom: -200px;
  right: 0px;
  height: 150px; /* egyezzen az @page harmadik margójával */
  font-size: 11px;
  text-align: center;
}
#content {
  font-size: 11px;
}
</style>
<body>
<div id="header">
  <table width="100%">
    <tr>
      <td valign="top" colspan="2">[[PDFLOGO]]</td>
      <td valign="top" colspan="2">[[PDFCOMPANYNAME]]<br />[[PDFCOMPANYDETAILS]]<br /></td>
    </tr>
    <tr>
      <td width="20%" valign="top"><?php echo apply_filters( 'pdf_template_invoice_number_text', __( 'Invoice No. :', PDFLANGUAGE ) ); ?></td>
      <td width="30%" valign="top">[[PDFINVOICENUM]]</td>
      <td width="20%" valign="top"><?php echo apply_filters( 'pdf_template_order_number_text', __( 'Order No. :', PDFLANGUAGE ) ); ?></td>
      <td width="30%" valign="top">[[PDFORDERENUM]]</td>
    </tr>
    <tr>
      <td valign="top"><?php echo apply_filters( 'pdf_template_invoice_date_text', __( 'Invoice Date :', PDFLANGUAGE ) ); ?></td>
      <td valign="top">[[PDFINVOICEDATE]]</td>
      <td valign="top"><?php echo apply_filters( 'pdf_template_order_date_text', __( 'Order Date :', PDFLANGUAGE ) ); ?></td>
      <td valign="top">[[PDFORDERDATE]]</td>
    </tr>
    <tr>
      <td valign="top"><?php echo apply_filters( 'pdf_template_payment_method_text', __( 'Payment Method :', PDFLANGUAGE ) ); ?></td>
      <td valign="top">[[PDFINVOICEPAYMENTMETHOD]]</td>
      <td valign="top">&nbsp;</td>
      <td valign="top">&nbsp;</td>
    </tr>
    <tr>
      <td valign="top" colspan="2">
        <?php echo apply_filters( 'pdf_template_billing_details_text', __( '<h3>Billing Details</h3>', PDFLANGUAGE ) ); ?>
        [[PDFBILLINGADDRESS]]<br />
        [[PDFBILLINGTEL]]<br />
        [[PDFBILLINGEMAIL]]
      </td>
      <td valign="top" colspan="2">
        <?php echo apply_filters( 'pdf_template_shipping_details_text', __( '<h3>Shipping Details</h3>', PDFLANGUAGE ) ); ?>
        [[PDFSHIPPINGADDRESS]]
      </td>
    </tr>
  </table>
</div>
<div id="footer">
  <div class="copyright"><?php echo apply_filters( 'pdf_template_registered_name_text', __( 'Registered Name : ', PDFLANGUAGE ) ); ?>[[PDFREGISTEREDNAME]] <?php echo apply_filters( 'pdf_template_registered_office_text', __( 'Registered Office : ', PDFLANGUAGE ) ); ?>[[PDFREGISTEREDADDRESS]]</div>
  <div class="copyright"><?php echo apply_filters( 'pdf_template_company_number_text', __( 'Company Number : ', PDFLANGUAGE ) ); ?>[[PDFCOMPANYNUMBER]] <?php echo apply_filters( 'pdf_template_vat_number_text', __( 'VAT Number : ', PDFLANGUAGE ) ); ?>[[PDFTAXNUMBER]]</div>
</div>
<div id="content">
  [[ORDERINFOHEADER]]
  [[ORDERINFO]]
  <table width="100%">
    <tr>
      <td width="70%" valign="top">[[PDFORDERNOTES]]</td>
      <td width="30%" valign="top" align="right">
        <table width="100%">
          [[PDFORDERSUBTOTAL]]
          [[PDFORDERTAX]]
          [[PDFORDERSHIPPING]]
          [[PDFORDERDISCOUNT]]
          [[PDFORDERTOTAL]]
        </table>
      </td>
    </tr>
  </table>
  <table width="100%">
    <tr>
      <td width="100%" valign="top">[[PDFTERMSCONDITIONS]]</td>
    </tr>
  </table>
</div>
</body>
</html>
```

A fenti példában a `[[PDFTERMSCONDITIONS]]` cimkét a [Saját mezők és kiegészítések](https://hub.hellowp.io/hu/plugins/woocommerce-pdf-invoice/fejlesztoknek-sajat-mezok/) fejezet kódja tölti ki.

## A kész HTML azonosítói és osztályai

Amikor a bővítmény a cimkéket lecseréli, a kimeneti HTML elemei azonosítókat és osztályokat kapnak. A sablon `<style>` blokkjában ezekre hivatkozhatsz.

**Azonosítók:** `header`, `logo`, `company-info`, `invoicenumberheading`, `invoicenumber`, `ordernumberheading`, `ordernumber`, `invoicedateheading`, `invoicedate`, `orderdateheading`, `orderdate`, `paymethodheading`, `paymethod`, `shipmethodheading`, `shipmethod`, `billingdetails`, `shippingdetails`, `footer`, `content`, `ordernotes`, `ordertotals`.

**Osztályok:** `copyright`, `shop_table`, `orderdetails`, `pdf_table_row`, `pdf_table_row_title`, `pdf_table_row_heading`, `pdf_table_cell`, `pdf_table_cell_title`, `pdf_table_cell_heading`, `ordercontent`, `pdf_table_row_odd`, `pdf_table_row_even`, `pdf_table_cell_odd`, `pdf_table_cell_even`, `barcode`, `pdfordertotals_row`, `pdfordertotals_cell`.

Alap CSS-szabályok, amelyekkel a `<style>` blokk kezdődhet:

```css
body {
  font-family: "DejaVu Sans", "DejaVu Sans Mono", "DejaVu", sans-serif, monospace;
  font-size: 11px;
}
#logo img {
  max-width: 340px;
}
.barcode {
  text-align: center;
  width: 50%;
}
.page_break {
  page-break-before: always;
}
```

A terméktáblázat osztályainak használatát a [Sablon testreszabása](https://hub.hellowp.io/hu/plugins/woocommerce-pdf-invoice/sablon-testreszabas/) fejezet példája mutatja.