> For the complete documentation index, see [llms.txt](https://docs.hubyte.de/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hubyte.de/pdf-dokumenten-template-bearbeiten/english-documentation/bestellpositionen-tabelle.md).

# Line items table

The card **"Custom document (Order items)"** contains two fields that give you full control over how the line items table is displayed:

* **Styles for the table of order items** – the CSS of the table
* **Table for order items (Twig template)** – the Twig template of the table *(expert setting)*

> **Note:** These settings are intended for advanced users. We recommend starting with **Load default template** and only making targeted adjustments.

## The Twig template of the line items table

The template is rendered in **three phases**. The variable `hueRenderPhase` controls which part is currently output:

| `hueRenderPhase` | Meaning                                           |
| ---------------- | ------------------------------------------------- |
| `table`          | Table head (`<thead>`, column headers)            |
| `position`       | A single position (one `<tr>` row per order item) |
| `shipping`       | The shipping costs row                            |

A simplified skeleton looks like this:

```twig
{% if hueRenderPhase == 'table' and config.displayLineItems %}
    <table class="line-item-table">
        <thead>
        <tr class="line-item-table-header">
            <th class="product-number">Prod. no.</th>
            <th class="product-label">Product / Service</th>
            <th class="numbers">Quantity</th>
            {% if config.displayPrices %}
                <th class="numbers">VAT</th>
                <th class="numbers incl-vat">Unit price</th>
                <th class="numbers incl-vat">Total</th>
            {% endif %}
        </tr>
        </thead>

{% elseif hueRenderPhase == 'position' and config.displayLineItems %}
    <tr class="line-item">
        <td>{{ lineItem.payload.productNumber }}</td>
        <td>{{ lineItem.label }}</td>
        <td class="align-right">{{ lineItem.quantity }}</td>
        {% if config.displayPrices %}
            <td class="align-right">{% for tax in lineItem.price.taxRules %}{{ tax.taxRate }} %{% endfor %}</td>
            <td class="align-right">{{ lineItem.unitPrice|currency(currencyIsoCode, languageId) }}</td>
            <td class="align-right">{{ lineItem.totalPrice|currency(currencyIsoCode, languageId) }}</td>
        {% endif %}
    </tr>

{% elseif hueRenderPhase == 'shipping' and config.displayLineItems %}
    <tr class="line-item">
        <td></td>
        <td>{{ 'document.lineItems.shippingCosts'|trans }} - {{ order.deliveries.first.shippingMethod.translated.name }}</td>
        <td class="align-right">1</td>
        {% if config.displayPrices %}
            <td class="align-right">{% for tax in order.deliveries.first.shippingCosts.calculatedTaxes %}{{ tax.taxRate }} %{% endfor %}</td>
            <td class="align-right">{{ order.shippingTotal|currency(currencyIsoCode, languageId) }}</td>
            <td class="align-right">{{ order.shippingTotal|currency(currencyIsoCode, languageId) }}</td>
        {% endif %}
    </tr>
{% endif %}
```

> Note: The closing `</table>` tag is added by Shopware's render logic – in the phase model each phase only outputs its own section.

### Commonly used variables

| Variable                         | Description                                         |
| -------------------------------- | --------------------------------------------------- |
| `config.displayLineItems`        | Should positions be displayed?                      |
| `config.displayPrices`           | Should prices be displayed?                         |
| `config.displayLineItemPosition` | Should the position number be displayed?            |
| `lineItem.label`                 | Label of the position                               |
| `lineItem.quantity`              | Quantity                                            |
| `lineItem.unitPrice`             | Unit price                                          |
| `lineItem.totalPrice`            | Total price of the position                         |
| `lineItem.payload.productNumber` | Product number                                      |
| `lineItem.payload.options`       | Variant options (group/option)                      |
| `lineItem.price.taxRules`        | Tax rates of the position                           |
| `order.shippingTotal`            | Shipping costs                                      |
| `currencyIsoCode`, `languageId`  | Currency/language context for the `currency` filter |

A more detailed overview can be found under [Twig variables & examples](/pdf-dokumenten-template-bearbeiten/english-documentation/twig-variablen.md).

## The styles of the line items table

In the field **"Styles for the table of order items"** you enter full CSS (including `<style>` tags, depending on the loaded default template). This CSS is inserted unchanged (`raw`) into the document head and controls the appearance of the table defined above.

## Loading default templates

Both fields have their own buttons:

* **Load default template** – Loads the bundled default Twig template of the line items table (matching the currently selected language, German or English).
* **Load default CSS** – Loads the default CSS of the line items table (matching the Shopware standard layout).

> All default templates for reference and copying can be found under [Template samples](/pdf-dokumenten-template-bearbeiten/english-documentation/template-vorlagen.md).

> **Tip:** When loading the template for the **delivery note**, the summary is intentionally left empty, since delivery notes usually do not show price totals.