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

feat: add Cart page and themed error pages

Browse Source 
- Add ShopLive.Cart at /cart using shared PageTemplates
- Update ErrorHTML to render fully themed 404/500 pages
- Add dev-only error preview routes at /dev/errors/404 and /dev/errors/500
- Update error page tests for themed output

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jamey Greenwood 2026-01-17 22:29:45 +00:00
parent 94f98b8be0
commit a2d655d302
5 changed files with 210 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
lib/simpleshop_theme_web/controllers/error_html.ex
View File

@ -6,19 +6,115 @@ defmodule SimpleshopThemeWeb.ErrorHTML do
""" """
use SimpleshopThemeWeb, :html use SimpleshopThemeWeb, :html
# If you want to customize your error pages, alias SimpleshopTheme.Settings
# uncomment the embed_templates/1 call below alias SimpleshopTheme.Settings.ThemeSettings
# and add pages to the error directory: alias SimpleshopTheme.Media
# alias SimpleshopTheme.Theme.{CSSCache, CSSGenerator, PreviewData}
# * lib/simpleshop_theme_web/controllers/error_html/404.html.heex
# * lib/simpleshop_theme_web/controllers/error_html/500.html.heex def render("404.html", assigns) do
# render_error_page(assigns, "404", "Page Not Found",
# embed_templates "error_html/*" "Sorry, we couldn't find the page you're looking for. Perhaps you've mistyped the URL or the page has been moved.")
end
def render("500.html", assigns) do
render_error_page(assigns, "500", "Server Error",
"Something went wrong on our end. Please try again later or contact support if the problem persists.")
end
# The default is to render a plain text page based on
# the template name. For example, "404.html" becomes
# "Not Found".
def render(template, _assigns) do def render(template, _assigns) do
Phoenix.Controller.status_message_from_template(template) Phoenix.Controller.status_message_from_template(template)
end end
defp render_error_page(assigns, error_code, error_title, error_description) do
# Load theme settings with fallback for error conditions
{theme_settings, generated_css} = load_theme_data()
logo_image = safe_load(&Media.get_logo/0)
header_image = safe_load(&Media.get_header/0)
preview_data = %{
products: PreviewData.products(),
categories: PreviewData.categories()
}
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(:preview_data, preview_data)
|> Map.put(:error_code, error_code)
|> Map.put(:error_title, error_title)
|> Map.put(:error_description, error_description)
|> Map.put(:mode, :shop)
|> Map.put(:cart_items, [])
|> Map.put(:cart_count, 0)
|> Map.put(:cart_subtotal, "£0.00")
~H"""
<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title><%= @error_code %> - <%= @error_title %></title>
<link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
<style id="theme-css">
<%= Phoenix.HTML.raw(@generated_css) %>
</style>
</head>
<body class="h-full">
<div class="shop-root themed h-full"
data-mood={@theme_settings.mood}
data-typography={@theme_settings.typography}
data-shape={@theme_settings.shape}
data-density={@theme_settings.density}
data-grid={@theme_settings.grid_columns}
data-header={@theme_settings.header_layout}
data-sticky={to_string(@theme_settings.sticky_header)}
data-layout={@theme_settings.layout_width}
data-shadow={@theme_settings.card_shadow}>
<SimpleshopThemeWeb.PageTemplates.error
theme_settings={@theme_settings}
logo_image={@logo_image}
header_image={@header_image}
preview_data={@preview_data}
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}
/>
</div>
</body>
</html>
"""
end
defp load_theme_data do
try do
theme_settings = Settings.get_theme_settings()
generated_css =
case CSSCache.get() do
{:ok, css} -> css
:miss ->
css = CSSGenerator.generate(theme_settings)
CSSCache.put(css)
css
end
{theme_settings, generated_css}
rescue
_ -> {%ThemeSettings{}, ""}
end
end
defp safe_load(fun) do
try do
fun.()
rescue
_ -> nil
end
end
end end

20
lib/simpleshop_theme_web/controllers/error_preview_controller.ex Normal file
View File

@ -0,0 +1,20 @@
defmodule SimpleshopThemeWeb.ErrorPreviewController do
@moduledoc """
Development-only controller for previewing error pages.
"""
use SimpleshopThemeWeb, :controller
def not_found(conn, _params) do
conn
|> put_status(:not_found)
|> put_view(SimpleshopThemeWeb.ErrorHTML)
|> render("404.html")
end
def server_error(conn, _params) do
conn
|> put_status(:internal_server_error)
|> put_view(SimpleshopThemeWeb.ErrorHTML)
|> render("500.html")
end
end

