Date and Time Specific Notices In BigCommerce Stencil

Background

Occasionally on Shoolu.com we would need to show some Date & Time Specific Notices in BigCommerce. For example, we wanted to show a notice in the cart that orders placed before Noon MST December 20th would need to select 2nd Day Air to get their orders in time for christmas, orders placed between Noon MST on December 20th and Noon MST on December 21st would need to select One Day Air, and orders after Noon MST on Friday were pretty much out of luck.

Here's what we'll be making

Time Sensitive Notices with BigCommerce Stencil

Handlebars Helpers Used

{{and}}, {{if}}, {{else}}

Standard control flow helpers. Used to test values and variables and display content based on the outcome. Using {{and}} and nesting two {{if}}s is exactly what we're going to be doing later on. (IF this AND IF this then do that)

{{moment}}

The {{moment}} helper is used to get and manage dates and times. The BigCommerce documentation on the helper is extremely lacking. It essentially takes the helper-date module and exposes it as moment even though helper-date is a combination of Moment.js and Date.js to manage and format Dates and Times.

It takes two values: {{moment <date> <format>}} so {{moment "now" "YYYY"}} would output today's 4 digit year (i.e. 2018).

Getting The Timestamps

Shoolu has visitors from all over the world but since our shipping cutoff is Noon MST I had to design the notice to account for that. Enter UTC (Coordinated Universal Time) and Unix Timestamps. Using UTC time means we don't have to account for time zones, and using the Unix Timestamps (number of seconds since 1/1/1970) is easier for comparison sake.

So given our example we need two different Unix Timestamps:

  • 12/20/18 Noon MST => 12/20/18 19:00 UTC => 1545332400
  • 12/21/18 Noon MST => 12/21/18 19:00 UTC => 1545418800

Let's Get Down To Business.

First things first, we want to set the outer bounds for when we want this notice to display at all. Let's start with the following block of code:

{{#and  (if (moment "now" "MM/DD/YYYY") ">=" "12/17/2018") (if (moment "now" "MM/DD/YYYY") "<=" "12/24/2018")}}


{{/and}}

This takes advantage of the {{and}} and the {{moment}} Handlebars Helpers. The syntax is a little weird but that blocks basically says:

  • If the current Date is after or equal to 12/17 and if the current Date is before or equal to 12/24 then display the contained code.

This definitely took me way too long to figure out, but in order to nest Handlebars Helpers, you wrapped the nested ones in Paranthesis instead of the Dobule Brackets.

Using The Timestamps

Now let's expand the block from above to include the specific messages based on the timestamps. Check it out:

{{#and  (if (moment "now" "MM/DD/YYYY") ">=" "12/17/2018") (if (moment "now" "MM/DD/YYYY") "<=" "12/24/2018")}}

{{#if (moment "now" "X") "<=" "1545332400"}}
  // First Message
{{else if (moment "now" "X") "<=" "1545418800"}}
  // Second Message
{{else}}
  // Ooops, Too Late.
{{/if}}

{{/and}}

(moment "now" "X") is how you get the current time as a UNIX timestamp, then we just use the if block to check if it's before the two timestamps.

Final Code

With an icon and some styling here's the final code:

{{#and  (if (moment "now" "MM/DD/YYYY") ">=" "12/17/2018") (if (moment "now" "MM/DD/YYYY") "<=" "12/24/2018")}}
<section class="christmasShippingBanner"> 
    <i class="fas fa-gift"></i>
    {{#if (moment "now" "X") "<=" "1545332400"}}
    <p>Order Before 12 Noon (MST) on Thursday (12/20) and Select <b>Two Day Shipping</b> at checkout to get it before Christmas</p>
    {{else if (moment "now" "X") "<=" "1545418800"}}
        <p>Order Before 12 Noon (MST) on Friday (12/21) and Select <b>One Day Shipping</b> at checkout to get it before Christmas</p>
    {{else}}
        <p>Unfortunately, at this point, your order will most likely not make it before December 25th.</p>
    {{/if}}
</section>
{{/and}}

It seems like with a lot of the tools available through Bigcommerce's Stencil framework, you can do a lot of interesting things, however, there are definitely some tools and features I wish it had built out of the box and that the documentation was a little better. Like how the marketing banner block adds extra commas. Either way, let me know in the comments if this helped you, or shoot me a DM on twitter: @JackHarner

Leave a Reply

Your email address will not be published. Required fields are marked *

Keep Up With Harner Designs!

Get updates about New Projects, Products, Discounts, and Giveaways from Harner Designs!

By submitting your email, you agree to our Privacy Policy and give us consent to send you marketing and promotional emails. You can unsubscribe at any time.