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

feat: add cart page, cart drawer, and shared cart infrastructure

Browse Source 
- Cart context with pure functions for add/remove/update/hydrate
- Price formatting via ex_money (replaces all float division)
- CartHook on_mount with attach_hook for shared event handlers
  (open/close drawer, remove item, PubSub sync)
- Accessible cart drawer with focus trap, scroll lock, aria-live
- Cart page with increment/decrement quantity controls
- Preview mode cart drawer support in theme editor
- Cart persistence to session via JS hook + API endpoint
- 19 tests covering all Cart pure functions

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey
2026-02-05 22:11:16 +00:00
parent 880e7a2888
commit 1bc08bfb23
27 changed files with 1163 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
lib/simpleshop_theme_web/cart_hook.ex Normal file
View File

@@ -0,0 +1,115 @@
defmodule SimpleshopThemeWeb.CartHook do
@moduledoc """
LiveView on_mount hook for cart state and shared event handling.
Mounted in the public_shop live_session to give all shop LiveViews
cart state, PubSub sync, and shared event handlers via attach_hook.
Handles these events so individual LiveViews don't have to:
- `open_cart_drawer` / `close_cart_drawer` - toggle drawer visibility
- `remove_item` - remove item from cart
- `{:cart_updated, cart}` info - cross-tab cart sync via PubSub
LiveViews with custom cart logic (add_to_cart, increment, decrement)
can call `update_cart_assigns/2` and `broadcast_and_update/2` directly.
"""
import Phoenix.Component, only: [assign: 3]
import Phoenix.LiveView, only: [attach_hook: 4, connected?: 1, push_event: 3]
alias SimpleshopTheme.Cart
def on_mount(:mount_cart, _params, session, socket) do
cart_items = Cart.get_from_session(session)
hydrated = Cart.hydrate(cart_items)
socket =
socket
|> assign(:raw_cart, cart_items)
|> assign(:cart_items, hydrated)
|> assign(:cart_count, Cart.item_count(cart_items))
|> assign(:cart_subtotal, Cart.format_subtotal(hydrated))
|> assign(:cart_drawer_open, false)
|> assign(:cart_status, nil)
|> attach_hook(:cart_events, :handle_event, &handle_cart_event/3)
|> attach_hook(:cart_info, :handle_info, &handle_cart_info/2)
socket =
if connected?(socket) do
csrf_token = Map.get(session, "_csrf_token", "default")
topic = "cart:#{csrf_token}"
Phoenix.PubSub.subscribe(SimpleshopTheme.PubSub, topic)
assign(socket, :cart_topic, topic)
else
assign(socket, :cart_topic, nil)
end
{:cont, socket}
end
# Shared event handlers
defp handle_cart_event("open_cart_drawer", _params, socket) do
{:halt, assign(socket, :cart_drawer_open, true)}
end
defp handle_cart_event("close_cart_drawer", _params, socket) do
{:halt, assign(socket, :cart_drawer_open, false)}
end
defp handle_cart_event("remove_item", %{"id" => variant_id}, socket) do
cart = Cart.remove_item(socket.assigns.raw_cart, variant_id)
socket =
socket
|> broadcast_and_update(cart)
|> assign(:cart_status, "Item removed from cart")
{:halt, socket}
end
defp handle_cart_event(_event, _params, socket), do: {:cont, socket}
# Shared info handlers
defp handle_cart_info({:cart_updated, cart}, socket) do
{:halt, update_cart_assigns(socket, cart)}
end
defp handle_cart_info(_msg, socket), do: {:cont, socket}
# Public helpers for LiveViews with custom cart logic
@doc """
Updates all cart-related assigns from raw cart data.
"""
def update_cart_assigns(socket, cart) do
hydrated = Cart.hydrate(cart)
socket
|> assign(:raw_cart, cart)
|> assign(:cart_items, hydrated)
|> assign(:cart_count, Cart.item_count(cart))
|> assign(:cart_subtotal, Cart.format_subtotal(hydrated))
end
@doc """
Broadcasts cart update to other tabs and updates local assigns.
Uses broadcast_from to avoid notifying self (prevents double-update).
"""
def broadcast_and_update(socket, cart) do
if socket.assigns.cart_topic do
Phoenix.PubSub.broadcast_from(
SimpleshopTheme.PubSub,
self(),
socket.assigns.cart_topic,
{:cart_updated, cart}
)
end
socket
|> update_cart_assigns(cart)
|> push_event("persist_cart", %{items: Cart.serialize(cart)})
end
end

11
lib/simpleshop_theme_web/components/page_templates/about.html.heex
View File

@@ -1,4 +1,6 @@
<div
id="shop-container"
phx-hook="CartPersist"
class="shop-container min-h-screen pb-20 md:pb-0"
style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);"
>
@@ -31,7 +33,14 @@
<.shop_footer theme_settings={@theme_settings} mode={@mode} />
<.cart_drawer cart_items={@cart_items} subtotal={@cart_subtotal} 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 searching for "mountain", "forest", or "ocean")} />

39
lib/simpleshop_theme_web/components/page_templates/cart.html.heex
View File

