DPD Custom Checkout and Delivery

 

DPD allows you to customize your Cart Checkout and Product Delivery pages. DPD uses the Twig Template engine for rendering your content. For additional information you can view Twig's on-line documentation: http://www.twig-project.org/documentation.

To start customizing your Checkout or Delivery pages:

1. Log in to DPD

2. Choose the store you want to customize from the store pulldown.

3. Click on Look and Feel in the left navigation.

4. Scroll to the middle section called Page templates and click on the template you want to customize.

 

When customizing your pages, you will be presented with two frames, an HTML source input and a preview area. You can click on the window expansion icon in the top-right of the preview area and it will pop the preview window out of the page, into a new window, so you can see what your page will look like without DPD around it.

As you update text in HTML source area, your preview area will automatically update after you stop typing, allowing you to see exactly what is changing without having to save, or reload the page.  Once you've made your changes, make sure that you select Use this Template from the radio buttons at the top and click save.  If you navigate away from the page without saving, all of your changes will be lost.

At the heart of the custom templates is plain HTML content.  You can make any changes to the HTML that you would like; these are your checkout and delivery pages after all. Integrated with HTML are Twig variables, filters, control structures, and snippets that you can use to flesh out your pages with dynamic content.

Variables:

DPD presents a set of data to your templates that defines the cart transaction or delivery page. Using the twig print tag, you can insert this data into your template.

To print out the cart total:

{{ total }}

Some of the variables are contained inside collections, which group similar data together.

To print out the name of your storefront:

{{ storefront.name }}

Filters:

Sometimes you have a need to change the way a variable is displayed.  For this case, DPD provides a set of filters to take care of common tasks.

To print your total formatted to match your currency setting:

{{ total | format_currency }}

To print your product file size in a human readable form:

{{ item.filesize | filesize }}

 

Control Structures:

There are several control structures that you can use to control how things are presented on your templates.

IF/ELSE allows you to do conditional logic to control what gets displayed.

To display your logo, if you have uploaded one to us:

{% if storefront.image %}
  <img src="{{storefront.image}}" />
{% endif %}

To display your logo, otherwise display your storefront name:

{% if storefront.image %}
    <img src="{{storefront.image}}" />
{% else %}
    <h1>{{storefront.name}}</h1>
{% endif %}

FOR allows you to iterate over collections. You would specifically need to do this for products, because there can be many products in a cart.  When you iterate over a collection, FOR creates a temporary variable that you can use inside of the FOR block.

To iterate over all of your products and output the product name:

<ul>
  {% for item in items %}
    <li>{{ item.name }}</li>
  {% endfor %}
</ul>

 

Snippets:

The control structures may seem a little intimidating to a non-programmer.  We understand this and have incorporated snippets to handle most of that for you. For most users, a snippet will take care of most of your needs and then you can jazz it up with your own styles.

To iterate over all of the items in your cart and output an HTML representation of each item:

{% include snippet.cart %}

 

Technical Details:

 

Variable Reference:

    Usage:

{{ storefront.name }}

    Purchase Variables:

