refactor: extract shop_layout component to eliminate template boilerplate
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey
parent
e6d4fce656
commit
8be1f90f2d
@ -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);"
|
||||
>
|
||||
<.skip_link />
|
||||
|
||||
<%= if @theme_settings.announcement_bar do %>
|
||||
<.announcement_bar theme_settings={@theme_settings} />
|
||||
<% end %>
|
||||
|
||||
<.shop_header
|
||||
<.shop_layout
|
||||
theme_settings={@theme_settings}
|
||||
logo_image={@logo_image}
|
||||
header_image={@header_image}
|
||||
active_page="cart"
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
|
||||
@ -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);"
|
||||
>
|
||||
<.skip_link />
|
||||
|
||||
<%= if @theme_settings.announcement_bar do %>
|
||||
<.announcement_bar theme_settings={@theme_settings} />
|
||||
<% end %>
|
||||
|
||||
<.shop_header
|
||||
<.shop_layout
|
||||
theme_settings={@theme_settings}
|
||||
logo_image={@logo_image}
|
||||
header_image={@header_image}
|
||||
active_page="checkout"
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
|
||||
@ -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);"
|
||||
>
|
||||
<.skip_link />
|
||||
|
||||
<%= if @theme_settings.announcement_bar do %>
|
||||
<.announcement_bar theme_settings={@theme_settings} />
|
||||
<% end %>
|
||||
|
||||
<.shop_header
|
||||
<.shop_layout
|
||||
theme_settings={@theme_settings}
|
||||
logo_image={@logo_image}
|
||||
header_image={@header_image}
|
||||
active_page="collection"
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
|
||||
@ -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);"
|
||||
>
|
||||
<.skip_link />
|
||||
|
||||
<%= if @theme_settings.announcement_bar do %>
|
||||
<.announcement_bar theme_settings={@theme_settings} />
|
||||
<% end %>
|
||||
|
||||
<.shop_header
|
||||
<.shop_layout
|
||||
theme_settings={@theme_settings}
|
||||
logo_image={@logo_image}
|
||||
header_image={@header_image}
|
||||
active_page="contact"
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
|
||||
@ -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);"
|
||||
>
|
||||
<.skip_link />
|
||||
|
||||
<%= if @theme_settings.announcement_bar do %>
|
||||
<.announcement_bar theme_settings={@theme_settings} />
|
||||
<% end %>
|
||||
|
||||
<.shop_header
|
||||
<.shop_layout
|
||||
theme_settings={@theme_settings}
|
||||
logo_image={@logo_image}
|
||||
header_image={@header_image}
|
||||
active_page={@active_page}
|
||||
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}
|
||||
>
|
||||
<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>
|
||||
|
||||
@ -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);"
|
||||
>
|
||||
<.skip_link />
|
||||
|
||||
<%= if @theme_settings.announcement_bar do %>
|
||||
<.announcement_bar theme_settings={@theme_settings} />
|
||||
<% end %>
|
||||
|
||||
<.shop_header
|
||||
<.shop_layout
|
||||
theme_settings={@theme_settings}
|
||||
logo_image={@logo_image}
|
||||
header_image={@header_image}
|
||||
active_page="error"
|
||||
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
|
||||
>
|
||||
<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>
|
||||
|
||||
@ -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);"
|
||||
>
|
||||
<.skip_link />
|
||||
|
||||
<%= if @theme_settings.announcement_bar do %>
|
||||
<.announcement_bar theme_settings={@theme_settings} />
|
||||
<% end %>
|
||||
|
||||
<.shop_header
|
||||
<.shop_layout
|
||||
theme_settings={@theme_settings}
|
||||
logo_image={@logo_image}
|
||||
header_image={@header_image}
|
||||
active_page="home"
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
|
||||
@ -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);"
|
||||
>
|
||||
<.skip_link />
|
||||
|
||||
<%= if @theme_settings.announcement_bar do %>
|
||||
<.announcement_bar theme_settings={@theme_settings} />
|
||||
<% end %>
|
||||
|
||||
<.shop_header
|
||||
<.shop_layout
|
||||
theme_settings={@theme_settings}
|
||||
logo_image={@logo_image}
|
||||
header_image={@header_image}
|
||||
active_page="pdp"
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
|
||||
@ -53,6 +53,70 @@ defmodule SimpleshopThemeWeb.ShopComponents do
|
||||
"""
|
||||
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
|
||||
# =============================================================================
|
||||
|
||||
@ -78,27 +78,18 @@ defmodule SimpleshopThemeWeb.ShopLive.Collection do
|
||||
@impl true
|
||||
def render(assigns) do
|
||||
~H"""
|
||||
<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);"
|
||||
>
|
||||
<SimpleshopThemeWeb.ShopComponents.skip_link />
|
||||
|
||||
<%= if @theme_settings.announcement_bar do %>
|
||||
<SimpleshopThemeWeb.ShopComponents.announcement_bar theme_settings={@theme_settings} />
|
||||
<% end %>
|
||||
|
||||
<SimpleshopThemeWeb.ShopComponents.shop_header
|
||||
<SimpleshopThemeWeb.ShopComponents.shop_layout
|
||||
theme_settings={@theme_settings}
|
||||
logo_image={@logo_image}
|
||||
header_image={@header_image}
|
||||
active_page="collection"
|
||||
mode={@mode}
|
||||
cart_items={@cart_items}
|
||||
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">
|
||||
<SimpleshopThemeWeb.ShopComponents.collection_header
|
||||
title={@collection_title}
|
||||
@ -139,24 +130,7 @@ defmodule SimpleshopThemeWeb.ShopLive.Collection do
|
||||
<% end %>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<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>
|
||||
</SimpleshopThemeWeb.ShopComponents.shop_layout>
|
||||
"""
|
||||
end
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user