From 98a9e3b3d493306e6e5d33e88eeb763bcce99d7e Mon Sep 17 00:00:00 2001 From: Jamey Greenwood Date: Thu, 1 Jan 2026 16:52:43 +0000 Subject: [PATCH] fix: adjust content and demo to be UK-centric --- RECENT_CHANGES.md | 75 +++++++++++ lib/simpleshop_theme/theme/preview_data.ex | 20 +++ .../live/theme_live/preview_pages.ex | 121 ++++++++++++++++-- .../theme_live/preview_pages/about.html.heex | 3 + .../theme_live/preview_pages/cart.html.heex | 15 ++- .../preview_pages/collection.html.heex | 13 +- .../preview_pages/contact.html.heex | 3 + .../theme_live/preview_pages/error.html.heex | 5 +- .../theme_live/preview_pages/home.html.heex | 25 +++- .../theme_live/preview_pages/pdp.html.heex | 20 +-- 10 files changed, 261 insertions(+), 39 deletions(-) create mode 100644 RECENT_CHANGES.md diff --git a/RECENT_CHANGES.md b/RECENT_CHANGES.md new file mode 100644 index 0000000..1ced4fd --- /dev/null +++ b/RECENT_CHANGES.md @@ -0,0 +1,75 @@ +Summary of Improvements + +I've successfully implemented all four requested improvements to make the SimpleShop Theme Studio more aligned with the demo file and UK-centric: +1. ✅ Made all links and buttons functional + +Updated components: + + Header navigation (preview_pages.ex): Home, Shop, About, and Contact links now trigger page navigation + Product cards (home.html.heex, collection.html.heex): Clicking any product card navigates to the PDP page + Footer links (preview_pages.ex): All footer navigation links are now functional + CTA buttons (home.html.heex): "Shop the collection" and "View all products" buttons navigate to collection page + About link (home.html.heex): "Learn more about the studio" link navigates to about page + +All links now use phx-click="change_preview_page" with phx-value-page to switch between the 7 preview pages seamlessly. +2. ✅ Implemented floating cart drawer/sidebar + +New component added (preview_pages.ex:229-320): + + Created cart_drawer/1 function component matching the demo's design exactly + Includes cart header with "Your basket" title + Displays cart items with images, names, variants, and prices + Shows subtotal (£72.00) + Checkout button and "View basket" link + Close button and overlay with click-to-close functionality + Smooth slide-in animation from the right + Added to all 7 preview pages (home, collection, pdp, cart, about, contact, error) + +Cart drawer data (preview_data.ex:34-49): + + Added cart_drawer_items/0 function with UK-themed products: + Autumn Fern (A4 / Unframed) - £24.00 + Wild Roses (A3 / Oak frame) - £48.00 + +3. ✅ Added cart count badge to cart icon + +Updated header (preview_pages.ex:98-112): + + Added circular badge showing "2" items + Badge styled with accent color background + Positioned at top-right of cart icon + Font size: 11px, white text, rounded pill shape + Matches the demo implementation exactly + +Cart button functionality: + + Clicking the cart icon now opens the cart drawer + Uses Phoenix.LiveView.JS.add_class to toggle visibility + +4. ✅ Updated all content to UK English and currency + +Language changes: + + "Shopping Cart" → "Your basket" + "Add to Cart" → "Add to basket" + "Free Shipping" → "Free Delivery" + "Shipping" (in fees) → "Delivery" + "You May Also Like" → "You might also like" + Footer: "Shipping" → "Delivery" + +Currency changes: + + All product prices: $ → £ (across all 7 preview pages) + Announcement bar: "$50" → "£40" + Free delivery threshold: "$50" → "£40" + Cart delivery fee: "$10.00" → "£8.00" + Cart tax: "$8.50" (Tax) → "£7.20" (VAT 20%) + Cart drawer subtotal: "$72.00" → "£72.00" + +Files modified: + + lib/simpleshop_theme_web/live/theme_live/preview_pages.ex - Header, footer, announcement bar, new cart drawer component + lib/simpleshop_theme/theme/preview_data.ex - Added cart drawer items function + All 7 preview page files (home, collection, pdp, cart, about, contact, error) - Currency symbols and cart drawer component + +The implementation now closely matches the demo.html file functionality while being fully localized for the UK market with British English tone and £ currency throughout. \ No newline at end of file diff --git a/lib/simpleshop_theme/theme/preview_data.ex b/lib/simpleshop_theme/theme/preview_data.ex index 70d3054..ec6d5d0 100644 --- a/lib/simpleshop_theme/theme/preview_data.ex +++ b/lib/simpleshop_theme/theme/preview_data.ex @@ -28,6 +28,26 @@ defmodule SimpleshopTheme.Theme.PreviewData do mock_cart_items() end + @doc """ + Returns cart drawer items formatted for the cart drawer component. + """ + def cart_drawer_items do + [ + %{ + name: "Autumn Fern", + variant: "A4 / Unframed", + price: "£24.00", + image: "https://picsum.photos/seed/fern/120/120" + }, + %{ + name: "Wild Roses", + variant: "A3 / Oak frame", + price: "£48.00", + image: "https://picsum.photos/seed/roses/120/120" + } + ] + end + @doc """ Returns testimonials for preview. diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages.ex b/lib/simpleshop_theme_web/live/theme_live/preview_pages.ex index 53c133f..4edf84a 100644 --- a/lib/simpleshop_theme_web/live/theme_live/preview_pages.ex +++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages.ex @@ -14,7 +14,7 @@ defmodule SimpleshopThemeWeb.ThemeLive.PreviewPages do class="announcement-bar" style="background-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); text-align: center; padding: 0.5rem 1rem; font-size: 0.875rem;" > -

Free shipping on orders over $50

+

Free delivery on orders over £40

""" end @@ -76,10 +76,10 @@ defmodule SimpleshopThemeWeb.ThemeLive.PreviewPages do
@@ -97,8 +97,9 @@ defmodule SimpleshopThemeWeb.ThemeLive.PreviewPages do
@@ -169,9 +171,9 @@ defmodule SimpleshopThemeWeb.ThemeLive.PreviewPages do Shop
@@ -179,9 +181,9 @@ defmodule SimpleshopThemeWeb.ThemeLive.PreviewPages do Help
@@ -224,6 +226,99 @@ defmodule SimpleshopThemeWeb.ThemeLive.PreviewPages do """ end + @doc """ + Renders the cart drawer (floating sidebar). + """ + attr :cart_items, :list, default: [] + + def cart_drawer(assigns) do + ~H""" + +
+
+