@@ -1,4 +1,6 @@
<div
id="shop-container"
phx-hook="CartPersist"
class="shop-container min-h-screen pb-20 md:pb-0"
style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);"
>
@@ -19,12 +21,45 @@
<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" />
<.cart_layout items={@cart_page_items} subtotal={@cart_page_subtotal} mode={@mode} />
<%= if @cart_items == [] do %>
<.cart_empty_state mode={@mode} />
<% else %>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<div class="lg:col-span-2">
<ul
role="list"
aria-label="Cart items"
class="flex flex-col gap-4"
style="list-style: none; margin: 0; padding: 0;"
>
<%= for item <- @cart_items do %>
<li>
<.shop_card class="p-4">
<.cart_item_row item={item} size={:default} show_quantity_controls mode={@mode} />
</.shop_card>
</li>
<% end %>
</ul>
</div>
<div>
<.order_summary subtotal={@cart_page_subtotal} mode={@mode} />
</div>
</div>
<% end %>
</main>
<.shop_footer theme_settings={@theme_settings} mode={@mode} />
<.cart_drawer cart_items={@cart_items} subtotal={@cart_subtotal} 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 searching for "mountain", "forest", or "ocean")} />
<.mobile_bottom_nav active_page="cart" mode={@mode} />

10
lib/simpleshop_theme_web/components/page_templates/collection.html.heex
View File

@@ -1,4 +1,6 @@
<div
id="shop-container"
phx-hook="CartPersist"
class="shop-container min-h-screen pb-20 md:pb-0"
style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);"
>
@@ -39,7 +41,13 @@
<.shop_footer theme_settings={@theme_settings} mode={@mode} />
<.cart_drawer cart_items={@cart_items} subtotal={@cart_subtotal} mode={@mode} />
<.cart_drawer
cart_items={@cart_items}
subtotal={@cart_subtotal}
cart_count={@cart_count}
mode={@mode}
open={assigns[:cart_drawer_open] || false}
/>
<.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />

11
lib/simpleshop_theme_web/components/page_templates/contact.html.heex
View File

@@ -1,4 +1,6 @@
<div
id="shop-container"
phx-hook="CartPersist"
class="shop-container min-h-screen pb-20 md:pb-0"
style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);"
>
@@ -54,7 +56,14 @@
<.shop_footer theme_settings={@theme_settings} mode={@mode} />
<.cart_drawer cart_items={@cart_items} subtotal={@cart_subtotal} 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 searching for "mountain", "forest", or "ocean")} />

9
lib/simpleshop_theme_web/components/page_templates/error.html.heex
View File

@@ -50,7 +50,14 @@
<.shop_footer theme_settings={@theme_settings} mode={@mode} />
<.cart_drawer cart_items={@cart_items} subtotal={@cart_subtotal} 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 searching for "mountain", "forest", or "ocean")} />
</div>

11
lib/simpleshop_theme_web/components/page_templates/home.html.heex
View File

@@ -1,4 +1,6 @@
<div
id="shop-container"
phx-hook="CartPersist"
class="shop-container min-h-screen pb-20 md:pb-0"
style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);"
>
@@ -47,7 +49,14 @@
<.shop_footer theme_settings={@theme_settings} mode={@mode} />
<.cart_drawer cart_items={@cart_items} subtotal={@cart_subtotal} 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 searching for "mountain", "forest", or "ocean")} />

13
lib/simpleshop_theme_web/components/page_templates/pdp.html.heex
View File

@@ -1,4 +1,6 @@
<div
id="shop-container"
phx-hook="CartPersist"
class="shop-container min-h-screen pb-20 md:pb-0"
style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);"
>
@@ -66,7 +68,7 @@
</div>
<.quantity_selector quantity={@quantity} in_stock={@product.in_stock} />
<.add_to_cart_button />
<.add_to_cart_button mode={@mode} />
<.trust_badges :if={@theme_settings.pdp_trust_badges} />
<.product_details product={@product} />
</div>
@@ -89,7 +91,14 @@
<.shop_footer theme_settings={@theme_settings} mode={@mode} />
<.cart_drawer cart_items={@cart_items} subtotal={@cart_subtotal} 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 searching for "mountain", "forest", or "ocean")} />
<.mobile_bottom_nav active_page="pdp" mode={@mode} />

305
lib/simpleshop_theme_web/components/shop_components.ex
View File

