jamey/berrypod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

refactor: consolidate shop and preview page templates

Browse Source 
- Create shared PageTemplates module in components/page_templates/
- Shop LiveViews now use explicit render/1 calling shared templates
- Theme preview now uses preview_page/1 component calling shared templates
- Delete duplicate preview_pages directory and shop_live/*.html.heex
- Single source of truth: mode param controls shop vs preview behavior

Templates: home, about, contact, collection, pdp, cart, error

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jamey Greenwood
2026-01-17 22:17:59 +00:00
parent e02d928815
commit c25953780a
23 changed files with 350 additions and 340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
lib/simpleshop_theme_web/live/shop_live/about.ex
View File

@@ -3,7 +3,7 @@ defmodule SimpleshopThemeWeb.ShopLive.About do
alias SimpleshopTheme.Settings
alias SimpleshopTheme.Media
alias SimpleshopTheme.Theme.{CSSCache, CSSGenerator, PreviewData}
alias SimpleshopTheme.Theme.{CSSCache, CSSGenerator}
@impl true
def mount(_params, _session, socket) do
@@ -28,7 +28,26 @@ defmodule SimpleshopThemeWeb.ShopLive.About do
|> assign(:generated_css, generated_css)
|> assign(:logo_image, logo_image)
|> assign(:header_image, header_image)
|> assign(:mode, :shop)
|> assign(:cart_items, [])
|> assign(:cart_count, 0)
|> assign(:cart_subtotal, "£0.00")
{:ok, socket}
end
@impl true
def render(assigns) do
~H"""
<SimpleshopThemeWeb.PageTemplates.about
theme_settings={@theme_settings}
logo_image={@logo_image}
header_image={@header_image}
mode={@mode}
cart_items={@cart_items}
cart_count={@cart_count}
cart_subtotal={@cart_subtotal}
/>
"""
end
end

27
lib/simpleshop_theme_web/live/shop_live/about.html.heex
View File

@@ -1,27 +0,0 @@
<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="about" mode={:shop} cart_count={0} />
<main id="main-content" class="content-page" style="background-color: var(--t-surface-base);">
<.hero_section
title="About the studio"
description="Nature photography, printed with care"
background={:sunken}
/>
<.content_body image_url="/mockups/night-sky-blanket-3.jpg">
<.rich_text blocks={SimpleshopTheme.Theme.PreviewData.about_content()} />
</.content_body>
</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>

19
lib/simpleshop_theme_web/live/shop_live/contact.ex
View File

@@ -28,7 +28,26 @@ defmodule SimpleshopThemeWeb.ShopLive.Contact do
|> assign(:generated_css, generated_css)
|> assign(:logo_image, logo_image)
|> assign(:header_image, header_image)
|> assign(:mode, :shop)
|> assign(:cart_items, [])
|> assign(:cart_count, 0)
|> assign(:cart_subtotal, "£0.00")
{:ok, socket}
end
@impl true
def render(assigns) do
~H"""
<SimpleshopThemeWeb.PageTemplates.contact
theme_settings={@theme_settings}
logo_image={@logo_image}
header_image={@header_image}
mode={@mode}
cart_items={@cart_items}
cart_count={@cart_count}
cart_subtotal={@cart_subtotal}
/>
"""
end
end

41
lib/simpleshop_theme_web/live/shop_live/contact.html.heex
View File

@@ -1,41 +0,0 @@
<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="contact" mode={:shop} cart_count={0} />
<main id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<.hero_section
variant={:page}
title="Contact Us"
description="Questions about your order or just want to say hello? Drop us a message and we'll get back to you as soon as we can."
/>
<div class="grid gap-8 md:grid-cols-2 mb-12">
<.contact_form />
<div class="space-y-6">
<.order_tracking_card />
<.info_card title="Handy to know" items={[
%{label: "Printing", value: "2-5 business days"},
%{label: "Delivery", value: "3-7 business days after printing"},
%{label: "Returns", value: "Happy to help with faulty or damaged items"}
]} />
<.contact_info_card email="hello@example.com" />
<.social_links />
</div>
</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>

21
lib/simpleshop_theme_web/live/shop_live/home.ex
View File

@@ -7,7 +7,6 @@ defmodule SimpleshopThemeWeb.ShopLive.Home do
@impl true
def mount(_params, _session, socket) do
# Load theme settings (cached CSS for performance)
theme_settings = Settings.get_theme_settings()
generated_css =
@@ -35,7 +34,27 @@ defmodule SimpleshopThemeWeb.ShopLive.Home do
|> assign(:logo_image, logo_image)
|> assign(:header_image, header_image)
|> assign(:preview_data, preview_data)
|> assign(:mode, :shop)
|> assign(:cart_items, [])
|> assign(:cart_count, 0)
|> assign(:cart_subtotal, "£0.00")
{:ok, socket}
end
@impl true
def render(assigns) do
~H"""
<SimpleshopThemeWeb.PageTemplates.home
theme_settings={@theme_settings}
logo_image={@logo_image}
header_image={@header_image}
preview_data={@preview_data}
mode={@mode}
cart_items={@cart_items}
cart_count={@cart_count}
cart_subtotal={@cart_subtotal}
/>
"""
end
end

43
lib/simpleshop_theme_web/live/shop_live/home.html.heex
View File

@@ -1,43 +0,0 @@
<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>

23
lib/simpleshop_theme_web/live/shop_live/product_show.ex
View File

@@ -52,7 +52,30 @@ defmodule SimpleshopThemeWeb.ShopLive.ProductShow do
|> assign(:gallery_images, gallery_images)
|> assign(:related_products, related_products)
|> assign(:quantity, 1)
|> assign(:mode, :shop)
|> assign(:cart_items, [])
|> assign(:cart_count, 0)
|> assign(:cart_subtotal, "£0.00")
{:ok, socket}
end
@impl true
def render(assigns) do
~H"""
<SimpleshopThemeWeb.PageTemplates.pdp
theme_settings={@theme_settings}
logo_image={@logo_image}
header_image={@header_image}
product={@product}
gallery_images={@gallery_images}
related_products={@related_products}
quantity={@quantity}
mode={@mode}
cart_items={@cart_items}
cart_count={@cart_count}
cart_subtotal={@cart_subtotal}
/>
"""
end
end

44
lib/simpleshop_theme_web/live/shop_live/product_show.html.heex
View File

@@ -1,44 +0,0 @@
<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="pdp" mode={:shop} cart_count={0} />
<main id="main-content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<.breadcrumb items={[
%{label: "Home", page: "home", href: "/"},
%{label: @product.category, page: "collection", href: "/products"},
%{label: @product.name, current: true}
]} mode={:shop} />
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 mb-16">
<.product_gallery images={@gallery_images} product_name={@product.name} />
<div>
<.product_info product={@product} />
<.variant_selector label="Size" options={["S", "M", "L", "XL"]} />
<.quantity_selector quantity={@quantity} in_stock={@product.in_stock} />
<.add_to_cart_button />
<.trust_badges :if={@theme_settings.pdp_trust_badges} />
<.product_details product={@product} />
</div>
</div>
<.reviews_section :if={@theme_settings.pdp_reviews} reviews={SimpleshopTheme.Theme.PreviewData.reviews()} average_rating={5} total_count={24} />
<.related_products_section
:if={@theme_settings.pdp_related_products}
products={@related_products}
theme_settings={@theme_settings}
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>

20
lib/simpleshop_theme_web/live/shop_live/products.ex
View File

@@ -34,7 +34,27 @@ defmodule SimpleshopThemeWeb.ShopLive.Products do
|> assign(:logo_image, logo_image)
|> assign(:header_image, header_image)
|> assign(:preview_data, preview_data)
|> assign(:mode, :shop)
|> assign(:cart_items, [])
|> assign(:cart_count, 0)
|> assign(:cart_subtotal, "£0.00")
{:ok, socket}
end
@impl true
def render(assigns) do
~H"""
<SimpleshopThemeWeb.PageTemplates.collection
theme_settings={@theme_settings}
logo_image={@logo_image}
header_image={@header_image}
preview_data={@preview_data}
mode={@mode}
cart_items={@cart_items}
cart_count={@cart_count}
cart_subtotal={@cart_subtotal}
/>
"""
end
end

35
lib/simpleshop_theme_web/live/shop_live/products.html.heex
View File

@@ -1,35 +0,0 @@
<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>