Adding a Countdown Timer

Follow

Comments

39 comments

  • Avatar
    Zetya Support

    This now works for collections as well.

  • Avatar
    Labor

    Does not work! I have done all these steps, I even use the solo theme, but nothing!

  • Avatar
    Zetya Support

    Hi Labor,

    Are you getting any Javascript errors showing up (e.g. look at the console in Firebug)? Also, I've updated the instructions to be a little more robust for themes that load scripts at the bottom of theme.liquid so please review.

    Thanks, Gavin.

  • Avatar
    Labor

    I have done everything as you said, I just don't get what you mean with this:

    Note that jQuery must be installed to use the countdown plugin, so make sure you include the plugin after jQuery.

    Also, I want to add this countdown to my frontpage, I have added the div below the frontpage picture(on a solo theme) but right now I see nothing but a grey background like on the keith wood website example countdown. I have installed  both the .min.js file and the countdown.css file and put the tags for both the script and the css in the right places accordingly.

    The countdown shows nothing, just a border(which is a surprise to me, first i didn't see anything.

    What do I do here? I have spent hours today trying to work a countdown, so if u would be able to fix this wow.

  • Avatar
    Zetya Support

    In the Solo theme, jQuery is included in the <head> section (of theme.liquid). It looks like this:

    {{ "jquery-1-3-1.js" | asset_url | script_tag }}

    (you probably want to update that to a later version of jQuery)

    Add the include for the countdown plugin after that (but still in the <head> section).

    If you want it to appear for the index template, change it to say {% if template == 'index' %}.

    Couple of suggestions for troubleshooting:

    • Make sure you have no javascript errors (use Firebug)
    • Try getting the countdown working without any Shopify Assistant code: jQuery('#countdown').countdown({until:new Date()});
    • Make sure there is a value appearing for product.metafields.sva.hide. You can do this by adding a Javascript alert: alert('Value is: {{ product.metafields.sva.product-hide }}');

    We can install it for you if you like, for a small fee. Please contact us and we'll give you a quote.

  • Avatar
    Labor

    Hi Shopify Concierge, I will try this and get back to you about this, thanks for your swift reply.

  • Avatar
    GR

    Gavin,

    The counter works well on the product page. On the index page however (or on any page where there are multiple instances required), I'm facing the same issue as the gentleman above. The reason is that due to the default div (#countdown) only one instance of the countdown is allowed per page. Will send you an email on this but your code may need to me modified to cater for pages where multiple instances of the counter are required.

    Cheers.

  • Avatar
    Zetya Support

    Hi GR,

    Having multiple countdown widget on a page works fine. I've updated the code to reflect this.

    Thanks, Gavin.

  • Avatar
    Leighton

    Hi, I'm trying to add this countdown timer on the front page of my client's store, to show a timer for every product on a grid of products. However, the timer is only showing up on the first product (screenshot attached). How can I make it show up on all products? When I inspect the element, the countdown div is showing up for each product, but no timer.

  • Avatar
    Zetya Support

    Hi Leighton,

    The sample code was updated recently to work for multiple timers. Can you please update your code. Basically, you need to give the <div> a class name instead of a unique id, then update the jQuery initialization code and CSS selector to match.

    Thanks, Gavin.

  • Avatar
    Leighton

    Thanks very much for your quick response. Works perfectly! Fantastic.

  • Avatar
    Zetya Support

    Just to remind folks you can use diiferent formats when initializing the countdown widget. E.g:

    div.countdown({
    until:new Date(time),
    compact: false,
    layout: 'Sale ends {dn} {dl} {hnn}{sep}{mnn}{sep}{snn} {desc}',
    description: ''
    });

    Check out the format demos:  http://keith-wood.name/countdown.html#layouts

  • Avatar
    Justin Norman

    I followed all the steps above and the javascript appears to be loading fine, but I still get this error: "Uncaught TypeError: Object [object Object] has no method 'countdown'"

    No countdown timer appears, although both products in index.php are successfully pulling in a value for "date-time". Any help would be appreciated. The store is currently located at http://thepeoplesprintshop.com

  • Avatar
    Zetya Support

    Hi Justin,

    Your shop has a password so I can't check, but that error means the countdown javascript file hasn't been loaded, or is being loaded too late. Make sure you have this line in theme.liquid after where jQuery is defined:

    {{ "jquery.countdown.min.js" | asset_url | script_tag }}

    Gavin.

  • Avatar
    Rick Davies

    Hey Gav!

    We have set up your assistant app here in Collections on this site : <removed> -- 8 tasks:4 to hide the collections, 4 to hide the collections' products (screenshot attached). I added the countdown scripts. Works great here:

    • <removed>/collections/sweet-cypress-vessels
    • <removed>/collections/sweet-cypress-vessels/products/ohashi-ryoki-masu-bath-salt

    ... but not here:

    • <removed>/collections/whimsical-watches
    • <removed>/collections/whimsical-watches/products/mr-jones-watches-cyclops-womens

    I'm a bit puzzled? Any ideas? What did we miss?

    Thanks!

    Rick

  • Avatar
    Zetya Support

    Hi Rick,

    The <div> element for the countdown timer is missing for the second product so that is why it isn't there. What does your liquid code look like?

    Thanks, Gavin.

  • Avatar
    Rick Davies

    Ha, yes indeed - t'is nowhere to be found! I am using this:

    {% if product.metafields.sva.hide != null %}  
    

    <div class="countdown" data-time="{{ product.metafields.sva.product-hide }}"></div>

    {% endif %}

  • Avatar
    Zetya Support

    Hi Ricky,

    Can you try  {% if product.metafields.sva.product-hide %}  instead. Shopify doesn't support  != null  being ruby-ish and all.

    You can test that there is a value set on the product by doing:

    <h1>=> {{ product.metafields.sva }}</h1>

    If there is no value then check the Hide Task is set up properly. Save it again it will re-write the metafield.

    Thanks, Gavin.

  • Avatar
    Rick Davies

    Gotcha. Cool beans. Works now. Question though. If I wanted to do a countdown to another event e.g. a price change - what are the Namespaces/Keys for the other metafields created. Also, is it possible to have the app schedule the addition/change/removal of a just a metafield (without an associated action)? That would be super-helpful...

  • Avatar
    Zetya Support

    Hi Ricky,

    The hide/show metafields are the only ones we suport right now, but I can see where you are coming from in terms of putting them on other tasks. I'll add that to the backlog. Creating an Add/Remove Metafield Task shouldn't be too difficult. What would you use it for? Any other activities that should be scheduled?

    Thanks, Gavin.

  • Avatar
    Rick Davies

    Well, we want to enable/disable the ability to purchase certain products between certain periods without removing the product URLs as that creates 404s and deadlinks. A metafield could be used to hang the product.liquid show/hide/enable/disable Liquid on. Pretty please? Would be awesome. Was hoping to hang it on the price == 0 or inventory == 0 as a backup...

  • Avatar
    Zetya Support

    Hi Rick,

    Thanks for your suggestions!

    Shopify Assistant now knows how to show/hide blog articles, and now includes metafields for anything that is scheduled across collections/products/articles:  http://support.zetya.com/entries/23448522-Shopify-Assistant-Metafields

    Re restricting the ability to purchase during certain periods based on Metafields I've added this idea to our backlog. In the interim, you may be able to use tags for this.

    Thanks, Gavin.

  • Avatar
    Raphael Paulin-Daigle

    Hi, I followed the instructions above and unfortunately, I got the same problem as Labor. I placed the timer on my index and in the product page, however, I can only see a gray box.  You can see the store here: http://shopulseboutique.com and enter shopulse123 as the password. Thanks

  • Avatar
    Zetya Support

    Hi Raphael,

    You have javascripts errors in your page. If you look at them you'll see that you are getting 404 errors, i.e. the countdown files can not be loaded. You'll need to upload these to your theme assets area.

    Firebug is highly recommended for debugging javascript problems.

    Gavin.

  • Avatar
    Raphael Paulin-Daigle

    Hi, I placed the files in my assets, but it still does not work... Thanks in advance for helping!

  • Avatar
    Zetya Support

    Hi Raphael,

    The countdown is now working, but it looks like you aren't setting the the times. You are putting it on the index page, so how are you referencing the collection or product?

    Thanks, Gavin.

  • Avatar
    Raphael Paulin-Daigle

    Hi Gavin,

    What do you mean by "how do I reference the collection or products"? To set the time I would just log in to Shopify Assistant and schedule when I want the collections to be hidden. Also, it does not look like it works on the product pages; there's only a grey box. Thanks

  • Avatar
    Zetya Support

    Hi Raphael,

    In Step 2 of the install instructions, you reference the collection or product you want the timer to work with using liquid:

    <div class="countdown" data-time="**{{ product.metafields.sva.product-hide }}**"></div>
    

    If you want to put the timer on the index page you will need to reference the product first using something along the lines of:

    {% assign product = collections[frontpage].products.first %}
    

    Regarding the product page, I took a look at http://shopulseboutique.com/collections/women/products/boss-orange-short-sleeve-shirt and noticed the data-time attribute is empty on the countdown div. This means you haven't set up a hide task on that product.

    Thanks, Gavin.

  • Avatar
    Vic Cao

    Do you think you could take a quick look? I've placed the code in the appropriate spots, and got the countdown timer to appear on product pages, but no such luck on home page and collection pages (although its just the colored box, no ticker).

    Can you confirm that everything is correct and that the jquery might be out of date? And perhaps provide some assistance on the home page and collections placement?

    loveandlaucnch.myshopify.com

  • Avatar
    Zetya Support

    As soon as I looked at your site with a browser debugging tool I could see that you haven't installed the countdown files into your assets area. Please review Step 1.

Please sign in to leave a comment.