feat: add Products listing page to public storefront

- Create ShopLive.Products module and template
- Add /products route to public shop live session
- Shows product grid with category filters and sort dropdown
- Displays all 16 preview products with categories

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jamey Greenwood 2026-01-17 21:54:31 +00:00
parent 5ceff20aaa
commit 4f70c6649a
3 changed files with 76 additions and 0 deletions

View File

@ -0,0 +1,40 @@
defmodule SimpleshopThemeWeb.ShopLive.Products do
use SimpleshopThemeWeb, :live_view
alias SimpleshopTheme.Settings
alias SimpleshopTheme.Media
alias SimpleshopTheme.Theme.{CSSCache, CSSGenerator, PreviewData}
@impl true
def mount(_params, _session, socket) do
theme_settings = Settings.get_theme_settings()
generated_css =
case CSSCache.get() do
{:ok, css} -> css
:miss ->
css = CSSGenerator.generate(theme_settings)
CSSCache.put(css)
css
end
logo_image = Media.get_logo()
header_image = Media.get_header()
preview_data = %{
products: PreviewData.products(),
categories: PreviewData.categories()
}
socket =
socket
|> assign(:page_title, "Products")
|> assign(:theme_settings, theme_settings)
|> assign(:generated_css, generated_css)
|> assign(:logo_image, logo_image)
|> assign(:header_image, header_image)
|> assign(:preview_data, preview_data)
{:ok, socket}
end
end

View File

@ -0,0 +1,35 @@
<div class="shop-container min-h-screen" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
<.skip_link />
<%= if @theme_settings.announcement_bar do %>
<.announcement_bar theme_settings={@theme_settings} />
<% end %>
<.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="collection" mode={:shop} cart_count={0} />
<main id="main-content">
<.collection_header title="All Products" product_count={length(@preview_data.products)} />
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<.filter_bar categories={@preview_data.categories} />
<.product_grid theme_settings={@theme_settings}>
<%= for product <- @preview_data.products do %>
<.product_card
product={product}
theme_settings={@theme_settings}
mode={:shop}
variant={:default}
show_category={true}
/>
<% end %>
</.product_grid>
</div>
</main>
<.shop_footer theme_settings={@theme_settings} mode={:shop} />
<.cart_drawer cart_items={[]} subtotal="£0.00" mode={:shop} />
<.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
</div>

View File

@ -29,6 +29,7 @@ defmodule SimpleshopThemeWeb.Router do
live "/", ShopLive.Home, :index live "/", ShopLive.Home, :index
live "/about", ShopLive.About, :index live "/about", ShopLive.About, :index
live "/contact", ShopLive.Contact, :index live "/contact", ShopLive.Contact, :index
live "/products", ShopLive.Products, :index
end end
end end