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

refactor: split shop_components.ex into 5 focused sub-modules

Browse Source 
4,487-line monolith → 23-line facade + 5 modules:
- Base (inputs, buttons, cards)
- Layout (header, footer, mobile nav, shop_layout)
- Cart (drawer, items, order summary)
- Product (cards, gallery, variant selector, hero)
- Content (rich text, images, contact, reviews)

`use SimpleshopThemeWeb.ShopComponents` imports all sub-modules.
No single file over ~1,600 lines now.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey 2026-02-08 14:30:25 +00:00
parent cb4698bec8
commit 3eacd91fda
11 changed files with 4537 additions and 4488 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
PROGRESS.md
View File

@ -208,6 +208,15 @@ Codebase analysis identified ~380 lines of duplication across LiveViews, templat
See: [docs/plans/dry-refactor.md](docs/plans/dry-refactor.md) for full analysis and plan
### Shop Page Integration Tests
**Status:** Follow-up
Home, product detail, and cart pages have no LiveView integration tests. Collection and content pages are well-covered (16 and 10 tests respectively). Priority order by logic complexity:
1. **Product detail page** — variant selection, add-to-cart, gallery, breadcrumb
2. **Cart page** — cart items, quantity changes, order summary, checkout link
3. **Home page** — hero section, featured products, category nav (mostly presentational)
### Page Editor
**Status:** Future (Tier 4)

2
lib/simpleshop_theme_web.ex
View File

@ -88,7 +88,7 @@ defmodule SimpleshopThemeWeb do
# Core UI components
import SimpleshopThemeWeb.CoreComponents
# Shop UI components
import SimpleshopThemeWeb.ShopComponents
use SimpleshopThemeWeb.ShopComponents
# Common modules used in templates
alias Phoenix.LiveView.JS

2
lib/simpleshop_theme_web/components/layouts/shop.html.heex
View File

@ -1,2 +1,2 @@
<SimpleshopThemeWeb.ShopComponents.shop_flash_group flash={@flash} />
<.shop_flash_group flash={@flash} />
{@inner_content}

2
lib/simpleshop_theme_web/components/page_templates.ex
View File

