Squarespace Order Confirmation Page - Custom Tags & Info
THE PROBLEM: MISSING IMPORTANT INFORMATION ON ORDER CONFIRMED -PAGE.
There’s an important feature missing in Squarespace eCommerce: getting detailed information about the order on the order confirmation page. Often we’d need these to pass information to third parties for analytics, affiliate stuff, product reviews etc.
This is a pretty quickly written blog post about the problem but you should get the general idea so you can do it and customize to your needs.
Summary as a video demo
This will allow you to:
Get details of purchased products (product name, price, SKU and variant)
Get detailed info about the price (Total price, Shipping price, Taxes, Discount).
This will open you up for for calculations like total profit (total - taxes - shipping)Get variants to digital download products! (explained later)
The info we normally have is
: The unique ID of the confirmed order
: The subtotal of the confirmed order
: The subtotal of the confirmed order, in cents
: The grand total of the confirmed order
: The grand total of the confirmed order, in cents
: The customer's email address, as it was entered in the "Billing Info" section
This is missing tons of stuff we might need.
Let’s get to it!
As the needs related to this are quite specific I’ll only demonstrate the general underlying method needed to achieve this.
Enable Developer mode
Open site.region (or create a custom block and {@|apply} to site.region
Paste to <head>:
{.section order}
<script>
var siteJson = {@|json-pretty};
console.log(siteJson);
</script>
This simple code will give you all the information above.
Open your browser console to inspect the order information json. You’ll find the products, SKU’s, all the price info etc.
Depending on what you need you can extend the custom Javascript to pass the information to third parties.
Use SKU for variants and any custom info
A really useful hack is to use SKU to provide custom information. You can then split SKU to pieces and use those in order confirmation page. SKU could include “red-m” for variant info. It could include url to turn service product (which has variants unlike digital products) to a “digital download product”. It could include notes, description etc.
Add variants to digital download products
It’s now theoretically possible to create a service product instead of a digital download product and add variants.
Make SKU something like !Product name!downloadurl
So it’d be !My song!/my-cool-song.mp3
You can now use javascript to append the song name and song download url to order confirmation page. Still testing whether this is a usable solution in production.
Need help?
This topic is way too broad to cover all use-cases so we could only write a general guide on how things are possible. We might include more code snippets in the future. However as we’re using about developer mode, this is probably beyond the skillset of most non-developers.
If you need help implementing custom tags or getting custom information on checkout page, get in touch at help