@@ -898,10 +898,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
type="button"
class="header-icon-btn w-9 h-9 flex items-center justify-center transition-all relative"
style="color: var(--t-text-secondary); background: none; border: none; cursor: pointer; border-radius: var(--t-radius-button);"
phx-click={
Phoenix.LiveView.JS.add_class("open", to: "#cart-drawer")
|> Phoenix.LiveView.JS.add_class("open", to: "#cart-drawer-overlay")
}
phx-click={open_cart_drawer_js()}
aria-label="Cart"
>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -1064,17 +1061,26 @@ defmodule SimpleshopThemeWeb.ShopComponents do
"""
end
defp open_cart_drawer_js do
Phoenix.LiveView.JS.push("open_cart_drawer")
end
defp close_cart_drawer_js do
Phoenix.LiveView.JS.push("close_cart_drawer")
end
@doc """
Renders the cart drawer (floating sidebar).
The drawer slides in from the right when opened. It displays cart items
and checkout options.
and checkout options. Follows WAI-ARIA dialog pattern for accessibility.
## Attributes
* `cart_items` - List of cart items to display. Each item should have
`image`, `name`, `variant`, and `price` keys. Default: []
`image`, `name`, `variant`, `price`, and `variant_id` keys. Default: []
* `subtotal` - The subtotal to display. Default: nil (shows "£0.00")
* `cart_count` - Number of items for screen reader description. Default: 0
* `mode` - Either `:live` (default) for real stores or `:preview` for theme editor.
In preview mode, "View basket" navigates via LiveView JS commands.
@@ -1083,9 +1089,13 @@ defmodule SimpleshopThemeWeb.ShopComponents do
<.cart_drawer cart_items={@cart.items} subtotal={@cart.subtotal} />
<.cart_drawer cart_items={demo_items} subtotal="£72.00" mode={:preview} />
"""
attr :cart_items, :list, default: []
attr :subtotal, :string, default: nil
attr :cart_count, :integer, default: 0
attr :cart_status, :string, default: nil
attr :mode, :atom, default: :live
attr :open, :boolean, default: false
def cart_drawer(assigns) do
assigns =
@@ -1094,27 +1104,51 @@ defmodule SimpleshopThemeWeb.ShopComponents do
end)
~H"""
<%!-- Screen reader announcements for cart changes --%>
<div aria-live="polite" aria-atomic="true" class="sr-only">
{@cart_status}
</div>
<!-- Cart Drawer Overlay -->
<div
id="cart-drawer-overlay"
class={["cart-drawer-overlay", @open && "open"]}
aria-hidden={to_string(!@open)}
style="position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;"
phx-click={close_cart_drawer_js()}
>
</div>
<!-- Cart Drawer -->
<div
id="cart-drawer"
class="cart-drawer"
style="position: fixed; top: 0; right: -400px; width: 400px; max-width: 90vw; height: 100vh; background: var(--t-surface-raised); z-index: 1001; display: flex; flex-direction: column; transition: right 0.3s ease; box-shadow: -4px 0 20px rgba(0,0,0,0.15);"
role="dialog"
aria-modal="true"
aria-labelledby="cart-drawer-title"
aria-describedby="cart-drawer-description"
aria-hidden={to_string(!@open)}
phx-hook="CartDrawer"
class={["cart-drawer", @open && "open"]}
style="position: fixed; top: 0; right: -400px; width: 400px; max-width: 90vw; height: 100vh; height: 100dvh; background: var(--t-surface-raised); z-index: 1001; display: flex; flex-direction: column; transition: right 0.3s ease; box-shadow: -4px 0 20px rgba(0,0,0,0.15);"
>
<p id="cart-drawer-description" class="sr-only">
Shopping basket with {@cart_count} {if @cart_count == 1, do: "item", else: "items"}. Press Escape to close.
</p>
<div
class="cart-drawer-header"
style="display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--t-border-default);"
>
<h2 style="font-family: var(--t-font-heading); font-weight: var(--t-heading-weight); font-size: var(--t-text-large); color: var(--t-text-primary); margin: 0;">
<h2
id="cart-drawer-title"
style="font-family: var(--t-font-heading); font-weight: var(--t-heading-weight); font-size: var(--t-text-large); color: var(--t-text-primary); margin: 0;"
>
Your basket
</h2>
<button
type="button"
class="cart-drawer-close"
style="background: none; border: none; padding: 0.5rem; cursor: pointer; color: var(--t-text-secondary);"
phx-click={
Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer")
|> Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer-overlay")
}
phx-click={close_cart_drawer_js()}
aria-label="Close cart"
>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -1125,39 +1159,16 @@ defmodule SimpleshopThemeWeb.ShopComponents do
</div>
<div class="cart-drawer-items" style="flex: 1; overflow-y: auto; padding: 1rem;">
<%= for item <- @cart_items do %>
<div
class="cart-drawer-item"
style="display: flex; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--t-border-default);"
>
<div
class="cart-drawer-item-image"
style={"width: 60px; height: 60px; border-radius: var(--t-radius-card); background-size: cover; background-position: center; background-image: url('#{item.image}'); flex-shrink: 0;"}
>
</div>
<div class="cart-drawer-item-details" style="flex: 1;">
<h3 style="font-family: var(--t-font-body); font-size: var(--t-text-small); font-weight: 500; color: var(--t-text-primary); margin: 0 0 2px;">
{item.name}
</h3>
<p style="font-family: var(--t-font-body); font-size: var(--t-text-caption); color: var(--t-text-tertiary); margin: 0;">
{item.variant}
</p>
<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 4px;">
<p
class="cart-drawer-item-price"
style="color: var(--t-text-primary); font-weight: 500; font-size: var(--t-text-small); margin: 0;"
>
{item.price}
</p>
<button
type="button"
style="background: none; border: none; padding: 0; cursor: pointer; font-family: var(--t-font-body); font-size: var(--t-text-caption); color: var(--t-text-tertiary); text-decoration: underline;"
>
Remove
</button>
</div>
</div>
</div>
<%= if @cart_items == [] do %>
<.cart_empty_state mode={@mode} />
<% else %>
<ul role="list" aria-label="Cart items" style="list-style: none; margin: 0; padding: 0;">
<%= for item <- @cart_items do %>
<li style="border-bottom: 1px solid var(--t-border-default);">
<.cart_item_row item={item} size={:compact} mode={@mode} />
</li>
<% end %>
</ul>
<% end %>
</div>
@@ -1187,8 +1198,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
<a
href="#"
phx-click={
Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer")
|> Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer-overlay")
close_cart_drawer_js()
|> Phoenix.LiveView.JS.push("change_preview_page", value: %{page: "cart"})
}
class="cart-drawer-link"
@@ -1199,10 +1209,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
<% else %>
<a
href="/cart"
phx-click={
Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer")
|> Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer-overlay")
}
phx-click={close_cart_drawer_js()}
class="cart-drawer-link"
style="display: block; text-align: center; font-family: var(--t-font-body); font-size: var(--t-text-small); color: var(--t-text-secondary); text-decoration: underline; cursor: pointer;"
>
@@ -1211,21 +1218,156 @@ defmodule SimpleshopThemeWeb.ShopComponents do
<% end %>
</div>
</div>
"""
end
<!-- Cart Drawer Overlay -->
@doc """
Shared cart item row component used by both drawer and cart page.
## Attributes
* `item` - Required. Cart item with `name`, `variant`, `price`, `quantity`, `image`, `variant_id`.
* `size` - Either `:compact` (drawer) or `:default` (cart page). Default: :default
* `show_quantity_controls` - Show +/- buttons. Default: false
* `mode` - Either `:live` or `:preview`. Default: :live
"""
attr :item, :map, required: true
attr :size, :atom, default: :default
attr :show_quantity_controls, :boolean, default: false
attr :mode, :atom, default: :live
def cart_item_row(assigns) do
~H"""
<div
id="cart-drawer-overlay"
class="cart-drawer-overlay"
style="position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;"
phx-click={
Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer")
|> Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer-overlay")
}
class="cart-item-row"
style={"display: flex; gap: #{if @size == :compact, do: "0.75rem", else: "1rem"}; padding: 0.75rem 0;"}
>
<div
class="cart-item-image"
style={"width: #{if @size == :compact, do: "60px", else: "80px"}; height: #{if @size == :compact, do: "60px", else: "80px"}; border-radius: var(--t-radius-card); background-size: cover; background-position: center; flex-shrink: 0; #{if @item.image, do: "background-image: url('#{@item.image}');", else: "background-color: var(--t-surface-sunken);"}"}
>
</div>
<div class="cart-item-details" style="flex: 1; min-width: 0;">
<h3 style={"font-family: var(--t-font-body); font-size: #{if @size == :compact, do: "var(--t-text-small)", else: "var(--t-text-base)"}; font-weight: 500; color: var(--t-text-primary); margin: 0 0 2px;"}>
{@item.name}
</h3>
<%= if @item.variant do %>
<p style="font-family: var(--t-font-body); font-size: var(--t-text-caption); color: var(--t-text-tertiary); margin: 0;">
{@item.variant}
</p>
<% end %>
<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 4px; flex-wrap: wrap; gap: 0.5rem;">
<%= if @show_quantity_controls do %>
<div
class="flex items-center"
style="border: 1px solid var(--t-border-default); border-radius: var(--t-radius-input);"
>
<button
type="button"
phx-click="decrement"
phx-value-id={@item.variant_id}
class="px-3 py-1"
style="background: none; border: none; cursor: pointer; color: var(--t-text-primary);"
aria-label={"Decrease quantity of #{@item.name}"}
>
−
</button>
<span
class="px-3 py-1 border-x"
style="border-color: var(--t-border-default); color: var(--t-text-primary); min-width: 2rem; text-align: center;"
>
{@item.quantity}
</span>
<button
type="button"
phx-click="increment"
phx-value-id={@item.variant_id}
class="px-3 py-1"
style="background: none; border: none; cursor: pointer; color: var(--t-text-primary);"
aria-label={"Increase quantity of #{@item.name}"}
>
+
</button>
</div>
<% else %>
<span style="font-size: var(--t-text-caption); color: var(--t-text-tertiary);">
Qty: {@item.quantity}
</span>
<% end %>
<.cart_remove_button variant_id={@item.variant_id} item_name={@item.name} />
</div>
</div>
<div class="text-right" style="flex-shrink: 0;">
<p style={"font-weight: 500; font-size: #{if @size == :compact, do: "var(--t-text-small)", else: "var(--t-text-base)"}; color: var(--t-text-primary); margin: 0;"}>
{SimpleshopTheme.Cart.format_price(@item.price * @item.quantity)}
</p>
</div>
</div>
"""
end
@doc """
Cart empty state component.
"""
attr :mode, :atom, default: :live
def cart_empty_state(assigns) do
~H"""
<div class="text-center py-8" style="color: var(--t-text-secondary);">
<svg
class="w-16 h-16 mx-auto mb-4"
style="color: var(--t-text-tertiary);"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
>
<path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"></path>
<line x1="3" y1="6" x2="21" y2="6"></line>
<path d="M16 10a4 4 0 01-8 0"></path>
</svg>
<p class="mb-4">Your basket is empty</p>
<%= if @mode == :preview do %>
<button
type="button"
phx-click="change_preview_page"
phx-value-page="collection"
style="color: var(--t-text-accent); text-decoration: underline; background: none; border: none; cursor: pointer;"
>
Continue shopping
</button>
<% else %>
<a href="/collections/all" style="color: var(--t-text-accent); text-decoration: underline;">
Continue shopping
</a>
<% end %>
</div>
"""
end
@doc """
Remove button for cart items.
"""
attr :variant_id, :string, required: true
attr :item_name, :string, default: "item"
def cart_remove_button(assigns) do
~H"""
<button
type="button"
phx-click="remove_item"
phx-value-id={@variant_id}
style="background: none; border: none; padding: 0; cursor: pointer; font-family: var(--t-font-body); font-size: var(--t-text-caption); color: var(--t-text-tertiary); text-decoration: underline;"
aria-label={"Remove #{@item_name} from cart"}
>
Remove
</button>
"""
end
@doc """
Renders a product card with configurable variants.
@@ -1470,14 +1612,14 @@ defmodule SimpleshopThemeWeb.ShopComponents do
class="text-lg font-bold"
style="color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));"
>
£{@product.price / 100}
{SimpleshopTheme.Cart.format_price(@product.price)}
</span>
<span class="text-sm line-through ml-2" style="color: var(--t-text-tertiary);">
£{@product.compare_at_price / 100}
{SimpleshopTheme.Cart.format_price(@product.compare_at_price)}
</span>
<% else %>
<span class="text-lg font-bold" style="color: var(--t-text-primary);">
£{@product.price / 100}
{SimpleshopTheme.Cart.format_price(@product.price)}
</span>
<% end %>
</div>
@@ -1485,18 +1627,18 @@ defmodule SimpleshopThemeWeb.ShopComponents do
<p class="text-sm" style="color: var(--t-text-secondary);">
<%= if @product.on_sale do %>
<span class="line-through mr-1" style="color: var(--t-text-tertiary);">
£{@product.compare_at_price / 100}
{SimpleshopTheme.Cart.format_price(@product.compare_at_price)}
</span>
<% end %>
£{@product.price / 100}
{SimpleshopTheme.Cart.format_price(@product.price)}
</p>
<% :compact -> %>
<p class="font-bold" style="color: var(--t-text-primary);">
£{@product.price / 100}
{SimpleshopTheme.Cart.format_price(@product.price)}
</p>
<% :minimal -> %>
<p class="text-xs" style="color: var(--t-text-secondary);">
£{@product.price / 100}
{SimpleshopTheme.Cart.format_price(@product.price)}
</p>
<% end %>
"""
@@ -2834,7 +2976,6 @@ defmodule SimpleshopThemeWeb.ShopComponents do
<.cart_item item={item} />
"""
attr :item, :map, required: true
attr :currency, :string, default: "£"
def cart_item(assigns) do
~H"""
@@ -2887,7 +3028,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
<div class="text-right">
<p class="font-bold text-lg" style="color: var(--t-text-primary);">
{@currency}{@item.product.price / 100 * @item.quantity}
{SimpleshopTheme.Cart.format_price(@item.product.price * @item.quantity)}
</p>
</div>
</.shop_card>
@@ -2912,7 +3053,6 @@ defmodule SimpleshopThemeWeb.ShopComponents do
attr :subtotal, :integer, required: true
attr :delivery, :integer, default: 800
attr :vat, :integer, default: 720
attr :currency, :string, default: "£"
attr :mode, :atom, default: :live
def order_summary(assigns) do
@@ -2933,24 +3073,24 @@ defmodule SimpleshopThemeWeb.ShopComponents do
<div class="flex justify-between">
<span style="color: var(--t-text-secondary);">Subtotal</span>
<span style="color: var(--t-text-primary);">
{@currency}{Float.round(@subtotal / 100, 2)}
{SimpleshopTheme.Cart.format_price(@subtotal)}
</span>
</div>
<div class="flex justify-between">
<span style="color: var(--t-text-secondary);">Delivery</span>
<span style="color: var(--t-text-primary);">
{@currency}{Float.round(@delivery / 100, 2)}
{SimpleshopTheme.Cart.format_price(@delivery)}
</span>
</div>
<div class="flex justify-between">
<span style="color: var(--t-text-secondary);">VAT (20%)</span>
<span style="color: var(--t-text-primary);">{@currency}{Float.round(@vat / 100, 2)}</span>
<span style="color: var(--t-text-primary);">{SimpleshopTheme.Cart.format_price(@vat)}</span>
</div>
<div class="border-t pt-3" style="border-color: var(--t-border-default);">
<div class="flex justify-between text-lg">
<span class="font-semibold" style="color: var(--t-text-primary);">Total</span>
<span class="font-bold" style="color: var(--t-text-primary);">
{@currency}{Float.round(@total / 100, 2)}
{SimpleshopTheme.Cart.format_price(@total)}
</span>
</div>
</div>
@@ -3495,7 +3635,6 @@ defmodule SimpleshopThemeWeb.ShopComponents do
<.product_info product={@product} />
"""
attr :product, :map, required: true
attr :currency, :string, default: "£"
def product_info(assigns) do
~H"""
@@ -3513,10 +3652,10 @@ defmodule SimpleshopThemeWeb.ShopComponents do
class="text-3xl font-bold"
style="color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));"
>
{@currency}{@product.price / 100}
{SimpleshopTheme.Cart.format_price(@product.price)}
</span>
<span class="text-xl line-through" style="color: var(--t-text-tertiary);">
{@currency}{@product.compare_at_price / 100}
{SimpleshopTheme.Cart.format_price(@product.compare_at_price)}
</span>
<span
class="px-2 py-1 text-sm font-bold text-white rounded"
@@ -3528,7 +3667,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
</span>
<% else %>
<span class="text-3xl font-bold" style="color: var(--t-text-primary);">
{@currency}{@product.price / 100}
{SimpleshopTheme.Cart.format_price(@product.price)}
</span>
<% end %>
</div>
@@ -3710,6 +3849,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
* `text` - Optional. Button text. Defaults to "Add to basket".
* `disabled` - Optional. Whether button is disabled. Defaults to false.
* `sticky` - Optional. Whether to use sticky positioning on mobile. Defaults to true.
* `mode` - Either `:live` (sends add_to_cart event) or `:preview` (opens drawer only).
## Examples
@@ -3719,6 +3859,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
attr :text, :string, default: "Add to basket"
attr :disabled, :boolean, default: false
attr :sticky, :boolean, default: true
attr :mode, :atom, default: :live
def add_to_cart_button(assigns) do
~H"""
@@ -3732,10 +3873,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
>
<button
type="button"
phx-click={
Phoenix.LiveView.JS.add_class("open", to: "#cart-drawer")
|> Phoenix.LiveView.JS.add_class("open", to: "#cart-drawer-overlay")
}
phx-click={if @mode == :preview, do: open_cart_drawer_js(), else: "add_to_cart"}
disabled={@disabled}
class="w-full px-6 py-4 text-lg font-semibold transition-all"
style={"background-color: #{if @disabled, do: "var(--t-border-default)", else: "hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l))"}; color: var(--t-text-inverse); border-radius: var(--t-radius-button); cursor: #{if @disabled, do: "not-allowed", else: "pointer"}; border: none;"}
@@ -3930,7 +4068,6 @@ defmodule SimpleshopThemeWeb.ShopComponents do
"""
attr :items, :list, required: true
attr :subtotal, :integer, required: true
attr :currency, :string, default: "£"
attr :mode, :atom, default: :live
def cart_layout(assigns) do
@@ -3939,7 +4076,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
<div class="lg:col-span-2">
<div class="flex flex-col gap-4">
<%= for item <- @items do %>
<.cart_item item={item} currency={@currency} />
<.cart_item item={item} />
<% end %>
</div>
</div>

31
lib/simpleshop_theme_web/controllers/cart_controller.ex Normal file
View File

@@ -0,0 +1,31 @@
defmodule SimpleshopThemeWeb.CartController do
@moduledoc """
API controller for cart session persistence.
LiveView cannot write to session directly, so cart updates are persisted
via this API endpoint called from a JS hook after each cart modification.
"""
use SimpleshopThemeWeb, :controller
alias SimpleshopTheme.Cart
@doc """
Updates the cart in session.
Expects JSON body with `items` as a list of [variant_id, quantity] arrays.
"""
def update(conn, %{"items" => items}) when is_list(items) do
cart_items = Cart.deserialize(items)
conn
|> Cart.put_in_session(cart_items)
|> json(%{ok: true})
end
def update(conn, _params) do
conn
|> put_status(:bad_request)
|> json(%{error: "Invalid cart data"})
end
end

5
lib/simpleshop_theme_web/live/shop_live/about.ex
View File

@@ -31,9 +31,6 @@ defmodule SimpleshopThemeWeb.ShopLive.About do
|> assign(:logo_image, logo_image)
|> assign(:header_image, header_image)
|> assign(:mode, :shop)
|> assign(:cart_items, [])
|> assign(:cart_count, 0)
|> assign(:cart_subtotal, "£0.00")
{:ok, socket}
end
@@ -49,6 +46,8 @@ defmodule SimpleshopThemeWeb.ShopLive.About do
cart_items={@cart_items}
cart_count={@cart_count}
cart_subtotal={@cart_subtotal}
cart_drawer_open={@cart_drawer_open}
cart_status={@cart_status}
/>
"""
end

