I was looking at the counters for a count down
but they missed my requirement to get a starting point from a setting table. I know, this is a habit. I just don’t like having to change code for changing a setting. This post describes steps I did to roughly implement it. When I decided the layout, I’ll post a screenshot of it too.
Step 1: get data. In my case my setting table has an entry ‘enable_counter’, ‘countdown_dt’, and ‘countdown_image’. During the site load this is put in session variables.
import wixData from 'wix-data';
import {session} from 'wix-storage';
$w.onReady(function () {
wixData.query("site_settings")
.eq("setting_code", "venture_the_trails")
.find()
.then((oSiteSettings) => {
...
session.setItem("vttCountdown", false);
if (oSiteSettings.items[0].enable_countdown) {
session.setItem("vttCountdown", true);
session.setItem("vttCountdownDt", oSiteSettings.items[0].setting_countdown_dt);
}
...
}
});
So this makes the information available for use on a page. I want it on my home page. I placed a ‘text’ element on the page which is hidden on load. I named the element ‘txtCountDown’ and gave it the value ‘txtCountdown’. Why will be clear later. The code pieces currently look like this
import {session} from 'wix-storage';
$w.onReady(function () {
// Configure countdown
if (session.getItem("vttCountdown")) {
const dtCountDownTo = new Date(session.getItem("vttCountdownDt")).getTime();
const txtCountDown = $w('#txtCountDown').html;
$w('#txtCountDown').html = "";
let doCountDown = setInterval(function() {
const dtNow = new Date().getTime();
const dtDiff = dtCountDownTo - dtNow;
const txtCountDownNew = txtCountDown.replace("txtCountDown", dtDiff);
$w('#txtCountDown').html = txtCountDownNew;
}, 1000);
$w('#txtCountDown').show();
}
});
This is my starting concept. The result is namely a millisecond value. I’ll split it in days/weeks or what ever with some layout. But first the explanation.
When the session ‘vttCountdown’ is true, I set a variable with the date to countdown to, which was loaded into ‘vttCountdownDt’ currently as e.g. ‘2018-01-01’. Then I get the html from the text element I made, ‘#txtCountDown’. I do this, for if you just set it with ‘$w(’#txtCountDown’).html’ it will remove the style too (I didn’t see the option to set only the text yet). Next I initiated an interval for each second. Every time a second passed, I replace the text value ‘txtCountDown’ from my text element with the new value. Lastly I visualize the text element. With the replace the style remains.
Changing to a readable format can be done with the standard math functions. The style I’ll add with some div’s with the style attribute.
Just my concept for my counter reading from the database. So currenlty the layout is something like this. It’s just a screenprint of a section of a site where the background of this page is a photo. Still messing with colors/fonts but you get the picture.
