From 0c15929c191c83696cf4bbfa0d00fae0449e8883 Mon Sep 17 00:00:00 2001 From: Jamey Greenwood Date: Sat, 17 Jan 2026 15:14:25 +0000 Subject: [PATCH] refactor: extract remaining page sections to ShopComponents Add reusable components for all page sections: - category_nav: Category circles for homepage navigation - featured_products_section: Product grid with title and view-all CTA - image_text_section: Two-column image + text layout - collection_header: Page header with title and product count - filter_bar: Category pills and sort dropdown - content_body: Long-form content wrapper for about page - contact_form: Contact form card - order_tracking_card: Order tracking input card - info_card: Bullet-point info card - contact_info_card: Email contact card with icon - social_links: Social media icon links - cart_item: Cart item row with quantity controls - order_summary: Order totals and checkout card - breadcrumb: Navigation breadcrumb trail - related_products_section: Related products grid All preview pages now compose entirely of reusable components, making them easier to maintain and enabling future section-based theme customization. Co-Authored-By: Claude Opus 4.5 --- .../components/shop_components.ex | 842 ++++++++++++++++++ .../theme_live/preview_pages/about.html.heex | 61 +- .../theme_live/preview_pages/cart.html.heex | 93 +- .../preview_pages/collection.html.heex | 37 +- .../preview_pages/contact.html.heex | 159 +--- .../theme_live/preview_pages/home.html.heex | 80 +- .../theme_live/preview_pages/pdp.html.heex | 33 +- 7 files changed, 909 insertions(+), 396 deletions(-) diff --git a/lib/simpleshop_theme_web/components/shop_components.ex b/lib/simpleshop_theme_web/components/shop_components.ex index d2f477e..cc3996a 100644 --- a/lib/simpleshop_theme_web/components/shop_components.ex +++ b/lib/simpleshop_theme_web/components/shop_components.ex @@ -1043,4 +1043,846 @@ defmodule SimpleshopThemeWeb.ShopComponents do defp hero_cta_style(:secondary) do "border: 2px solid var(--t-border-default); color: var(--t-text-primary); border-radius: var(--t-radius-button); background: transparent; cursor: pointer;" end + + @doc """ + Renders a row of category circles for navigation. + + ## Attributes + + * `categories` - Required. List of category maps with `name` and `image_url`. + * `limit` - Optional. Maximum number of categories to show. Defaults to 3. + * `mode` - Either `:live` (default) or `:preview`. + + ## Examples + + <.category_nav categories={@categories} mode={:preview} /> + <.category_nav categories={@categories} limit={4} /> + """ + attr :categories, :list, required: true + attr :limit, :integer, default: 3 + attr :mode, :atom, default: :live + + def category_nav(assigns) do + ~H""" +
+ +
+ """ + end + + @doc """ + Renders a featured products section with title, product grid, and view-all button. + + ## Attributes + + * `title` - Required. Section heading text. + * `products` - Required. List of products to display. + * `theme_settings` - Required. The theme settings map. + * `limit` - Optional. Maximum products to show. Defaults to 4. + * `mode` - Either `:live` (default) or `:preview`. + * `cta_text` - Optional. Text for the "view all" button. Defaults to "View all products". + * `cta_page` - Optional. Page to navigate to (preview mode). Defaults to "collection". + * `cta_href` - Optional. URL for live mode. Defaults to "/products". + + ## Examples + + <.featured_products_section + title="Featured products" + products={@products} + theme_settings={@theme_settings} + mode={:preview} + /> + """ + attr :title, :string, required: true + attr :products, :list, required: true + attr :theme_settings, :map, required: true + attr :limit, :integer, default: 4 + attr :mode, :atom, default: :live + attr :cta_text, :string, default: "View all products" + attr :cta_page, :string, default: "collection" + attr :cta_href, :string, default: "/products" + + def featured_products_section(assigns) do + ~H""" +
+

+ <%= @title %> +

+ + <.product_grid theme_settings={@theme_settings}> + <%= for product <- Enum.take(@products, @limit) do %> + <.product_card + product={product} + theme_settings={@theme_settings} + mode={@mode} + variant={:featured} + /> + <% end %> + + +
+ <%= if @mode == :preview do %> + + <% else %> + + <%= @cta_text %> + + <% end %> +
+
+ """ + end + + @doc """ + Renders a two-column image + text section. + + ## Attributes + + * `title` - Required. Section heading text. + * `description` - Required. Body text content. + * `image_url` - Required. URL for the image. + * `link_text` - Optional. Text for the link. If nil, no link is shown. + * `link_page` - Optional. Page to navigate to (preview mode). + * `link_href` - Optional. URL for live mode. + * `image_position` - Either `:left` (default) or `:right`. + * `mode` - Either `:live` (default) or `:preview`. + + ## Examples + + <.image_text_section + title="Made with passion, printed with care" + description="Every design starts with an idea..." + image_url="/mockups/example.jpg" + link_text="Learn more about the studio →" + link_page="about" + mode={:preview} + /> + """ + attr :title, :string, required: true + attr :description, :string, required: true + attr :image_url, :string, required: true + attr :link_text, :string, default: nil + attr :link_page, :string, default: nil + attr :link_href, :string, default: nil + attr :image_position, :atom, default: :left + attr :mode, :atom, default: :live + + def image_text_section(assigns) do + ~H""" +
+ <%= if @image_position == :left do %> + <.image_text_image image_url={@image_url} /> + <.image_text_content title={@title} description={@description} link_text={@link_text} link_page={@link_page} link_href={@link_href} mode={@mode} /> + <% else %> + <.image_text_content title={@title} description={@description} link_text={@link_text} link_page={@link_page} link_href={@link_href} mode={@mode} /> + <.image_text_image image_url={@image_url} /> + <% end %> +
+ """ + end + + attr :image_url, :string, required: true + + defp image_text_image(assigns) do + ~H""" +
+ """ + end + + attr :title, :string, required: true + attr :description, :string, required: true + attr :link_text, :string, default: nil + attr :link_page, :string, default: nil + attr :link_href, :string, default: nil + attr :mode, :atom, required: true + + defp image_text_content(assigns) do + ~H""" +
+

+ <%= @title %> +

+

+ <%= @description %> +

+ <%= if @link_text do %> + <%= if @mode == :preview do %> + + <%= @link_text %> + + <% else %> + + <%= @link_text %> + + <% end %> + <% end %> +
+ """ + end + + @doc """ + Renders a page header with title and optional product count. + + ## Attributes + + * `title` - Required. The page title. + * `subtitle` - Optional. Text below the title. + * `product_count` - Optional. Number to display as "X products". + + ## Examples + + <.collection_header title="All Products" product_count={24} /> + """ + attr :title, :string, required: true + attr :subtitle, :string, default: nil + attr :product_count, :integer, default: nil + + def collection_header(assigns) do + ~H""" +
+
+

+ <%= @title %> +

+ <%= if @subtitle do %> +

<%= @subtitle %>

+ <% end %> + <%= if @product_count do %> +

<%= @product_count %> products

+ <% end %> +
+
+ """ + end + + @doc """ + Renders a filter bar with category pills and sort dropdown. + + ## Attributes + + * `categories` - Required. List of category maps with `name` field. + * `active_category` - Optional. Currently selected category name. Defaults to "All". + * `sort_options` - Optional. List of sort option strings. + + ## Examples + + <.filter_bar categories={@categories} /> + <.filter_bar categories={@categories} active_category="Art Prints" /> + """ + attr :categories, :list, required: true + attr :active_category, :string, default: "All" + attr :sort_options, :list, default: ["Sort by: Featured", "Price: Low to High", "Price: High to Low", "Newest", "Best Selling"] + + def filter_bar(assigns) do + ~H""" +
+ +
+ + <%= for category <- @categories do %> + + <% end %> +
+ + + +
+ """ + end + + @doc """ + Renders a content body container for long-form content pages (about, etc.). + + ## Attributes + + * `image_url` - Optional. Header image URL. + + ## Slots + + * `inner_block` - Required. The content to render. + + ## Examples + + <.content_body image_url="/images/about.jpg"> +

Content here...

+ + """ + attr :image_url, :string, default: nil + + slot :inner_block, required: true + + def content_body(assigns) do + ~H""" +
+ <%= if @image_url do %> +
+ <% end %> + +
+ <%= render_slot(@inner_block) %> +
+
+ """ + end + + @doc """ + Renders a contact form card. + + ## Attributes + + * `title` - Optional. Form heading. Defaults to "Send us a message". + + ## Examples + + <.contact_form /> + <.contact_form title="Get in touch" /> + """ + attr :title, :string, default: "Send us a message" + + def contact_form(assigns) do + ~H""" +
+

+ <%= @title %> +

+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
+ """ + end + + @doc """ + Renders the order tracking card. + + ## Examples + + <.order_tracking_card /> + """ + def order_tracking_card(assigns) do + ~H""" +
+

Track your order

+

+ Enter your email and we'll send you a link to check your order status. +

+
+ + +
+
+ """ + end + + @doc """ + Renders the info card with bullet points (e.g., "Handy to know" section). + + ## Attributes + + * `title` - Required. Card heading. + * `items` - Required. List of maps with `label` and `value` keys. + + ## Examples + + <.info_card title="Handy to know" items={[ + %{label: "Printing", value: "2-5 business days"}, + %{label: "Delivery", value: "3-7 business days after printing"} + ]} /> + """ + attr :title, :string, required: true + attr :items, :list, required: true + + def info_card(assigns) do + ~H""" +
+

<%= @title %>

+
    + <%= for item <- @items do %> +
  • + • + <%= item.label %>: <%= item.value %> +
    • + <% end %> +
+
+ """ + end + + @doc """ + Renders the contact info card with email link. + + ## Attributes + + * `title` - Optional. Card heading. Defaults to "Get in touch". + * `email` - Required. Email address. + * `response_text` - Optional. Response time text. Defaults to "We typically respond within 24 hours". + + ## Examples + + <.contact_info_card email="hello@example.com" /> + """ + attr :title, :string, default: "Get in touch" + attr :email, :string, required: true + attr :response_text, :string, default: "We typically respond within 24 hours" + + def contact_info_card(assigns) do + ~H""" +
+

<%= @title %>

+ + + + + <%= @email %> + +

+ <%= @response_text %> +

+
+ """ + end + + @doc """ + Renders social media icon links. + + ## Attributes + + * `links` - Optional. List of maps with `platform`, `url`, and `label` keys. + Supported platforms: :instagram, :pinterest + + ## Examples + + <.social_links /> + <.social_links links={[%{platform: :instagram, url: "https://instagram.com/example", label: "Instagram"}]} /> + """ + attr :links, :list, default: [ + %{platform: :instagram, url: "#", label: "Instagram"}, + %{platform: :pinterest, url: "#", label: "Pinterest"} + ] + + def social_links(assigns) do + ~H""" +
+ <%= for link <- @links do %> + + <% end %> +
+ """ + end + + attr :platform, :atom, required: true + + defp social_icon(%{platform: :instagram} = assigns) do + ~H""" + + + + + + """ + end + + defp social_icon(%{platform: :pinterest} = assigns) do + ~H""" + + + + + + """ + end + + defp social_icon(assigns) do + ~H""" + + + + """ + 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 + attr :currency, :string, default: "£" + + def cart_item(assigns) do + ~H""" +
+
+ {@item.product.name} +
+ +
+

+ <%= @item.product.name %> +

+

+ <%= @item.variant %> +

+ +
+
+ + + <%= @item.quantity %> + + +
+ + +
+
+ +
+

+ <%= @currency %><%= @item.product.price / 100 * @item.quantity %> +

+
+
+ """ + 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 :delivery, :integer, default: 800 + attr :vat, :integer, default: 720 + attr :currency, :string, default: "£" + attr :mode, :atom, default: :live + + def order_summary(assigns) do + total = assigns.subtotal + assigns.delivery + assigns.vat + + assigns = assign(assigns, :total, total) + + ~H""" +
+

+ Order Summary +

+ +
+
+ Subtotal + + <%= @currency %><%= Float.round(@subtotal / 100, 2) %> + +
+
+ Delivery + <%= @currency %><%= Float.round(@delivery / 100, 2) %> +
+
+ VAT (20%) + <%= @currency %><%= Float.round(@vat / 100, 2) %> +
+
+
+ Total + + <%= @currency %><%= Float.round(@total / 100, 2) %> + +
+
+
+ + + + <%= if @mode == :preview do %> + + <% else %> + + Continue Shopping + + <% end %> +
+ """ + end + + @doc """ + Renders a breadcrumb navigation. + + ## Attributes + + * `items` - Required. List of breadcrumb items. Each item is a map with: + - `label` - Required. Display text + - `page` - Optional. Page name for preview mode navigation + - `href` - Optional. URL for live mode navigation + - `current` - Optional. Boolean, if true this is the current page (not a link) + * `mode` - Either `:live` (default) or `:preview`. + + ## Examples + + <.breadcrumb items={[ + %{label: "Home", page: "home", href: "/"}, + %{label: "Art Prints", page: "collection", href: "/products?category=art-prints"}, + %{label: "Mountain Sunrise", current: true} + ]} mode={:preview} /> + """ + attr :items, :list, required: true + attr :mode, :atom, default: :live + + def breadcrumb(assigns) do + ~H""" + + """ + end + + @doc """ + Renders a related products section with title and product grid. + + ## Attributes + + * `title` - Optional. Section heading. Defaults to "You might also like". + * `products` - Required. List of products to display. + * `theme_settings` - Required. The theme settings map. + * `limit` - Optional. Maximum products to show. Defaults to 4. + * `mode` - Either `:live` (default) or `:preview`. + + ## Examples + + <.related_products_section + products={@related_products} + theme_settings={@theme_settings} + mode={:preview} + /> + """ + attr :title, :string, default: "You might also like" + attr :products, :list, required: true + attr :theme_settings, :map, required: true + attr :limit, :integer, default: 4 + attr :mode, :atom, default: :live + + def related_products_section(assigns) do + ~H""" +
+

+ <%= @title %> +

+ + <.product_grid columns={:fixed_4} gap="gap-6"> + <%= for product <- Enum.take(@products, @limit) do %> + <.product_card + product={product} + theme_settings={@theme_settings} + mode={@mode} + variant={:compact} + /> + <% end %> + +
+ """ + end end diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/about.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/about.html.heex index 382a385..fc9859f 100644 --- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/about.html.heex +++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/about.html.heex @@ -20,46 +20,37 @@ /> -
- -
+ <.content_body image_url="/mockups/night-sky-blanket-3.jpg"> +

