`sections/home-tab-banners.liquid`

117 lines
{% comment %}
  home-tab-banners
  ----------------
  Auto-generates ONE full-bleed banner per link in a chosen menu ("tabs"),
  each linking (href) to that link's target (usually a collection).
  Drop this in place of home-masonry / home-collections on the homepage.

  - Banner image  = the linked collection's image, else its first product image, else a fallback.
  - Banner title  = the menu link's title (override per-link by editing the menu).
  - Banner href   = the menu link's url.
  Add a tab to the menu -> a new banner appears automatically. No manual blocks.
{% endcomment %}

{% assign menu = linklists[section.settings.menu] %}

<section
  class="home-tab-banners home-tab-banners--{{ section.settings.height }}"
  data-section-id="{{ section.id }}"
  data-section-type="home-tab-banners"
>
  {% if section.settings.title != blank %}
    <h2 class="section-title home-tab-banners__title">{{ section.settings.title | escape }}</h2>
  {% endif %}

  {% if menu.links.size == 0 %}
    <div class="home-tab-banners__empty">
      {{ 'Pick a menu in the theme editor — one banner is generated per link.' }}
    </div>
  {% else %}
    <div class="home-tab-banners__grid" style="--cols: {{ section.settings.columns }};">
      {% for link in menu.links %}
        {% assign col = link.object %}
        {% assign img = blank %}
        {% if link.type == 'collection_link' and col.image %}
          {% assign img = col.image %}
        {% elsif link.type == 'collection_link' and col.products.first.featured_media.preview_image %}
          {% assign img = col.products.first.featured_media.preview_image %}
        {% endif %}

        <a class="home-tab-banner" href="{{ link.url }}" aria-label="{{ link.title | escape }}">
          <div class="home-tab-banner__media">
            {% if img != blank %}
              {{ img | image_url: width: 1600 | image_tag:
                   loading: 'lazy',
                   sizes: '(min-width: 750px) 50vw, 100vw',
                   widths: '480, 750, 1100, 1600',
                   alt: link.title | escape }}
            {% else %}
              <div class="home-tab-banner__placeholder"></div>
            {% endif %}
            {% if section.settings.overlay %}<span class="home-tab-banner__scrim"></span>{% endif %}
          </div>
          <div class="home-tab-banner__label">
            <span class="home-tab-banner__title">{{ link.title | escape }}</span>
            {% if section.settings.show_cta %}
              <span class="home-tab-banner__cta">{{ section.settings.cta_text | escape }}</span>
            {% endif %}
          </div>
        </a>
      {% endfor %}
    </div>
  {% endif %}
</section>

{% style %}
  .home-tab-banners { width: 100%; }
  .home-tab-banners__title { text-align: center; margin: 1.5rem 0; }
  .home-tab-banners__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 2), 1fr);
    gap: {{ section.settings.gap }}px;
  }
  @media (max-width: 749px) { .home-tab-banners__grid { grid-template-columns: 1fr; } }
  .home-tab-banner { position: relative; display: block; overflow: hidden; text-decoration: none; }
  .home-tab-banners--short  .home-tab-banner__media { aspect-ratio: 21 / 9; }
  .home-tab-banners--medium .home-tab-banner__media { aspect-ratio: 16 / 9; }
  .home-tab-banners--tall   .home-tab-banner__media { aspect-ratio: 4 / 5; }
  .home-tab-banner__media { position: relative; width: 100%; }
  .home-tab-banner__media img,
  .home-tab-banner__placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
  .home-tab-banner__placeholder { background: #ece7e0; }
  .home-tab-banner img { transition: transform .6s ease; }
  .home-tab-banner:hover img { transform: scale(1.04); }
  .home-tab-banner__scrim { position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.45) 100%); }
  .home-tab-banner__label { position: absolute; left: 0; right: 0; bottom: 0;
    padding: 1.25rem 1.5rem; color: #fff; display: flex; align-items: baseline;
    justify-content: space-between; gap: 1rem; }
  .home-tab-banner__title { font-size: 1.4rem; letter-spacing: .04em; text-transform: uppercase; }
  .home-tab-banner__cta { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,.7); padding-bottom: 2px; }
{% endstyle %}

{% schema %}
{
  "name": "Tab Banners",
  "class": "shopify-section--tab-banners",
  "settings": [
    { "type": "text", "id": "title", "label": "Heading", "default": "" },
    { "type": "link_list", "id": "menu", "label": "Menu (tabs)",
      "info": "One banner is generated per link. Point this at your collection-tab menu." },
    { "type": "range", "id": "columns", "label": "Columns", "min": 1, "max": 4, "step": 1, "default": 2 },
    { "type": "range", "id": "gap", "label": "Gap (px)", "min": 0, "max": 24, "step": 2, "default": 4 },
    { "type": "select", "id": "height", "label": "Banner height", "default": "medium",
      "options": [
        { "value": "short", "label": "Short (21:9)" },
        { "value": "medium", "label": "Medium (16:9)" },
        { "value": "tall", "label": "Tall (4:5)" }
      ] },
    { "type": "checkbox", "id": "overlay", "label": "Darken bottom for text", "default": true },
    { "type": "checkbox", "id": "show_cta", "label": "Show CTA text", "default": true },
    { "type": "text", "id": "cta_text", "label": "CTA text", "default": "Shop" }
  ],
  "presets": [ { "name": "Tab Banners", "category": "Collection" } ]
}
{% endschema %}