From f61ddebe3812fef6357fa2f5b12a0b79af699c3e Mon Sep 17 00:00:00 2001 From: Aravinth-Synt <154532966+VishnuVV26@users.noreply.github.com> Date: Tue, 30 Jun 2026 17:12:24 +0530 Subject: [PATCH] announcement bar setup --- config/settings_schema.json | 52 ++++++++++ locales/en.default.schema.json | 12 ++- sections/announcement-bar.liquid | 173 +++++++++++++++++++++++++++++++ sections/header-group.json | 39 ++++++- snippets/css-variables.liquid | 6 ++ 5 files changed, 280 insertions(+), 2 deletions(-) create mode 100644 sections/announcement-bar.liquid diff --git a/config/settings_schema.json b/config/settings_schema.json index 8d3b532d1..e716f5668 100644 --- a/config/settings_schema.json +++ b/config/settings_schema.json @@ -56,6 +56,10 @@ { "name": "t:general.colors", "settings": [ + { + "type": "header", + "content": "t:labels.base_colors" + }, { "type": "color", "id": "background_color", @@ -68,6 +72,54 @@ "default": "#333333", "label": "t:labels.foreground" }, + { + "type": "header", + "content": "t:labels.brand_colors" + }, + { + "type": "color", + "id": "color_primary", + "default": "#2B5BE0", + "label": "t:labels.color_primary" + }, + { + "type": "color", + "id": "color_secondary", + "default": "#6B7280", + "label": "t:labels.color_secondary" + }, + { + "type": "header", + "content": "t:labels.ui_colors" + }, + { + "type": "color", + "id": "color_border", + "default": "#E5E7EB", + "label": "t:labels.color_border" + }, + { + "type": "color", + "id": "color_error", + "default": "#EF4444", + "label": "t:labels.color_error" + }, + { + "type": "color", + "id": "color_success", + "default": "#10B981", + "label": "t:labels.color_success" + }, + { + "type": "color", + "id": "color_warning", + "default": "#F59E0B", + "label": "t:labels.color_warning" + }, + { + "type": "header", + "content": "t:labels.inputs" + }, { "type": "range", "id": "input_corner_radius", diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json index 2dfbc2f7d..0352763f5 100644 --- a/locales/en.default.schema.json +++ b/locales/en.default.schema.json @@ -37,6 +37,16 @@ "alignment": "Alignment", "background": "Background", "foreground": "Foreground", + "base_colors": "Base", + "brand_colors": "Brand colors", + "ui_colors": "UI & state colors", + "inputs": "Inputs", + "color_primary": "Primary", + "color_secondary": "Secondary", + "color_border": "Border", + "color_error": "Error", + "color_success": "Success", + "color_warning": "Warning", "grid_gap": "Grid spacing", "grid_item_width": "Grid item width", "input_corner_radius": "Input corner radius", @@ -72,6 +82,6 @@ "title": "Title", "subtitle": "Subtitle", "normal": "Normal text" - }, + } } } diff --git a/sections/announcement-bar.liquid b/sections/announcement-bar.liquid new file mode 100644 index 000000000..bb02ea62a --- /dev/null +++ b/sections/announcement-bar.liquid @@ -0,0 +1,173 @@ +{% if section.blocks.size > 0 %} + +
+ {% for block in section.blocks %} +
+ {% if block.settings.link != blank %} + + {{- block.settings.text -}} + + {% elsif block.settings.text != blank %} + + {{- block.settings.text -}} + + {% endif %} +
+ {% endfor %} +
+ +{% endif %} + +{% stylesheet %} + announcement-bar { + display: block; + width: 100%; + padding: 0.6rem 1rem; + text-align: center; + } + + .announcement-bar__track { + position: relative; + min-height: 1.25em; + display: flex; + align-items: center; + justify-content: center; + } + + .announcement-bar__slide { + display: none; + animation: ab-fade-in 0.4s ease; + } + + .announcement-bar__slide.is-active { + display: block; + } + + .announcement-bar__text { + font-size: 0.8125rem; + letter-spacing: 0.04em; + text-decoration: none; + line-height: 1.4; + } + + a.announcement-bar__text:hover { + text-decoration: underline; + } + + @keyframes ab-fade-in { + from { opacity: 0; transform: translateY(-3px); } + to { opacity: 1; transform: translateY(0); } + } +{% endstylesheet %} + +{% javascript %} + class AnnouncementBar extends HTMLElement { + connectedCallback() { + this._slides = Array.from(this.querySelectorAll('.announcement-bar__slide')); + if (this._slides.length <= 1) return; + this._index = 0; + const ms = (parseInt(this.dataset.interval, 10) || 5) * 1000; + this._timer = setInterval(this._rotate.bind(this), ms); + } + + disconnectedCallback() { + clearInterval(this._timer); + } + + _rotate() { + this._slides[this._index].classList.remove('is-active'); + this._index = (this._index + 1) % this._slides.length; + this._slides[this._index].classList.add('is-active'); + } + } + + customElements.define('announcement-bar', AnnouncementBar); +{% endjavascript %} + +{% schema %} +{ + "name": "Announcement bar", + "max_blocks": 6, + "settings": [ + { + "type": "color", + "id": "background_color", + "label": "Background color", + "default": "#000000" + }, + { + "type": "color", + "id": "text_color", + "label": "Text color", + "default": "#ffffff" + }, + { + "type": "range", + "id": "rotation_interval", + "label": "Rotation interval", + "min": 2, + "max": 15, + "step": 1, + "unit": "s", + "default": 5 + } + ], + "blocks": [ + { + "type": "announcement", + "name": "Announcement", + "settings": [ + { + "type": "text", + "id": "text", + "label": "Text", + "placeholder": "Announce something here" + }, + { + "type": "url", + "id": "link", + "label": "Link" + } + ] + } + ], + "presets": [ + { + "name": "Announcement bar", + "blocks": [ + { + "type": "announcement", + "settings": { + "text": "Free shipping on orders over $100 →" + } + }, + { + "type": "announcement", + "settings": { + "text": "New arrivals — shop the latest collection →" + } + }, + { + "type": "announcement", + "settings": { + "text": "Complimentary gift wrapping available →" + } + } + ] + } + ] +} +{% endschema %} diff --git a/sections/header-group.json b/sections/header-group.json index 25ed90714..e1c379c8c 100644 --- a/sections/header-group.json +++ b/sections/header-group.json @@ -11,12 +11,49 @@ "type": "header", "name": "t:general.header", "sections": { + "announcement-bar": { + "type": "announcement-bar", + "blocks": { + "announcement-1": { + "type": "announcement", + "settings": { + "text": "Free shipping on orders over $100 →", + "link": "" + } + }, + "announcement-2": { + "type": "announcement", + "settings": { + "text": "New arrivals — shop the latest collection →", + "link": "" + } + }, + "announcement-3": { + "type": "announcement", + "settings": { + "text": "Complimentary gift wrapping available →", + "link": "" + } + } + }, + "block_order": [ + "announcement-1", + "announcement-2", + "announcement-3" + ], + "settings": { + "background_color": "#000000", + "text_color": "#ffffff", + "rotation_interval": 5 + } + }, "header": { "type": "header", "settings": {} } }, "order": [ + "announcement-bar", "header" - ], + ] } diff --git a/snippets/css-variables.liquid b/snippets/css-variables.liquid index 99b5497a3..eeefb7163 100644 --- a/snippets/css-variables.liquid +++ b/snippets/css-variables.liquid @@ -13,6 +13,12 @@ --page-margin: {{ settings.min_page_margin }}px; --color-background: {{ settings.background_color }}; --color-foreground: {{ settings.foreground_color }}; + --color-primary: {{ settings.color_primary }}; + --color-secondary: {{ settings.color_secondary }}; + --color-border: {{ settings.color_border }}; + --color-error: {{ settings.color_error }}; + --color-success: {{ settings.color_success }}; + --color-warning: {{ settings.color_warning }}; --style-border-radius-inputs: {{ settings.input_corner_radius }}px; } {% endstyle %}