398 lines
10 KiB
Plaintext
398 lines
10 KiB
Plaintext
{% assign bid = 'ann-bar-' | append: block.id %}
|
|
|
|
<div
|
|
id="{{ bid }}"
|
|
class="ann-bar"
|
|
data-hours="{{ block.settings.countdown_hours }}"
|
|
data-end="{{ block.settings.sale_end_datetime }}"
|
|
data-daily="{{ block.settings.reset_daily }}"
|
|
style="background: {{ block.settings.background_color }}; color: {{ block.settings.text_color }}; font-family: {{ block.settings.font_family }};"
|
|
{{ block.shopify_attributes }}
|
|
>
|
|
<div class="ann-bar__wrap">
|
|
{% if block.settings.show_icon %}
|
|
<span aria-hidden="true">{{ block.settings.icon_emoji }}</span>
|
|
{% endif %}
|
|
|
|
<p class="ann-bar__msg">{{ block.settings.message }}</p>
|
|
|
|
{% if block.settings.show_countdown %}
|
|
<div class="ann-bar__timer">
|
|
<span class="ann-bar__timer-label">{{ block.settings.countdown_label }}</span>
|
|
<div class="ann-bar__digits">
|
|
<div class="ann-bar__digit">
|
|
<span id="{{ bid }}-h">00</span>
|
|
<small>HRS</small>
|
|
</div>
|
|
<span class="ann-bar__sep">:</span>
|
|
<div class="ann-bar__digit">
|
|
<span id="{{ bid }}-m">00</span>
|
|
<small>MIN</small>
|
|
</div>
|
|
<span class="ann-bar__sep">:</span>
|
|
<div class="ann-bar__digit">
|
|
<span id="{{ bid }}-s">00</span>
|
|
<small>SEC</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if block.settings.show_cta %}
|
|
<a
|
|
class="ann-bar__btn"
|
|
href="{{ block.settings.cta_url }}"
|
|
{% if block.settings.cta_new_tab %}
|
|
target="_blank" rel="noopener"
|
|
{% endif %}
|
|
style="color: {{ block.settings.cta_text_color }}; background: {{ block.settings.cta_bg_color }}; border-color: {{ block.settings.cta_text_color }};"
|
|
>
|
|
{{- block.settings.cta_text -}}
|
|
</a>
|
|
{% endif %}
|
|
|
|
{% if block.settings.show_close %}
|
|
<button class="ann-bar__close" aria-label="Dismiss" style="color: {{ block.settings.text_color }};">
|
|
✕
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
#{{ bid }} {
|
|
position: sticky;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 9999;
|
|
padding: 10px 16px;
|
|
box-sizing: border-box;
|
|
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
#{{ bid }} .ann-bar__wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
gap: 8px 16px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
}
|
|
|
|
#{{ bid }} .ann-bar__msg {
|
|
margin: 0;
|
|
font-size: .95em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
#{{ bid }} .ann-bar__timer {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
#{{ bid }} .ann-bar__timer-label {
|
|
font-size: .85em;
|
|
opacity: .85;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#{{ bid }} .ann-bar__digits {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
}
|
|
|
|
#{{ bid }} .ann-bar__digit {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background: rgba(255,255,255,0.15);
|
|
border-radius: 4px;
|
|
padding: 2px 7px;
|
|
min-width: 36px;
|
|
}
|
|
|
|
#{{ bid }} .ann-bar__digit span {
|
|
font-size: 1.05em;
|
|
font-weight: 700;
|
|
font-variant-numeric: tabular-nums;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
#{{ bid }} .ann-bar__digit small {
|
|
font-size: .55em;
|
|
opacity: .75;
|
|
text-transform: uppercase;
|
|
letter-spacing: .06em;
|
|
}
|
|
|
|
#{{ bid }} .ann-bar__sep {
|
|
font-weight: 700;
|
|
opacity: .8;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
#{{ bid }} .ann-bar__btn {
|
|
display: inline-block;
|
|
padding: 4px 14px;
|
|
border: 1.5px solid;
|
|
border-radius: 3px;
|
|
text-decoration: none;
|
|
font-size: .85em;
|
|
font-weight: 700;
|
|
white-space: nowrap;
|
|
transition: opacity .2s;
|
|
}
|
|
|
|
#{{ bid }} .ann-bar__btn:hover { opacity: .75; }
|
|
|
|
#{{ bid }} .ann-bar__close {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 1em;
|
|
opacity: .7;
|
|
padding: 0 4px;
|
|
line-height: 1;
|
|
}
|
|
|
|
#{{ bid }} .ann-bar__close:hover { opacity: 1; }
|
|
|
|
#{{ bid }}.is-hidden { display: none !important; }
|
|
|
|
@media (max-width: 480px) {
|
|
#{{ bid }} .ann-bar__msg { font-size: .85em; }
|
|
#{{ bid }} .ann-bar__digit { min-width: 28px; padding: 2px 4px; }
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
(function() {
|
|
var bar = document.getElementById('{{ bid }}');
|
|
if (!bar) return;
|
|
|
|
// handle dismiss
|
|
var closeBtn = bar.querySelector('.ann-bar__close');
|
|
if (closeBtn) {
|
|
try {
|
|
if (sessionStorage.getItem('{{ bid }}_closed')) {
|
|
bar.classList.add('is-hidden');
|
|
return;
|
|
}
|
|
} catch(e) {}
|
|
|
|
closeBtn.addEventListener('click', function() {
|
|
bar.classList.add('is-hidden');
|
|
try { sessionStorage.setItem('{{ bid }}_closed', '1'); } catch(e) {}
|
|
});
|
|
}
|
|
|
|
var hEl = document.getElementById('{{ bid }}-h');
|
|
var mEl = document.getElementById('{{ bid }}-m');
|
|
var sEl = document.getElementById('{{ bid }}-s');
|
|
if (!hEl || !mEl || !sEl) return;
|
|
|
|
var endTime;
|
|
var key = '{{ bid }}_end';
|
|
var hours = parseInt(bar.dataset.hours, 10) || 24;
|
|
var endRaw = bar.dataset.end;
|
|
var resetDaily = bar.dataset.daily === 'true';
|
|
|
|
if (endRaw && endRaw.trim() !== '') {
|
|
endTime = new Date(endRaw).getTime();
|
|
} else if (resetDaily) {
|
|
var now = new Date();
|
|
endTime = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1).getTime();
|
|
} else {
|
|
try {
|
|
endTime = parseInt(localStorage.getItem(key), 10);
|
|
if (!endTime || Date.now() >= endTime) {
|
|
endTime = Date.now() + hours * 3600000;
|
|
localStorage.setItem(key, endTime);
|
|
}
|
|
} catch(e) {
|
|
endTime = Date.now() + hours * 3600000;
|
|
}
|
|
}
|
|
|
|
function pad(n) { return n < 10 ? '0' + n : n; }
|
|
|
|
function tick() {
|
|
var diff = endTime - Date.now();
|
|
if (diff <= 0) {
|
|
hEl.textContent = mEl.textContent = sEl.textContent = '00';
|
|
clearInterval(interval);
|
|
if ({{ block.settings.hide_on_end }}) bar.classList.add('is-hidden');
|
|
return;
|
|
}
|
|
var total = Math.floor(diff / 1000);
|
|
hEl.textContent = pad(Math.floor(total / 3600));
|
|
mEl.textContent = pad(Math.floor((total % 3600) / 60));
|
|
sEl.textContent = pad(total % 60);
|
|
}
|
|
|
|
tick();
|
|
var interval = setInterval(tick, 1000);
|
|
})();
|
|
</script>
|
|
|
|
{% schema %}
|
|
{
|
|
"name": "Announcement Bar",
|
|
"target": "body",
|
|
"settings": [
|
|
{
|
|
"type": "header",
|
|
"content": "Content"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "message",
|
|
"label": "Announcement message",
|
|
"default": "🔥 Flash Sale — Limited time only!"
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "show_icon",
|
|
"label": "Show icon / emoji",
|
|
"default": true
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "icon_emoji",
|
|
"label": "Icon or emoji",
|
|
"default": "⚡"
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Countdown Timer"
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "show_countdown",
|
|
"label": "Show countdown timer",
|
|
"default": true
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "countdown_label",
|
|
"label": "Countdown label",
|
|
"default": "Ends in:"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "countdown_hours",
|
|
"label": "Countdown duration (hours)",
|
|
"min": 1,
|
|
"max": 96,
|
|
"step": 1,
|
|
"default": 24,
|
|
"info": "Ignored if a specific end date is set below."
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "sale_end_datetime",
|
|
"label": "Sale end date & time (optional)",
|
|
"info": "ISO format e.g. 2026-03-05T23:59:59 — overrides duration above."
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "reset_daily",
|
|
"label": "Reset at midnight each day",
|
|
"default": false
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "hide_on_end",
|
|
"label": "Hide bar when countdown reaches zero",
|
|
"default": false
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Button"
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "show_cta",
|
|
"label": "Show button",
|
|
"default": true
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "cta_text",
|
|
"label": "Button text",
|
|
"default": "Shop Now"
|
|
},
|
|
{
|
|
"type": "url",
|
|
"id": "cta_url",
|
|
"label": "Button URL"
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "cta_new_tab",
|
|
"label": "Open in new tab",
|
|
"default": false
|
|
},
|
|
{
|
|
"type": "color",
|
|
"id": "cta_text_color",
|
|
"label": "Button text & border color",
|
|
"default": "#ffffff"
|
|
},
|
|
{
|
|
"type": "color",
|
|
"id": "cta_bg_color",
|
|
"label": "Button background",
|
|
"default": "#00000033"
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Appearance"
|
|
},
|
|
{
|
|
"type": "color",
|
|
"id": "background_color",
|
|
"label": "Background",
|
|
"default": "#c0392b"
|
|
},
|
|
{
|
|
"type": "color",
|
|
"id": "text_color",
|
|
"label": "Text color",
|
|
"default": "#ffffff"
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "font_family",
|
|
"label": "Font",
|
|
"default": "inherit",
|
|
"options": [
|
|
{ "value": "inherit", "label": "Theme default" },
|
|
{ "value": "sans-serif", "label": "Sans-serif" },
|
|
{ "value": "serif", "label": "Serif" },
|
|
{ "value": "monospace", "label": "Monospace" }
|
|
]
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Dismiss"
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "show_close",
|
|
"label": "Show close (X) button",
|
|
"default": true
|
|
}
|
|
]
|
|
}
|
|
{% endschema %}
|