Custom JS code for PVF.com with purcellville stand preorders

pvf-custom-js-v2.js

<hr />
<script>
/* Disable store except for open-for-shopping window */
let DEBUG = false;
let activeModes = getShoppingWindowMode();
verifyFutureShoppingWindowMode();
if (activeModes.length > 0) {  // disable disabling
	let css = document.getElementById('wp-custom-css');
	css.setAttribute('media', "max-width: 1px");
	let baseURL = 'https://potomacvegetablefarms.com/';
	if (!activeModes.includes(3) && !activeModes.includes(4)) {
		if (window.location.pathname.toLowerCase().indexOf('/shop') >= 0) {
			document.body.style.display = 'none';
			window.location.replace("https://potomacvegetablefarms.com/product-category/markets");
		}
		let a = document.querySelector('#preorder-link a');
		if (a) {
			a.href = baseURL + 'product-category/markets/'; // otherwise, shop/
		}
		a = document.querySelector('.return-to-shop a');
		if (a) {
			a.href = baseURL + 'product-category/markets/'; // otherwise, shop/
		}
		if (window.location.pathname.toLowerCase().indexOf('/product-category/purcellville') >= 0) {
			document.body.style.display = 'none';
			window.location.replace("https://potomacvegetablefarms.com/market-pre-orders");
		}
	} else if (!activeModes.includes(2)) { // 3 and/or 4
		if (window.location.pathname.toLowerCase().indexOf('/shop') >= 0) {
			document.body.style.display = 'none';
			window.location.replace("https://potomacvegetablefarms.com/product-category/purcellville");
		}
		let a = document.querySelector('#preorder-link a');
		if (a) {
			a.href = baseURL + 'product-category/purcellville/'; // otherwise, shop/
		}
		a = document.querySelector('.woocommerce-page .return-to-shop a');
		if (a) {
			a.href = baseURL + 'product-category/purcellville/'; // otherwise, shop/
		}
		if (window.location.pathname.toLowerCase().indexOf('/product-category/markets') >= 0) {
			document.body.style.display = 'none';
			window.location.replace("https://potomacvegetablefarms.com/market-pre-orders");
		}
	}
} else { // disabling, so forcibly disable
	if (document.body.classList.contains("woocommerce-page")) {
		document.body.style.display = 'none';
		window.location.replace("https://potomacvegetablefarms.com/market-pre-orders");
	}
}

function getShoppingWindowMode() {
/* modes == [1], [2], [2,3,4], [3,4], or [4] */
	let shoppingWindow = [];
	let dt = new Date();
	let h = dt.getUTCHours();
	let d = dt.getUTCDay();
	let startWindow, endWindow;
	let currentWindow = d.toString() + h.toString().padStart(2, '0');

	function inWindow(start, end, current){
		return (start <= current && current < end);
	}

	// mode 1
	startWindow = "512";
	endWindow = "519";
	if (inWindow(startWindow, endWindow, currentWindow)) {
		shoppingWindow.push(1);
	} else {
		// mode 3 or 4
		startWindow = "212";
		endWindow = "316";
		if (inWindow(startWindow, endWindow, currentWindow)) {
			shoppingWindow.push(3);
		}
		startWindow = "212";
		endWindow = "504";
		if (inWindow(startWindow, endWindow, currentWindow)) {
			shoppingWindow.push(4);
		}
		// mode 2
		let everyOtherStart = new Date("May 17, 2020 8:00 AM");  // arbitrary start of every-other-week calculation
		const ONE_DAY = 24 * 60 * 60 * 1000;  // hours*minutes*seconds*milliseconds
		const EVERY_OTHER_WEEK = 14;  // 14 days
		let diffDays = Math.round(Math.abs((dt - everyOtherStart) / ONE_DAY));
		startWindow = "012";
		endWindow = "219";
		if ((diffDays % EVERY_OTHER_WEEK >= 0 && diffDays % EVERY_OTHER_WEEK <= 2) && inWindow(startWindow, endWindow, currentWindow)) {
			shoppingWindow.push(2);
		}
	}
	if (DEBUG) console.log(`check: ${shoppingWindow.toString()}`);
	return shoppingWindow;
}

