feat: add shop storefront with optimized theme CSS

- Create LoadTheme plug for loading theme settings
- Add shop layout with inline CSS injection (~400 bytes vs 17KB full)
- Create ShopLive.Home at / using shared ShopComponents
- Wire up CSS cache invalidation when theme settings change
- Replace Phoenix welcome page with themed shop home page

The shop layout injects only the active theme CSS variables inline,
achieving a 97% reduction compared to the full variants file used
by the theme editor.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-17 16:19:35 +00:00
parent 97981a9884
commit 88636db9d2
7 changed files with 172 additions and 5 deletions

View File

@@ -0,0 +1,41 @@
defmodule SimpleshopThemeWeb.ShopLive.Home 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
# Load theme settings (cached CSS for performance)
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, "Home")
|> 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,43 @@
<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="home" mode={:shop} cart_count={0} />
<main id="main-content">
<.hero_section
title="Original designs, printed on demand"
description="From art prints to apparel unique products created by independent artists and delivered straight to your door."
cta_text="Shop the collection"
cta_page="collection"
mode={:shop}
/>
<.category_nav categories={@preview_data.categories} mode={:shop} />
<.featured_products_section
title="Featured products"
products={@preview_data.products}
theme_settings={@theme_settings}
mode={:shop}
/>
<.image_text_section
title="Made with passion, printed with care"
description="Every design starts with an idea. We work with quality print partners to bring those ideas to life on premium products from gallery-quality art prints to everyday essentials."
image_url="/mockups/mountain-sunrise-print-3.jpg"
link_text="Learn more about the studio →"
link_page="about"
mode={:shop}
/>
</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>