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

refactor: extract shop_layout component to eliminate template boilerplate

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey 2026-02-08 12:10:08 +00:00
parent e6d4fce656
commit 8be1f90f2d
10 changed files with 173 additions and 320 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
lib/simpleshop_theme_web/components/page_templates/cart.html.heex
View File

@ -1,24 +1,15 @@
<div <.shop_layout
id="shop-container"
phx-hook="CartPersist"
class="shop-container min-h-screen pb-20 md:pb-0"
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} theme_settings={@theme_settings}
logo_image={@logo_image} logo_image={@logo_image}
header_image={@header_image} header_image={@header_image}
active_page="cart"
mode={@mode} mode={@mode}
cart_items={@cart_items}
cart_count={@cart_count} cart_count={@cart_count}
/> cart_subtotal={@cart_subtotal}
cart_drawer_open={assigns[:cart_drawer_open] || false}
cart_status={assigns[:cart_status]}
active_page="cart"
>
<main id="main-content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> <main id="main-content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<.page_title text="Your basket" /> <.page_title text="Your basket" />
@ -49,18 +40,4 @@
</div> </div>
<% end %> <% end %>
</main> </main>
</.shop_layout>
<.shop_footer theme_settings={@theme_settings} mode={@mode} />
<.cart_drawer
cart_items={@cart_items}
subtotal={@cart_subtotal}
cart_count={@cart_count}
mode={@mode}
open={assigns[:cart_drawer_open] || false}
cart_status={assigns[:cart_status]}
/>
<.search_modal hint_text={~s(Try a search – e.g. "mountain" or "notebook")} />
<.mobile_bottom_nav active_page="cart" mode={@mode} />
</div>

40
lib/simpleshop_theme_web/components/page_templates/checkout_success.html.heex
View File

@ -1,24 +1,15 @@
<div <.shop_layout
id="shop-container"
phx-hook="CartPersist"
class="shop-container min-h-screen pb-20 md:pb-0"
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} theme_settings={@theme_settings}
logo_image={@logo_image} logo_image={@logo_image}
header_image={@header_image} header_image={@header_image}
active_page="checkout"
mode={@mode} mode={@mode}
cart_items={@cart_items}
cart_count={@cart_count} cart_count={@cart_count}
/> cart_subtotal={@cart_subtotal}
cart_drawer_open={assigns[:cart_drawer_open] || false}
cart_status={assigns[:cart_status]}
active_page="checkout"
>
<main id="main-content" class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> <main id="main-content" class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<%= if @order && @order.payment_status == "paid" do %> <%= if @order && @order.payment_status == "paid" do %>
<div class="text-center mb-12"> <div class="text-center mb-12">
@ -171,19 +162,4 @@
</div> </div>
<% end %> <% end %>
</main> </main>
</.shop_layout>
<.shop_footer theme_settings={@theme_settings} mode={@mode} />
<.cart_drawer
cart_items={@cart_items}
subtotal={@cart_subtotal}
cart_count={@cart_count}
mode={@mode}
open={assigns[:cart_drawer_open] || false}
cart_status={assigns[:cart_status]}
/>
<.search_modal hint_text={~s(Try a search – e.g. "mountain" or "notebook")} />
<.mobile_bottom_nav active_page="checkout" mode={@mode} />
</div>

40
lib/simpleshop_theme_web/components/page_templates/collection.html.heex
View File

@ -1,24 +1,15 @@
<div <.shop_layout
id="shop-container"
phx-hook="CartPersist"
class="shop-container min-h-screen pb-20 md:pb-0"
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} theme_settings={@theme_settings}
logo_image={@logo_image} logo_image={@logo_image}
header_image={@header_image} header_image={@header_image}
active_page="collection"
mode={@mode} mode={@mode}
cart_items={@cart_items}
cart_count={@cart_count} cart_count={@cart_count}
/> cart_subtotal={@cart_subtotal}
cart_drawer_open={assigns[:cart_drawer_open] || false}
cart_status={assigns[:cart_status]}
active_page="collection"
>
<main id="main-content"> <main id="main-content">
<.collection_header title="All Products" product_count={length(@preview_data.products)} /> <.collection_header title="All Products" product_count={length(@preview_data.products)} />
@ -38,19 +29,4 @@
</.product_grid> </.product_grid>
</div> </div>
</main> </main>
</.shop_layout>
<.shop_footer theme_settings={@theme_settings} mode={@mode} />
<.cart_drawer
cart_items={@cart_items}
subtotal={@cart_subtotal}
cart_count={@cart_count}
mode={@mode}
open={assigns[:cart_drawer_open] || false}
cart_status={assigns[:cart_status]}
/>
<.search_modal hint_text={~s(Try a search – e.g. "mountain" or "notebook")} />
<.mobile_bottom_nav active_page="collection" mode={@mode} />
</div>

