How to create a 10 minutes timer?

Ask the community
, ,
1

Hi people,
I’m totally a Velo beginner. I saw there are many posts and explanations on how to create a timer, but I wasn’t able to succeed with any of them.

I would just like to create a 10 minutes timer like the one you see below:

825×134 46.8 KB

I would like to place it on the cart page of my store and it should start every time a visitor adds a product.
It should not be related to a day, but instead to the number of minutes I choose (ex. 10).

Any suggestion? :innocent:

2 
/************************************
 * Global (Site) code (masterPage.js) *
 ************************************/

import wixStores from 'wix-stores';

$w.onReady(function () {
  wixStores.onCartChanged((cart) => {
var today = new Date();
var expiryTime = new Date();
expiryTime.setMinutes(today.getMinutes() + 10) //added 10 minutes
 var v = setInterval(function () { //will run for every 1 second
 var todayy = new Date();
 var distance = expiryTime - todayy; //result in millisecond. Ignore the code error
 
 var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); //converting millisecond to minutes
 var seconds = Math.floor((distance % (1000 * 60)) / 1000); //converting millisecond to seconds
  $w('#text16').text = (minutes + "Minutes " + seconds + "Seconds") 
 if (distance < 0) {
            clearInterval(v);
            $w('#text16').text = "Sorry product has been expired";
        }
    }, 1000);
    })
    })
3

Ajith, thank you a lot!
Is the best answer I ever received. :smile:

4

Hey Ajith,
I have one more question: is it possible to make this timer keep going even if the customer changes page, like to see another product, and then decides to come back to the cart page, where the timer is?

5

Anyway, your code works great! :pray: :pray: :pray:

1104×258 44.1 KB

6

Sorry for the delay. You can use Wix storage API.
wix-storage-frontend - Velo API Reference - Wix.com

7

Add a strip to header and enable collapse in properties panel.

import wixStores from 'wix-stores';
import { local } from 'wix-storage';

$w.onReady(async function () {
    wixStores.onCartChanged((cart) => {
 var today = new Date();
 var expiryTime = new Date();
        expiryTime.setMinutes(today.getMinutes() + 10) //10 minutes timer
        local.setItem("timer", expiryTime.toString())
 /* saves the timer in browser. When the site is reopened later in the same browser the timer can be recorved. 
NOTE: Date cant be saved in storage. So I converted the date to string */
        Carttimer(expiryTime)
    })
 if (!local.getItem("timer")) { //if the timer hasnt been saved before.
        $w('#columnStrip1').collapse() //else the strip will be collapsed.
    } else {
 let timer = local.getItem("timer"); //saved timer is recovered
        $w('#columnStrip1').expand()
        Carttimer(timer)
    }
});

function Carttimer(timer) {
 var v = setInterval(function () { //will run for every 1 second
 var tody = new Date().toString()
 var todayy = Date.parse(tody); //Parses a date string and it is converted to milliseconds
 var tor = Date.parse(timer)
 var distance = tor - todayy; //result in millisecond.
 var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); //converting millisecond to minutes
 var seconds = Math.floor((distance % (1000 * 60)) / 1000); //converting millisecond to seconds
        $w('#text16').text = (minutes + "Minutes " + seconds + "Seconds")
 if (distance < 0) {
            clearInterval(v);
            $w('#text16').text = "Sorry product has been expired";
            local.removeItem("timer") //removes the timer in browser. If you want the customer to see the "Sorry product has been expired" text again later. You can delete this line.
        }
    }, 1000);
}
8

@workiapps Thanks again for the answer and sorry for the delay too.

I’ve tried the code, but I couldn’t hide the strip in the other pages except for the cart page. I saw you wrote me something about “enable collapse in properties panel” that I didn’t understand, it could be that maybe?
Or maybe should I add a code on every page that hides the strip?
Thanks again :pray:

9

Update:
I understood how to collapse an element ( here if somebody’s wondering) :innocent: so I did it to the new strip I created on the header (and checked that its ID was correct), but now it never shows the strip, even not if I add a product.
I had to collapse the strip in the masterPage.js tab instead of in the tab where the rest of the code is, is maybe that the problem?
Thanks again again :pray:

10

@pat You need to place the strip in the header. So that it will be shown on all pages (except the pages you have activated No header and footer in Layout settings ) I have mentioned on my first reply as /*********** * Global (Site) code (masterPage.js) * *****************/ . Sorry, I was asleep at the time, so I didn’t mentioned more about that. You can copy and paste the code in site code(masterPage.js). So that the code will run on all pages.
https://support.wix.com/en/article/velo-where-do-i-put-my-code#i-want-some-code-to-run-on-every-page

I apologize for not being word perfect in English😉

11

@workiapps Ok perfect, now your code works great on all pages! Thanks :pray:

I have found another problem: if I add another article, or modify the existing articles on the cart page, the timer gets crazy.
Do you know a way how to avoid that the “wixStores . onCartChanged (( cart )” repeats?

Don’t worry, your English is probably better than mine :wink: