Transaction emails and personalisation

cmc

As most of us are aware transactional emails play a huge part in marketing within an e-commerce store.

I'm currently looking at overhauling mine, but it seems Foxycart offer very little ability to really go to town on these.

For instance, I'd like to add personalisation to my receipt, but the ^^name_first^^ doesn't appear to be a usable field in receipts.

Is using webhooks and external service the best way to go about this?

fc_adam

@cmc,

You can use the transaction datafeed to build your own receipt emails, or you can also use Twig templates - which is a new feature in 1.0 - to build out your own templates and remain within the FoxyCart setup. Information on Twig can be found here: http://wiki.foxycart.com/static/redirect/checkout

cmc

Thanks. I think that I want to use Mandrill http://mandrill.com/

But there doesn't appear to be any integration with Foxycart. Though it's owned by Mailchimp which does integrate.

Are there any how tos on using the datafeed?

fc_adam

@cmc,

If you take a look at our integrations page there are some generic integration examples for the datafeed, including one that gives a basic idea of sending a receipt. If you take that and customise as required - you'll just need to put in your mandrill specific code when it comes time for sending with in the endpoint. http://wiki.foxycart.com/integration

sparkweb

The nice thing about Mandrill is that you can use regular HTML email and just send it via SMTP to their servers and they take over from there. Sendgrid does much the same thing, though I prefer Mandrill because you get better stats and direct access to the webhooks. (With SendGrid you have to pay quite a bit before you get access to the webhooks.) I like using phpmailer.

cmc

@fc_adam do you mean this? http://wiki.foxycart.com/integration/foxycart/custom_receipt

It looks like I won't have all the data available:

Doesn't include custom fields
Doesn't take into account product price modifiers when calculating option price.

Would a checkbox to sign up to marketing count as a custom field?

I can't see how it lets me sent over all the information for deassembley and reassembly in Mandrill. Unless you mean the XML-to-email.php - How do I tell Foxycart to use that?

Only being comfortable with HTML/CSS is a pain. I really need to learn more. lol

fc_adam

@cmc,

Unfortunately we don't have a full example for exactly what you're asking. The one you linked to was one of the examples I was referring to, and is more of a kickstarter.

So if we take it one step back, let me give a bit of context:

The XML datafeeds are a feature which sends an encrypted copy of the order details to an endpoint of your choosing. That endpoint is set in the stores FoxyCart administration, and is a server-side script (of any server side language) that is able to accept the encrypted information. From there, your script can do whatever it wants once it's decrypted the information. Whether that be adjusting something in a database like stock or user access levels, or passing information on to other services like newsletter subscription services, fulfilment houses, custom emails etc.

So that custom receipt script does have access to all of the information for the order, but currently it's just not coded to get that information from the XML it receives via the datafeed.

Is there a reason you're wanting to use mandrill to send the emails? For what it's worth, we currently use SendGrid as our outgoing email provider and keep a close eye on our stats to ensure we're getting really good deliverability.

Also, if you're not too familiar with server-side languages, I'd actually recommend either partnering with a developer to achieve what you're after, or working with the Twig templating available in 1.0. Using Twig templates you can customise the template as much as you want, even completely rewriting the structure if you want.

If you'd like to work with a developer, we can recommend some who are familiar with FoxyCart already that could help you - or if you perhaps give some more details on what exactly you're wanting to customise we can give some more specific advice.

cmc

Thanks fc_adam. Great post, thanks.

Basically I just want to strip apart the receipt e-mail and rebuild it. It looks like I (well maybe not me) can do this with Mandrill.

Obviously I can create a nice looking HTML e-mail using FC, but as cart contents, addresses etc.. are all held in blocks (^^receipt^^, ^^cart^^), I can't style or separate the individual elements of these blocks to create the type of e-mail I desire.

I don't know if this is possible, but I'd also like to be able to show a small thumbnail image of the ordered product in the HTML version of the receipt too.

Is Mandrill the best way of going about what I want to achieve? The reason for choosing it, is that I'll be sending less than 2,000 e-mails a month so it would be completely free.

If a developer is required for this do you have any idea on how long it would take and cost?

sparkweb

@cmc - is this a 1.0 store? Because you could definitely do all this using Twig and wouldn't need to use the datafeed or Mandrill at all. You just use the Twig templating language to customize the email template. You don't have to use ^^cart^^ any more but can reference fields directly.

cmc

0.7 - presumably I can upgrade to 1.0 though?

I running wordpress and using the excellent foxyshop plugin.

fc_adam

@cmc,

Probably worth noting is that all Mandrill will give you is a way to send HTML emails. It won't build out the template for you - you'll still need to capture the XML datafeed yourself, and build a script which takes the order details, pulls out the information you need and then pass the data and template information over to Mandrill for it to send.

