{% extends "layouts/base.njk" %}

{% block content %}
  <section class="hero">
    <h1>{{ store.name }}</h1>
    <p>{{ store.description }}</p>
    <a href="{{ '/products' | shopUrl }}">Shop all</a>
  </section>

  <section class="featured-products">
    <h2>Products</h2>
    <div class="grid">
      {% for product in products.slice(0, 12) %}
        <a class="card" href="{{ ('/product/' ~ product.slug) | shopUrl }}">
          {% if product.image %}
            <img src="{{ product.image | imageUrl }}" alt="" />
          {% endif %}
          <h3>{{ product.name }}</h3>
          <span>{{ product.minPrice | formatPrice(currency) }}</span>
        </a>
      {% else %}
        <p>Coming soon.</p>
      {% endfor %}
    </div>
  </section>
{% endblock %}

{
  "homepage": {
    "featuredProductIds": ["slug-a", "slug-b"]
  }
}

{% set featured = helpers.components.products.getItemsByIds(
  products,
  settings.homepage.featuredProductIds or []
) %}
{% for product in featured %}
  {# card #}
{% endfor %}