Here we are trying to have a custom code that shows ("X people are looking at the store right now) and another showing (“X units left in stock”) by showing random numbers.
“We are already making plans to make such features natively available within our Funnelish editor”.
Step 1 (Adding the custom HTML codes)
-
Custom HTML 1: (X people are looking at the store right now)
Paste this code inside the first Custom HTML<div> <p><span class="p_number">X</span> people are looking at the store right now</div> </div> -
Custom HTML 2: (X units left in stock)
Paste this code inside another Custom HTML
<div> <p><span class="units_num">X</span> units left in stock.</div> </div>
Step 2 (Adding Custom JavaScript)
add the custom JS code needed to generate the random numbers inside Custom Codes > Custom JS(Body):
Here is the code that you have to add to Custom JS(BODY).
<script>
//generate a random value every 5 sec, feel free to change that.
const sec = 5;
let p_nums = document.querySelectorAll(".p_number");
let units_nums = document.querySelectorAll(".units_num");
function generateRandomInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
//init
p_nums.forEach(pnum => {
pnum.innerHTML = generateRandomInteger(1, 100);
})
units_nums.forEach(unitnum => {
unitnum.innerHTML = generateRandomInteger(1, 100);
})
var t = setInterval(() => {
// Generate a random number (people) between 1 and 100 including 1 and 100, every (sec) time.
p_nums.forEach(pnum, () => {
pnum.innerHTML = generateRandomInteger(1, 100);
});
// Generate a random number (units) between 1 and 100 including 1 and 100, every (sec) time.
units_nums.forEach(unitnum, () => {
unitnum.innerHTML = generateRandomInteger(1, 100);
});
}, sec * 1000);
</script>
Save Changes and ENJOY!