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

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

lib/simpleshop_theme_web/components/page_templates/about.html.heex

@@ -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")} />
 

lib/simpleshop_theme_web/components/page_templates/cart.html.heex

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

lib/simpleshop_theme_web/components/page_templates/collection.html.heex

@@ -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")} />
 

lib/simpleshop_theme_web/components/page_templates/contact.html.heex

@@ -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")} />
 

lib/simpleshop_theme_web/components/page_templates/error.html.heex

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

lib/simpleshop_theme_web/components/page_templates/home.html.heex

@@ -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")} />
 

lib/simpleshop_theme_web/components/page_templates/pdp.html.heex

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

lib/simpleshop_theme_web/components/shop_components.ex

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