Count down timer for cart


Some Background

Many web shopping carts persist your cart forever. If you add an item today and come back next week it is still there.

With ABPro adding a timeslot to your cart locks it so nobody else can have it. For that reason, cart entries are only allowed to be held for a limited time. If the customer doesn't submit in the allotted time, the slots are released back into the wild for others to select.

In operation, ABPro actually resets the timer every time the cart view is opened, to ensure a timeout does not occur just as the customer is submitting.


This How-To adds some Javascrpt code to display a count down timer letting the customer know how much time they have left to submit.
Edit the cart view file: \components\com_rsappt_pro3\views\cart\tmpl\default.php


There are 3 code snippets that need to be added.

1. In the jQuery init section.

Around line 165 look for and add red code

jQuery('#btnPrint').click(function() {

var fiveMinutes = 60 * <?php echo $apptpro_config->minutes_to_stale; ?>,
    display = jQuery('#time');
startTimer(fiveMinutes, display);



2. The startTimer function

Around line 246 add red code

function doAddMore(){

    return false;

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10); 

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.text(minutes + ":" + seconds);

        if (--timer < 0) {
            timer = duration;
    }, 1000);


3. Add the HTML to display the counter.

Around line 337, comment out the old warning and put in the new one..

<?php //echo JText::_('RS1_VIEW_CART_SCRN_TIMEOUT_WARNING_START')." ".$apptpro_config->minutes_to_stale." ".JText::_('RS1_VIEW_CART_SCRN_TIMEOUT_WARNING_END'); ?>
<div>Cart items will be released in <span id="time"></span> minutes!</div>





If you want a countdown timer on the mobile view you will need to make the same code additions to the default_mobile.php file also, but I think people use their phone differently than their desktops and are less likely to keep a phone window open for a long period of time.