defmodule SimpleshopThemeWeb.ShopComponents do @moduledoc """ Provides shop/storefront UI components. These components are shared between the theme preview system and the public storefront pages. They render using CSS custom properties defined by the theme settings. """ use Phoenix.Component @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: "Free delivery on orders over £40" def announcement_bar(assigns) do ~H"""

{@message}

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

<%= if @theme_settings.header_background_enabled && @header_image do %>

<% end %>

<%= case @theme_settings.logo_mode do %> <% "text-only" -> %> <%= @theme_settings.site_name %> <% "logo-text" -> %> <%= if @logo_image do %> ${@theme_settings.site_name}$ <% end %> <%= @theme_settings.site_name %> <% "logo-only" -> %> <%= if @logo_image do %> ${@theme_settings.site_name}$ <% else %> <%= @theme_settings.site_name %> <% end %> <% _ -> %> <%= @theme_settings.site_name %> <% end %>

""" 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}" 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 @doc """ Renders the cart drawer (floating sidebar). The drawer slides in from the right when opened. It displays cart items and checkout options. ## Attributes * `cart_items` - List of cart items to display. Each item should have `image`, `name`, `variant`, and `price` keys. Default: [] * `subtotal` - The subtotal to display. Default: nil (shows "£0.00") * `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 :mode, :atom, default: :live def cart_drawer(assigns) do assigns = assign_new(assigns, :display_subtotal, fn -> assigns.subtotal || "£0.00" end) ~H"""

<%= for item <- @cart_items do %>

<%= item.name %>

<%= item.variant %>

<%= item.price %>

<% end %>

Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer-overlay")} >

""" end @doc """ Renders a product card with configurable variants. ## Attributes * `product` - Required. The product map with `name`, `image_url`, `price`, etc. * `theme_settings` - Required. The theme settings map. * `mode` - Either `:live` (default) or `:preview`. * `variant` - The visual variant: - `:default` - Collection page style with border, category, full details - `:featured` - Home page style with hover lift, no border - `:compact` - PDP related products with aspect-square, minimal info - `:minimal` - Error 404 style, smallest, not clickable * `show_category` - Show category label. Defaults based on variant. * `show_badges` - Show product badges. Defaults based on variant. * `show_delivery_text` - Show "Free delivery" text. Defaults based on variant. * `clickable` - Whether the card navigates. Defaults based on variant. ## Examples <.product_card product={product} theme_settings={@theme_settings} /> <.product_card product={product} theme_settings={@theme_settings} variant={:featured} mode={:preview} /> """ attr :product, :map, required: true attr :theme_settings, :map, required: true attr :mode, :atom, default: :live attr :variant, :atom, default: :default attr :show_category, :boolean, default: nil attr :show_badges, :boolean, default: nil attr :show_delivery_text, :boolean, default: nil attr :clickable, :boolean, default: nil def product_card(assigns) do # Apply variant defaults for nil values defaults = variant_defaults(assigns.variant) assigns = assigns |> assign_new(:show_category_resolved, fn -> if assigns.show_category == nil, do: defaults.show_category, else: assigns.show_category end) |> assign_new(:show_badges_resolved, fn -> if assigns.show_badges == nil, do: defaults.show_badges, else: assigns.show_badges end) |> assign_new(:show_delivery_text_resolved, fn -> if assigns.show_delivery_text == nil, do: defaults.show_delivery_text, else: assigns.show_delivery_text end) |> assign_new(:clickable_resolved, fn -> if assigns.clickable == nil, do: defaults.clickable, else: assigns.clickable end) ~H""" <%= if @clickable_resolved do %> <%= if @mode == :preview do %> <.product_card_inner product={@product} theme_settings={@theme_settings} variant={@variant} show_category={@show_category_resolved} show_badges={@show_badges_resolved} show_delivery_text={@show_delivery_text_resolved} /> <% else %> <.product_card_inner product={@product} theme_settings={@theme_settings} variant={@variant} show_category={@show_category_resolved} show_badges={@show_badges_resolved} show_delivery_text={@show_delivery_text_resolved} /> <% end %> <% else %>

<.product_card_inner product={@product} theme_settings={@theme_settings} variant={@variant} show_category={@show_category_resolved} show_badges={@show_badges_resolved} show_delivery_text={@show_delivery_text_resolved} />