function verifyFutureShoppingWindowMode() {
/* modes == [1], [2], [2,3,4], [3,4], or [4] */
	let shoppingWindow = [];
	let dt = new Date();
	let h = dt.getUTCHours();
	let d = dt.getUTCDay();
	let startWindow, endWindow;
	let currentWindow = d.toString() + h.toString().padStart(2, '0');

	function inWindow(start, end, current){
		return (start <= current && current < end);
	}

	// mode 1
	startWindow = "512";
	endWindow = "519";
	if (inWindow(startWindow, endWindow, currentWindow)) {
		shoppingWindow.push(1);
	} else {
		// mode 3 or 4
		startWindow = "212";
		endWindow = "316";
		if (inWindow(startWindow, endWindow, currentWindow)) {
			shoppingWindow.push(3);
		}
		startWindow = "212";
		endWindow = "504";
		if (inWindow(startWindow, endWindow, currentWindow)) {
			shoppingWindow.push(4);
		}
		// mode 2
		let everyOtherStart = new Date("May 17, 2020 8:00 AM");  // arbitrary start of every-other-week calculation
		const ONE_DAY = 24 * 60 * 60 * 1000;  // hours*minutes*seconds*milliseconds
		const EVERY_OTHER_WEEK = 14;  // 14 days
		let diffDays = Math.round(Math.abs((dt - everyOtherStart) / ONE_DAY));
		startWindow = "012";
		endWindow = "219";
		if ((diffDays % EVERY_OTHER_WEEK >= 0 && diffDays % EVERY_OTHER_WEEK <= 2) && inWindow(startWindow, endWindow, currentWindow)) {
			shoppingWindow.push(2);
		}
	}
	if (DEBUG) console.log(`verify: ${shoppingWindow.toString()}`);
}

function customizePVF(modes) {
	if (DEBUG) console.log(`custom: ${modes.toString()}`);
	/* checkout */
	if (modes.length > 0) {  // no mode => no need to change
		let graft = document.querySelector('form.woocommerce-checkout .woocommerce-billing-fields .woocommerce-billing-fields__field-wrapper');
		let locations = ['Select pickup location'];
		let locations_values = [''];
		let stand = modes.includes(3) || modes.includes(4);
		if (modes.includes(1)) {
			locations = locations.concat(['Arlington', 'Dupont Circle', 'Falls Church', 'Reston']);
			locations_values = locations_values.concat(['Arlington', 'Dupont Circle', 'Falls Church', 'Reston']);
		} else if (modes.includes(2)) {
			locations = locations.concat(['Crossroads']);
			locations_values = locations_values.concat(['Crossroads']);
		}
		if (stand) {
			if (modes.includes(3)) { // Thursday or Saturday available
				locations = locations.concat(['Purcellville stand (Thursday)', 'Purcellville stand (Saturday)']);
				locations_values = locations_values.concat(['Purcellville_Thursday', 'Purcellville_Saturday']);
			} else {
				locations = locations.concat(['Purcellville stand (Saturday)']);
				locations_values = locations_values.concat(['Purcellville_Saturday']);
			}
		}
		if (graft != null) {
			let select = document.createElement("SELECT");
			for (loc = 0; loc < locations.length; loc++) {
				let option = document.createElement("option");
				option.setAttribute("value", locations_values[loc]);
				if (loc == 0) {
					option.selected = true;
				}
				option.text = locations[loc];
				select.add(option);
			}
			select.id = 'marketselect';
			select.required = true;
			select.pattern = `^(${locations_values.slice(1).join('|')})`;
			select.addEventListener('change', (event) => {
				if (event.target.value != '') {
					let notes = document.getElementById('order_comments');
					if (notes.innerHTML.trim() == '') {
						notes.innerHTML = event.target.value;
					} else {
						// find {possible market}CRLF and replace with new value
						let selectOptions = [];
						for (m = 0; m < event.target.length; m ++) {
							if (event.target.options[m].value.length > 0) {
								selectOptions.push(event.target.options[m].value);
							}
						}
						let re = new RegExp('^(' + selectOptions.join('|') + ')(\r\n)*');
						let where = notes.innerHTML.search(re);
						if (where == 0) {
							// replace it with new value
							notes.innerHTML = notes.innerHTML.replace(re, `${event.target.value}$2`);
						} else {
							// prepend it
							notes.innerHTML = `${event.target.value}\r\n` + notes.innerHTML;
						}
					}
				}
			});

			let label = document.createElement("LABEL");
			label.setAttribute('for', 'marketselect');
			label.innerHTML = `Select your location for pickup<abbr class="required" title="required">*</abbr>`;
			let paragraph = document.createElement("p");
			paragraph.id = 'market_location';
			paragraph.setAttribute("class", "form-row form-row-wide update_totals_on_change validate-required")
			let pnode = document.createTextNode('');
			paragraph.appendChild(pnode);
			/* append */
			paragraph.appendChild(label);
			paragraph.appendChild(select);
			let linebr = document.createElement("BR");
			paragraph.appendChild(linebr);
			graft.insertBefore(paragraph, graft.childNodes[0]);
		}
		/* shop, market pre orders */
		let notice = document.querySelector('#which-markets-open-notice');
		if (notice != null) {
			let location_string = '';
			if (modes.length == 1) { /* [1], [2], [4] */
				// locations_values[0] is always a null placeholder for a default/invalid option
				if (modes[0] == 1) {
					let last = locations_values.pop();
					locations_values.shift();  // lose the first blank value
					let tempstring = locations_values.join(', ') + (locations_values.length > 1 ? ',' : '') + ' and ' + last;
					location_string = `${tempstring} markets`;
				} else if (modes[0] == 2) {
					location_string = `${locations_values[1]} market`;
				} else if (modes[0] == 4) {
					location_string = `${locations[1]}`;
				}
			} else if (modes.length == 2) { /* [3,4] */
				location_string = `Purcellville stand (Thursday and Saturday)`;
			} else if (modes.length == 3) { /* [2,3,4] */
				locations_values.shift();  // lose the first blank value
				location_string = `${locations_values[0]} market and the Purcellville stand (Thursday and Saturday)`;
			}
			notice.innerHTML = `Pre-orders are currently open for the ${location_string}.`;
		}
	}
}