I'd definitely suggest taking a look at Twig documentation over here: http://wiki.foxycart.com/static/redirect/checkout - unless you're wanting to get custom in how the receipt email is sent, the ability to customise the template would be equal between Twig and going completely custom with the datafeed.

Also, you can definitely upgrade - take a look at the upgrade notes here: http://wiki.foxycart.com/static/upgrading and I'm sure @sparkweb will be able to give you some pointers on anything to note with FoxyShop

cmc

I've upgraded to v1.0

I want to have a go at templating my receipt via Twig, and have checked out the documentation.

So presumably wherever I want certainly elements to appear in the template I can can just drop them in? So for personalisation I could use:

Dear {{ first_name }} {{ last_name }}

That seems simple enough.

The problem is that I can't see anyway within Foxycart or other to actually test the e-mail template at all. So how am I to know that it's all working right, and what it looks like?

fc_adam

@cmc,

If you put through a test transaction, you can resend the receipt email for that same transaction from within your stores transaction report - so you just keep resending that same receipt.

In terms of the personalisation, that's right - just use the existing tags as reference as customise as needed.

cmc

I basically want to display the following:

customers name
payment details
billing address
shipping address

Not necessarily in that order.

I also want to show the product with small thumbnail image, and the price, in a table. Kind of like the default html template for 1.0

I can't seem to find a list of all the twig placeholders for foxycart though.

fc_adam

@cmc,

What ones are you missing?

cmc

I'm sure somewhere I saw a massive list of them.

Now all I can find is the regular ones like ^^cart^^ etc..

I guess I want things like {{ billing address }}, {{ shipping address}} even better if these are broken up into the individual elements {{ house number }} {{ street }} etc..

Then all the separate elements for ^^cart^^ so that I can style them in my own table.

fc_adam

@cmc,

I don't think we have a huge list of all of the placeholders for twig anywhere - your best bet would be to dig into the actual files that are linked to on the wiki page, and pull out the ones you need to use.

cmc

Something doesn't appear to be working.

^^subtotal^^

^^order_total^^

Have just been printed like that in my email.

Here's the source which is just a work in progress.

{% use 'cart.inc.twig' %}




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
<html xmlns="http://www.w3.org/1999/xhtml">;
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-gb" />

</head>

<body>

<!-- container -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">

    <tr> <!-- start first container row -->
	<td>
	</td>
	</tr> <!-- end first container row -->




  <tr><!-- start middle container row -->
	<td><!-- start e-mail -->
    
   	 <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" style="font-family:Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.5; color: #222222;">
   		 <tbody
        	<!-- start main content -->
       	 
     		 <tr>
   			 <td style="border-bottom: 3px solid #444444;"><img src="logo.jpg" width="199" height="36" alt="Motobulbs Logo" vspace="10" /></td>
     		 </tr>
 
     		 <tr>
       		 <td>&nbsp;</td> <!-- spacer -->
        	</tr>
 
 
     		 <tr>
       		 <td>
      				 <h2 style="font-family:Arial, Helvetica, sans-serif; font-size: 13px; color: #222222;" >Dear {{ first_name }} {{ last_name }}
,</h2>
                	<p >
Thanks for choosing ^^store_name^^. Here's your order summary email.

It's well worth a read because this will tell you what you'll be getting, and where we're going to send it to.
<br><br>
Your order number is <strong>^^order_id^^</strong>. 

Quote this if you ever need to contact us about your order.<br><br>

<h2 style="font-family:Arial, Helvetica, sans-serif; font-size: 13px; color: #444444; text-transform: uppercase;" >Here's what you paid</h2>

Item total: ^^subtotal^^ <br/> <br/>
^^order_total^^


<br><br>

<h2 style="font-family:Arial, Helvetica, sans-serif; font-size: 13px; color: #444444; text-transform: uppercase;" >This is what we'll be sending you</h2>
^^cart^^
<br><br>



                    </p>
      		  </td>
        	</tr>
       	 
        	<tr>
       		 <td><p>Here's some useful information you might want to read while waiting for your order.<br/></p></td>
        	</tr>
       	 
       	 
<tr>
       		 <td>&nbsp;</td>
        	</tr>


        	<tr>
       		 <td><h2 style="font-family:Arial, Helvetica, sans-serif; font-size: 13px; color: #444444;" >When will I receive my order?</h2>
                <p>We know you can't wait to test out your new purchase, so we try to dispatch all orders the same day, or next working day. Everything is sent by Royal Mail 1st Class. They've told us that orders should be delivered within 2-4 working days, but during busy periods it could be as much as 7 working days.</p>

                </td>
        	</tr>
       	 