+ I'm Emma, a nature photographer based in the UK. What started as weekend walks with my camera has grown into something I never expected – a little shop where I can share my favourite captures with others. +

- -
-

- I'm Emma, a nature photographer based in the UK. What started as weekend walks with my camera has grown into something I never expected – a little shop where I can share my favourite captures with others. -

+

+ Every design in this shop comes from my own photography. Whether it's early morning mist over the hills, autumn leaves in the local woods, or the quiet beauty of wildflower meadows, I'm drawn to the peaceful moments that nature offers. +

-

- Every design in this shop comes from my own photography. Whether it's early morning mist over the hills, autumn leaves in the local woods, or the quiet beauty of wildflower meadows, I'm drawn to the peaceful moments that nature offers. -

+

+ I work with quality print partners to bring these images to life on products you can actually use and enjoy – from art prints for your walls to mugs for your morning tea. +

-

- I work with quality print partners to bring these images to life on products you can actually use and enjoy – from art prints for your walls to mugs for your morning tea. -

+

+ Quality you can trust +

+

+ I've carefully chosen print partners who share my commitment to quality. Every product is made to order using premium materials and printing techniques that ensure vibrant colours and lasting quality. +

-

- Quality you can trust -

-

- I've carefully chosen print partners who share my commitment to quality. Every product is made to order using premium materials and printing techniques that ensure vibrant colours and lasting quality. -

