wire simple pages to PageRenderer (stage 3)

Home, Content (about/delivery/privacy/terms), Contact, and ErrorHTML
now render through the generic PageRenderer instead of hardcoded
templates. Block wrapper divs enable CSS grid targeting. Featured
products block supports layout/card_variant/columns settings for
different page contexts. Contact page uses CSS grid on data-block-type
attributes for two-column layout.

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

PROGRESS.md

@@ -458,15 +458,15 @@ See: [plan](docs/plans/shipping-sync.md) for implementation details
 See: [docs/plans/analytics-v2.md](docs/plans/analytics-v2.md) for v2 plan
 
 ### Page Editor
-**Status:** In progress — Stage 2 of 9 complete, 1284 tests
+**Status:** In progress — Stage 3 of 9 complete, 1284 tests
 
 Database-driven page builder. Every page is a flat list of blocks stored as JSON — add, remove, reorder, and edit blocks on any page. One generic renderer for all pages (no page-specific render functions). Portable blocks (hero, featured_products, image_text, etc.) work on any page. Page-specific blocks (product_hero, cart_items, etc.) are restricted to their native page. Block data loaders dynamically load data based on which blocks are on the page. ETS-cached page definitions. Mobile-first admin editor with live preview, undo/redo, accessible reordering (no drag-and-drop), inline settings forms, and "reset to defaults". CSS-driven page layout (not renderer-driven).
 
 **Stages:**
 1. ~~Foundation — data model, cache, block registry~~ ✅ (`35f96e4`)
 2. ~~Page renderer — generic renderer tested in isolation~~ ✅ (`32f54c7`)
-3. **Next →** Wire simple pages — Home, Content (x4), Contact, Error
-4. Wire shop pages — Collection, PDP, Cart, Search
+3. ~~Wire simple pages — Home, Content (x4), Contact, Error~~ ✅
+4. **Next →** Wire shop pages — Collection, PDP, Cart, Search
 5. Wire order pages + theme preview — CheckoutSuccess, Orders, OrderDetail, theme editor
 6. Admin editor — page list + block management (reorder, add, remove, duplicate, save)
 7. Admin editor — inline block settings editing

assets/css/shop/components.css

@@ -2444,6 +2444,9 @@
     max-width: 56rem;
     padding-top: 0;
     padding-bottom: 4rem;