purchase.purchase_id - The DPD transaction ID for this purchase
purchase.ip_address - The buyer's IP address
purchase.buyer_email - the buyer's email address
purchase.buyer_firstname - the buyer's first name
purchase.buyer_lastname - the buyer's last name

    Storefront Variables:

      storefront.name - The name of your storefront
      storefront.url - The URL of your website
      storefront.download_limit - The number of times you allow a user to download your product
      storefront.download_time_limit - The number of ours the user has to download your product
      storefront.contact_name - The name of your storefront contact person
      storefront.contact_email - The email address of your storefront contact person
      storefront.image - The URL of your storefront logo
      storefront.coupon_post_url - The URL used to post coupon codes to
      storefront.paypal_checkout_url - Your Paypal Checkout URL
      storefront.google_checkout_url - Your Google Checkout URL
      storefront.tracker_html - The tracking code you enter from your website setup.

    User Variables:

      user.username - Your personal DPD username
      user.first_name - Your first name
      user.last_name - Your Last Name
      user.full_name - Your first and last name
      user.email - Your email address

    Item Variables:

      items - Collection of (item); you'd really just iterate over these using FOR
      item.id - The DPD product identifier for your product
      item.name - Product name
      item.price - Product price
      item.description - Product description
      item.disclaimer - Disclaimer for your product
      item.mime_type - The mime type of your product file (file type)
      item.data_length - The product size in bytes
      item.filename - The filename of your product
      item.return_url - Where you want your customers to be sent to when they download their file
      item.sku - Product SKU (Shelf-Keeping Unit) number
      item.image.default - Your product image scaled to DPD's default size
      item.image['100x100'] - Your product image scaled to 100x100 pixels
      item.image['150x150'] - Your product image scaled to 150x150 pixels
      item.image['300x300'] - Your product image scaled to 300x300 pixels
      item.image['50x50'] - Your product image scaled to 50x50 pixels
      item.image['600x600'] - Your product image scaled to 600x600 pixels
      item.deliver_key - True/False does your product have a product key to deliver
      item.deliver_file - True/False does your product have a file to deliver
      item.combo - True/False is your product a combo product (combos's don't have a file)
      item.expires - The date/time when the product can no longer be downloaded
      item.buyer_email - Your buyer's email address
      item.buyer_firstname - Your buyer's first name
      item.buyer_lastname - Your buyer's last name
      item.buyer_street - Your buyer's street
      item.buyer_street2 - Your buyer's street (2nd line)
      item.buyer_city - Your buyer's city
      item.buyer_state - Your buyer's state
      item.buyer_country_code - Your buyer's country code
      item.buyer_zip_code - Your buyer's zip code
      item.paypal_txn_id - The paypal transaction id for the completed transaction
      item.product_key - The product key that should be delivered with the file
      item.download_url - The URL of your product download to be delivered

    Coupon Variables:

      coupons - Collection of (coupon); iterable
      coupon.name - The name of your coupon
      coupon.code - The coupon code used
      coupon.discount - The discount provided by the coupon
      coupon.discount_type - The type of discount

    Global Variables:

      discount - The total amount of coupon discounts
      total - Sum of all of your product prices, minus all coupon discounts

 

Filter Reference:

    capitalize - Capitalize all words
    date - Format a date/time: {{ item.expires | date("m/d/Y") }}
    default - Provide an alternate value when this value is empty: {{ item.sku | default(item.id) }}
    escape - Convert HTML tag characters so they aren't interpreted as HTML tags
    filesize - Print a human readable format for file size
    format - Format a string using C-style Type specifiers
    format_currency - Format a money amount using the currency setting of your storefront
    in - Returns true if the value is contained within another one
    join - Combine values in a sequence
    length - The number of items in a collection
    lower - Lowercase a string
    range - Create a sequece over a range {% for i in 0|range(10) %} ... {% endfor %}
    reverse - Reverse the order of a collection
    script - Create a script tag for a URL
    sort - Sort a sequence logically
    striptags - Remove HTML tags and replace adjacent whitespace with one space
    stylesheet - Create a style tag for a URL
    title - Titlecase a string (first letter of the first word)
    upper - Uppercase a string
    urlencode - URL encode a string

 

Control Structure Reference:

    for - lets you iterates over each item in a sequence.
    if/elseif/else - control what displays based on conditional statements
    include - display the contents of a snippet

Snippet Reference:

To use a snippet, use the form:

{% include snippet.cart %}

 

  snippet.cart - Display all items in your cart, allong with coupon processing form

<table class="carttable">
  <tr>
    <th width="35px">SKU</th>
    <th colspan="2">Product</th>
    <th class="price">Price</th>
  </tr>
  {%for item in items %}
    {% include snippet.cart_item %}
  {%endfor%}
  <tr id="couponRow" class="summaryrow">
    <td class="total" valign="top">Coupon</td>
    <td class="coupon-entry">
      <form action="{{storefront.coupon_post_url}}" method="post" id="coupon-form">
      <div class="coupon-field"><input type="text" name="code" id="code" value="" maxlength="20" /></div>
      <div class="coupon-button"><div class="sexy-button-clear"><a href="" onclick="this.blur(); var form = this; while(null != (form = form.parentNode)) if( form.nodeName == 'FORM') if( (form.onsubmit && form.onsubmit()) || (!(form.onsubmit)) ) form.submit();; return false;" class="sexy-button"><span>Apply</span></a></div></div>
      </form>
      <br /><br />
      {% for coupon in coupons %}
      <div class="coupon">{{coupon.name}} ({{coupon.code}})</div>
      {% endfor %}
    </td>
    <td class="total">Discount:</td>
    <td class="totalprice">{{discount | format_currency }}</td>
  </tr>
  <tr>
    <td class="coupon-toggle" colspan="2"> </td>
    <td class="total">Total:</td>
    <td class="totalprice">{{total | format_currency }}</td>
  </tr>
</table>

  snippet.cart_item - Display a product in your cart

<tr>
  <td class="productid" width="25px">{{item.sku}}</td>
  <td colspan="2"><strong>{{item.name}}</strong><a class="remove" href="{{item.remove_url}}">remove</a></td>
  <td class="price">{{item.price | format_currency }}</td>
</tr>

  snippet.checkout_buttons - Display all of your applicable download buttons

{% if storefront.paypal_checkout_url %}
  <a target="_top" href="{{storefront.paypal_checkout_url}}"><img src="https://www.paypal.com/en_US/i/btn/btn_xpressCheckout.gif" alt="Btn_xpressCheckout" /></a>
{% endif %}
{% if storefront.google_checkout_url %}
  <a target="_top" href="{{storefront.google_checkout_url}}"><img src="https://checkout.google.com/buttons/checkout.gif?w=180&amp;h=46..." alt="Checkout" /></a>
{% endif %}

  snippet.downloads - Display all of your product downloads in a list

<br class="clear" />
<ol>
  {% for item in items %}
    {% if not item.combo %}
      {% include snippet.download_item %}
    {% endif %}
  {% endfor %}
</ol>

  snippet.download_item - Display a single product download object. Includes download link, product activation key code, and return URL for each of your products

<li>
  <a class="delivery-file-image" returnurl="{{storefront.url}}" href="{{item.download_url}}"><img src="{{item.image['100x100']}}" alt="{{item.name}}" /></a>

  <div class="delivery-file-info">
    <a returnurl="{{storefront.url}}" href="{{item.download_url}}"><h3>{{item.name}}</h3></a>
    {% if item.deliver_key %}
    <div id="delivery-key"><h4>Product Activation Key</h4>
      {% if item.product_key %}
        {{ item.product_key }}
      {% else %}
        <p style="text-align:left"> Your product key is not available at this time. Please contact the vendor at <a href="mailto:{{storefront.contact_email}}">{{storefront.contact_email}}</a> to receive your key.</p>
      {% endif %}
    </div>
    {% endif %}
  </div>
  <div class="delivery-download-button">
    <a returnurl="{{storefront.url}}" class="btn" href="{{item.download_url}}">Download</a>      
    <p><em>{{item.data_length|filesize }}</em></p>
    <a class="returnlink">Return to Vendor's Site</a>
  </div>
  <br class="clear" />
</li>

  snippet.head - include common HTML head tags

<base href="{{base_href}}" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<link rel="shortcut icon" href="/favicon.ico" />

  snippet.header - Display your storefront logo if applicable, or display your storefront name

{% if storefront.image %}
  <img src="{{storefront.image}}" />
{% else %}
  <h1>{{storefront.name}}</h1>
{% endif %}