+

+ Printed sustainably +

+

+ Because each item is printed on demand, there's no waste from unsold stock. My print partners use eco-friendly inks where possible, and products are shipped directly to you to minimise unnecessary handling. +

-

- Printed sustainably -

-

- Because each item is printed on demand, there's no waste from unsold stock. My print partners use eco-friendly inks where possible, and products are shipped directly to you to minimise unnecessary handling. -

- -

- Thank you for visiting. It means a lot that you're here. -

-
-
+

+ Thank you for visiting. It means a lot that you're here. +

+ diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/cart.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/cart.html.heex index 492d550..ad083d8 100644 --- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/cart.html.heex +++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/cart.html.heex @@ -1,3 +1,6 @@ +<% + subtotal = Enum.reduce(@preview_data.cart_items, 0, fn item, acc -> acc + item.product.price * item.quantity end) +%>
<.skip_link /> @@ -20,100 +23,14 @@
<%= for item <- @preview_data.cart_items do %> -
-
- {item.product.name} -
- -
-

- <%= item.product.name %> -

-

- <%= item.variant %> -

- -
-
- - - <%= item.quantity %> - - -
- - -
-
- -
-

- $<%= item.product.price / 100 * item.quantity %> -

-
-
+ <.cart_item item={item} currency="$" /> <% end %>
-
-

