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:
parent
5ceff20aaa
commit
4f70c6649a
40
lib/simpleshop_theme_web/live/shop_live/products.ex
Normal file
40
lib/simpleshop_theme_web/live/shop_live/products.ex
Normal 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
|
||||||
35
lib/simpleshop_theme_web/live/shop_live/products.html.heex
Normal file
35
lib/simpleshop_theme_web/live/shop_live/products.html.heex
Normal 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>
|
||||||
@ -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
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user