initial commit
commit
ad0b317f65
|
|
@ -0,0 +1,355 @@
|
|||
<div class="twitch-icon" onclick="toggleTwitchWidget()">
|
||||
<img src="https://cdn.iconscout.com/icon/free/png-512/free-twitch-11-461838.png?f=webp&w=256" alt="Twitch Icon">
|
||||
</div>
|
||||
<div id="twitch-widget" class="twitch-widget">
|
||||
<div class="widget-content">
|
||||
<iframe id="twitch-stream"
|
||||
src="about:blank"
|
||||
width="350" height="200"
|
||||
allowtransparency="true" frameborder="0"
|
||||
sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts">
|
||||
</iframe>
|
||||
<iframe id="twitch-chat"
|
||||
src="about:blank"
|
||||
width="350" height="100%"
|
||||
allowtransparency="true" frameborder="0"
|
||||
sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts">
|
||||
</iframe>
|
||||
</div>
|
||||
<div class="widget-footer" onclick="toggleTwitchWidget()">
|
||||
<span class="close-button">✖</span>
|
||||
<span class="close-text">Close panel</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="discord-icon" onclick="toggleDiscordWidget()">
|
||||
<img src="https://cdn.iconscout.com/icon/free/png-256/discord-2752210-2285027.png" alt="Discord Icon">
|
||||
</div>
|
||||
<div id="discord-widget" class="discord-widget">
|
||||
<div class="widget-content">
|
||||
<iframe
|
||||
src="https://discord.com/widget?id=896713616089309184&theme=dark"
|
||||
width="350" height="100%"
|
||||
allowtransparency="true" frameborder="0"
|
||||
sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts">
|
||||
</iframe>
|
||||
</div>
|
||||
<div class="widget-footer" onclick="toggleDiscordWidget()">
|
||||
<span class="close-button">✖</span>
|
||||
<span class="close-text">Close panel</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.twitch-icon, .discord-icon {
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
border-radius: 10px; /* Added border radius for both icons */
|
||||
}
|
||||
.twitch-icon {
|
||||
bottom: 80px; /* Positioned above Discord icon */
|
||||
right: 20px;
|
||||
}
|
||||
.discord-icon {
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
.twitch-icon img, .discord-icon img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px; /* Ensure the border radius is applied to the images as well */
|
||||
}
|
||||
.twitch-widget, .discord-widget {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -350px; /* Default to slightly revealed */
|
||||
width: 350px;
|
||||
height: 100%;
|
||||
background: #2c2f33;
|
||||
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
|
||||
z-index: 1001; /* Ensure panels display over the icons */
|
||||
transition: right 0.3s ease-in-out;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.widget-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.twitch-widget .widget-content iframe, .discord-widget .widget-content iframe {
|
||||
display: block;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
.twitch-widget .widget-content iframe:first-child {
|
||||
height: 200px; /* Fixed height for the stream */
|
||||
flex: none;
|
||||
}
|
||||
.widget-footer {
|
||||
background: #23272a;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
.close-button {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.close-text {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#twitch-chat {
|
||||
background-color: #212529; /* Slightly darker shade */
|
||||
}
|
||||
|
||||
@keyframes jiggle {
|
||||
0%, 100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
12.5% {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
25% {
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
37.5% {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
62.5% {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
75% {
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
87.5% {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
}
|
||||
|
||||
.jiggle {
|
||||
animation: jiggle 1s ease-in-out;
|
||||
}
|
||||
|
||||
.twitch-icon:hover + .twitch-widget,
|
||||
.twitch-widget:hover,
|
||||
.discord-icon:hover + .discord-widget,
|
||||
.discord-widget:hover {
|
||||
right: -320px; /* Reveal 30px */
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--
|
||||
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 -->
|
||||
Loading…
Reference in New Issue