shopify_announcement-bar.liquid

{%- if section.blocks.size > 0 -%}
  <div class="announcement-bar-wrapper" style="background-color: {{ section.settings.bg_color }}; color: {{ section.settings.text_color }};">
    <div class="announcement-slider">
      {%- for block in section.blocks -%}
        <div class="announcement-slide" {{ block.shopify_attributes }}>
          {%- if block.settings.link != blank -%}
            <a href="{{ block.settings.link }}" class="announcement-link">
          {%- endif -%}
            
            <p class="announcement-text">{{ block.settings.text }}</p>

          {%- if block.settings.link != blank -%}
            </a>
          {%- endif -%}
        </div>
      {%- endfor -%}
    </div>
  </div>
{%- endif -%}

<style>
  .announcement-bar-wrapper { 
    overflow: hidden; 
    width: 100%;
  }
  .announcement-slider { 
    display: flex; 
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* Movimiento suave */
  }
  .announcement-slide { 
    min-width: 100%; 
  }
</style>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const slider = document.querySelector('.announcement-slider');
    const slides = document.querySelectorAll('.announcement-slide');
    if (!slider || slides.length < 2) return;

    let currentIndex = 0;

    setInterval(() => {
      currentIndex = (currentIndex + 1) % slides.length;
      slider.style.transform = `translateX(-${currentIndex * 100}%)`;
    }, 3000); // Cambia cada 3 segundos
  });
</script>

{% schema %}
{
  "name": "Announcement Bar Pro",
  "max_blocks": 5,
  "settings": [
    {
      "type": "color",
      "id": "bg_color",
      "label": "Background Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text Color",
      "default": "#ffffff"
    }
  ],
  "blocks": [
    {
      "type": "announcement",
      "name": "Announcement",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "label": "Message",
          "default": "Free shipping on orders over $50"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link (Optional)"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Announcement Bar Pro",
      "blocks": [
        { "type": "announcement" },
        { "type": "announcement" }
      ]
    }
  ]
}
{% endschema %}