Recently Viewed Products

<section class="sl-recently-viewed" style="padding:clamp(32px,6vw,64px) clamp(1rem,3vw,2rem);color:inherit;font-family:inherit;">
  <div style="max-width:1400px;margin:0 auto;">
    <header style="display:flex;flex-wrap:wrap;gap:.75rem;align-items:baseline;justify-content:space-between;margin:0 0 1.25rem;">
      <h2 style="margin:0;font-size:clamp(1.25rem,2.5vw,1.75rem);font-family:inherit;">{{ section.settings.heading | default: 'Recently viewed' }}</h2>
      {%- if section.settings.cta_link != blank -%}
        <a href="{{ section.settings.cta_link }}" style="color:var(--sl-accent,#0a5cff);text-decoration:none;font-weight:600;font-size:.9rem;">{{ section.settings.cta_text | default: 'View all' }} &rarr;</a>
      {%- endif -%}
    </header>
    <nav aria-label="Recently viewed products" style="display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.75rem;scrollbar-width:thin;">
      {%- assign has_recent = false -%}
      {%- if recently_viewed_products.size > 0 -%}{%- assign has_recent = true -%}{%- endif -%}
      {%- if has_recent -%}
        {%- for product in recently_viewed_products limit: 8 -%}
          <article style="scroll-snap-align:start;flex:0 0 clamp(160px,35vw,240px);display:flex;flex-direction:column;gap:.4rem;">
            <a href="{{ product.url }}" style="color:inherit;text-decoration:none;">
              <img src="{{ product.featured_image | image_url: width: 480 | default: 'https://picsum.photos/seed/rv/480/480' }}" alt="{{ product.featured_image.alt | default: product.title }}" loading="lazy" style="width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:.5rem;display:block;" />
            </a>
            <h3 style="margin:0;font-size:.92rem;font-weight:600;line-height:1.3;"><a href="{{ product.url }}" style="color:inherit;text-decoration:none;">{{ product.title }}</a></h3>
            <p style="margin:0;color:var(--sl-accent,#0a5cff);font-weight:700;font-size:.9rem;">{{ product.price | money }}</p>
          </article>
        {%- endfor -%}
      {%- else -%}
        {%- for i in (1..4) -%}
          <article style="scroll-snap-align:start;flex:0 0 clamp(160px,35vw,240px);display:flex;flex-direction:column;gap:.4rem;">
            <img src="https://picsum.photos/seed/rv{{ i }}/480/480" alt="{{ section.settings.placeholder_alt | default: 'Product placeholder' }}" loading="lazy" style="width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:.5rem;display:block;" />
            <h3 style="margin:0;font-size:.92rem;font-weight:600;line-height:1.3;">Product {{ i }}</h3>
            <p style="margin:0;color:var(--sl-accent,#0a5cff);font-weight:700;font-size:.9rem;">$29.00</p>
          </article>
        {%- endfor -%}
      {%- endif -%}
    </nav>
  </div>
</section>
{% schema %}
{
  "name": "Recently Viewed Products",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Recently viewed" },
    { "type": "text", "id": "cta_text", "label": "Link text", "default": "View all" },
    { "type": "url", "id": "cta_link", "label": "Link URL" },
    { "type": "text", "id": "placeholder_alt", "label": "Alt text (placeholder)", "default": "Product placeholder" }
  ],
  "presets": [{ "name": "Recently Viewed Products" }]
}
{% endschema %}