Freshly Baked First things first: I’d like to stop and say thank you to all of my customers and everyone I work with – and wish you all a very happy christmas and new year. By happy coincidence, this post is all about saying thanks: saying thank you to your customers when they buy something is a nice touch and I’m going to look at doing just that using this tasty recipe:
- WordPress 3.5 and Shopp 1.2.5 will form the base
Content templates for the decorative icing- Post functions and a humble page, because if you are doing this for a client they may want to easily change the thank you message itself – especially at or following this time of year – without having to get their hands sticky mixing code and rolling out HTML
Once a customer places an order, a confirmation email is dispatched automatically, so half the work is already done here. All we want to do is shoehorn in a little message and what we will do is use a custom template to override the default one used by Shopp.
The process of overriding default templates is covered over in the Shopp documentation quite nicely, but for anyone who is unfamiliar with this the basic idea is to create a directory named shopp within your theme directory. For instance, if your theme is Twenty Eleven then the path to any custom Shopp templates would look like this:
wp-content/themes/twentyeleven/shopp/ ...In this case, we are going to override email-order.php so at the end of this exercise a new version of that file should live in the above folder, like so (obviously if you are using a different theme then twentyeleven isn’t going to be part of the path):
wp-content/themes/twentyeleven/shopp/email-order.phpIf you’ve already installed custom templates then you may even have this file already in place. If you do, it’s contents probably look something like this:
Content-type: text/html; charset=utf-8
From: <?php shopp('purchase','email-from'); ?>
To: <?php shopp('purchase','email-to'); ?>
Subject: <?php shopp('purchase','email-subject'); ?>
<html>
<div id="header">
<h1><?php bloginfo('name'); ?></h1>
<h2><?php _e('Order','Shopp'); ?> <?php shopp('purchase','id'); ?></h2>
</div>
<div id="body">
<?php shopp('purchase','receipt'); ?>
<?php if (shopp('purchase','notpaid') && shopp('checkout','get-offline-instructions')): ?>
<p><?php shopp('checkout','offline-instructions'); ?></p>
<?php endif; ?>
</div>
</html>So pretty straightforward. This is an approximation of what it’s output looks like:
Freshly Baked Oatcakes
Order 15987
Order Num:15987
| Order Date: | December 22, 2012 3:35 pm |
|---|---|
| Billed To: | XXXXXXXXXXXX1111 (Visa) |
| Transaction: | (Authorized) |
| Items Ordered | Quantity | Item Price | Item Total |
|---|---|---|---|
| Premium Grade Oatcakes, 40kg | 1 | $41.32 | $41.32 |
| $41.32 | |||
| Shipping | $0.00 | ||
| Tax | 0% | ||
| Total | $41.32 | ||
What I want to do here is insert a little message below the header but above the minutiae of the order itself. This can be accomplished very easily simply by inserting a snippet into the template, like so (noting the new paragraph inside div#body):
Content-type: text/html; charset=utf-8
From: <?php shopp('purchase','email-from'); ?>
To: <?php shopp('purchase','email-to'); ?>
Subject: <?php shopp('purchase','email-subject'); ?>
<html>
<div id="header">
<h1><?php bloginfo('name'); ?></h1>
<h2><?php _e('Order','Shopp'); ?> <?php shopp('purchase','id'); ?></h2>
</div>
<div id="body">
<p> We would like to thank you for placing an order with
<em>Freshly Baked Oatcakes</em>
and wish you all the best for the festive season. </p>
<?php shopp('purchase','receipt'); ?>
<?php if (shopp('purchase','notpaid') && shopp('checkout','get-offline-instructions')): ?>
<p><?php shopp('checkout','offline-instructions'); ?></p>
<?php endif; ?>
</div>
</html>It’s that simple and if you are comfortable with everything described so far then that is probably all you need to know. Sometimes though it might be desirable to make the process of editing the message easier – such as if you are a designer/developer handing off the site to a client and want to empower them to make changes by themselves, without diving into a mix of HTML and PHP.
There’s quite a simple solution here. First, let’s create a new page. I’m going to call my page Email Thank You but you could name it whatever you like. We’re not going to add it to any of our menus, of course, because that’s not the role that this page is going to play. Instead, it is an easily editable way of storing our thank you message.
So, go ahead and publish the page and take note of the page ID. You can obtain this quite easily by looking at the URL query in your browser’s address bar when you are viewing the page in the editor:
http://www.your-cool-website.ca/wp-admin/post.php?post=240&action=editIn my example, above, the page (or to be accurate post) ID is 240 and of course this is likely to be different for you. Jot this down somewhere or commit it to memory and let’s make a final pass at editing our email template:
Content-type: text/html; charset=utf-8
From: <?php shopp('purchase','email-from'); ?>
To: <?php shopp('purchase','email-to'); ?>
Subject: <?php shopp('purchase','email-subject'); ?>
<html>
<div id="header">
<h1><?php bloginfo('name'); ?></h1>
<h2><?php _e('Order','Shopp'); ?> <?php shopp('purchase','id'); ?></h2>
</div>
<div id="body">
<?php
// Load the content of our thank you page
// (change the ID from 240 to whatever is appropriate)
$page = get_post(240);
$message = $page->post_content;
// We'll add paragraph tags, but no other filters normally
// used on post content will be used here
$message = wpautop($message);
// And display it!
echo $message;
?>
<?php shopp('purchase','receipt'); ?>
<?php if (shopp('purchase','notpaid') && shopp('checkout','get-offline-instructions')): ?>
<p><?php shopp('checkout','offline-instructions'); ?></p>
<?php endif; ?>
</div>
</html>Now we are drawing in the content from our Email Thank You page – making it a snap for merchants to easily edit the thank you message. This is fairly simple and means the merchant can ensure a seasonally appropriate message is contained in all their order confirmation emails. It’s also worth considering its limitations and areas for possible improvement.
- The usual gamut of filters that are applied to post or page content are not applied here. Example: if a smiley face is inserted it will not be transformed into its corresponding emoticon graphic – and the same applies to other magical bits of filtering that happen behind the scenes.
- Embedding images (emoticons included!) in the thank you page content does not mean your customer will be able to see them. Best practice with images in emails is beyond the scope of this tutorial and actually isn’t something I have a great interest in, but for any devs with time to spare you could look at parsing out any images that have been inserted into the post content and attaching them properly.
Hopefully that provides some ideas and also gives a good feel for the process of customizing Shopp templates generally. Now, with that done all that remains is for me to wish you all a final merry christmas and a happy new year!
If you have any questions or comments, please feel free to add them below and I’ll do my best to help over a cup of eggnog.
Barry thank so much for the in depth article. I have found very few really GOOD articles about shopping cart php issues and so this was a pleasant surprise. I will be checking this blog out a lot.
Glad you liked it Melissa – thanks for the kind words
Indeed, great post! Thanks for providing such a good resource for novice Shopp developers.
Thanks Max!