Twig template to format ticket pdf

Issue created by @jeffgtr
Comment over 1 year ago →
🇪🇸Spain pcambra Asturies
We leverage Entity print ( https://www.drupal.org/project/entity_print → ) on v2, wondering if this could be of help? https://www.drupal.org/docs/contributed-modules/entity-print/usage#s-mod... →

Any suggestions on how to improve or facilitate the process are very welcome

🇦🇹Austria xurubo93

I have made a twig template for a project and I was using entity-print--commerce-ticket.html.twig as theme suggestion.

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <style>

      html {
        margin-top: 0.0cm !important;
        margin-left: 0.0cm !important;
      }

      body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 13px;
        line-height: 1.4em;
        font-weight: bold;
      }

      .ticket {
        width: 210mm;
        height: 257mm;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
        margin-bottom: 0.5cm;
      }

      .clearfix::after {
        display: block;
        clear: both;
        content: "";
      }

      .pull-left {
        float: left;
      }

      .pull-right {
        float: right;
      }

      #info-wrapper {
        padding: 1cm 1cm 1cm 1cm;
        background-color: lightgrey;
        border-bottom: #0a001f dotted;
      }

      .ticket-info {
        margin-bottom: 1em;
      }

      .attention {
        color: red;
      }
      #barcode-holder {
        text-align: center;
        margin-bottom: 1em;
      }

      #ticket-number {
        text-align: center;
      }

      .row:after {
        content: "";
        display: table;
        clear: both;
      }

      .footer-column {
        float: left;
        width: 33.33%;
      }
      .footer-body-section {
        float: left;
        width: 66.66%;
      }
      .footer-body-sponsors {
        float: left;
        width: 33.33%;
      }

      h3 {
        font-size: 40px;
        text-transform: uppercase;
      }

      h4 {
        font-size: 30px;
        text-transform: uppercase;
      }

      #footer .header h3 {
        text-transform: uppercase;
      }

      #footer .row {
        margin-top: 0.5cm;
        margin-bottom: 0.5cm;
      }

      #footer-body {
        padding: 1cm 1cm 1cm 1cm;
      }

      .text-center {
        text-align: center;
      }

    </style>
</head>

<body>
<div class="ticket">
    <div id="info-wrapper" class="clearfix">
        <div id="info-wrapper-left" class="pull-left">
            <div id="general-info">
                example.org
                <div class="header">
                    <h2>
                        {{ project_name }}
                    </h2>
                </div>
                <div class="ticket-info">
                    <div class="date">
                        <strong>Date: </strong> {{ eventdate }}
                    </div>
                    <div class="category">
                        <strong>Category: </strong> {{ category }}
                    </div>
                    <div class="price">
                        <strong>Price: </strong> {{ price }}
                    </div>

                </div>
                {% if address|render %}
                    <div class="address">
                        <strong>Address:</strong>
                        {{ address }}
                    </div>
                {% endif %}
                {% if customer_mail|render %}
                    <div id="mail">
                        {{ customer_mail }}
                    </div>
                {% endif %}
            </div>
        </div>
        <div id="info-wrapper-right" class="pull-right">
            <span class="attention">THIS IS YOUR TICKET</span>
            {% if qrcode|render %}
                <div id="barcode-holder">
                    {{ qrcode }}
                </div>
            {% endif %}
            {% if ticket_number %}
                <div id="ticket-number" class="text-center text-bold">
                    {{ ticket_number }}
                </div>
            {% endif %}
        </div>
    </div>
    <div id="footer">
        <div class="row">
            <div class="footer-column .header text-center">
                <h3>Ticket</h3>
            </div>
            <div class="footer-column text-center">
                {% if shopimage|render %}
                    <div id="shopimage">
                        {{ shopimage }}
                    </div>
                {% endif %}
            </div>
            <div class="footer-column">
                <div id="shopinfo">
                    {{ storename }}
                    {% if storeaddress|render %}
                        {{ storeaddress }}
                    {% endif %}
                </div>
            </div>
        </div>
        <div id="footer-body">
            <div class="row">
                <div class="footer-body-section">
                    <h4>
                        Additional Infos
                    </h4>
                    <p>
                        <ul>
                        <li>
                            Info 1
                        </li>
                        <li>
                            Info 2
                        </li>
                        <li>
                          Info 2
                        </li>
                    </ul>
                    </p>
                </div>
                <div class="footer-body-sponsors">

                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

In my theme I also created a preprocessing function because some of this variables are not available as default.

function eventplus_preprocess_entity_print__commerce_ticket(&$variables) {
  $ticket = $variables['content'][0]['#commerce_ticket'];
  if ($ticket instanceof \Drupal\commerce_ticketing\Entity\CommerceTicket) {

    /* @var $order \Drupal\commerce_order\Entity\Order */
    $order = $ticket->getOrder();
    /* @var $orderitem \Drupal\commerce_order\Entity\OrderItemInterface */
    $orderitem = $ticket->getOrderItem();
    /* @var $purchasedEntity \Drupal\commerce_product\Entity\ProductVariation */
    $purchasedEntity = $orderitem->getPurchasedEntity();
    /* @var $eventdate \Drupal\commerce_product\Entity\ProductAttributeValue */
    $eventdate = $purchasedEntity->getAttributeValue('attribute_termin');

    $eventkategorie = $purchasedEntity->getAttributeValue('attribute_platzkategorie');

    /* @var $store \Drupal\commerce_store\Entity\Store */
    $store = $order->getStore();

    /* @var $billing_profile \Drupal\profile\Entity\Profile */
    if ($billing_profile = $order->getBillingProfile()) {
      $address = $billing_profile->get('address')->view('page');
    }
  }
}

I have included the stylesheet directly as it is not that big and I thought that it would be an advantage when using it in emails.

Feel free to use it if you want to.

What I have seen so far is that this template is not triggered when using E-Mails. So I would like to ask you how to name the twig template for order receipts? I would appreciate

Twig template to format ticket pdf

Problem/Motivation

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Comments & Activities