Catalog template

{% additions_filter_aggregator %}

<div class="filter-aggregator-outlet" data-controller="ssc--filter-aggregator">
  <form id="filter-aggregator-form" style="display: none;">
    <input type="hidden" name="query" value="oat" />
    <input type="hidden" name="collection_id" value="2" />
  </form>
</div>

{% additions_search %}

<div data-controller="ssc--addition-search">
  <form id="additions-search-form">
    <input id="additions-search-input" type="search" placeholder="Search products" />
    <input type="hidden" name="collection_id" value="2" />
  </form>
</div>

{% additions_shopify_filters slide_from: "left" show_counts: true %}

<div class="flex items-center gap-3">
  <button type="button" class="button">Filter</button>
  <a href="/self-service/additions/new" class="text-sm underline">Clear all</a>
</div>

{% additions_turbo_frame %}
  ...
{% endadditions_turbo_frame %}

<turbo-frame id="search_results" src="/self-service/additions/catalog_frame?...">
  <div class="grid grid-cols-2 gap-4">
    <div>...product card...</div>
    <div>...product card...</div>
  </div>
</turbo-frame>

{% additions_collection_filter_pills %}

<div class="mb-6">
  <div class="flex flex-wrap gap-2 items-center">
    <a class="pill pill--active" href="?collection_id=1">All</a>
    <a class="pill" href="?collection_id=2">Refills</a>
    <a class="pill" href="?collection_id=3">Accessories</a>
  </div>
</div>

{% additions_form_wrapper %}
  ...
{% endadditions_form_wrapper %}

<form action="/self-service/additions/confirmation" method="get" data-controller="ssc--quantity-badge ssc--addition-status">
  <input type="hidden" name="ordered_products[][product_id]" value="44" />
  <input type="hidden" name="ordered_products[][quantity]" value="2" />
  <div>...product cards...</div>
</form>

{% additions_product_card product: product use_variant_pills: true show_info_icon: true %}

<div id="ordered_product_123" class="rounded-xl bg-white overflow-hidden">
  <img src="https://cdn.example.com/oat-drink.jpg" alt="Oat Drink" />
  <div class="p-4">
    <h3 class="font-bold">Oat Drink</h3>
    <p class="text-xs text-gray-500">Every 2 weeks</p>
    <div class="flex justify-between items-center mt-3">
      <span>EUR 7.50</span>
      <button type="button">+</button>
    </div>
  </div>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  {% for product in products %}
    {% additions_product_card product: product %}
  {% endfor %}
</div>
{% additions_lazy_page_frame %}

{% additions_empty_state %}

<div id="additions-empty-state" class="text-center py-16 px-8">
  <p class="text-lg text-gray-600">No products found</p>
  <p class="text-sm text-gray-500">Try another search term or filter.</p>
</div>

{% additions_action_bar %}

<div id="additions-action-bar" class="fixed bottom-0 left-0 right-0 bg-white py-4 border-y">
  <div class="max-w-6xl mx-auto flex items-center gap-4">
    <span id="addition-status-message">2 items added</span>
    <input id="additions-review-button" type="submit" value="Review changes" />
  </div>
</div>

{% additions_shopify_filter_list show_counts: true %}

<turbo-frame id="shopify_filter_list" src="/self-service/additions/filter_list?...">
  <div class="filter-category">
    <h4>Diet</h4>
    <label><input type="checkbox" /> Vegan (12)</label>
    <label><input type="checkbox" /> Gluten-free (8)</label>
  </div>
</turbo-frame>