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:
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).
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?
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);
}
@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
Update:
I understood how to collapse an element ( here if somebody’s wondering) 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
@workiapps Ok perfect, now your code works great on all pages! Thanks
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