With Whiplash, you have the option to set up a Notification Email that can fire whenever an order ships. This would replace an email from your e-commerce provider. It is which option you'll use to notify customers of a shipment. Notification Emails are used to notify customers of a shipment, provide tracking or return info, or say "Thank you!"
It can be accessed in your Admin panel under the 'Email Confirmation' tab.
Customization
It's easy to customize the tracking e-mails we send your customers. We use liquid markup, along with standard HTML and CSS. You can read below for a primer
A Few Notes:
-
Templates should be valid HTML documents.
-
Templates should include CSS directly in the <head> or should link to an externally hosted stylesheet.
-
Aside from your logo, other images should be hosted externally and reference using absolute links.
-
It is recommended that all external files are available via both HTTP and HTTPS, and are referenced like: //your-external-asset.jpg (i.e. without specifying a protocol).
Whiplash Liquid Objects
These are referenced like {{order.number}}, {{customer.logo}}, {{order_item.sku}}.
Order
-
id - the whiplash order id
-
number - the incoming order number
-
barcode - order barcode
-
status - order status
-
created_at - when the order was added to whiplash
-
updated_at - when the order was last updated in whiplash
-
date - short format order date
-
shipping_address - you can grab the shipping address all at once
-
ship_method - order shipping method
-
order_items - the individual items in an order (see below for order item methods)
-
total - total order cost
-
ship_price - shipping cost
-
grand_total - order cost + shipping cost
-
paid - amount paid
-
balance - remaining balance
-
notes - any additional order notes
-
notes? - check if there are order notes
-
return_url - URL to web-based return/exchange form
-
domestic? - is this order domestic?
-
international? - is this order international?
-
greeting - attempts to return the shipping first name; falls back to "Friend"
-
tracking_numbers - an array of tracking numbers
-
tracking_link - the first or only tracking link for an order
-
tracking_links - a comma separated list of hyperlinked tracking numbers
-
billing_name
-
billing_street1
-
billing_street2
-
billing_city
-
billing_state
-
billing_state_abbr
-
billing_country
-
billing_zip
-
billing_phone
-
shipping_name
-
shipping_street1
-
shipping_street2
-
shipping_city
-
shipping_state
-
shipping_state_abbr
-
shipping_country
-
shipping_zip
-
shipping_phone
Order Item
-
sku - item SKU
-
quantity - how many were ordered
-
weight - item weight
-
price - item price
-
total - quantity x price
-
description - item description
Customer
-
name - customer name
-
logo - customer logo image
-
logo_url - logo image URL, if you'd like to use your own image tag or CSS
-
logo? - check if there is a customer logo uploaded
Liquid Reference
There are two types of markup in Liquid: Output and Tag.
-
Output markup (which may resolve to text) is surrounded by
{{ matched pairs of curly brackets (ie, braces) }}
-
Tag markup (which cannot resolve to text) is surrounded by
{% matched pairs of curly brackets and percent signs %}
Output
Here is a simple example of Output:
Hello {{name}} Hello {{user.name}} Hello {{ 'tobi' }}
Advanced output: Filters
Output markup takes filters. Filters are simple methods. The first parameter is always the output of the left side of the filter. The return value of the filter will be the new left value when the next filter is run. When there are no more filters, the template will receive the resulting string.
Hello {{ 'tobi' | upcase }} Hello tobi has {{ 'tobi' | size }} letters! Hello {{ '*tobi*' | textilize | upcase }} Hello {{ 'now' | date: "%Y %h" }}
Standard Filters
-
date - reformat a date (syntax reference)
-
capitalize - capitalize words in the input sentence
-
downcase - convert an input string to lowercase
-
upcase - convert an input string to uppercase
-
first - get the first element of the passed in array
-
last - get the last element of the passed in array
-
join - join elements of the array with certain character between them
-
sort - sort elements of the array
-
map - map/collect an array on a given property
-
size - return the size of an array or string
-
escape - escape a string
-
escape_once - returns an escaped version of html without affecting existing escaped entities
-
strip_html - strip html from string
-
strip_newlines - strip all newlines (\n) from string
-
newline_to_br - replace each newline (\n) with html break
-
replace - replace each occurrence e.g. {{ 'foofoo' | replace:'foo','bar' }} #=> 'barbar'
-
replace_first - replace the first occurrence e.g. {{ 'barbar' | replace_first:'bar','foo' }} #=> 'foobar'
-
remove - remove each occurrence e.g. {{ 'foobarfoobar' | remove:'foo' }} #=> 'barbar'
-
remove_first - remove the first occurrence e.g. {{ 'barbar' | remove_first:'bar' }} #=> 'bar'
-
truncate - truncate a string down to x characters
-
truncatewords - truncate a string down to x words
-
prepend - prepend a string e.g. {{ 'bar' | prepend:'foo' }} #=> 'foobar'
-
append - append a string e.g. {{ 'foo' | append:'bar' }} #=> 'foobar'
-
minus - subtraction e.g. {{ 4 | minus:2 }} #=> 2
-
plus - addition e.g. {{ '1' | plus:'1' }} #=> '11', {{ 1 | plus:1 }} #=> 2
-
times - multiplication e.g {{ 5 | times:4 }} #=> 20
-
divided_by - division e.g. {{ 10 | divided_by:2 }} #=> 5
-
split - split a string on a matching pattern e.g. {{ "a~b" | split:"~" }} #=> ['a','b']
-
modulo - remainder, e.g. {{ 3 | modulo:2 }} #=> 1
Tags
Tags are used for the logic in your template. New tags are very easy to code, so I hope to get many contributions to the standard tag library after releasing this code.
Here is a list of currently supported tags:
-
assign - Assigns some value to a variable
-
capture - Block tag that captures text into a variable
-
case - Block tag, its the standard case...when block
-
comment - Block tag, comments out the text in the block
-
cycle - Cycle is usually used within a loop to alternate between values, like colors or DOM classes.
-
for - For loop
-
if - Standard if/else block
-
include - Includes another template; useful for partials
-
raw - temporarily disable tag processing to avoid syntax conflicts.
-
unless - Mirror of if statement
Comments
Comment is the simplest tag. It just swallows content.
We made 1 million dollars {% comment %} in losses {% endcomment %} this year
Raw
Raw temporarily disables tag processing. This is useful for generating content (e.g. Mustache, Handlebars) which uses conflicting syntax.
{% raw %} In Handlebars, {{ this }} will be HTML-escaped, but {{{ that }}} will not. {% endraw %}
If / Else
{% if user %} Hello {{ user.name }} {% endif %} # Same as above {% if user != null %} Hello {{ user.name }} {% endif %} {% if user.name == 'tobi' %} Hello tobi {% elsif user.name == 'bob' %} Hello bob {% endif %} {% if user.name == 'tobi' or user.name == 'bob' %} Hello tobi or bob {% endif %} {% if user.name == 'bob' and user.age > 45 %} Hello old bob {% endif %} {% if user.name != 'tobi' %} Hello non-tobi {% endif %} # Same as above {% unless user.name == 'tobi' %} Hello non-tobi {% endunless %} # Check for the size of an array {% if user.payments == empty %} you never paid ! {% endif %} {% if user.payments.size > 0 %} you paid ! {% endif %} {% if user.age > 18 %} Login here {% else %} Sorry, you are too young {% endif %} # array = 1,2,3 {% if array contains 2 %} array includes 2 {% endif %} # string = 'hello world' {% if string contains 'hello' %} string includes 'hello' {% endif %}
Case Statement
{% case condition %} {% when 1 %} hit 1 {% when 2 or 3 %} hit 2 or 3 {% else %} ... else ... {% endcase %}
{% case template %} {% when 'label' %} // {{ label.title }} {% when 'product' %} // {{ product.vendor | link_to_vendor }} / {{ product.title }} {% else %} // {{page_title}} {% endcase %}
Cycle
{% cycle 'one', 'two', 'three' %} {% cycle 'one', 'two', 'three' %} {% cycle 'one', 'two', 'three' %} {% cycle 'one', 'two', 'three' %}
one two three one
{% cycle 'group 1': 'one', 'two', 'three' %} {% cycle 'group 1': 'one', 'two', 'three' %} {% cycle 'group 2': 'one', 'two', 'three' %} {% cycle 'group 2': 'one', 'two', 'three' %}
one two one two
For Loops
{% for item in array %} {{ item }} {% endfor %}
{% for item in hash %} {{ item[0] }}: {{ item[1] }} {% endfor %}
forloop.length # => length of the entire for loop forloop.index # => index of the current iteration forloop.index0 # => index of the current iteration (zero based) forloop.rindex # => how many items are still left? forloop.rindex0 # => how many items are still left? (zero based) forloop.first # => is this the first iteration? forloop.last # => is this the last iteration?
limit:int lets you restrict how many items you get. offset:int lets you start the collection with the nth item.
# array = [1,2,3,4,5,6] {% for item in array limit:2 offset:2 %} {{ item }} {% endfor %} # results in 3,4
Reversing the loop
{% for item in collection reversed %} {{item}} {% endfor %}
# if item.quantity is 4... {% for i in (1..item.quantity) %} {{ i }} {% endfor %} # results in 1,2,3,4
Variable Assignment
{% assign name = 'freestyle' %} {% for t in collections.tags %}{% if t == name %} <p>Freestyle!</p> {% endif %}{% endfor %}
{% assign freestyle = false %} {% for t in collections.tags %}{% if t == 'freestyle' %} {% assign freestyle = true %} {% endif %}{% endfor %} {% if freestyle %} <p>Freestyle!</p> {% endif %}
{% capture attribute_name %}{{ item.title | handleize }}-{{ i }}-color{% endcapture %} <label for="{{ attribute_name }}">Color:</label> <select name="attributes[{{ attribute_name }}]" id="{{ attribute_name }}"> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </select>