refactor: extract shop_layout component to eliminate template boilerplate

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

lib/simpleshop_theme_web/components/page_templates/cart.html.heex

@@ -1,24 +1,15 @@
-<div
+<.shop_layout
-  id="shop-container"
+  theme_settings={@theme_settings}
-  phx-hook="CartPersist"
+  logo_image={@logo_image}
-  class="shop-container min-h-screen pb-20 md:pb-0"
+  header_image={@header_image}
-  style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);"
+  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_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>

lib/simpleshop_theme_web/components/page_templates/checkout_success.html.heex

@@ -1,24 +1,15 @@
-<div
+<.shop_layout
-  id="shop-container"
+  theme_settings={@theme_settings}
-  phx-hook="CartPersist"
+  logo_image={@logo_image}
-  class="shop-container min-h-screen pb-20 md:pb-0"
+  header_image={@header_image}
-  style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);"
+  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_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>

lib/simpleshop_theme_web/components/page_templates/collection.html.heex

@@ -1,24 +1,15 @@
-<div
+<.shop_layout
-  id="shop-container"
+  theme_settings={@theme_settings}
-  phx-hook="CartPersist"
+  logo_image={@logo_image}
-  class="shop-container min-h-screen pb-20 md:pb-0"
+  header_image={@header_image}
-  style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);"
+  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_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>

lib/simpleshop_theme_web/components/page_templates/contact.html.heex

@@ -1,24 +1,15 @@
-<div
+<.shop_layout
-  id="shop-container"
+  theme_settings={@theme_settings}
-  phx-hook="CartPersist"
+  logo_image={@logo_image}
-  class="shop-container min-h-screen pb-20 md:pb-0"
+  header_image={@header_image}
-  style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);"
+  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_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>

lib/simpleshop_theme_web/components/page_templates/content.html.heex

@@ -1,24 +1,15 @@
-<div
+<.shop_layout
-  id="shop-container"
+  theme_settings={@theme_settings}
-  phx-hook="CartPersist"
+  logo_image={@logo_image}
-  class="shop-container min-h-screen pb-20 md:pb-0"
+  header_image={@header_image}
-  style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);"
+  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_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>

lib/simpleshop_theme_web/components/page_templates/error.html.heex

@@ -1,22 +1,16 @@
-<div
+<.shop_layout
-  class="shop-container min-h-screen"
+  theme_settings={@theme_settings}
-  style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);"
+  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_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>

lib/simpleshop_theme_web/components/page_templates/home.html.heex

@@ -1,24 +1,15 @@
-<div
+<.shop_layout
-  id="shop-container"
+  theme_settings={@theme_settings}
-  phx-hook="CartPersist"
+  logo_image={@logo_image}
-  class="shop-container min-h-screen pb-20 md:pb-0"
+  header_image={@header_image}
-  style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);"
+  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_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>

lib/simpleshop_theme_web/components/page_templates/pdp.html.heex

@@ -1,24 +1,15 @@
-<div
+<.shop_layout
-  id="shop-container"
+  theme_settings={@theme_settings}
-  phx-hook="CartPersist"
+  logo_image={@logo_image}
-  class="shop-container min-h-screen pb-20 md:pb-0"
+  header_image={@header_image}
-  style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);"
+  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_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>

lib/simpleshop_theme_web/components/shop_components.ex

@@ -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
   # =============================================================================

lib/simpleshop_theme_web/live/shop_live/collection.ex

@@ -78,27 +78,18 @@ defmodule SimpleshopThemeWeb.ShopLive.Collection do
   @impl true
   def render(assigns) do
     ~H"""
-    <div
+    <SimpleshopThemeWeb.ShopComponents.shop_layout
-      id="shop-container"
+      theme_settings={@theme_settings}
-      phx-hook="CartPersist"
+      logo_image={@logo_image}
-      class="shop-container min-h-screen pb-20 md:pb-0"
+      header_image={@header_image}
-      style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);"
+      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"
     >
-      <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}
-        logo_image={@logo_image}
-        header_image={@header_image}
-        active_page="collection"
-        mode={@mode}
-        cart_count={@cart_count}
-      />
-
       <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_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