jamey/berrypod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

wire simple pages to PageRenderer (stage 3)

Browse Source 
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>
This commit is contained in:
jamey 2026-02-26 18:29:20 +00:00
parent ca9f32fa42
commit c69e51051f
12 changed files with 147 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
PROGRESS.md
View File

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

4
assets/css/shop/components.css
View File

@ -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);
}

2
docs/plans/page-builder.md
View File

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

3
lib/berrypod/pages.ex
View File

@ -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 """

25
lib/berrypod/pages/block_types.ex
View File

@ -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
},

23
lib/berrypod/pages/defaults.ex
View File

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

27
lib/berrypod_web/controllers/error_html.ex
View File

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

8
lib/berrypod_web/live/shop/contact.ex
View File

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

58
lib/berrypod_web/live/shop/content.ex
View File

@ -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_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()
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()
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()
og_url: BerrypodWeb.Endpoint.url() <> "/terms"
},
LegalPages.terms_content()
}
end
end

10
lib/berrypod_web/live/shop/home.ex
View File

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

28
lib/berrypod_web/page_renderer.ex
View File

@ -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"""
<%= 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(" ", "-")

4
test/berrypod_web/page_renderer_test.exs
View File

@ -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 &amp; 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 &amp; conditions"
assert html =~ "Terms of service"
end
test "contact page renders hero, form, and sidebar blocks" do