40
lib/simpleshop_theme_web/components/page_templates/contact.html.heex
View File

@ -1,24 +1,15 @@
<div <.shop_layout
id="shop-container"
phx-hook="CartPersist"
class="shop-container min-h-screen pb-20 md:pb-0"
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} theme_settings={@theme_settings}
logo_image={@logo_image} logo_image={@logo_image}
header_image={@header_image} header_image={@header_image}
active_page="contact"
mode={@mode} mode={@mode}
cart_items={@cart_items}
cart_count={@cart_count} cart_count={@cart_count}
/> cart_subtotal={@cart_subtotal}
cart_drawer_open={assigns[:cart_drawer_open] || false}
cart_status={assigns[:cart_status]}
active_page="contact"
>
<main id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> <main id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<.hero_section <.hero_section
variant={:page} variant={:page}
@ -53,19 +44,4 @@
</div> </div>
</div> </div>
</main> </main>
</.shop_layout>
<.shop_footer theme_settings={@theme_settings} mode={@mode} />
<.cart_drawer
cart_items={@cart_items}
subtotal={@cart_subtotal}
cart_count={@cart_count}
mode={@mode}
open={assigns[:cart_drawer_open] || false}
cart_status={assigns[:cart_status]}
/>
<.search_modal hint_text={~s(Try a search – e.g. "mountain" or "notebook")} />
<.mobile_bottom_nav active_page="contact" mode={@mode} />
</div>

40
lib/simpleshop_theme_web/components/page_templates/content.html.heex
View File

@ -1,24 +1,15 @@
<div <.shop_layout
id="shop-container"
phx-hook="CartPersist"
class="shop-container min-h-screen pb-20 md:pb-0"
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} theme_settings={@theme_settings}
logo_image={@logo_image} logo_image={@logo_image}
header_image={@header_image} header_image={@header_image}
active_page={@active_page}
mode={@mode} mode={@mode}
cart_items={@cart_items}
cart_count={@cart_count} cart_count={@cart_count}
/> cart_subtotal={@cart_subtotal}
cart_drawer_open={assigns[:cart_drawer_open] || false}
cart_status={assigns[:cart_status]}
active_page={@active_page}
>
<main id="main-content" class="content-page" style="background-color: var(--t-surface-base);"> <main id="main-content" class="content-page" style="background-color: var(--t-surface-base);">
<%= if assigns[:hero_background] do %> <%= if assigns[:hero_background] do %>
<.hero_section <.hero_section
@ -53,19 +44,4 @@
<.rich_text blocks={@content_blocks} /> <.rich_text blocks={@content_blocks} />
</div> </div>
</main> </main>
</.shop_layout>
<.shop_footer theme_settings={@theme_settings} mode={@mode} />
<.cart_drawer
cart_items={@cart_items}
subtotal={@cart_subtotal}
cart_count={@cart_count}
mode={@mode}
open={assigns[:cart_drawer_open] || false}
cart_status={assigns[:cart_status]}
/>
<.search_modal hint_text={~s(Try a search – e.g. "mountain" or "notebook")} />
<.mobile_bottom_nav active_page={@active_page} mode={@mode} />
</div>

37
lib/simpleshop_theme_web/components/page_templates/error.html.heex
View File