@ -15,7 +15,7 @@ defmodule SimpleshopThemeWeb.PageTemplates do
- `cart_count` - Number of items in cart
"""
use Phoenix.Component
import SimpleshopThemeWeb.ShopComponents
use SimpleshopThemeWeb.ShopComponents
embed_templates "page_templates/*"
end

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

File diff suppressed because it is too large Load Diff

245
lib/simpleshop_theme_web/components/shop_components/base.ex Normal file
View File

@ -0,0 +1,245 @@
defmodule SimpleshopThemeWeb.ShopComponents.Base do
use Phoenix.Component
@doc """
Renders a themed text input.
This component applies the `.themed-input` CSS class which inherits
colors, borders, and radii from the current theme's CSS variables.
## Attributes
* `type` - Optional. Input type. Defaults to "text".
* `class` - Optional. Additional CSS classes.
* All other attributes are passed through to the input element.
## Examples
<.shop_input type="email" placeholder="your@email.com" />
<.shop_input type="text" name="name" class="flex-1" />
"""
attr :type, :string, default: "text"
attr :class, :string, default: nil
attr :rest, :global, include: ~w(name value placeholder required disabled autocomplete readonly)
def shop_input(assigns) do
~H"""
<input type={@type} class={["themed-input", @class]} {@rest} />
"""
end
@doc """
Renders a themed textarea.
## Attributes
* `class` - Optional. Additional CSS classes.
* All other attributes are passed through to the textarea element.
## Examples
<.shop_textarea placeholder="Your message..." rows="5" />
"""
attr :class, :string, default: nil
attr :rest, :global, include: ~w(name rows placeholder required disabled readonly)
def shop_textarea(assigns) do
~H"""
<textarea class={["themed-input", @class]} {@rest}></textarea>
"""
end
@doc """
Renders a themed select dropdown.
## Attributes
* `class` - Optional. Additional CSS classes.
* `options` - Required. List of options (strings or {value, label} tuples).
* `selected` - Optional. Currently selected value.
* All other attributes are passed through to the select element.
## Examples
<.shop_select options={["Option 1", "Option 2"]} />
<.shop_select options={[{"value", "Label"}]} selected="value" />
"""
attr :class, :string, default: nil
attr :options, :list, required: true
attr :selected, :any, default: nil
attr :rest, :global, include: ~w(name required disabled aria-label)
def shop_select(assigns) do
~H"""
<select class={["themed-select", @class]} {@rest}>
<%= for option <- @options do %>
<%= case option do %>
<% {value, label} -> %>
<option value={value} selected={@selected == value}>{label}</option>
<% label -> %>
<option selected={@selected == label}>{label}</option>
<% end %>
<% end %>
</select>
"""
end
@doc """
Renders a themed primary button (accent color background).
## Attributes
* `class` - Optional. Additional CSS classes.
* `type` - Optional. Button type. Defaults to "button".
* All other attributes are passed through to the button element.
## Slots
* `inner_block` - Required. Button content.
## Examples
<.shop_button>Send Message</.shop_button>
<.shop_button type="submit" class="w-full">Subscribe</.shop_button>
"""
attr :class, :string, default: nil
attr :type, :string, default: "button"
attr :rest, :global, include: ~w(disabled name value phx-click phx-value-page)
slot :inner_block, required: true
def shop_button(assigns) do
~H"""
<button type={@type} class={["themed-button", @class]} {@rest}>
{render_slot(@inner_block)}
</button>
"""
end
@doc """
Renders a themed outline/secondary button.
## Attributes
* `class` - Optional. Additional CSS classes.
* `type` - Optional. Button type. Defaults to "button".
* All other attributes are passed through to the button element.
## Slots
* `inner_block` - Required. Button content.
## Examples
<.shop_button_outline>Continue Shopping</.shop_button_outline>
"""
attr :class, :string, default: nil
attr :type, :string, default: "button"
attr :rest, :global, include: ~w(disabled name value phx-click phx-value-page)
slot :inner_block, required: true
def shop_button_outline(assigns) do
~H"""
<button type={@type} class={["themed-button-outline", @class]} {@rest}>
{render_slot(@inner_block)}
</button>
"""
end
@doc """
Renders a themed link styled as a primary button.
## Attributes
* `href` - Required. Link destination.
* `class` - Optional. Additional CSS classes.
## Slots
* `inner_block` - Required. Link content.
## Examples
<.shop_link_button href="/checkout">Checkout</.shop_link_button>
"""
attr :href, :string, required: true
attr :class, :string, default: nil
slot :inner_block, required: true
def shop_link_button(assigns) do
~H"""
<a
href={@href}
class={["themed-button", @class]}
style="text-decoration: none; display: inline-block;"
>
{render_slot(@inner_block)}
</a>
"""
end
@doc """
Renders a themed link styled as an outline button.
## Attributes
* `href` - Required. Link destination.
* `class` - Optional. Additional CSS classes.
## Slots
* `inner_block` - Required. Link content.
## Examples
<.shop_link_outline href="/collections/all">Continue Shopping</.shop_link_outline>
"""
attr :href, :string, required: true
attr :class, :string, default: nil
slot :inner_block, required: true
def shop_link_outline(assigns) do
~H"""
<a
href={@href}
class={["themed-button-outline", @class]}
style="text-decoration: none; display: inline-block;"
>
{render_slot(@inner_block)}
</a>
"""
end
@doc """
Renders a themed card container.
## Attributes
* `class` - Optional. Additional CSS classes.
## Slots
* `inner_block` - Required. Card content.
## Examples
<.shop_card class="p-6">
<h3>Card Title</h3>
<p>Card content...</p>
</.shop_card>
"""
attr :class, :string, default: nil
slot :inner_block, required: true
def shop_card(assigns) do
~H"""
<div class={["themed-card", @class]}>
{render_slot(@inner_block)}
</div>
"""
end
end

532
lib/simpleshop_theme_web/components/shop_components/cart.ex Normal file
View File

@ -0,0 +1,532 @@
defmodule SimpleshopThemeWeb.ShopComponents.Cart do
@moduledoc false
use Phoenix.Component
import SimpleshopThemeWeb.ShopComponents.Base
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. Follows WAI-ARIA dialog pattern for accessibility.
## Attributes
* `cart_items` - List of cart items to display. Each item should have
`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.
## Examples
<.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 =
assign_new(assigns, :display_subtotal, fn ->
assigns.subtotal || "£0.00"
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"
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
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={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">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
<div class="cart-drawer-items" style="flex: 1; overflow-y: auto; padding: 1rem;">
<%= 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>
<div
class="cart-drawer-footer"
style="padding: 1rem 1.5rem; border-top: 1px solid var(--t-border-default); background: var(--t-surface-sunken);"
>
<div style="display: flex; justify-content: space-between; font-family: var(--t-font-body); font-size: var(--t-text-small); color: var(--t-text-secondary); margin-bottom: 0.5rem;">
<span>Delivery</span>
<span>Calculated at checkout</span>
</div>
<div
class="cart-drawer-total"
style="display: flex; justify-content: space-between; font-family: var(--t-font-body); font-size: var(--t-text-base); font-weight: 600; color: var(--t-text-primary); margin-bottom: 1rem;"
>
<span>Subtotal</span>
<span>{@display_subtotal}</span>
</div>
<%= if @mode == :preview do %>
<button
type="button"
class="cart-drawer-checkout w-full mb-2"
style="width: 100%; padding: 0.75rem 1.5rem; font-weight: 600; transition: all 0.2s ease; background: var(--t-accent-button, hsl(var(--t-accent-h) var(--t-accent-s) 42%)); color: var(--t-text-inverse); border-radius: var(--t-radius-button); border: none; cursor: pointer; font-family: var(--t-font-body);"
>
Checkout
</button>
<% else %>
<form action="/checkout" method="post">
<input type="hidden" name="_csrf_token" value={Phoenix.Controller.get_csrf_token()} />
<button
type="submit"
class="cart-drawer-checkout w-full mb-2"
style="width: 100%; padding: 0.75rem 1.5rem; font-weight: 600; transition: all 0.2s ease; background: var(--t-accent-button, hsl(var(--t-accent-h) var(--t-accent-s) 42%)); color: var(--t-text-inverse); border-radius: var(--t-radius-button); border: none; cursor: pointer; font-family: var(--t-font-body);"
>
Checkout
</button>
</form>
<% end %>
<%= if @mode == :preview do %>
<a
href="#"
phx-click={
close_cart_drawer_js()
|> Phoenix.LiveView.JS.push("change_preview_page", value: %{page: "cart"})
}
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;"
>
View basket
</a>
<% else %>
<a
href="/cart"
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;"
>
View basket
</a>
<% end %>
</div>
</div>
"""
end
@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`, `product_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
class="cart-item-row"
style={"display: flex; gap: #{if @size == :compact, do: "0.75rem", else: "1rem"}; padding: 0.75rem 0;"}
>
<%= if @mode != :preview do %>
<a
href={"/products/#{@item.product_id}"}
class="cart-item-image"
style={"display: block; 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);"}"}
aria-label={"View #{@item.name}"}
>
</a>
<% else %>
<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>
<% end %>
<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; margin: 0 0 2px;"}>
<%= if @mode != :preview do %>
<a
href={"/products/#{@item.product_id}"}
style="color: var(--t-text-primary); text-decoration: none;"
onmouseover="this.style.textDecoration='underline'"
onmouseout="this.style.textDecoration='none'"
>
{@item.name}
</a>
<% else %>
<span style="color: var(--t-text-primary);">{@item.name}</span>
<% end %>
</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 cart item row.
## Attributes
* `item` - Required. Map with `product` (containing `image_url`, `name`, `price`), `variant`, and `quantity`.
* `currency` - Optional. Currency symbol. Defaults to "£".
## Examples
<.cart_item item={item} />
"""
attr :item, :map, required: true
def cart_item(assigns) do
~H"""
<.shop_card class="flex gap-4 p-4">
<div
class="w-24 h-24 flex-shrink-0 bg-gray-200 overflow-hidden"
style="border-radius: var(--t-radius-image);"
>
<img
src={@item.product.image_url}
alt={@item.product.name}
width="96"
height="96"
loading="lazy"
class="w-full h-full object-cover"
/>
</div>
<div class="flex-1">
<h3
class="font-semibold mb-1"
style="font-family: var(--t-font-heading); color: var(--t-text-primary);"
>
{@item.product.name}
</h3>
<p class="text-sm mb-2" style="color: var(--t-text-secondary);">
{@item.variant}
</p>
<div class="flex items-center gap-4">
<div
class="flex items-center"
style="border: 1px solid var(--t-border-default); border-radius: var(--t-radius-input);"
>
<button class="px-3 py-1" style="color: var(--t-text-primary);">−</button>
<span
class="px-3 py-1 border-x"
style="border-color: var(--t-border-default); color: var(--t-text-primary);"
>
{@item.quantity}
</span>
<button class="px-3 py-1" style="color: var(--t-text-primary);">+</button>
</div>
<button class="text-sm" style="color: var(--t-text-tertiary);">
Remove
</button>
</div>
</div>
<div class="text-right">
<p class="font-bold text-lg" style="color: var(--t-text-primary);">
{SimpleshopTheme.Cart.format_price(@item.product.price * @item.quantity)}
</p>
</div>
</.shop_card>
"""
end
@doc """
Renders the order summary card.
## Attributes
* `subtotal` - Required. Subtotal amount (in pence/cents).
* `delivery` - Optional. Delivery cost. Defaults to 800 (£8.00).
* `vat` - Optional. VAT amount. Defaults to 720 (£7.20).
* `currency` - Optional. Currency symbol. Defaults to "£".
* `mode` - Either `:live` (default) or `:preview`.
## Examples
<.order_summary subtotal={3600} />
"""
attr :subtotal, :integer, required: true
attr :mode, :atom, default: :live
def order_summary(assigns) do
~H"""
<.shop_card class="p-6 sticky top-4">
<h2
class="text-xl font-bold mb-6"
style="font-family: var(--t-font-heading); color: var(--t-text-primary);"
>
Order summary
</h2>
<div class="flex flex-col gap-3 mb-6">
<div class="flex justify-between">
<span style="color: var(--t-text-secondary);">Subtotal</span>
<span style="color: var(--t-text-primary);">
{SimpleshopTheme.Cart.format_price(@subtotal)}
</span>
</div>
<div class="flex justify-between">
<span style="color: var(--t-text-secondary);">Delivery</span>
<span class="text-sm" style="color: var(--t-text-secondary);">
Calculated at checkout
</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);">Subtotal</span>
<span class="font-bold" style="color: var(--t-text-primary);">
{SimpleshopTheme.Cart.format_price(@subtotal)}
</span>
</div>
</div>
</div>
<%= if @mode == :preview do %>
<.shop_button class="w-full px-6 py-3 font-semibold transition-all mb-3">
Checkout
</.shop_button>
<.shop_button_outline
phx-click="change_preview_page"
phx-value-page="collection"
class="w-full px-6 py-3 font-semibold transition-all"
>
Continue shopping
</.shop_button_outline>
<% else %>
<form action="/checkout" method="post" class="mb-3">
<input type="hidden" name="_csrf_token" value={Phoenix.Controller.get_csrf_token()} />
<.shop_button type="submit" class="w-full px-6 py-3 font-semibold transition-all">
Checkout
</.shop_button>
</form>
<.shop_link_outline
href="/collections/all"
class="block w-full px-6 py-3 font-semibold transition-all text-center"
>
Continue shopping
</.shop_link_outline>
<% end %>
</.shop_card>
"""
end
@doc """
Renders a cart items list with order summary layout.
## Attributes
* `items` - Required. List of cart items.
* `subtotal` - Required. Subtotal in pence/cents.
* `currency` - Optional. Currency symbol. Defaults to "£".
* `mode` - Either `:live` (default) or `:preview`.
## Examples
<.cart_layout items={@cart_items} subtotal={3600} mode={:preview} />
"""
attr :items, :list, required: true
attr :subtotal, :integer, required: true
attr :mode, :atom, default: :live
def cart_layout(assigns) do
~H"""
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<div class="lg:col-span-2">
<div class="flex flex-col gap-4">
<%= for item <- @items do %>
<.cart_item item={item} />
<% end %>
</div>
</div>
<div>
<.order_summary subtotal={@subtotal} mode={@mode} />
</div>
</div>
"""
end
end

1205
lib/simpleshop_theme_web/components/shop_components/content.ex Normal file
View File

File diff suppressed because it is too large Load Diff

903
lib/simpleshop_theme_web/components/shop_components/layout.ex Normal file
View File

@ -0,0 +1,903 @@
defmodule SimpleshopThemeWeb.ShopComponents.Layout do
use Phoenix.Component
import SimpleshopThemeWeb.ShopComponents.Cart
import SimpleshopThemeWeb.ShopComponents.Content
@doc """
Renders the announcement bar.
The bar displays promotional messaging at the top of the page.
It uses CSS custom properties for theming.
## Attributes
* `theme_settings` - Required. The theme settings map.
* `message` - Optional. The announcement message to display.
Defaults to "Free delivery on orders over £40".
## Examples
<.announcement_bar theme_settings={@theme_settings} />
<.announcement_bar theme_settings={@theme_settings} message="20% off this weekend!" />
"""
attr :theme_settings, :map, required: true
attr :message, :string, default: "Sample announcement – e.g. free delivery, sales, or new drops"
def announcement_bar(assigns) do
~H"""
<div
class="announcement-bar"
style="background-color: var(--t-accent-button, hsl(var(--t-accent-h) var(--t-accent-s) 42%)); color: var(--t-text-inverse); text-align: center; padding: 0.5rem 1rem; font-size: var(--t-text-small);"
>
<p style="margin: 0;">{@message}</p>
</div>
"""
end
@doc """
Renders the skip link for keyboard navigation accessibility.
This is a standard accessibility pattern that allows keyboard users
to skip directly to the main content.
"""
def skip_link(assigns) do
~H"""
<a href="#main-content" class="skip-link">
Skip to main content
</a>
"""
end
@doc """
Wraps page content in the standard shop shell: container, header, footer,
cart drawer, search modal, and mobile bottom nav.
Templates pass their unique `<main>` content as the inner block.
The `error_page` flag disables the CartPersist hook and mobile bottom nav.
"""
attr :theme_settings, :map, required: true
attr :logo_image, :any, required: true
attr :header_image, :any, required: true
attr :mode, :atom, required: true
attr :cart_items, :list, required: true
attr :cart_count, :integer, required: true
attr :cart_subtotal, :string, required: true
attr :cart_drawer_open, :boolean, default: false
attr :cart_status, :string, default: nil
attr :active_page, :string, required: true
attr :error_page, :boolean, default: false
slot :inner_block, required: true
def shop_layout(assigns) do
~H"""
<div
id={unless @error_page, do: "shop-container"}
phx-hook={unless @error_page, do: "CartPersist"}
class={["shop-container min-h-screen", !@error_page && "pb-20 md:pb-0"]}
style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);"
>
<.skip_link />
<%= if @theme_settings.announcement_bar do %>
<.announcement_bar theme_settings={@theme_settings} />
<% end %>
<.shop_header
theme_settings={@theme_settings}
logo_image={@logo_image}
header_image={@header_image}
active_page={@active_page}
mode={@mode}
cart_count={@cart_count}
/>
{render_slot(@inner_block)}
<.shop_footer theme_settings={@theme_settings} mode={@mode} />
<.cart_drawer
cart_items={@cart_items}
subtotal={@cart_subtotal}
cart_count={@cart_count}
mode={@mode}
open={@cart_drawer_open}
cart_status={@cart_status}
/>
<.search_modal hint_text={~s(Try a search – e.g. "mountain" or "notebook")} />
<.mobile_bottom_nav :if={!@error_page} active_page={@active_page} mode={@mode} />
</div>
"""
end
@doc """
Renders a mobile bottom navigation bar.
This component provides thumb-friendly navigation for mobile devices,
following modern UX best practices. It's hidden on larger screens where
the standard header navigation is used.
## Attributes
* `active_page` - Required. The current page identifier (e.g., "home", "collection", "about", "contact").
* `mode` - Optional. Either `:live` (default) for real navigation or
`:preview` for theme preview mode with phx-click handlers.
* `cart_count` - Optional. Number of items in cart for badge display. Default: 0.
## Examples
<.mobile_bottom_nav active_page="home" />
<.mobile_bottom_nav active_page="collection" mode={:preview} />
"""
attr :active_page, :string, required: true
attr :mode, :atom, default: :live
attr :cart_count, :integer, default: 0
def mobile_bottom_nav(assigns) do
~H"""
<nav
class="mobile-bottom-nav md:hidden"
style="position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background-color: var(--t-surface-raised); border-top: 1px solid var(--t-border-default); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); padding-bottom: env(safe-area-inset-bottom, 0px);"
aria-label="Main navigation"
>
<ul
class="flex justify-around items-center h-16"
style="margin: 0; padding: 0; list-style: none;"
>
<.mobile_nav_item
icon={:home}
label="Home"
page="home"
href="/"
active_page={@active_page}
mode={@mode}
/>
<.mobile_nav_item
icon={:shop}
label="Shop"
page="collection"
href="/collections/all"
active_page={@active_page}
active_pages={["collection", "pdp"]}
mode={@mode}
/>
<.mobile_nav_item
icon={:about}
label="About"
page="about"
href="/about"
active_page={@active_page}
mode={@mode}
/>
<.mobile_nav_item
icon={:contact}
label="Contact"
page="contact"
href="/contact"
active_page={@active_page}
mode={@mode}
/>
</ul>
</nav>
"""
end
attr :icon, :atom, required: true
attr :label, :string, required: true
attr :page, :string, required: true
attr :href, :string, required: true
attr :active_page, :string, required: true
attr :active_pages, :list, default: nil
attr :mode, :atom, default: :live
defp mobile_nav_item(assigns) do
active_pages = assigns.active_pages || [assigns.page]
is_current = assigns.active_page in active_pages
assigns = assign(assigns, :is_current, is_current)
~H"""
<li class="flex-1">
<%= if @mode == :preview do %>
<a
href="#"
phx-click="change_preview_page"
phx-value-page={@page}
class="flex flex-col items-center justify-center gap-1 py-2 mx-1 rounded-lg min-h-[56px]"
style={"color: #{if @is_current, do: "hsl(var(--t-accent-h) var(--t-accent-s) calc(var(--t-accent-l) - 15%))", else: "var(--t-text-secondary)"}; text-decoration: none; font-weight: #{if @is_current, do: "600", else: "500"}; background-color: #{if @is_current, do: "hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l) / 0.1)", else: "transparent"};"}
aria-current={if @is_current, do: "page", else: nil}
>
<.nav_icon icon={@icon} size={if @is_current, do: "w-6 h-6", else: "w-5 h-5"} />
<span class="text-xs">{@label}</span>
</a>
<% else %>
<a
href={@href}
class="flex flex-col items-center justify-center gap-1 py-2 mx-1 rounded-lg min-h-[56px]"
style={"color: #{if @is_current, do: "hsl(var(--t-accent-h) var(--t-accent-s) calc(var(--t-accent-l) - 15%))", else: "var(--t-text-secondary)"}; text-decoration: none; font-weight: #{if @is_current, do: "600", else: "500"}; background-color: #{if @is_current, do: "hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l) / 0.1)", else: "transparent"};"}
aria-current={if @is_current, do: "page", else: nil}
>
<.nav_icon icon={@icon} size={if @is_current, do: "w-6 h-6", else: "w-5 h-5"} />
<span class="text-xs">{@label}</span>
</a>
<% end %>
</li>
"""
end
defp nav_icon(%{icon: :home} = assigns) do
assigns = assign_new(assigns, :size, fn -> "w-5 h-5" end)
~H"""
<svg
class={@size}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"></path>
<polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg>
"""
end
defp nav_icon(%{icon: :shop} = assigns) do
assigns = assign_new(assigns, :size, fn -> "w-5 h-5" end)
~H"""
<svg
class={@size}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect x="3" y="3" width="7" height="7"></rect>
<rect x="14" y="3" width="7" height="7"></rect>
<rect x="14" y="14" width="7" height="7"></rect>
<rect x="3" y="14" width="7" height="7"></rect>
</svg>
"""
end
defp nav_icon(%{icon: :about} = assigns) do
assigns = assign_new(assigns, :size, fn -> "w-5 h-5" end)
~H"""
<svg
class={@size}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12.01" y2="8"></line>
</svg>
"""
end
defp nav_icon(%{icon: :contact} = assigns) do
assigns = assign_new(assigns, :size, fn -> "w-5 h-5" end)
~H"""
<svg
class={@size}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
<polyline points="22,6 12,13 2,6"></polyline>
</svg>
"""
end
@doc """
Renders the search modal overlay.
This is a modal dialog for searching products. Currently provides
the UI shell; search functionality will be added later.
## Attributes
* `hint_text` - Optional. Hint text shown below the search input.
Defaults to nil (no hint shown).
## Examples
<.search_modal />
<.search_modal hint_text="Try searching for \"mountain\" or \"forest\"" />
"""
attr :hint_text, :string, default: nil
def search_modal(assigns) do
~H"""
<div
id="search-modal"
class="search-modal"
style="position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1001; display: none; align-items: flex-start; justify-content: center; padding-top: 10vh;"
phx-click={Phoenix.LiveView.JS.hide(to: "#search-modal")}
>
<div
class="search-modal-content w-full max-w-xl mx-4"
style="background: var(--t-surface-raised); border-radius: var(--t-radius-card); overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);"
phx-click-away={Phoenix.LiveView.JS.hide(to: "#search-modal")}
>
<div
class="flex items-center gap-3 p-4"
style="border-bottom: 1px solid var(--t-border-default);"
>
<svg
class="w-5 h-5 flex-shrink-0"
style="color: var(--t-text-tertiary);"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<circle cx="11" cy="11" r="8"></circle>
<path d="M21 21l-4.35-4.35"></path>
</svg>
<input
type="text"
id="search-input"
class="flex-1 text-lg bg-transparent border-none outline-none"
style="font-family: var(--t-font-body); color: var(--t-text-primary);"
placeholder="Search products..."
phx-click={Phoenix.LiveView.JS.dispatch("stop-propagation")}
/>
<button
type="button"
class="w-8 h-8 flex items-center justify-center transition-all"
style="color: var(--t-text-tertiary); background: none; border: none; cursor: pointer; border-radius: var(--t-radius-button);"
phx-click={Phoenix.LiveView.JS.hide(to: "#search-modal")}
aria-label="Close search"
>
<svg
class="w-5 h-5"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
<%= if @hint_text do %>
<div class="p-6" style="color: var(--t-text-tertiary);">
<p class="text-sm">{@hint_text}</p>
</div>
<% end %>
</div>
</div>
"""
end
@doc """
Renders the shop footer with newsletter signup and links.
## Attributes
* `theme_settings` - Required. The theme settings map containing site_name.
* `mode` - Optional. Either `:live` (default) for real navigation or
`:preview` for theme preview mode with phx-click handlers.
## Examples
<.shop_footer theme_settings={@theme_settings} />
<.shop_footer theme_settings={@theme_settings} mode={:preview} />
"""
attr :theme_settings, :map, required: true
attr :mode, :atom, default: :live
def shop_footer(assigns) do
assigns = assign(assigns, :current_year, Date.utc_today().year)
~H"""
<footer style="background-color: var(--t-surface-raised); border-top: 1px solid var(--t-border-default);">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
<.newsletter_card variant={:inline} />
<!-- Links -->
<div class="grid grid-cols-2 gap-8">
<div>
<h4
class="font-semibold mb-4 text-sm"
style="font-family: var(--t-font-heading); color: var(--t-text-primary);"
>
Shop
</h4>
<ul class="flex flex-col gap-2 text-sm">
<%= if @mode == :preview do %>
<li>
<a
href="#"
phx-click="change_preview_page"
phx-value-page="collection"
class="transition-colors hover:opacity-80"
style="color: var(--t-text-secondary); cursor: pointer;"
>
All products
</a>
</li>
<li>
<a
href="#"
phx-click="change_preview_page"
phx-value-page="collection"
class="transition-colors hover:opacity-80"
style="color: var(--t-text-secondary); cursor: pointer;"
>
New arrivals
</a>
</li>
<li>
<a
href="#"
phx-click="change_preview_page"
phx-value-page="collection"
class="transition-colors hover:opacity-80"
style="color: var(--t-text-secondary); cursor: pointer;"
>
Best sellers
</a>
</li>
<% else %>
<li>
<a
href="/collections/all"
class="transition-colors hover:opacity-80"
style="color: var(--t-text-secondary);"
>
All products
</a>
</li>
<li>
<a
href="/collections/all"
class="transition-colors hover:opacity-80"
style="color: var(--t-text-secondary);"
>
New arrivals
</a>
</li>
<li>
<a
href="/collections/all"
class="transition-colors hover:opacity-80"
style="color: var(--t-text-secondary);"
>
Best sellers
</a>
</li>
<% end %>
</ul>
</div>
<div>
<h4
class="font-semibold mb-4 text-sm"
style="font-family: var(--t-font-heading); color: var(--t-text-primary);"
>
Help
</h4>
<ul class="flex flex-col gap-2 text-sm">
<%= if @mode == :preview do %>
<li>
<a
href="#"
phx-click="change_preview_page"
phx-value-page="delivery"
class="transition-colors hover:opacity-80"
style="color: var(--t-text-secondary); cursor: pointer;"
>
Delivery & returns
</a>
</li>
<li>
<a
href="#"
phx-click="change_preview_page"
phx-value-page="privacy"
class="transition-colors hover:opacity-80"
style="color: var(--t-text-secondary); cursor: pointer;"
>
Privacy policy
</a>
</li>
<li>
<a
href="#"
phx-click="change_preview_page"
phx-value-page="terms"
class="transition-colors hover:opacity-80"
style="color: var(--t-text-secondary); cursor: pointer;"
>
Terms of service
</a>
</li>
<li>
<a
href="#"
phx-click="change_preview_page"
phx-value-page="contact"
class="transition-colors hover:opacity-80"
style="color: var(--t-text-secondary); cursor: pointer;"
>
Contact
</a>
</li>
<% else %>
<li>
<a
href="/delivery"
class="transition-colors hover:opacity-80"
style="color: var(--t-text-secondary);"
>
Delivery & returns
</a>
</li>
<li>
<a
href="/privacy"
class="transition-colors hover:opacity-80"
style="color: var(--t-text-secondary);"
>
Privacy policy
</a>
</li>
<li>
<a
href="/terms"
class="transition-colors hover:opacity-80"
style="color: var(--t-text-secondary);"
>
Terms of service
</a>
</li>
<li>
<a
href="/contact"
class="transition-colors hover:opacity-80"
style="color: var(--t-text-secondary);"
>
Contact
</a>
</li>
<% end %>
</ul>
</div>
</div>
</div>
<!-- Bottom Bar -->
<div
class="mt-12 pt-8 flex flex-col md:flex-row justify-between items-center gap-4"
style="border-top: 1px solid var(--t-border-subtle);"
>
<p class="text-xs" style="color: var(--t-text-tertiary);">
© {@current_year} {@theme_settings.site_name}
</p>
<div class="flex gap-2">
<a
href="https://instagram.com"
target="_blank"
rel="noopener noreferrer"
class="social-link w-9 h-9 flex items-center justify-center transition-all"
style="color: var(--t-text-secondary); border-radius: var(--t-radius-button);"
aria-label="Instagram"
>
<svg
class="w-5 h-5"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
</svg>
</a>
<a
href="https://pinterest.com"
target="_blank"
rel="noopener noreferrer"
class="social-link w-9 h-9 flex items-center justify-center transition-all"
style="color: var(--t-text-secondary); border-radius: var(--t-radius-button);"
aria-label="Pinterest"
>
<svg
class="w-5 h-5"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M8 12c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4"></path>
<line x1="12" y1="16" x2="9" y2="21"></line>
</svg>
</a>
</div>
</div>
</div>
</footer>
"""
end
@doc """
Renders the shop header with logo, navigation, and actions.
## Attributes
* `theme_settings` - Required. The theme settings map.
* `logo_image` - Optional. The logo image struct (with id, is_svg fields).
* `header_image` - Optional. The header background image struct.
* `active_page` - Optional. Current page for nav highlighting.
* `mode` - Optional. Either `:live` (default) or `:preview`.
* `cart_count` - Optional. Number of items in cart. Defaults to 0.
## Examples
<.shop_header theme_settings={@theme_settings} />
<.shop_header theme_settings={@theme_settings} mode={:preview} cart_count={2} />
"""
attr :theme_settings, :map, required: true
attr :logo_image, :map, default: nil
attr :header_image, :map, default: nil
attr :active_page, :string, default: nil
attr :mode, :atom, default: :live
attr :cart_count, :integer, default: 0
def shop_header(assigns) do
~H"""
<header
class="shop-header px-2 py-2 sm:px-4 sm:py-3 md:px-8 md:py-4"
style="background-color: var(--t-surface-raised); border-bottom: 1px solid var(--t-border-default); display: flex; align-items: center;"
>
<%= if @theme_settings.header_background_enabled && @header_image do %>
<div style={header_background_style(@theme_settings, @header_image)} />
<% end %>
<div
class="shop-logo"
style="display: flex; align-items: center; position: relative; z-index: 1;"
>
<.logo_content
theme_settings={@theme_settings}
logo_image={@logo_image}
active_page={@active_page}
mode={@mode}
/>
</div>
<nav class="shop-nav hidden md:flex md:gap-6" style="position: relative; z-index: 1;">
<%= if @mode == :preview do %>
<.nav_item label="Home" page="home" active_page={@active_page} mode={:preview} />
<.nav_item
label="Shop"
page="collection"
active_page={@active_page}
mode={:preview}
active_pages={["collection", "pdp"]}
/>
<.nav_item label="About" page="about" active_page={@active_page} mode={:preview} />
<.nav_item label="Contact" page="contact" active_page={@active_page} mode={:preview} />
<% else %>
<.nav_item label="Home" href="/" active_page={@active_page} page="home" />
<.nav_item
label="Shop"
href="/collections/all"
active_page={@active_page}
page="collection"
active_pages={["collection", "pdp"]}
/>
<.nav_item label="About" href="/about" active_page={@active_page} page="about" />
<.nav_item label="Contact" href="/contact" active_page={@active_page} page="contact" />
<% end %>
</nav>
<div class="shop-actions flex items-center" style="position: relative; z-index: 1;">
<button
type="button"
class="header-icon-btn w-9 h-9 flex items-center justify-center transition-all"
style="color: var(--t-text-secondary); background: none; border: none; cursor: pointer; border-radius: var(--t-radius-button);"
phx-click={
Phoenix.LiveView.JS.show(to: "#search-modal", display: "flex")
|> Phoenix.LiveView.JS.focus(to: "#search-input")
}
aria-label="Search"
>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="8"></circle>
<path d="M21 21l-4.35-4.35"></path>
</svg>
</button>
<button
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={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">
<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>
<%= if @cart_count > 0 do %>
<span
class="cart-count"
style="position: absolute; top: -4px; right: -4px; background: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); font-size: var(--t-text-caption); font-weight: 600; min-width: 18px; height: 18px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; padding: 0 4px;"
>
{@cart_count}
</span>
<% end %>
<span class="sr-only">Cart ({@cart_count})</span>
</button>
</div>
</header>
"""
end
defp logo_url(logo_image, %{logo_recolor: true, logo_color: color}) when logo_image.is_svg do
clean_color = String.trim_leading(color, "#")
"/images/#{logo_image.id}/recolored/#{clean_color}"
end
defp logo_url(logo_image, _), do: "/images/#{logo_image.id}"
# Logo content that links to home, except when already on home page.
# This follows accessibility best practices - current page should not be a link.
attr :theme_settings, :map, required: true
attr :logo_image, :map, default: nil
attr :active_page, :string, default: nil
attr :mode, :atom, default: :live
defp logo_content(assigns) do
is_home = assigns.active_page == "home"
assigns = assign(assigns, :is_home, is_home)
~H"""
<%= if @is_home do %>
<.logo_inner theme_settings={@theme_settings} logo_image={@logo_image} />
<% else %>
<%= if @mode == :preview do %>
<a
href="#"
phx-click="change_preview_page"
phx-value-page="home"
style="display: flex; align-items: center; text-decoration: none;"
>
<.logo_inner theme_settings={@theme_settings} logo_image={@logo_image} />
</a>
<% else %>
<a href="/" style="display: flex; align-items: center; text-decoration: none;">
<.logo_inner theme_settings={@theme_settings} logo_image={@logo_image} />
</a>
<% end %>
<% end %>
"""
end
attr :theme_settings, :map, required: true
attr :logo_image, :map, default: nil
defp logo_inner(assigns) do
~H"""
<%= case @theme_settings.logo_mode do %>
<% "text-only" -> %>
<span
class="shop-logo-text"
style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);"
>
{@theme_settings.site_name}
</span>
<% "logo-text" -> %>
<%= if @logo_image do %>
<img
src={logo_url(@logo_image, @theme_settings)}
alt={@theme_settings.site_name}
style={"height: #{@theme_settings.logo_size}px; width: auto; margin-right: 0.5rem;"}
/>
<% end %>
<span
class="shop-logo-text"
style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);"
>
{@theme_settings.site_name}
</span>
<% "logo-only" -> %>
<%= if @logo_image do %>
<img
src={logo_url(@logo_image, @theme_settings)}
alt={@theme_settings.site_name}
style={"height: #{@theme_settings.logo_size}px; width: auto;"}
/>
<% else %>
<span
class="shop-logo-text"
style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);"
>
{@theme_settings.site_name}
</span>
<% end %>
<% _ -> %>
<span
class="shop-logo-text"
style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);"
>
{@theme_settings.site_name}
</span>
<% end %>
"""
end
defp header_background_style(settings, header_image) do
"position: absolute; top: 0; left: 0; right: 0; bottom: 0; " <>
"background-image: url('/images/#{header_image.id}'); " <>
"background-size: #{settings.header_zoom}%; " <>
"background-position: #{settings.header_position_x}% #{settings.header_position_y}%; " <>
"background-repeat: no-repeat; z-index: 0;"
end
# Navigation item that renders as a span (not a link) when on the current page.
# This follows accessibility best practices - current page should not be a link.
attr :label, :string, required: true
attr :page, :string, required: true
attr :active_page, :string, required: true
attr :href, :string, default: nil
attr :mode, :atom, default: :live
attr :active_pages, :list, default: nil
defp nav_item(assigns) do
# Allow matching multiple pages (e.g., "Shop" is active for both collection and pdp)
active_pages = assigns.active_pages || [assigns.page]
is_current = assigns.active_page in active_pages
assigns = assign(assigns, :is_current, is_current)
~H"""
<%= if @is_current do %>
<span aria-current="page" style="color: var(--t-text-secondary); text-decoration: none;">
{@label}
</span>
<% else %>
<%= if @mode == :preview do %>
<a
href="#"
phx-click="change_preview_page"
phx-value-page={@page}
style="color: var(--t-text-secondary); text-decoration: none; cursor: pointer;"
>
{@label}
</a>
<% else %>
<a href={@href} style="color: var(--t-text-secondary); text-decoration: none;">
{@label}
</a>
<% end %>
<% end %>
"""
end
defp open_cart_drawer_js do
Phoenix.LiveView.JS.push("open_cart_drawer")
end
end

1619
lib/simpleshop_theme_web/components/shop_components/product.ex Normal file
View File

File diff suppressed because it is too large Load Diff

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

@ -78,7 +78,7 @@ defmodule SimpleshopThemeWeb.ShopLive.Collection do
@impl true
def render(assigns) do
~H"""
<SimpleshopThemeWeb.ShopComponents.shop_layout
<.shop_layout
theme_settings={@theme_settings}
logo_image={@logo_image}
header_image={@header_image}
@ -91,7 +91,7 @@ defmodule SimpleshopThemeWeb.ShopLive.Collection do
active_page="collection"
>
<main id="main-content">
<SimpleshopThemeWeb.ShopComponents.collection_header
<.collection_header
title={@collection_title}
product_count={length(@products)}
/>
@ -104,9 +104,9 @@ defmodule SimpleshopThemeWeb.ShopLive.Collection do
current_sort={@current_sort}
/>
<SimpleshopThemeWeb.ShopComponents.product_grid theme_settings={@theme_settings}>
<.product_grid theme_settings={@theme_settings}>
<%= for product <- @products do %>
<SimpleshopThemeWeb.ShopComponents.product_card
<.product_card
product={product}
theme_settings={@theme_settings}
mode={@mode}
@ -114,7 +114,7 @@ defmodule SimpleshopThemeWeb.ShopLive.Collection do
show_category={@current_category == nil}
/>
<% end %>
</SimpleshopThemeWeb.ShopComponents.product_grid>
</.product_grid>
<%= if @products == [] do %>
<div class="text-center py-16" style="color: var(--t-text-secondary);">
@ -130,7 +130,7 @@ defmodule SimpleshopThemeWeb.ShopLive.Collection do
<% end %>
</div>
</main>
</SimpleshopThemeWeb.ShopComponents.shop_layout>
</.shop_layout>
"""
end