Verbb

​
PDF Template#

You can create PDFs for your gift vouchers, using a template that you have total control over.

Start by ensuring you've setup the Voucher PDF Template under the General Settings for Gift Voucher.

Also check out Configuration for more options to adjust your PDF.

Next, you'll want to produce an actual link for your customer to download their PDF voucher. In most cases, this will be on the order summary page, an email, or both.

For example, on our order summary template (shop/customer/order.html), we have the following code looping through line items for the order. You can use the following single-line Twig variable:

{% for item in order.lineItems %}
    <a href="{{ craft.giftVoucher.getPdfUrl(item) }}">Download Gift Voucher</a>
{% endfor %}

This will output an anchor tag with a link to the gift voucher. You can also render all vouchers in a single PDF, as opposed to each line item as a separate PDF. Simple amend the template call to:

<a href="{{ craft.giftVoucher.getOrderPdfUrl(order.number) }}">Download All Gift Vouchers</a>

In both cases, the URL will look something similar to:

https://mysite.local/actions/giftVoucher/downloads/pdf?number=ba018a32b43cfef51c031f61ec4d2c48&lineItemId=12

This URL will be using the template you have defined under the Gift Voucher plugin settings.

​
Additional parameters#

You may find the additional parameters useful, especially during testing and development of these templates. Simply use one of the following values to append to the URL produced above.

  • &attach=false - Add this to not force the PDF to download. Instead, it'll be rendered inside the browser window. This will still render as a PDF and is useful for debugging layout issues.
  • &format=plain - Produces the same template as HTML, as opposed to PDF. Again, useful for debugging layout issues, or quickly prototyping layouts.

​
Template variables#

In the template itself, you'll have access to the following Twig variables:

​
order#

The parent order that this voucher was purchased from

​
codes#

A collection of Code Models. Depending on if you are using the functionality to show all vouchers for the order, or just per line item will dictate the amount of models in this collection.

​
Example template#

Below we've prepared a ready-to-go template, complete with provided CSS to get you started quickly.

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style>
        html {
            margin-top: 0in !important;
            margin-left: 0in !important;
        }

        @page {
            margin: 0px;
        }

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

        .voucher {
            width: 8in;
            height: 3.77in;
            position: relative;
        }


        .voucher-img {
            max-width: 100%;
            height: auto;
            position: relative;
        }

        .field-amount {
            position: absolute;
            top: 236px;
            right: 353px;
            color: #fff;
            font-size: 57px;
            line-height: 40px;
            font-weight: 500;
        }

        .field-content {
            position: absolute;
            width: 40%;
            right: 10px;
            top: 48px;
            text-align: center;
        }

        .demo-title {
            font-size: 35px;
            font-weight: 300;
            line-height: 1;
        }

        .demo-p {
            font-size: 16px;
            font-weight: 400;
            margin-top: 10px;
        }

        .field-code {
            padding: 15px;
            border: 1px dotted;
            margin: 35px 0 15px;
            font-size: 20px;
            font-weight: 600;
        }

        .field-expiry {
            padding: 8px 13px;
            background: #eee;
        }

        .field-customer {
            margin-top: 20px;
        }
    </style>
</head>

<body>

{% for code in codes %}
    <div class="voucher">
        <img class="voucher-img" src="https://verbb.io/uploads/plugins/gift-voucher/gift-card-img.jpg" />

        <span class="field-amount">{{ code.currentAmount | currency(order.currency, true) }}</span>

        <div class="field-content">
            <div class="demo-title">{{ code.voucher.title }}</div>
            <div class="demo-p">Check out our awesome range on our online store today.</div>

            <div class="field-code">{{ code }}</div>

            {% if code.expiryDate %}
                <div class="field-expiry">Valid from {{ code.voucher.dateCreated | date("M j, Y") }} to {{ code.expiryDate | date("M j, Y") }}</div>
            {% endif %}

            {% if order.customer.user %}
                <div class="field-customer">Gifted by {{ order.customer.user.name }}</div>
            {% endif %}
        </div>
    </div>
{% endfor %}

</body>
</html>

The above will produce a design similar to the below, which we of course encourage you to change to your needs!

Voucher Demo

Previous ← Redeeming Voucher Codes Next Single Voucher →