How can I use this code for the DAWN theme?

Technical Q&A
1

Hello,

I found a .js script that I would like to use but I cannot make it work because I dont know the coding for shopify to the fullest. Im a beginner.

I know that I need to put it in the theme.js.liquid file. But I dont have that in DAWM theme. So I guess its for the global.js.

I added the code in global.js but nothing happens. I guess the “classes” is correct for where to put the code?

Can someone help me modify it so I get the code working?

/**
 * 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);
	}
});
2

Hi @46855004463

You can create a new asset, called custom.js, paste your code

Kani_0-1670757891187.png
Kani_0-1670757891187.png293×356 21.3 KB

And open your theme.liquid, add this code before or
3

Hello,

I did this but I cannot get it to work. I guess that the JS script is written so that the classes for where to show the output is wrong. Can you help me?

4

pls share your store URL then I can look into it.

5

www.deytool.com

6

Hi @46855004463

Kani_0-1670810756279.png
Kani_0-1670810756279.png723×284 27.9 KB

/**
 * 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('.product-form .form');
	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);
	}
});