# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.hubyte.de/pdf-dokumenten-template-bearbeiten/english-documentation/bestellpositionen-tabelle.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.