+
+    & > [data-block-type="hero"] { grid-column: 1 / -1; }
+    & > [data-block-type="contact_form"] { grid-column: 1; }
   }
 
   .contact-grid {
@@ -2527,6 +2530,7 @@
     .footer-bottom { flex-direction: row; }
     .pdp-grid { grid-template-columns: repeat(2, 1fr); }
     .contact-grid { grid-template-columns: repeat(2, 1fr); }
+    .contact-main { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
     .product-grid[data-columns="fixed-4"] {
       grid-template-columns: repeat(4, 1fr);
     }

docs/plans/page-builder.md

@@ -1,6 +1,6 @@
 # Page builder plan
 
-Status: In progress (Stage 2 complete)
+Status: In progress (Stage 3 complete)
 
 ## Context
 

lib/berrypod/pages.ex

@@ -26,6 +26,9 @@ defmodule Berrypod.Pages do
       {:ok, page_data} -> page_data
       :miss -> get_page_uncached(slug)
     end
+  rescue
+    # ETS table might not exist yet during startup
+    ArgumentError -> get_page_uncached(slug)
   end
 
   @doc """

lib/berrypod/pages/block_types.ex

@@ -22,6 +22,8 @@ defmodule Berrypod.Pages.BlockTypes do
         %{key: "description", label: "Description", type: :textarea, default: ""},
         %{key: "cta_text", label: "Button text", type: :text, default: ""},
         %{key: "cta_href", label: "Button link", type: :text, default: ""},
+        %{key: "secondary_cta_text", label: "Secondary button text", type: :text, default: ""},
+        %{key: "secondary_cta_href", label: "Secondary button link", type: :text, default: ""},
         %{
           key: "variant",
           label: "Style",
@@ -37,7 +39,28 @@ defmodule Berrypod.Pages.BlockTypes do
       allowed_on: :all,
       settings_schema: [
         %{key: "title", label: "Title", type: :text, default: "Featured products"},
-        %{key: "product_count", label: "Number of products", type: :number, default: 8}
+        %{key: "product_count", label: "Number of products", type: :number, default: 8},
+        %{
+          key: "layout",
+          label: "Layout",
+          type: :select,
+          options: ~w(section grid),
+          default: "section"
+        },
+        %{
+          key: "card_variant",
+          label: "Card style",
+          type: :select,
+          options: ~w(featured default minimal compact),
+          default: "featured"
+        },
+        %{
+          key: "columns",
+          label: "Columns",
+          type: :select,
+          options: ~w(auto fixed-4),
+          default: "auto"
+        }
       ],
       data_loader: :load_featured_products
     },

lib/berrypod/pages/defaults.ex

@@ -65,12 +65,12 @@ defmodule Berrypod.Pages.Defaults do
     [
       block("hero", %{
         "title" => "About the studio",
-        "description" => "",
+        "description" => "Your story goes here \u2013 this is sample content for the demo shop",
         "variant" => "sunken"
       }),
       block("content_body", %{
         "image_src" => "/mockups/night-sky-blanket-3",
-        "image_alt" => "Night sky blanket"
+        "image_alt" => "Night sky blanket draped over a chair"
       })
     ]
   end
@@ -78,8 +78,8 @@ defmodule Berrypod.Pages.Defaults do
   defp blocks("delivery") do
     [
       block("hero", %{
-        "title" => "Delivery information",
-        "description" => "",
+        "title" => "Delivery & returns",
+        "description" => "Everything you need to know about shipping and returns",
         "variant" => "page"
       }),
       block("content_body")
@@ -90,7 +90,7 @@ defmodule Berrypod.Pages.Defaults do
     [
       block("hero", %{
         "title" => "Privacy policy",
-        "description" => "",
+        "description" => "How we handle your personal information",
         "variant" => "page"
       }),
       block("content_body")
@@ -100,8 +100,8 @@ defmodule Berrypod.Pages.Defaults do
   defp blocks("terms") do
     [
       block("hero", %{
-        "title" => "Terms & conditions",
-        "description" => "",
+        "title" => "Terms of service",
+        "description" => "The legal bits",
         "variant" => "page"
       }),
       block("content_body")
@@ -186,11 +186,16 @@ defmodule Berrypod.Pages.Defaults do
       block("hero", %{
         "variant" => "error",
         "cta_text" => "Go to Homepage",
-        "cta_href" => "/"
+        "cta_href" => "/",
+        "secondary_cta_text" => "Browse Products",
+        "secondary_cta_href" => "/collections/all"
       }),
       block("featured_products", %{
         "title" => "Featured products",
-        "product_count" => 4
+        "product_count" => 4,
+        "layout" => "grid",
+        "card_variant" => "minimal",
+        "columns" => "fixed-4"
       })
     ]
   end

lib/berrypod_web/controllers/error_html.ex

@@ -6,6 +6,8 @@ defmodule BerrypodWeb.ErrorHTML do
   """
   use BerrypodWeb, :html
 
+  alias Berrypod.Pages
+  alias Berrypod.Pages.Defaults
   alias Berrypod.Settings
   alias Berrypod.Settings.ThemeSettings
   alias Berrypod.Media
@@ -76,22 +78,26 @@ defmodule BerrypodWeb.ErrorHTML do
     {theme_settings, generated_css} = load_theme_data()
     logo_image = safe_load(&Media.get_logo/0)
     header_image = safe_load(&Media.get_header/0)
-
-    products = safe_load(fn -> Products.list_visible_products(limit: 4) end) || []
     categories = safe_load(fn -> Products.list_categories() end) || []
 
+    page = safe_load(fn -> Pages.get_page("error") end) || Defaults.for_slug("error")
+
     assigns =
       assigns
       |> Map.put(:theme_settings, theme_settings)
       |> Map.put(:generated_css, generated_css)
       |> Map.put(:logo_image, logo_image)
       |> Map.put(:header_image, header_image)
-      |> Map.put(:products, products)
       |> Map.put(:categories, categories)
       |> Map.put(:mode, :shop)
       |> Map.put(:cart_items, [])
       |> Map.put(:cart_count, 0)
       |> Map.put(:cart_subtotal, "£0.00")
+      |> Map.put(:page, page)
+
+    # Load block data (e.g. products for featured_products block)
+    extra = safe_load(fn -> Pages.load_block_data(page.blocks, assigns) end) || %{}
+    assigns = Map.merge(assigns, extra)
 
     ~H"""
     <!DOCTYPE html>
@@ -118,20 +124,7 @@ defmodule BerrypodWeb.ErrorHTML do
           data-layout={@theme_settings.layout_width}
           data-shadow={@theme_settings.card_shadow}
         >
-          <BerrypodWeb.PageTemplates.error
-            theme_settings={@theme_settings}
-            logo_image={@logo_image}
-            header_image={@header_image}
-            products={@products}
-            categories={@categories}
-            error_code={@error_code}
-            error_title={@error_title}
-            error_description={@error_description}
-            mode={@mode}
-            cart_items={@cart_items}
-            cart_count={@cart_count}
-            cart_subtotal={@cart_subtotal}
-          />
+          <BerrypodWeb.PageRenderer.render_page {assigns} />
         </div>
       </body>
     </html>

lib/berrypod_web/live/shop/contact.ex

@@ -3,10 +3,13 @@ defmodule BerrypodWeb.Shop.Contact do
 
   alias Berrypod.Orders
   alias Berrypod.Orders.OrderNotifier
+  alias Berrypod.Pages
   alias BerrypodWeb.OrderLookupController
 
   @impl true
   def mount(_params, _session, socket) do
+    page = Pages.get_page("contact")
+
     {:ok,
      socket
      |> assign(:page_title, "Contact")
@@ -15,7 +18,8 @@ defmodule BerrypodWeb.Shop.Contact do
        "Get in touch with us for any questions or help with your order."
      )
      |> assign(:og_url, BerrypodWeb.Endpoint.url() <> "/contact")
-     |> assign(:tracking_state, :idle)}
+     |> assign(:tracking_state, :idle)
+     |> assign(:page, page)}
   end
 
   @impl true
@@ -43,7 +47,7 @@ defmodule BerrypodWeb.Shop.Contact do
   @impl true
   def render(assigns) do
     ~H"""
-    <BerrypodWeb.PageTemplates.contact {assigns} />
+    <BerrypodWeb.PageRenderer.render_page {assigns} />
     """
   end
 end

lib/berrypod_web/live/shop/content.ex

@@ -2,6 +2,7 @@ defmodule BerrypodWeb.Shop.Content do
   use BerrypodWeb, :live_view
 
   alias Berrypod.LegalPages
+  alias Berrypod.Pages
   alias Berrypod.Theme.PreviewData
 
   @impl true
@@ -11,65 +12,68 @@ defmodule BerrypodWeb.Shop.Content do
 
   @impl true
   def handle_params(_params, _uri, socket) do
-    config = page_config(socket.assigns.live_action)
-    {:noreply, assign(socket, config)}
+    slug = to_string(socket.assigns.live_action)
+    page = Pages.get_page(slug)
+    {seo, content_blocks} = page_config(socket.assigns.live_action)
+
+    socket =
+      socket
+      |> assign(seo)
+      |> assign(:page, page)
+      |> assign(:content_blocks, content_blocks)
+
+    {:noreply, socket}
   end
 
   @impl true
   def render(assigns) do
     ~H"""
-    <BerrypodWeb.PageTemplates.content {assigns} />
+    <BerrypodWeb.PageRenderer.render_page {assigns} />
     """
   end
 
+  # Returns {seo_assigns, content_blocks} for each content page
   defp page_config(:about) do
-    %{
-      page_title: "About",
-      page_description: "Your story goes here – this is sample content for the demo shop",
-      og_url: BerrypodWeb.Endpoint.url() <> "/about",
-      active_page: "about",
-      hero_title: "About the studio",
-      hero_description: "Your story goes here – this is sample content for the demo shop",
-      hero_background: :sunken,
-      image_src: "/mockups/night-sky-blanket-3",
-      image_alt: "Night sky blanket draped over a chair",
-      content_blocks: PreviewData.about_content()
+    {
+      %{
+        page_title: "About",
+        page_description: "Your story goes here \u2013 this is sample content for the demo shop",
+        og_url: BerrypodWeb.Endpoint.url() <> "/about"
+      },
+      PreviewData.about_content()
     }
   end
 
   defp page_config(:delivery) do
-    %{
-      page_title: "Delivery & returns",
-      page_description: "Everything you need to know about shipping and returns.",
-      og_url: BerrypodWeb.Endpoint.url() <> "/delivery",
-      active_page: "delivery",
-      hero_title: "Delivery & returns",
-      hero_description: "Everything you need to know about shipping and returns",
-      content_blocks: LegalPages.delivery_content()
+    {
+      %{
+        page_title: "Delivery & returns",
+        page_description: "Everything you need to know about shipping and returns.",
+        og_url: BerrypodWeb.Endpoint.url() <> "/delivery"
+      },
+      LegalPages.delivery_content()
     }
   end
 
   defp page_config(:privacy) do
-    %{
-      page_title: "Privacy policy",
-      page_description: "How we handle your personal information.",
-      og_url: BerrypodWeb.Endpoint.url() <> "/privacy",
-      active_page: "privacy",
-      hero_title: "Privacy policy",
-      hero_description: "How we handle your personal information",
-      content_blocks: LegalPages.privacy_content()
+    {
+      %{
+        page_title: "Privacy policy",
+        page_description: "How we handle your personal information.",
+        og_url: BerrypodWeb.Endpoint.url() <> "/privacy"
+      },
+      LegalPages.privacy_content()
     }
   end
 
   defp page_config(:terms) do
-    %{
-      page_title: "Terms of service",
-      page_description: "The terms and conditions governing purchases from our shop.",
-      og_url: BerrypodWeb.Endpoint.url() <> "/terms",
-      active_page: "terms",
-      hero_title: "Terms of service",
-      hero_description: "The legal bits",
-      content_blocks: LegalPages.terms_content()
+    {
+      %{
+        page_title: "Terms of service",
+        page_description: "The terms and conditions governing purchases from our shop.",
+        og_url: BerrypodWeb.Endpoint.url() <> "/terms"
+      },
+      LegalPages.terms_content()
     }
   end
 end

lib/berrypod_web/live/shop/home.ex

@@ -1,11 +1,12 @@
 defmodule BerrypodWeb.Shop.Home do
   use BerrypodWeb, :live_view
 
-  alias Berrypod.Products
+  alias Berrypod.Pages
 
   @impl true
   def mount(_params, _session, socket) do
-    products = Products.list_visible_products(limit: 8)
+    page = Pages.get_page("home")
+    extra = Pages.load_block_data(page.blocks, socket.assigns)
 
     base = BerrypodWeb.Endpoint.url()
     site_name = socket.assigns.theme_settings.site_name
@@ -26,7 +27,8 @@ defmodule BerrypodWeb.Shop.Home do
       |> assign(:page_title, "Home")
       |> assign(:og_url, base <> "/")
       |> assign(:json_ld, org_ld)
-      |> assign(:products, products)
+      |> assign(:page, page)
+      |> assign(extra)
 
     {:ok, socket}
   end
@@ -34,7 +36,7 @@ defmodule BerrypodWeb.Shop.Home do
   @impl true
   def render(assigns) do
     ~H"""
-    <BerrypodWeb.PageTemplates.home {assigns} />
+    <BerrypodWeb.PageRenderer.render_page {assigns} />
     """
   end
 end

lib/berrypod_web/page_renderer.ex

@@ -30,9 +30,9 @@ defmodule BerrypodWeb.PageRenderer do
       error_page={@page.slug == "error"}
     >
       <main id="main-content" class={page_main_class(@page.slug)}>
-        <%= for block <- @page.blocks do %>
+        <div :for={block <- @page.blocks} data-block-type={block["type"]}>
           {render_block(Map.merge(@block_assigns, %{block: block, page_slug: @page.slug}))}
-        <% end %>
+        </div>
       </main>
     </.shop_layout>
     """
@@ -85,14 +85,30 @@ defmodule BerrypodWeb.PageRenderer do
     assigns =
       assigns
       |> assign(:section_title, settings["title"] || "Featured products")
+      |> assign(:layout, settings["layout"] || "section")
+      |> assign(:card_variant, card_variant(settings["card_variant"]))
+      |> assign(:columns, grid_columns(settings["columns"]))
 
     ~H"""
-    <.featured_products_section
-      title={@section_title}
-      products={assigns[:products] || []}
-      theme_settings={@theme_settings}
-      mode={@mode}
-    />
+    <%= if @layout == "grid" do %>
+      <.product_grid columns={@columns} theme_settings={@theme_settings}>
+        <%= for product <- assigns[:products] || [] do %>
+          <.product_card
+            product={product}
+            theme_settings={@theme_settings}
+            mode={@mode}
+            variant={@card_variant}
+          />
+        <% end %>
+      </.product_grid>
+    <% else %>
+      <.featured_products_section
+        title={@section_title}
+        products={assigns[:products] || []}
+        theme_settings={@theme_settings}
+        mode={@mode}
+      />
+    <% end %>
     """
   end
 
@@ -728,6 +744,14 @@ defmodule BerrypodWeb.PageRenderer do
   defp hero_background("sunken"), do: :sunken
   defp hero_background(_), do: :base
 
+  defp card_variant("minimal"), do: :minimal
+  defp card_variant("compact"), do: :compact
+  defp card_variant("default"), do: :default
+  defp card_variant(_), do: :featured
+
+  defp grid_columns("fixed-4"), do: :fixed_4
+  defp grid_columns(_), do: nil
+
   defp breadcrumb_items(%{category: cat, title: title}) when not is_nil(cat) do
     slug = cat |> String.downcase() |> String.replace(" ", "-")
 

test/berrypod_web/page_renderer_test.exs

@@ -66,7 +66,7 @@ defmodule BerrypodWeb.PageRendererTest do
     test "delivery page renders hero" do
       html = render_page("delivery", %{content_blocks: []})
 
-      assert html =~ "Delivery information"
+      assert html =~ "Delivery & returns"
     end
 
     test "privacy page renders hero" do
@@ -78,7 +78,7 @@ defmodule BerrypodWeb.PageRendererTest do
     test "terms page renders hero" do
       html = render_page("terms", %{content_blocks: []})
 
-      assert html =~ "Terms & conditions"
+      assert html =~ "Terms of service"
     end
 
     test "contact page renders hero, form, and sidebar blocks" do