@ -1,22 +1,16 @@
<div <.shop_layout
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} theme_settings={@theme_settings}
logo_image={@logo_image} logo_image={@logo_image}
header_image={@header_image} header_image={@header_image}
active_page="error"
mode={@mode} mode={@mode}
cart_items={@cart_items}
cart_count={@cart_count} cart_count={@cart_count}
/> cart_subtotal={@cart_subtotal}
cart_drawer_open={assigns[:cart_drawer_open] || false}
cart_status={assigns[:cart_status]}
active_page="error"
error_page
>
<main <main
id="main-content" id="main-content"
class="flex items-center justify-center" class="flex items-center justify-center"
@ -47,17 +41,4 @@
</.product_grid> </.product_grid>
</div> </div>
</main> </main>
</.shop_layout>
<.shop_footer theme_settings={@theme_settings} mode={@mode} />
<.cart_drawer
cart_items={@cart_items}
subtotal={@cart_subtotal}
cart_count={@cart_count}
mode={@mode}
open={assigns[:cart_drawer_open] || false}
cart_status={assigns[:cart_status]}
/>
<.search_modal hint_text={~s(Try a search – e.g. "mountain" or "notebook")} />
</div>

40
lib/simpleshop_theme_web/components/page_templates/home.html.heex
View File

@ -1,24 +1,15 @@
<div <.shop_layout
id="shop-container"
phx-hook="CartPersist"
class="shop-container min-h-screen pb-20 md:pb-0"
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} theme_settings={@theme_settings}
logo_image={@logo_image} logo_image={@logo_image}
header_image={@header_image} header_image={@header_image}
active_page="home"
mode={@mode} mode={@mode}
cart_items={@cart_items}
cart_count={@cart_count} cart_count={@cart_count}
/> cart_subtotal={@cart_subtotal}
cart_drawer_open={assigns[:cart_drawer_open] || false}
cart_status={assigns[:cart_status]}
active_page="home"
>
<main id="main-content"> <main id="main-content">
<.hero_section <.hero_section
title="Original designs, printed on demand" title="Original designs, printed on demand"
@ -46,19 +37,4 @@
mode={@mode} mode={@mode}
/> />
</main> </main>
</.shop_layout>
<.shop_footer theme_settings={@theme_settings} mode={@mode} />
<.cart_drawer
cart_items={@cart_items}
subtotal={@cart_subtotal}
cart_count={@cart_count}
mode={@mode}
open={assigns[:cart_drawer_open] || false}
cart_status={assigns[:cart_status]}
/>
<.search_modal hint_text={~s(Try a search – e.g. "mountain" or "notebook")} />
<.mobile_bottom_nav active_page="home" mode={@mode} />
</div>

39
lib/simpleshop_theme_web/components/page_templates/pdp.html.heex
View File

