4W-merch/promotions_toggle.html

<!--
Made by OokamiKunTV, and is freely shared to be modified/improved.
Ensures various promotion details on a FourthWall store are encapsulated,
sorted, and properly displayed in a toggleable container to improve UX.

Use of this code is at your own risk: it may break things and need
adjustments depending on your site's code. Note that the script
processes the promotion details client-side, so different languages
may break the processing if the site is translated.
-->

<!-- Product Promotion Encapsulation -->
<style>
.product-info__promotion-description {
	position: relative;
	margin: 20px 0;
}

.product-info__promotion-description .toggle-button {
	background-color: var(--cc-btn-primary-bg);
	color: var(--color-on-primary);
	border: none;
	padding: 16px 24px;
	cursor: pointer;
	font-size: 16px;
	font-family: var(--font-family-heading);
	text-align: center;
	width: 100%;
	border-radius: var(--button-corner-radius);
	transition: opacity 0.3s;
	margin-bottom: 10px;
}

.product-info__promotion-description .toggle-button:hover {
	opacity: 0.8;
}

.product-info__promotion-description .promotion-content {
	max-height: 0;
	overflow: hidden;
	padding: 0 24px;
	background-color: var(--color-background);
	color: var(--color-on-background);
	border: 1px solid transparent;
	border-radius: var(--button-corner-radius);
	margin-top: -10px;
	font-size: 14px;
	transition: max-height 0.5s ease, padding 0.5s ease, border-color 0.5s ease;
	box-sizing: border-box;
}

.product-info__promotion-description .promotion-content.show {
	padding: 16px 24px;
	max-height: 500px;
	border-color: var(--cc-btn-primary-bg);
}

.promotion-content ul {
	list-style: disc;
	padding-left: 20px;
	margin: 0;
}

.promotion-content li {
	margin-bottom: 5px;
	position: relative;
}

.promotion-content li::marker {
	font-size: 14px;
}

.promotion-content li p {
	margin: 0;
	text-indent: -14px;
	padding-left: 14px;
}

/* Become a Member CTA button */
#btn-promotion-content-become-member {
	background-color: var(--cc-btn-primary-bg);
	color: var(--color-on-primary);
	border: none;
	border-radius: var(--button-corner-radius);
	padding: 10px 20px;
	font-family: var(--font-family-heading);
	font-size: 16px;
	cursor: pointer;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	margin: 20px auto 0 auto;
	transition: opacity 0.3s;
	width: 100%;
}
#btn-promotion-content-become-member:hover {
	opacity: 0.8;
}
</style>

<!-- Do not mess with this script unless you know what you're doing -->

<script>
document.addEventListener("DOMContentLoaded", function() {
	var descriptions = document.querySelectorAll('.product-info__promotion-description');
	
	descriptions.forEach(function(description) {
		var button = document.createElement('button');
		button.classList.add('toggle-button');
		button.textContent = "Show Promotion Details";
		
		var content = description.textContent.trim();

		// Split the content into parts
		var parts = content.split(/(?<=Members), /);  // Use regular expression to handle dynamic content
		var firstPart = parts[0].split(', ');
		var secondPart = parts[1].split('. ');

		var twitchDiscounts = [];
		var memberDiscounts = [];
		var otherPromotions = [];
		var freeShippingLine = '';
		var checkoutLine = '';

		firstPart.forEach(function(line) {
			if (/Twitch Subs/i.test(line)) {
				twitchDiscounts.push(line);
			} else if (/Members/i.test(line)) {
				memberDiscounts.push(line);
			} else {
				otherPromotions.push(line);  // Add to other promotions if it doesn't match predefined patterns
			}
		});

		secondPart.forEach(function(line) {
			if (/Free shipping/i.test(line)) {
				freeShippingLine = line;
			} else if (/Promotion auto-applied on checkout/i.test(line)) {
				checkoutLine = line;
			}
		});

		// Sort each category
		twitchDiscounts.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
		memberDiscounts.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
		otherPromotions.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));

		// Create the list items for each category
		var finalContent = '<ul>';
		twitchDiscounts.forEach(function(line) {
			finalContent += '<li><p>' + line + '</p></li>';
		});
		memberDiscounts.forEach(function(line) {
			finalContent += '<li><p>' + line + '</p></li>';
		});
		otherPromotions.forEach(function(line) {
			finalContent += '<li><p>' + line + '</p></li>';
		});
		if (freeShippingLine) {
			finalContent += '<li><p>' + freeShippingLine + '</p></li>';
		}
		if (checkoutLine) {
			finalContent += '<li><p>' + checkoutLine + '</p></li>';
		}
		finalContent += '</ul>';

		description.innerHTML = "";
		description.appendChild(button);
		
		var contentDiv = document.createElement('div');
		contentDiv.classList.add('promotion-content');
		contentDiv.innerHTML = finalContent;
		description.appendChild(contentDiv);
		
		button.addEventListener('click', function() {
			if (contentDiv.classList.contains('show')) {
				contentDiv.classList.remove('show');
				button.textContent = "Show Promotion Details";
			} else {
				contentDiv.classList.add('show');
				button.textContent = "Hide Promotion Details";
			}
		});
	});
	// Create the Become a Member CTA button
    var button = document.createElement('button');
    button.id = 'btn-promotion-content-become-member';
    button.textContent = 'Become a Member!';

    button.addEventListener('click', function() {
        var siteUrl = window.location.origin;
        var targetUrl = siteUrl + '/supporters/pricing';
        window.location.href = targetUrl;
    });

    // Inject the button at the end of the .promotion-content element
    var promotionContent = document.querySelector('.promotion-content');
    if (promotionContent) {
        promotionContent.appendChild(button);
    }
});
</script>
<!-- End of Product Promotion Encapsulation -->