56
lib/simpleshop_theme_web/live/shop_live/cart.ex
View File

@@ -1,9 +1,10 @@
defmodule SimpleshopThemeWeb.ShopLive.Cart do
use SimpleshopThemeWeb, :live_view
alias SimpleshopTheme.Cart
alias SimpleshopTheme.Settings
alias SimpleshopTheme.Media
alias SimpleshopTheme.Theme.{CSSCache, CSSGenerator, PreviewData}
alias SimpleshopTheme.Theme.{CSSCache, CSSGenerator}
@impl true
def mount(_params, _session, socket) do
@@ -23,15 +24,6 @@ defmodule SimpleshopThemeWeb.ShopLive.Cart do
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")
@@ -39,34 +31,56 @@ defmodule SimpleshopThemeWeb.ShopLive.Cart do
|> 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 handle_event("increment", %{"id" => variant_id}, socket) do
cart = Cart.add_item(socket.assigns.raw_cart, variant_id, 1)
new_qty = Cart.get_quantity(cart, variant_id)
socket =
socket
|> SimpleshopThemeWeb.CartHook.broadcast_and_update(cart)
|> assign(:cart_status, "Quantity updated to #{new_qty}")
{:noreply, socket}
end
@impl true
def handle_event("decrement", %{"id" => variant_id}, socket) do
current = Cart.get_quantity(socket.assigns.raw_cart, variant_id)
cart = Cart.update_quantity(socket.assigns.raw_cart, variant_id, current - 1)
new_qty = Cart.get_quantity(cart, variant_id)
socket =
socket
|> SimpleshopThemeWeb.CartHook.broadcast_and_update(cart)
|> assign(:cart_status, "Quantity updated to #{new_qty}")
{:noreply, socket}
end
@impl true
def render(assigns) do
cart_page_subtotal = Cart.calculate_subtotal(assigns.cart_items)
assigns = assign(assigns, :cart_page_subtotal, cart_page_subtotal)
~H"""
<SimpleshopThemeWeb.PageTemplates.cart
theme_settings={@theme_settings}
logo_image={@logo_image}
header_image={@header_image}
cart_page_items={@cart_page_items}
cart_items={@cart_items}
cart_page_subtotal={@cart_page_subtotal}
mode={@mode}
cart_items={@cart_items}
cart_count={@cart_count}
cart_subtotal={@cart_subtotal}
cart_drawer_open={@cart_drawer_open}
cart_status={@cart_status}
/>
"""
end
defp format_subtotal(subtotal_pence) do
"£#{Float.round(subtotal_pence / 100, 2)}"
end
end