<% end %> """ end attr :product, :map, required: true attr :theme_settings, :map, required: true attr :variant, :atom, required: true attr :show_category, :boolean, required: true attr :show_badges, :boolean, required: true attr :show_delivery_text, :boolean, required: true defp product_card_inner(assigns) do ~H"""

<%= if @show_badges do %> <.product_badge product={@product} /> <% end %> {@product.name}

<%= if @theme_settings.hover_image && @product[:hover_image_url] do %> {@product.name}

<% end %>

<%= if @show_category && @product[:category] do %>

<%= @product.category %>

<% end %>

<%= @product.name %>

<%= if @theme_settings.show_prices do %> <.product_price product={@product} variant={@variant} /> <% end %> <%= if @show_delivery_text do %>

Free delivery over £40

<% end %>

""" end attr :product, :map, required: true defp product_badge(assigns) do ~H""" <%= cond do %> <% Map.get(@product, :in_stock, true) == false -> %> Sold out <% @product[:is_new] -> %> New <% @product[:on_sale] -> %> Sale <% true -> %> <% end %> """ end attr :product, :map, required: true attr :variant, :atom, required: true defp product_price(assigns) do ~H""" <%= case @variant do %> <% :default -> %>

<%= if @product.on_sale do %> £<%= @product.price / 100 %> £<%= @product.compare_at_price / 100 %> <% else %> £<%= @product.price / 100 %> <% end %>

<% :featured -> %>

<%= if @product.on_sale do %> £<%= @product.compare_at_price / 100 %> <% end %> £<%= @product.price / 100 %>

<% :compact -> %>

£<%= @product.price / 100 %>

<% :minimal -> %>

£<%= @product.price / 100 %>

<% end %> """ end defp variant_defaults(:default), do: %{show_category: true, show_badges: true, show_delivery_text: true, clickable: true} defp variant_defaults(:featured), do: %{show_category: false, show_badges: true, show_delivery_text: true, clickable: true} defp variant_defaults(:compact), do: %{show_category: false, show_badges: false, show_delivery_text: false, clickable: true} defp variant_defaults(:minimal), do: %{show_category: false, show_badges: false, show_delivery_text: false, clickable: false} defp card_classes(:default), do: "product-card group overflow-hidden transition-all" defp card_classes(:featured), do: "product-card group overflow-hidden transition-all hover:-translate-y-1" defp card_classes(:compact), do: "product-card group overflow-hidden cursor-pointer" defp card_classes(:minimal), do: "product-card group overflow-hidden" defp card_style(:default), do: "background-color: var(--t-surface-raised); border: 1px solid var(--t-border-default); border-radius: var(--t-radius-card); cursor: pointer;" defp card_style(:featured), do: "background-color: var(--t-surface-raised); border-radius: var(--t-radius-card); cursor: pointer;" defp card_style(:compact), do: "background-color: var(--t-surface-raised); border: 1px solid var(--t-border-default); border-radius: var(--t-radius-card);" defp card_style(:minimal), do: "background-color: var(--t-surface-raised); border: 1px solid var(--t-border-subtle); border-radius: var(--t-radius-card);" defp image_container_classes(:compact), do: "product-image-container aspect-square bg-gray-200 overflow-hidden relative" defp image_container_classes(:minimal), do: "product-image-container aspect-square bg-gray-200 overflow-hidden relative" defp image_container_classes(_), do: "product-image-container bg-gray-200 overflow-hidden relative" defp content_padding_class(:compact), do: "p-3" defp content_padding_class(:minimal), do: "p-2" defp content_padding_class(_), do: "" defp title_classes(:default), do: "font-semibold mb-2" defp title_classes(:featured), do: "text-sm font-medium mb-1" defp title_classes(:compact), do: "font-semibold text-sm mb-1" defp title_classes(:minimal), do: "text-xs font-semibold truncate" defp title_style(:default), do: "font-family: var(--t-font-heading); color: var(--t-text-primary);" defp title_style(:featured), do: "color: var(--t-text-primary);" defp title_style(:compact), do: "font-family: var(--t-font-heading); color: var(--t-text-primary);" defp title_style(:minimal), do: "color: var(--t-text-primary);" end

Your basket

<%= item.name %>

<%= @product.name %>