jamey/berrypod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,24 +1,15 @@
<div
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);"
<.shop_layout
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}
cart_drawer_open={assigns[:cart_drawer_open] || false}
cart_status={assigns[:cart_status]}
active_page="cart"
>
<.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="cart"
mode={@mode}
cart_count={@cart_count}
/>
<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" />
@@ -49,18 +40,4 @@
</div>
<% end %>
</main>
<.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>
</.shop_layout>

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

@@ -1,24 +1,15 @@
<div
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);"
<.shop_layout
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}
cart_drawer_open={assigns[:cart_drawer_open] || false}
cart_status={assigns[:cart_status]}
active_page="checkout"
>
<.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="checkout"
mode={@mode}
cart_count={@cart_count}
/>
<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 %>
<div class="text-center mb-12">
@@ -171,19 +162,4 @@
</div>
<% end %>
</main>
<.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>
</.shop_layout>

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

@@ -1,24 +1,15 @@
<div
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);"
<.shop_layout
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}
cart_drawer_open={assigns[:cart_drawer_open] || false}
cart_status={assigns[:cart_status]}
active_page="collection"
>
<.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={@mode}
cart_count={@cart_count}
/>
<main id="main-content">
<.collection_header title="All Products" product_count={length(@preview_data.products)} />
@@ -38,19 +29,4 @@
</.product_grid>
</div>
</main>
<.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>
</.shop_layout>

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

@@ -1,24 +1,15 @@
<div
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);"
<.shop_layout
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}
cart_drawer_open={assigns[:cart_drawer_open] || false}
cart_status={assigns[:cart_status]}
active_page="contact"
>
<.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={@mode}
cart_count={@cart_count}
/>
<main id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<.hero_section
variant={:page}
@@ -53,19 +44,4 @@
</div>
</div>
</main>
<.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>
</.shop_layout>

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

@@ -1,24 +1,15 @@
<div
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);"
<.shop_layout
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}
cart_drawer_open={assigns[:cart_drawer_open] || false}
cart_status={assigns[:cart_status]}
active_page={@active_page}
>
<.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}
/>
<main id="main-content" class="content-page" style="background-color: var(--t-surface-base);">
<%= if assigns[:hero_background] do %>
<.hero_section
@@ -53,19 +44,4 @@
<.rich_text blocks={@content_blocks} />
</div>
</main>
<.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>
</.shop_layout>

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

@@ -1,22 +1,16 @@
<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);"
<.shop_layout
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}
cart_drawer_open={assigns[:cart_drawer_open] || false}
cart_status={assigns[:cart_status]}
active_page="error"
error_page
>
<.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="error"
mode={@mode}
cart_count={@cart_count}
/>
<main
id="main-content"
class="flex items-center justify-center"
@@ -47,17 +41,4 @@
</.product_grid>
</div>
</main>
<.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>
</.shop_layout>

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

@@ -1,24 +1,15 @@
<div
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);"
<.shop_layout
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}
cart_drawer_open={assigns[:cart_drawer_open] || false}
cart_status={assigns[:cart_status]}
active_page="home"
>
<.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={@mode}
cart_count={@cart_count}
/>
<main id="main-content">
<.hero_section
title="Original designs, printed on demand"
@@ -46,19 +37,4 @@
mode={@mode}
/>
</main>
<.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>
</.shop_layout>

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

@@ -1,24 +1,15 @@
<div
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);"
<.shop_layout
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}
cart_drawer_open={assigns[:cart_drawer_open] || false}
cart_status={assigns[:cart_status]}
active_page="pdp"
>
<.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={@mode}
cart_count={@cart_count}
/>
<main id="main-content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<.breadcrumb
items={
@@ -88,18 +79,4 @@
mode={@mode}
/>
</main>
<.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>
</.shop_layout>