8
lib/simpleshop_theme_web/live/shop_live/collection.ex
View File

@@ -39,9 +39,6 @@ defmodule SimpleshopThemeWeb.ShopLive.Collection do
|> assign(:logo_image, logo_image)
|> assign(:header_image, header_image)
|> assign(:mode, :shop)
|> assign(:cart_items, [])
|> assign(:cart_count, 0)
|> assign(:cart_subtotal, "£0.00")
|> assign(:categories, PreviewData.categories())
|> assign(:sort_options, @sort_options)
|> assign(:current_sort, "featured")
@@ -105,6 +102,8 @@ defmodule SimpleshopThemeWeb.ShopLive.Collection do
def render(assigns) do
~H"""
<div
id="shop-container"
phx-hook="CartPersist"
class="shop-container min-h-screen pb-20 md:pb-0"
style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);"
>
@@ -169,7 +168,10 @@ defmodule SimpleshopThemeWeb.ShopLive.Collection do
<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={

5
lib/simpleshop_theme_web/live/shop_live/contact.ex
View File

@@ -31,9 +31,6 @@ defmodule SimpleshopThemeWeb.ShopLive.Contact do
|> assign(:logo_image, logo_image)
|> assign(:header_image, header_image)
|> assign(:mode, :shop)
|> assign(:cart_items, [])
|> assign(:cart_count, 0)
|> assign(:cart_subtotal, "£0.00")
{:ok, socket}
end
@@ -49,6 +46,8 @@ defmodule SimpleshopThemeWeb.ShopLive.Contact do
cart_items={@cart_items}
cart_count={@cart_count}
cart_subtotal={@cart_subtotal}
cart_drawer_open={@cart_drawer_open}
cart_status={@cart_status}
/>
"""
end