- Order Summary -

- -
-
- Subtotal - - $<%= Enum.reduce(@preview_data.cart_items, 0, fn item, acc -> acc + item.product.price * item.quantity end) / 100 %> - -
-
- Delivery - £8.00 -
-
- VAT (20%) - £7.20 -
-
-
- Total - - £<%= (Enum.reduce(@preview_data.cart_items, 0, fn item, acc -> acc + item.product.price * item.quantity end) / 100 + 8.00 + 7.20) |> Float.round(2) %> - -
-
-
- - - - -
+ <.order_summary subtotal={subtotal} mode={:preview} />
diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/collection.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/collection.html.heex index 77fa2d4..b088194 100644 --- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/collection.html.heex +++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/collection.html.heex @@ -12,44 +12,11 @@
-
-
-

- All Products -

-

- <%= length(@preview_data.products) %> products -

-
-
+ <.collection_header title="All Products" product_count={length(@preview_data.products)} />
-
- -
- - <%= for category <- @preview_data.categories do %> - - <% end %> -
- - - -
+ <.filter_bar categories={@preview_data.categories} /> <.product_grid theme_settings={@theme_settings}> diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/contact.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/contact.html.heex index 27cf00c..b123f76 100644 --- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/contact.html.heex +++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/contact.html.heex @@ -19,166 +19,25 @@
-
-