Your basket

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

+ <%= item.name %> +

+

+ <%= item.variant %> +

+

+ <%= item.price %> +

+
+
+ <% end %> +
+ +
+
+ Subtotal + £72.00 +
+ + + View basket + +
+
+ + + + + + """ + end + @doc """ Renders the search modal overlay. """ 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 60478ab..67879bd 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 @@ -62,5 +62,8 @@ + + + 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 5142426..5f7b157 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 @@ -9,7 +9,7 @@

- Shopping Cart + Your basket

@@ -80,18 +80,18 @@
- Shipping - $10.00 + Delivery + £8.00
- Tax - $8.50 + VAT (20%) + £7.20
Total - $<%= (Enum.reduce(@preview_data.cart_items, 0, fn item, acc -> acc + item.product.price * item.quantity end) / 100 + 10.00 + 8.50) |> Float.round(2) %> + £<%= (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) %>
@@ -119,5 +119,8 @@ + + +
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 434891c..97cd3b6 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 @@ -114,8 +114,10 @@ ]}> <%= for product <- @preview_data.products do %>
@@ -153,14 +155,14 @@
<%= if product.on_sale do %> - $<%= product.price / 100 %> + £<%= product.price / 100 %> - $<%= product.compare_at_price / 100 %> + £<%= product.compare_at_price / 100 %> <% else %> - $<%= product.price / 100 %> + £<%= product.price / 100 %> <% end %>
@@ -185,5 +187,8 @@ + + +
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 2749856..7eb2391 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 @@ -134,5 +134,8 @@ + + +
diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/error.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/error.html.heex index 2c28df6..abec1a9 100644 --- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/error.html.heex +++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/error.html.heex @@ -55,7 +55,7 @@ <%= product.name %>

- $<%= product.price / 100 %> + £<%= product.price / 100 %>

@@ -68,5 +68,8 @@ + + + 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 94e37dd..b2e9fec 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 @@ -16,8 +16,10 @@ Original botanical illustrations, printed on premium archival paper. Each piece brings a little bit of the outside, inside.

@@ -27,7 +29,7 @@