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:

{% 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.

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.

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