- Send us a message -

- -
-
- - -
- -
- - -
- -
- - -
- -
- - -
- - -
-
+ <.contact_form />
-
-

Track your order

-

- Enter your email and we'll send you a link to check your order status. -

-
- - -
-
+ <.order_tracking_card /> -
-

Handy to know

-
    -
  • - • - Printing: 2-5 business days -
    • -
  • - • - Delivery: 3-7 business days after printing -
    • -
  • - • - Returns: Happy to help with faulty or damaged items -
    • -
-
+ <.info_card title="Handy to know" items={[ + %{label: "Printing", value: "2-5 business days"}, + %{label: "Delivery", value: "3-7 business days after printing"}, + %{label: "Returns", value: "Happy to help with faulty or damaged items"} + ]} /> -
-

Get in touch

- - - - - hello@example.com - -

- We typically respond within 24 hours -

-
+ <.contact_info_card email="hello@example.com" /> -
- - -
+ <.social_links />
diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex index 0107248..ad6127e 100644 --- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex +++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex @@ -21,75 +21,25 @@ /> -
- -
+ <.category_nav categories={@preview_data.categories} mode={:preview} /> -
-

- Featured products -

- - <.product_grid theme_settings={@theme_settings}> - <%= for product <- Enum.take(@preview_data.products, 4) do %> - <.product_card - product={product} - theme_settings={@theme_settings} - mode={:preview} - variant={:featured} - /> - <% end %> - - -
- -
-
+ <.featured_products_section + title="Featured products" + products={@preview_data.products} + theme_settings={@theme_settings} + mode={:preview} + /> -
-
-
-

- Made with passion, printed with care -

-

- Every design starts with an idea. We work with quality print partners to bring those ideas to life on premium products – from gallery-quality art prints to everyday essentials. -

- - Learn more about the studio → - -
-
+ <.image_text_section + title="Made with passion, printed with care" + description="Every design starts with an idea. We work with quality print partners to bring those ideas to life on premium products – from gallery-quality art prints to everyday essentials." + image_url="/mockups/mountain-sunrise-print-3.jpg" + link_text="Learn more about the studio →" + link_page="about" + mode={:preview} + /> diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/pdp.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/pdp.html.heex index a2c9720..5f56e7f 100644 --- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/pdp.html.heex +++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/pdp.html.heex @@ -15,13 +15,11 @@
- + <.breadcrumb items={[ + %{label: "Home", page: "home", href: "/"}, + %{label: product.category, page: "collection", href: "/products"}, + %{label: product.name, current: true} + ]} mode={:preview} />
@@ -397,22 +395,11 @@ <%= if @theme_settings.pdp_related_products do %> -
-

- You might also like -

- - <.product_grid columns={:fixed_4} gap="gap-6"> - <%= for related_product <- Enum.slice(@preview_data.products, 1, 4) do %> - <.product_card - product={related_product} - theme_settings={@theme_settings} - mode={:preview} - variant={:compact} - /> - <% end %> - -
+ <.related_products_section + products={Enum.slice(@preview_data.products, 1, 4)} + theme_settings={@theme_settings} + mode={:preview} + /> <% end %>