@ -1,24 +1,15 @@
<div <.shop_layout
id="shop-container"
phx-hook="CartPersist"
class="shop-container min-h-screen pb-20 md:pb-0"
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} theme_settings={@theme_settings}
logo_image={@logo_image} logo_image={@logo_image}
header_image={@header_image} header_image={@header_image}
active_page="pdp"
mode={@mode} mode={@mode}
cart_items={@cart_items}
cart_count={@cart_count} cart_count={@cart_count}
/> cart_subtotal={@cart_subtotal}
cart_drawer_open={assigns[:cart_drawer_open] || false}
cart_status={assigns[:cart_status]}
active_page="pdp"
>
<main id="main-content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> <main id="main-content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<.breadcrumb <.breadcrumb
items={ items={
@ -88,18 +79,4 @@
mode={@mode} mode={@mode}
/> />
</main> </main>
</.shop_layout>
<.shop_footer theme_settings={@theme_settings} mode={@mode} />
<.cart_drawer
cart_items={@cart_items}
subtotal={@cart_subtotal}
cart_count={@cart_count}
mode={@mode}
open={assigns[:cart_drawer_open] || false}
cart_status={assigns[:cart_status]}
/>
<.search_modal hint_text={~s(Try a search – e.g. "mountain" or "notebook")} />
<.mobile_bottom_nav active_page="pdp" mode={@mode} />
</div>

64
lib/simpleshop_theme_web/components/shop_components.ex
View File

@ -53,6 +53,70 @@ defmodule SimpleshopThemeWeb.ShopComponents do
""" """
end end
@doc """
Wraps page content in the standard shop shell: container, header, footer,
cart drawer, search modal, and mobile bottom nav.
Templates pass their unique `<main>` content as the inner block.
The `error_page` flag disables the CartPersist hook and mobile bottom nav.
"""
attr :theme_settings, :map, required: true
attr :logo_image, :any, required: true
attr :header_image, :any, required: true
attr :mode, :atom, required: true
attr :cart_items, :list, required: true
attr :cart_count, :integer, required: true
attr :cart_subtotal, :string, required: true
attr :cart_drawer_open, :boolean, default: false
attr :cart_status, :string, default: nil
attr :active_page, :string, required: true
attr :error_page, :boolean, default: false
slot :inner_block, required: true
def shop_layout(assigns) do
~H"""
<div
id={unless @error_page, do: "shop-container"}
phx-hook={unless @error_page, do: "CartPersist"}
class={["shop-container min-h-screen", !@error_page && "pb-20 md:pb-0"]}
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={@active_page}
mode={@mode}
cart_count={@cart_count}
/>
{render_slot(@inner_block)}
<.shop_footer theme_settings={@theme_settings} mode={@mode} />
<.cart_drawer
cart_items={@cart_items}
subtotal={@cart_subtotal}
cart_count={@cart_count}
mode={@mode}
open={@cart_drawer_open}
cart_status={@cart_status}
/>
<.search_modal hint_text={~s(Try a search – e.g. "mountain" or "notebook")} />
<.mobile_bottom_nav :if={!@error_page} active_page={@active_page} mode={@mode} />
</div>
"""
end
# ============================================================================= # =============================================================================
# Themed Form Components # Themed Form Components
# ============================================================================= # =============================================================================

42
lib/simpleshop_theme_web/live/shop_live/collection.ex
View File

@ -78,27 +78,18 @@ defmodule SimpleshopThemeWeb.ShopLive.Collection do
@impl true @impl true
def render(assigns) do def render(assigns) do
~H""" ~H"""
<div <SimpleshopThemeWeb.ShopComponents.shop_layout
id="shop-container"
phx-hook="CartPersist"
class="shop-container min-h-screen pb-20 md:pb-0"
style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);"
>
<SimpleshopThemeWeb.ShopComponents.skip_link />
<%= if @theme_settings.announcement_bar do %>
<SimpleshopThemeWeb.ShopComponents.announcement_bar theme_settings={@theme_settings} />
<% end %>
<SimpleshopThemeWeb.ShopComponents.shop_header
theme_settings={@theme_settings} theme_settings={@theme_settings}
logo_image={@logo_image} logo_image={@logo_image}
header_image={@header_image} header_image={@header_image}
active_page="collection"
mode={@mode} mode={@mode}
cart_items={@cart_items}
cart_count={@cart_count} cart_count={@cart_count}
/> cart_subtotal={@cart_subtotal}
cart_drawer_open={@cart_drawer_open}
cart_status={assigns[:cart_status]}
active_page="collection"
>
<main id="main-content"> <main id="main-content">
<SimpleshopThemeWeb.ShopComponents.collection_header <SimpleshopThemeWeb.ShopComponents.collection_header
title={@collection_title} title={@collection_title}
@ -139,24 +130,7 @@ defmodule SimpleshopThemeWeb.ShopLive.Collection do
<% end %> <% end %>
</div> </div>
</main> </main>
</SimpleshopThemeWeb.ShopComponents.shop_layout>
<SimpleshopThemeWeb.ShopComponents.shop_footer theme_settings={@theme_settings} mode={@mode} />
<SimpleshopThemeWeb.ShopComponents.cart_drawer
cart_items={@cart_items}
subtotal={@cart_subtotal}
cart_count={@cart_count}
mode={@mode}
open={@cart_drawer_open}
cart_status={assigns[:cart_status]}
/>
<SimpleshopThemeWeb.ShopComponents.search_modal hint_text={
~s(Try searching for "mountain", "forest", or "ocean")
} />
<SimpleshopThemeWeb.ShopComponents.mobile_bottom_nav active_page="collection" mode={@mode} />
</div>
""" """
end end