5
lib/simpleshop_theme_web/live/shop_live/home.ex
View File

@@ -37,9 +37,6 @@ defmodule SimpleshopThemeWeb.ShopLive.Home do
|> assign(:header_image, header_image)
|> assign(:preview_data, preview_data)
|> assign(:mode, :shop)
|> assign(:cart_items, [])
|> assign(:cart_count, 0)
|> assign(:cart_subtotal, "£0.00")
{:ok, socket}
end
@@ -56,6 +53,8 @@ defmodule SimpleshopThemeWeb.ShopLive.Home do
cart_items={@cart_items}
cart_count={@cart_count}
cart_subtotal={@cart_subtotal}
cart_drawer_open={@cart_drawer_open}
cart_status={@cart_status}
/>
"""
end

25
lib/simpleshop_theme_web/live/shop_live/product_show.ex
View File

@@ -1,6 +1,7 @@
defmodule SimpleshopThemeWeb.ShopLive.ProductShow do
use SimpleshopThemeWeb, :live_view
alias SimpleshopTheme.Cart
alias SimpleshopTheme.Settings
alias SimpleshopTheme.Media
alias SimpleshopTheme.Theme.{CSSCache, CSSGenerator, PreviewData}
@@ -61,9 +62,6 @@ defmodule SimpleshopThemeWeb.ShopLive.ProductShow do
|> assign(:related_products, related_products)
|> assign(:quantity, 1)
|> assign(:mode, :shop)
|> assign(:cart_items, [])
|> assign(:cart_count, 0)
|> assign(:cart_subtotal, "£0.00")
|> assign(:option_types, option_types)
|> assign(:variants, variants)
|> assign(:selected_options, selected_options)
@@ -153,6 +151,25 @@ defmodule SimpleshopThemeWeb.ShopLive.ProductShow do
{:noreply, socket}
end
@impl true
def handle_event("add_to_cart", _params, socket) do
variant = socket.assigns.selected_variant
if variant do
cart = Cart.add_item(socket.assigns.raw_cart, variant.id, socket.assigns.quantity)
socket =
socket
|> SimpleshopThemeWeb.CartHook.broadcast_and_update(cart)
|> assign(:cart_drawer_open, true)
|> assign(:cart_status, "#{socket.assigns.product.name} added to cart")
{:noreply, socket}
else
{:noreply, socket}
end
end
@impl true
def render(assigns) do
~H"""
@@ -168,6 +185,8 @@ defmodule SimpleshopThemeWeb.ShopLive.ProductShow do
cart_items={@cart_items}
cart_count={@cart_count}
cart_subtotal={@cart_subtotal}
cart_drawer_open={@cart_drawer_open}
cart_status={@cart_status}
option_types={@option_types}
selected_options={@selected_options}
available_options={@available_options}

