From c69e51051f0342b4968f50823658b858414f120d Mon Sep 17 00:00:00 2001 From: jamey Date: Thu, 26 Feb 2026 18:29:20 +0000 Subject: [PATCH] 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 --- PROGRESS.md | 6 +- assets/css/shop/components.css | 4 ++ docs/plans/page-builder.md | 2 +- lib/berrypod/pages.ex | 3 + lib/berrypod/pages/block_types.ex | 25 ++++++- lib/berrypod/pages/defaults.ex | 23 ++++--- lib/berrypod_web/controllers/error_html.ex | 27 +++----- lib/berrypod_web/live/shop/contact.ex | 8 ++- lib/berrypod_web/live/shop/content.ex | 80 ++++++++++++---------- lib/berrypod_web/live/shop/home.ex | 10 +-- lib/berrypod_web/page_renderer.ex | 40 ++++++++--- test/berrypod_web/page_renderer_test.exs | 4 +- 12 files changed, 147 insertions(+), 85 deletions(-) diff --git a/PROGRESS.md b/PROGRESS.md index 87877b3..b7bedcc 100644 --- a/PROGRESS.md +++ b/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 diff --git a/assets/css/shop/components.css b/assets/css/shop/components.css index dac6456..8dc7d69 100644 --- a/assets/css/shop/components.css +++ b/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); } diff --git a/docs/plans/page-builder.md b/docs/plans/page-builder.md index 5af4199..549044f 100644 --- a/docs/plans/page-builder.md +++ b/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 diff --git a/lib/berrypod/pages.ex b/lib/berrypod/pages.ex index 94423dc..019d01b 100644 --- a/lib/berrypod/pages.ex +++ b/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 """ diff --git a/lib/berrypod/pages/block_types.ex b/lib/berrypod/pages/block_types.ex index f60956f..19663d6 100644 --- a/lib/berrypod/pages/block_types.ex +++ b/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 }, diff --git a/lib/berrypod/pages/defaults.ex b/lib/berrypod/pages/defaults.ex index fe3caca..eddd1de 100644 --- a/lib/berrypod/pages/defaults.ex +++ b/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 diff --git a/lib/berrypod_web/controllers/error_html.ex b/lib/berrypod_web/controllers/error_html.ex index af978d3..2977b7a 100644 --- a/lib/berrypod_web/controllers/error_html.ex +++ b/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""" @@ -118,20 +124,7 @@ defmodule BerrypodWeb.ErrorHTML do data-layout={@theme_settings.layout_width} data-shadow={@theme_settings.card_shadow} > - + diff --git a/lib/berrypod_web/live/shop/contact.ex b/lib/berrypod_web/live/shop/contact.ex index d6a1fd1..613774d 100644 --- a/lib/berrypod_web/live/shop/contact.ex +++ b/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""" - + """ end end diff --git a/lib/berrypod_web/live/shop/content.ex b/lib/berrypod_web/live/shop/content.ex index 3f19e76..e4fa86c 100644 --- a/lib/berrypod_web/live/shop/content.ex +++ b/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""" - + """ 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 diff --git a/lib/berrypod_web/live/shop/home.ex b/lib/berrypod_web/live/shop/home.ex index 81a4e6d..461e104 100644 --- a/lib/berrypod_web/live/shop/home.ex +++ b/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""" - + """ end end diff --git a/lib/berrypod_web/page_renderer.ex b/lib/berrypod_web/page_renderer.ex index 65f77b2..a84554c 100644 --- a/lib/berrypod_web/page_renderer.ex +++ b/lib/berrypod_web/page_renderer.ex @@ -30,9 +30,9 @@ defmodule BerrypodWeb.PageRenderer do error_page={@page.slug == "error"} >
- <%= for block <- @page.blocks do %> +
{render_block(Map.merge(@block_assigns, %{block: block, page_slug: @page.slug}))} - <% end %> +
""" @@ -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 %> + + <% 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(" ", "-") diff --git a/test/berrypod_web/page_renderer_test.exs b/test/berrypod_web/page_renderer_test.exs index 6efa944..f4ce527 100644 --- a/test/berrypod_web/page_renderer_test.exs +++ b/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