Insert something like this at the end of the file theme.js.liquid (visit your theme files in the Shopify admin > Online store > Themes > Live theme: Actions dropdown > Edit code > unfold the Assets folder on the left):
/**
* Insert text near the Buy button on the product page.
*
* E.g. "18 people are viewing this product right now."
*/
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
var $viewCountElement = document.createElement('div');
$viewCountElement.className = 'view-count shopify-payment-button';
$viewCountElement.innerText = Math.floor(Math.random() * (maxViews - minViews) + minViews) + ' ' + text;
// Determine where to put the new element
var $form = document.querySelector('.template-product .ProductForm');
var $pickupOptions = document.querySelector('.template-product .ProductMeta__StoreAvailabilityContainer');
if ($pickupOptions) {
// If there's currently an element about the pickup options on the page, insert our view count element before that
$pickupOptions.parentElement.insertBefore($viewCountElement, $pickupOptions);
} else {
// If there's no pickup options element on the page, just place the view count element at the end of the product form
$form.appendChild($viewCountElement);
}
});
Of course it's bad practice to mislead customers.
Insert something like this at the end of the file theme.js.liquid (visit your theme files in the Shopify admin > Online store > Themes > Live theme: Actions dropdown > Edit code > unfold the Assets folder on the left):
/**
* Insert text near the Buy button on the product page.
*
* E.g. "18 people are viewing this product right now."
*/
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
var $viewCountElement = document.createElement('div');
$viewCountElement.className = 'view-count shopify-payment-button';
$viewCountElement.innerText = Math.floor(Math.random() * (maxViews - minViews) + minViews) + ' ' + text;
// Determine where to put the new element
var $form = document.querySelector('.template-product .ProductForm');
var $pickupOptions = document.querySelector('.template-product .ProductMeta__StoreAvailabilityContainer');
if ($pickupOptions) {
// If there's currently an element about the pickup options on the page, insert our view count element before that
$pickupOptions.parentElement.insertBefore($viewCountElement, $pickupOptions);
} else {
// If there's no pickup options element on the page, just place the view count element at the end of the product form
$form.appendChild($viewCountElement);
}
});
Of course it's bad practice to mislead customers.
Hey Guys, here's the dawn theme implementation if anyone needs it!
You should add the code in the theme.liquid file at the place I have marked "ADD THE SCRIPT HERE" (You won't find this in your own theme, I just added it in mine to show you where). This is before the </body tag>.
The code:
<script>
document.addEventListener('DOMContentLoaded', function () {
var minViews = 2;
var maxViews = 20;
var viewText = 'people are viewing this product right now.';
var viewCountElement = document.createElement('div');
viewCountElement.className = 'view-count shopify-payment-button';
viewCountElement.innerText = Math.floor(Math.random() * (maxViews - minViews) + minViews) + ' ' + viewText;
var form = document.querySelector('product-info');
form.appendChild(viewCountElement);
});
</script>
Hi @CTomelius, @peppi , @planetjuniorseo , @46855004463 , @kimber286 ,
There two or more specific problems in this issue. How to implement it in your theme. The liquid names and the class name of the element in the product page.
1. You need to put this code at the end of the product page liquid, in my case it's product-template.liquid (I have debutify theme).
2. The class names of the element that you have in your product page.
In the case of the original code, they have and use Pickupoption and form element, then they try to find the pickuption element (class=".ProductMeta__StoreAvailabilityContainer") if they don't find it they put the new element (the div with the vistors counter) at the of the form.
In my case didn't work because in bothe cases of the IF evaluation it returns NULL in each variable ($pickupoptions=NULL and $form=NULL) then it do nothing.
3. My solution was to create new a new variable or you can use $picupoptions if you want and give it the value of the element that you have in your product page. In my case I used:
var $addToCartButton = document.querySelector('.btn--add-to-cart');Where .btn--add-to-cart is the button to ad to cart that has this class : btn btn--primary btn--add-to-cart full btn--addtocart_animation.
Instead of:
var $form = document.querySelector('.template-product .ProductForm');
var $pickupOptions = document.querySelector('.template-product .ProductMeta__StoreAvailabilityContainer');then you need to change the IF evaluation where you will find your product page element. In my case the code is:
if ($addToCartButton) {
$addToCartButton.parentElement.insertBefore($viewCountElement, $addToCartButton);
function updateViewers() {
// Generate a random number between 2 and 7
var randomViewers = Math.floor(Math.random() * 6) + 2;
viewCountText.data = randomViewers + ' ';
}
setInterval(updateViewers, 5000);
}My code is little diferent. It give a random number every 5 second.
Then the final code is like this:
var text = ' clientes están viendo este producto.';
var $viewCountElement = document.createElement('div');
$viewCountElement.className = 'view-count shopify-payment-button';
// add an eye icon at the beginning
var $eyeIcon = document.createElement('span');
$eyeIcon.className = 'material-icons-outlined';
$eyeIcon.textContent = 'visibility';
$viewCountElement.appendChild($eyeIcon);
// Generate a random number between 2 and 7 (first number)
var initialViewers = Math.floor(Math.random() * 6) + 2;
var viewCountText = document.createTextNode(initialViewers + ' ');
$viewCountElement.appendChild(viewCountText);
var textNode = document.createTextNode(text);
$viewCountElement.appendChild(textNode);
var $addToCartButton = document.querySelector('.btn--add-to-cart');
if ($addToCartButton) {
$addToCartButton.parentElement.insertBefore($viewCountElement, $addToCartButton);
function updateViewers() {
// Generate a random number between 2 and 7
var randomViewers = Math.floor(Math.random() * 6) + 2;
viewCountText.data = randomViewers + ' ';
}
setInterval(updateViewers, 5000);
}
I hope it can help you.
If you need more help, with a fee, you can write me to my e-mail sancino@gmail.com.
Best,
JP
Community Blog Articles
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024
We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024