<tr>
       		 <td>&nbsp;</td>
        	</tr>



        	<tr>
       		 <td><h2 style="font-family:Arial, Helvetica, sans-serif; font-size: 13px; color: #444444;" >What if I've changed my mind?</h2>
                <p>If you've changed your mind and want to return your order simply let us know by <a href="mailto:admin@motobulbs.co.uk">e-mail</a> and we'll provide further instruction. Provided your products are unopened and unused, and you contact us within 10 days, we'll issue a full refund. Outside of 10 days we'll offer to exchange your good for something that suits you better.</p></td>
        	</tr>
       	 
        	<tr>
       		 <td height="50" style="background-colour: #444444;">&nbsp;</td>
        	</tr>
       	 



        	<tr>
       		 <td align="center" style="border-top: 3px solid #444444;"> <br/> <a href="http://www.motobulbs.co.uk">^^store_name^^</a></td>;
        	</tr>
       	 
     	 </tbody>
   	 </table><!-- end main content -->

    
    
    
    
    
    
    
    
    
	</td><!-- end e-mail -->
  </tr> <!-- end middle container row -->
  <tr>    <!-- start third container row -->
	<td>
	</td>
  </tr>    <!-- end third container row -->
</table> <!-- end container -->


</body>
</html>

sparkweb

Did you try {{sub_total}} and {{order_total}} ?

cmc

They work.

That's odd that some things work as ^^#^^ but others as {{ # }}

Thanks

fc_adam

@cmc,

The ^^label^^ placeholders are the old ones that we've defined ourselves for the old templating setup in 0.7.2 and older. They're still there in 1.0 for backwards compatibility.

When working with twig, you'll just be using {{ label }} for placeholders to grab the information you want. If you look through the relevant templates as linked to on the wiki, you'll be able to see what these placeholders are for whey're they're used in the template. If you're looking for cart specific placeholders, you'll need to check the cart template fyi.

cmc

So basically Twig can use everything that the datafeed can use?

Think I'm slowly getting there.

Thanks for the patience.

cmc

Right I'm stuck on three things.

1) I can't find the right call to get the product image into the template. In the examples given by FC even the Twig template just contains ^^cart^^ with no separation of the individual cart.

2) What's the call for the total of a product. Say the user buys 2x Product A, and 3x Product B. I want to display a table breaking that out.

3) Presumably I need some sort of loop, to ensure that multiple products, get added to the table in the receipt e-mail. What needs to be included for that?

Here is the code I used for a table to test some calls. It was added to the code I previously posted above. Absolutely nothing in the table was pulled in. So I'm doing something wrong.

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-family:Arial, Helvetica, sans-serif; font-size:10px;">
  <tr>
    <th scope="col">Product Image</th>
    <th scope="col"><strong>Description</strong></th>
    <th scope="col"><strong>QTY</strong></th>
    <th scope="col"><strong>Price</strong></th>
  </tr>
  <tr>
    <td align="center"><img src="{{ item.image }}" width="20%"/></td>
    <td>{{ product_name }}</td>
    <td align="center" width="10%">{{ product_quantity }}</td>
    <td align="center" width="10%">{{ item.price_total }}</td>
  </tr>
</table>

fc_josh

Hey cms.
Some of our team is on the road today. Someone will respond soon to your post. Thanks for hanging in there.

Thanks,
Josh

fc_adam

@cmc,

As I mentioned, you'll need to dig into the separate cart template to see the Twig templates for the cart - looking at that template should give you an answer for all three of your questions

cmc

I never did find separate twig cart you referred to. Is it still around?

fc_adam

@cmc,

I'm very sorry - it looks like I may have given you the wrong link previously. You'll find the default twig templates available part way down on this page: http://wiki.foxycart.com/static/redirect/templates - with templates for the cart, checkout, receipt and emails.

cmc

Thanks. I've downloaded the card template, though that looks like it's to style the actual cart, not for use in emails.

I've seen the code

{{ cart_total_shipping }}

Now will that show the cost of shipping, or will that show the cart total including shipping?

fc_adam

That will show the total shipping for the order. The cart template covers both the email receipt and the cart, checkout and receipt pages. There is also a cart text template for use in the text email receipt.

cmc

I've checked out all the pages.

It doesn't seem to do what i want.

for instance

{{ item.image }}

Which is in the cart template doesn't call up and image in the email. There doesn't seem to be any twig code for the order number, or item name either. At least as far as I can see. :-(

fc_adam

@cmc,

Sorry for the confusion. We do know that it can be a bit hard to find the different variables for Twig - and we have plans to put together a complete cheatsheet with all the different variables listed - but for now looking for the matching values in the raw templates is your best bet.

The order number is available as {{ order_id }} - and you can find that in the receipt and the email templates.

Item name - I'm assuming you're referring to the product names? That is available as {{ item.name }}, when in a loop of all the items in the cart like {% for item in items %} {% endfor %}

{{ item.image }} should definitely display an image if one is available - but again, it would need to be within the loop of all the items as noted above.