document.addEventListener('DOMContentLoaded', function() {
	customizePVF(activeModes);
});
</script>
<style>
/* fix bad SVG height borking on mobile Cart nav */
#toggle-cart {
	padding-bottom: 13.5px;
}
/* Don't display images and redundant content on product pages */
.woocommerce.single-product #page .woocommerce-tabs .panel h2 {
	display: none !important;
}
.woocommerce.single-product #page .woocommerce-tabs .panel p:first-of-type {
	margin-top: 0 !important;
}
.woocommerce #content div.product div.images {
	display: none !important;
}
.woocommerce #content div.product div.summary {
	width: 96% !important;
}
.woocommerce.single-product .product_meta, 
.woocommerce.single-product section.related.products {
	display: none !important;
	position: absolute !important;
}
/* /shop customization: don't display images, reduce text for item name, price, and button */
.woocommerce-placeholder.wp-post-image {
	display: none !important;
}
#woocommerce-wrapper .products .product .woocommerce-loop-product__title {
	font-size: 90% !important;
}
#woocommerce-wrapper .products .product .woocommerce-Price-amount {
	font-size: 80% !important;
}
#woocommerce-wrapper .products .product .button.add_to_cart_button {
	font-size: 0.73333rem;
	padding: 10px 10px !important;
}
#woocommerce-wrapper .products .product .added_to_cart {
	font-size: 0.73333rem;
	padding: 10px 16px !important;	
}
#woocommerce-wrapper .products li.product-category.first {
	margin-left: 8% !important;
}
#woocommerce-wrapper .products li.product-category {
	width: 40% !important;
}
#woocommerce-wrapper .products li.product-category a h2 mark {
	display: none !important;
}
#woocommerce-wrapper .products .product-category a img {
	display: none !important;
}
/* checkout: hide the additional area and use the space for billing */
.woocommerce .col2-set .col-1 {
	float: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 65% !important;
}
.woocommerce-additional-fields {
	display: none !important;
}
.woocommerce-order-received p.pvf-checkout-reminder {
	color: red;
	display: none !important;
	position: absolute !important;
}
/* Let's be reasonable and consistent about colors */
body[class*="woocommerce"] #page .woocommerce-notice--success {
	color: #1a7e49 !important;
}
/* breadcrumbs, results, ordering */
.woocommerce-breadcrumb, 
.woocommerce-result-count, 
.woocommerce-ordering {
	display: none !important;
	position: absolute !important;
}
/* preorder-link */
#preorder-link {
	text-align: center;
	width: 100%;
	display: block;
}
#preorder-link a.button {
	background-color: #897248;
	color: white;
	font-weight: 700;
}
#preorder-link a.button:hover {
	background-color: #685636;
}
/* market notice */
#which-markets-open-notice {
	font-weight: bold;
}
/* non-store tweaks */
.main-navigation a {
	padding: 8px 14px !important;
}
</style>