announcement-bar.liquid

{{ 'component-slideshow.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}

{%- liquid
  assign social_icons = true
  if settings.social_facebook_link == blank and settings.social_instagram_link == blank and settings.social_youtube_link == blank and settings.social_tiktok_link == blank and settings.social_twitter_link == blank and settings.social_pinterest_link == blank and settings.social_snapchat_link == blank and settings.social_tumblr_link == blank and settings.social_vimeo_link == blank
    assign social_icons = false
  endif

  if section.settings.enable_country_selector or section.settings.enable_language_selector
    assign language_country_selector = true
  endif

  if section.blocks.size > 0
    assign announcement_bar = true
  endif
-%}

{% if social_icons %}
  {{ 'component-list-social.css' | asset_url | stylesheet_tag }}
{% endif %}

<style>
/* ============================= */
/* Marquee Styles */
/* ============================= */

.announcement-bar__marquee {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.announcement-bar__marquee-content {
  display: flex;
  width: max-content;
  gap: 4rem;
  animation: marquee-scroll linear infinite;
  animation-duration: var(--marquee-speed, 15s);
}

.announcement-bar__marquee-content span {
  white-space: nowrap;
}

@keyframes marquee-scroll {
  from { transform: translateX(0%); }
  to { transform: translateX(-50%); }
}

@media screen and (max-width: 749px) {
  .announcement-bar__marquee-content {
    gap: 2rem;
  }
}
</style>

<div
  class="utility-bar color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator and section.blocks.size > 0 %} utility-bar--bottom-border{% elsif section.settings.show_line_separator and section.settings.show_social and social_icons%} utility-bar--bottom-border-social-only{% endif %}{% if section.settings.enable_country_selector or section.settings.enable_language_selector %} header-localization{% endif %}"
>
  <div class="{% unless section.settings.enable_marquee %}page-width{% endunless %} utility-bar__grid{% if announcement_bar and language_country_selector or section.settings.show_social and social_icons %} utility-bar__grid--3-col{% elsif language_country_selector or section.settings.show_social and social_icons %} utility-bar__grid--2-col{% endif %}">

    {%- if section.settings.show_social and social_icons -%}
      {%- render 'social-icons' -%}
    {%- endif -%}

    {%- if section.blocks.size > 0 -%}

      {%- if section.settings.enable_marquee -%}

        <!-- ✅ MARQUEE MODE -->
        <div
          class="announcement-bar"
          role="region"
          aria-label="{{ 'sections.header.announcement' | t }}"
          style="--marquee-speed: {{ section.settings.marquee_speed }}s;"
        >
          <div class="announcement-bar__marquee">
            <div class="announcement-bar__marquee-content">
              {%- for block in section.blocks -%}
                <span {{ block.shopify_attributes }}>
                  {{ block.settings.text | escape }}
                </span>
              {%- endfor -%}
              {%- for block in section.blocks -%}
                <span>
                  {{ block.settings.text | escape }}
                </span>
              {%- endfor -%}
            </div>
          </div>
        </div>

      {%- else -%}

        <!-- ✅ DEFAULT DAWN BEHAVIOR -->

        {%- if section.blocks.size == 1 -%}

          <div
            class="announcement-bar"
            role="region"
            aria-label="{{ 'sections.header.announcement' | t }}"
            {{ section.blocks.first.shopify_attributes }}
          >
            {%- if section.blocks.first.settings.text != blank -%}
              {%- if section.blocks.first.settings.link != blank -%}
                <a
                  href="{{ section.blocks.first.settings.link }}"
                  class="announcement-bar__link link link--text focus-inset animate-arrow"
                >
              {%- endif -%}
              <p class="announcement-bar__message h5">
                <span>{{ section.blocks.first.settings.text | escape }}</span>
                {%- if section.blocks.first.settings.link != blank -%}
                  {{- 'icon-arrow.svg' | inline_asset_content -}}
                {%- endif -%}
              </p>
              {%- if section.blocks.first.settings.link != blank -%}
                </a>
              {%- endif -%}
            {%- endif -%}
          </div>

        {%- else -%}

          <slideshow-component
            class="announcement-bar{% if section.settings.auto_rotate %} announcement-bar--auto-rotate{% endif %}"
            role="region"
            aria-roledescription="{{ 'sections.announcements.carousel' | t }}"
            aria-label="{{ 'sections.announcements.announcement_bar' | t }}"
          >
            <div class="announcement-bar-slider slider-buttons{% if section.settings.auto_rotate %} announcement-bar-slider--auto{% endif %}">

              <button
                type="button"
                class="slider-button slider-button--prev"
                name="previous"
                aria-label="{{ 'sections.announcements.previous_announcement' | t }}"
                aria-controls="Slider-{{ section.id }}"
              >
                <span class="svg-wrapper">
                  {{- 'icon-caret.svg' | inline_asset_content -}}
                </span>
              </button>

              <div
                class="grid grid--1-col slider slider--everywhere"
                id="Slider-{{ section.id }}"
                aria-live="polite"
                aria-atomic="true"
                data-autoplay="{{ section.settings.auto_rotate }}"
                data-speed="{{ section.settings.change_slides_speed }}"
              >
                {%- for block in section.blocks -%}
                  <div
                    class="slideshow__slide slider__slide grid__item grid--1-col"
                    id="Slide-{{ section.id }}-{{ forloop.index }}"
                    {{ block.shopify_attributes }}
                    role="group"
                    aria-roledescription="{{ 'sections.announcements.announcement' | t }}"
                    aria-label="{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
                    tabindex="-1"
                  >
                    <div
                      class="announcement-bar__announcement"
                      role="region"
                      aria-label="{{ 'sections.header.announcement' | t }}"
                    >
                      {%- if block.settings.text != blank -%}
                        {%- if block.settings.link != blank -%}
                          <a
                            href="{{ block.settings.link }}"
                            class="announcement-bar__link link link--text focus-inset animate-arrow"
                          >
                        {%- endif -%}
                        <p class="announcement-bar__message h5">
                          <span>{{ block.settings.text | escape }}</span>
                          {%- if block.settings.link != blank -%}
                            {{- 'icon-arrow.svg' | inline_asset_content -}}
                          {%- endif -%}
                        </p>
                        {%- if block.settings.link != blank -%}
                          </a>
                        {%- endif -%}
                      {%- endif -%}
                    </div>
                  </div>
                {%- endfor -%}
              </div>

              <button
                type="button"
                class="slider-button slider-button--next"
                name="next"
                aria-label="{{ 'sections.announcements.next_announcement' | t }}"
                aria-controls="Slider-{{ section.id }}"
              >
                <span class="svg-wrapper">
                  {{- 'icon-caret.svg' | inline_asset_content -}}
                </span>
              </button>

            </div>
          </slideshow-component>

        {%- endif -%}

      {%- endif -%}

    {%- endif -%}

    <div class="localization-wrapper">
      {%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}
        <localization-form>
          {%- form 'localization', id: 'AnnouncementCountryForm' -%}
            {%- render 'country-localization', localPosition: 'AnnouncementCountry' -%}
          {%- endform -%}
        </localization-form>
      {% endif %}

      {%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}
        <localization-form>
          {%- form 'localization', id: 'AnnouncementLanguageForm' -%}
            {%- render 'language-localization', localPosition: 'AnnouncementLanguage' -%}
          {%- endform -%}
        </localization-form>
      {%- endif -%}
    </div>

  </div>
</div>

{% schema %}
{
  "name": "t:sections.announcement-bar.name",
  "max_blocks": 12,
  "class": "announcement-bar-section",
  "enabled_on": { "groups": ["header"] },
  "settings": [
    {
      "type": "checkbox",
      "id": "enable_marquee",
      "label": "Enable marquee effect",
      "default": false
    },
    {
      "type": "range",
      "id": "marquee_speed",
      "min": 5,
      "max": 30,
      "step": 1,
      "unit": "s",
      "label": "Marquee speed",
      "default": 15
    },
    {
      "type": "checkbox",
      "id": "auto_rotate",
      "label": "Auto rotate",
      "default": false
    },
    {
      "type": "range",
      "id": "change_slides_speed",
      "min": 3,
      "max": 10,
      "step": 1,
      "unit": "s",
      "label": "Change slides speed",
      "default": 5
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "Color scheme",
      "default": "scheme-4"
    },
    {
      "type": "checkbox",
      "id": "show_line_separator",
      "default": true,
      "label": "Show bottom border"
    }
  ],
  "blocks": [
    {
      "type": "announcement",
      "name": "Announcement",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "default": "Welcome to our store",
          "label": "Text"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Announcement bar",
      "blocks": [{ "type": "announcement" }]
    }
  ]
}
{% endschema %}