68
lib/simpleshop_theme_web/live/shop_live/cart.ex Normal file
View File

@ -0,0 +1,68 @@
defmodule SimpleshopThemeWeb.ShopLive.Cart do
use SimpleshopThemeWeb, :live_view
alias SimpleshopTheme.Settings
alias SimpleshopTheme.Media
alias SimpleshopTheme.Theme.{CSSCache, CSSGenerator, PreviewData}
@impl true
def mount(_params, _session, socket) do
theme_settings = Settings.get_theme_settings()
generated_css =
case CSSCache.get() do
{:ok, css} -> css
:miss ->
css = CSSGenerator.generate(theme_settings)
CSSCache.put(css)
css
end
logo_image = Media.get_logo()
header_image = Media.get_header()
# For now, use preview data for cart items
# In a real implementation, this would come from session/database
cart_page_items = PreviewData.cart_items()
cart_page_subtotal = Enum.reduce(cart_page_items, 0, fn item, acc ->
acc + item.product.price * item.quantity
end)
socket =
socket
|> assign(:page_title, "Cart")
|> assign(:theme_settings, theme_settings)
|> assign(:generated_css, generated_css)
|> assign(:logo_image, logo_image)
|> assign(:header_image, header_image)
|> assign(:cart_page_items, cart_page_items)
|> assign(:cart_page_subtotal, cart_page_subtotal)
|> assign(:mode, :shop)
|> assign(:cart_items, PreviewData.cart_drawer_items())
|> assign(:cart_count, length(cart_page_items))
|> assign(:cart_subtotal, format_subtotal(cart_page_subtotal))
{:ok, socket}
end
@impl true
def render(assigns) do
~H"""
<SimpleshopThemeWeb.PageTemplates.cart
theme_settings={@theme_settings}
logo_image={@logo_image}
header_image={@header_image}
cart_page_items={@cart_page_items}
cart_page_subtotal={@cart_page_subtotal}
mode={@mode}
cart_items={@cart_items}
cart_count={@cart_count}
cart_subtotal={@cart_subtotal}
/>
"""
end
defp format_subtotal(subtotal_pence) do
"£#{Float.round(subtotal_pence / 100, 2)}"
end
end

5
lib/simpleshop_theme_web/router.ex
View File

@ -31,6 +31,7 @@ defmodule SimpleshopThemeWeb.Router do
live "/contact", ShopLive.Contact, :index live "/contact", ShopLive.Contact, :index
live "/products", ShopLive.Products, :index live "/products", ShopLive.Products, :index
live "/products/:id", ShopLive.ProductShow, :show live "/products/:id", ShopLive.ProductShow, :show
live "/cart", ShopLive.Cart, :index
end end
end end
@ -62,6 +63,10 @@ defmodule SimpleshopThemeWeb.Router do
live_dashboard "/dashboard", metrics: SimpleshopThemeWeb.Telemetry live_dashboard "/dashboard", metrics: SimpleshopThemeWeb.Telemetry
forward "/mailbox", Plug.Swoosh.MailboxPreview forward "/mailbox", Plug.Swoosh.MailboxPreview
# Preview error pages
get "/errors/404", SimpleshopThemeWeb.ErrorPreviewController, :not_found
get "/errors/500", SimpleshopThemeWeb.ErrorPreviewController, :server_error
end end
end end

14
test/simpleshop_theme_web/controllers/error_html_test.exs
View File

@ -4,11 +4,17 @@ defmodule SimpleshopThemeWeb.ErrorHTMLTest do
# Bring render_to_string/4 for testing custom views # Bring render_to_string/4 for testing custom views
import Phoenix.Template, only: [render_to_string: 4] import Phoenix.Template, only: [render_to_string: 4]
test "renders 404.html" do test "renders 404.html with themed page" do
assert render_to_string(SimpleshopThemeWeb.ErrorHTML, "404", "html", []) == "Not Found" html = render_to_string(SimpleshopThemeWeb.ErrorHTML, "404", "html", [])
assert html =~ "404"
assert html =~ "Page Not Found"
assert html =~ "shop-root"
end end
test "renders 500.html" do test "renders 500.html with themed page" do
assert render_to_string(SimpleshopThemeWeb.ErrorHTML, "500", "html", []) == "Internal Server Error" html = render_to_string(SimpleshopThemeWeb.ErrorHTML, "500", "html", [])
assert html =~ "500"
assert html =~ "Server Error"
assert html =~ "shop-root"
end end
end end