Hey guys,
I’ve managed to implement a random viewer count on my product pages and it works! However, I am trying to insert an SVG of an eye and wrap parts of it in a to make it bold. I cant quite get it to work.
The other issue is that I’ve been trying to put it in a loop to change the viewer count every couple of seconds instead of just once during page load.
Could you help me out or give me a pointer in the right direction?
Shop: click me
Password: siesoh1616
Ps: Ive included the code, SVG and image of what I am trying to do below
Current code for viewer count:
document.addEventListener('DOMContentLoaded', function () {
// Minimum view count
var minViews = 2;
// Maximum view count
var maxViews = 20;
// Text to show after the view count number
var text = 'people are viewing this product right now.';
// Create the new element to display on the page
$(".view-count").get().forEach(function(entry, index, array) {
var $viewCountElement = Math.floor(Math.random() * (maxViews - minViews) + minViews) + ' ' + text;
$(entry).html($viewCountElement);
});
});
SVG for the eye:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-labelledby="title"
aria-describedby="desc" role="img" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Eye</title>
<desc>A solid styled icon from Orion Icon Library.</desc>
<path data-name="layer2"
d="M63.1 30.9C62.6 30.1 50 12.5 32 12.5S1.4 30.1.9 30.9L.1 32l.8 1.1c.5.8 13.1 18.4 31.1 18.4s30.6-17.6 31.1-18.4l.8-1.1zM32 47.5C18.5 47.5 8 35.8 5 32c3-3.8 13.5-15.5 27-15.5S56 28.2 59 32c-3 3.8-13.5 15.5-27 15.5z"
fill="#202020"></path>
<path data-name="layer1" d="M32 19.5a12 12 0 1 0 12 12 12 12 0 0 0-12-12zm0 18a6 6 0 0 1-5.2-9 2 2 0 0 1 3.5 2 2 2 0 0 0-.3 1 2 2 0 0 0 2 2 2 2 0 1 1 0 4z"
fill="#202020"></path>
</svg>
How it is right now:
How I am trying to make it look:
