I'm selling shirts on my website, and I want to add a countdown timer to the page to show how long left customers have to pre-order the shirts (only taking orders until a specified date when I'll manually shut off ordering from the Shopify backend).
I'd like to know if there is a way to accomplish outputting just the correct days/hours remaining to markup via some math operation (or other built-in function) in liquid? I'd prefer not to use a javascript based solution because I want a load of this operation to be on the server, not the front-end.
My end goal is to end up with something rendered that looks like this:
<p>You have <strong>14 days</strong> left to pre-order.</p>
...where the content inside the <strong> tags is generated by the function and shows days only until the last 24 hours when it would show hours remaining.
Is this possible with liquid? Would accomplishing with javascript actually be a better choice?
Site for reference: http://devtees.com/
It’s not that it isn’t possible in liquid due to syntax reasons, but I don’t believe that the variables you’re looking for exist in Shopify.
You’d probably need to create a custom variable (a 'metafield') for the deadline date, in which case you wouldn’t be able to filter it using liquid’s date filters (because the liquid doesn’t know it’s a date — it just sees it as a string). So you wouldn’t be able to affect the formatting, count down, etc.
Learn more about metafilters: http://docs.shopify.com/themes/liquid-documentation/objects/metafield
An alternative approach might be to leverage some combination of a metafield specifying the “last day to order” and toggling of the product’s availability. With that method, you could achieve something similar to the way Cotton Bureau shows the pre-orderability of their t-shirts.
Learn more about product availability: http://docs.shopify.com/themes/liquid-documentation/objects/product#product-available