19
lib/simpleshop_theme_web/live/theme_live/index.ex
View File

@@ -33,6 +33,7 @@ defmodule SimpleshopThemeWeb.ThemeLive.Index do
|> assign(:header_image, header_image)
|> assign(:customise_open, false)
|> assign(:sidebar_collapsed, false)
|> assign(:cart_drawer_open, false)
|> allow_upload(:logo_upload,
accept: ~w(.png .jpg .jpeg .webp .svg),
max_entries: 1,
@@ -287,6 +288,16 @@ defmodule SimpleshopThemeWeb.ThemeLive.Index do
{:noreply, assign(socket, :sidebar_collapsed, !socket.assigns.sidebar_collapsed)}
end
@impl true
def handle_event("open_cart_drawer", _params, socket) do
{:noreply, assign(socket, :cart_drawer_open, true)}
end
@impl true
def handle_event("close_cart_drawer", _params, socket) do
{:noreply, assign(socket, :cart_drawer_open, false)}
end
@impl true
def handle_event("noop", _params, socket) do
{:noreply, socket}
@@ -303,6 +314,7 @@ defmodule SimpleshopThemeWeb.ThemeLive.Index do
attr :theme_settings, :map, required: true
attr :logo_image, :any, required: true
attr :header_image, :any, required: true
attr :cart_drawer_open, :boolean, default: false
defp preview_page(%{page: :home} = assigns) do
~H"""
@@ -315,6 +327,7 @@ defmodule SimpleshopThemeWeb.ThemeLive.Index do
cart_items={PreviewData.cart_drawer_items()}
cart_count={2}
cart_subtotal="£72.00"
cart_drawer_open={@cart_drawer_open}
/>
"""
end
@@ -330,6 +343,7 @@ defmodule SimpleshopThemeWeb.ThemeLive.Index do
cart_items={PreviewData.cart_drawer_items()}
cart_count={2}
cart_subtotal="£72.00"
cart_drawer_open={@cart_drawer_open}
/>
"""
end
@@ -379,6 +393,7 @@ defmodule SimpleshopThemeWeb.ThemeLive.Index do
cart_items={PreviewData.cart_drawer_items()}
cart_count={2}
cart_subtotal="£72.00"
cart_drawer_open={@cart_drawer_open}
option_types={@option_types}
selected_options={@selected_options}
available_options={@available_options}
@@ -409,6 +424,7 @@ defmodule SimpleshopThemeWeb.ThemeLive.Index do
cart_items={PreviewData.cart_drawer_items()}
cart_count={2}
cart_subtotal="£72.00"
cart_drawer_open={@cart_drawer_open}
/>
"""
end
@@ -423,6 +439,7 @@ defmodule SimpleshopThemeWeb.ThemeLive.Index do
cart_items={PreviewData.cart_drawer_items()}
cart_count={2}
cart_subtotal="£72.00"
cart_drawer_open={@cart_drawer_open}
/>
"""
end
@@ -437,6 +454,7 @@ defmodule SimpleshopThemeWeb.ThemeLive.Index do
cart_items={PreviewData.cart_drawer_items()}
cart_count={2}
cart_subtotal="£72.00"
cart_drawer_open={@cart_drawer_open}
/>
"""
end
@@ -455,6 +473,7 @@ defmodule SimpleshopThemeWeb.ThemeLive.Index do
cart_items={PreviewData.cart_drawer_items()}
cart_count={2}
cart_subtotal="£72.00"
cart_drawer_open={@cart_drawer_open}
/>
"""
end

1
lib/simpleshop_theme_web/live/theme_live/index.html.heex
View File

@@ -1164,6 +1164,7 @@
theme_settings={@theme_settings}
logo_image={@logo_image}
header_image={@header_image}
cart_drawer_open={@cart_drawer_open}
/>
</div>
</div>

11
lib/simpleshop_theme_web/router.ex
View File

@@ -30,7 +30,9 @@ defmodule SimpleshopThemeWeb.Router do
scope "/", SimpleshopThemeWeb do
pipe_through [:browser, :shop]
live_session :public_shop, layout: {SimpleshopThemeWeb.Layouts, :shop} do
live_session :public_shop,
layout: {SimpleshopThemeWeb.Layouts, :shop},
on_mount: [{SimpleshopThemeWeb.CartHook, :mount_cart}] do
live "/", ShopLive.Home, :index
live "/about", ShopLive.About, :index
live "/contact", ShopLive.Contact, :index
@@ -40,6 +42,13 @@ defmodule SimpleshopThemeWeb.Router do
end
end
# Cart API (session persistence for LiveView)
scope "/api", SimpleshopThemeWeb do
pipe_through [:browser]
post "/cart", CartController, :update
end
# Image serving routes (public, no auth required)
scope "/images", SimpleshopThemeWeb do
pipe_through :browser