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

fix: update demo content, fix broken links, and add cart item product links

Browse Source 
- Replace all placeholder text with demo-aware copy that signals "replace me"
- Update USPs for POD accuracy (made to order, quality materials)
- Fix broken footer links (/delivery, /returns → /contact)
- Add real platform URLs to social icons with target="_blank"
- Make cart item images and names link to product pages
- Switch about page image to responsive_image component
- Add missing cart_status to collection page cart drawer
- Unify search hint text across all page templates

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey
2026-02-06 23:33:22 +00:00
parent 1bc08bfb23
commit cff21703f1
10 changed files with 115 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
lib/simpleshop_theme_web/components/page_templates/about.html.heex
View File

@@ -22,11 +22,14 @@
<main id="main-content" class="content-page" style="background-color: var(--t-surface-base);">
<.hero_section
title="About the studio"
description="Nature photography, printed with care"
description="Your story goes here – this is sample content for the demo shop"
background={:sunken}
/>
<.content_body image_url="/mockups/night-sky-blanket-3.jpg">
<.content_body
image_src="/mockups/night-sky-blanket-3"
image_alt="Night sky blanket draped over a chair"
>
<.rich_text blocks={SimpleshopTheme.Theme.PreviewData.about_content()} />
</.content_body>
</main>
@@ -42,7 +45,7 @@
cart_status={assigns[:cart_status]}
/>
<.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
<.search_modal hint_text={~s(Try a search – e.g. "mountain" or "notebook")} />
<.mobile_bottom_nav active_page="about" mode={@mode} />
</div>

2
lib/simpleshop_theme_web/components/page_templates/cart.html.heex
View File

@@ -60,7 +60,7 @@
open={assigns[:cart_drawer_open] || false}
cart_status={assigns[:cart_status]}
/>
<.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
<.search_modal hint_text={~s(Try a search – e.g. "mountain" or "notebook")} />
<.mobile_bottom_nav active_page="cart" mode={@mode} />
</div>

3
lib/simpleshop_theme_web/components/page_templates/collection.html.heex
View File

@@ -47,9 +47,10 @@
cart_count={@cart_count}
mode={@mode}
open={assigns[:cart_drawer_open] || false}
cart_status={assigns[:cart_status]}
/>
<.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
<.search_modal hint_text={~s(Try a search – e.g. "mountain" or "notebook")} />
<.mobile_bottom_nav active_page="collection" mode={@mode} />
</div>

20
lib/simpleshop_theme_web/components/page_templates/contact.html.heex
View File

@@ -23,7 +23,7 @@
<.hero_section
variant={:page}
title="Get in touch"
description="Questions about your order or just want to say hello? Drop me a message and I'll get back to you as soon as I can."
description="Sample contact page for the demo store. Add your own message here – something friendly about how customers can reach you."
/>
<div class="grid gap-8 md:grid-cols-2 mb-12">
@@ -35,20 +35,20 @@
<.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"}
%{label: "Printing", value: "Example: 2-5 business days"},
%{label: "Delivery", value: "Example: 3-7 business days after printing"},
%{label: "Issues", value: "Example: Reprints for any defects"}
]}
/>
<.newsletter_card />
<.social_links_card links={[
%{platform: :instagram, url: "#", label: "Instagram"},
%{platform: :bluesky, url: "#", label: "Bluesky"},
%{platform: :mastodon, url: "#", label: "Mastodon"},
%{platform: :kofi, url: "#", label: "Ko-fi"},
%{platform: :github, url: "#", label: "GitHub"}
%{platform: :instagram, url: "https://instagram.com", label: "Instagram"},
%{platform: :bluesky, url: "https://bsky.app", label: "Bluesky"},
%{platform: :mastodon, url: "https://mastodon.social", label: "Mastodon"},
%{platform: :kofi, url: "https://ko-fi.com", label: "Ko-fi"},
%{platform: :github, url: "https://github.com", label: "GitHub"}
]} />
</div>
</div>
@@ -65,7 +65,7 @@
cart_status={assigns[:cart_status]}
/>
<.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
<.search_modal hint_text={~s(Try a search – e.g. "mountain" or "notebook")} />
<.mobile_bottom_nav active_page="contact" mode={@mode} />
</div>

2
lib/simpleshop_theme_web/components/page_templates/error.html.heex
View File

@@ -59,5 +59,5 @@
cart_status={assigns[:cart_status]}
/>
<.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
<.search_modal hint_text={~s(Try a search – e.g. "mountain" or "notebook")} />
</div>

6
lib/simpleshop_theme_web/components/page_templates/home.html.heex
View File

@@ -22,7 +22,7 @@
<main id="main-content">
<.hero_section
title="Original designs, printed on demand"
description="From art prints to apparel – unique products created by independent artists and delivered straight to your door."
description="Welcome to the SimpleShop demo store. This is where your hero text goes – something short and punchy about what makes your shop worth a browse."
cta_text="Shop the collection"
cta_page="collection"
mode={@mode}
@@ -39,7 +39,7 @@
<.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."
description="This is an example content section. Use it to share your story, highlight what makes your products special, or link to your about page."
image_url="/mockups/mountain-sunrise-print-3-800.webp"
link_text="Learn more about the studio →"
link_page="about"
@@ -58,7 +58,7 @@
cart_status={assigns[:cart_status]}
/>
<.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
<.search_modal hint_text={~s(Try a search – e.g. "mountain" or "notebook")} />
<.mobile_bottom_nav active_page="home" mode={@mode} />
</div>

2
lib/simpleshop_theme_web/components/page_templates/pdp.html.heex
View File

@@ -99,7 +99,7 @@
open={assigns[:cart_drawer_open] || false}
cart_status={assigns[:cart_status]}
/>
<.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
<.search_modal hint_text={~s(Try a search – e.g. "mountain" or "notebook")} />
<.mobile_bottom_nav active_page="pdp" mode={@mode} />
</div>

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

@@ -26,7 +26,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
<.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"
attr :message, :string, default: "Sample announcement – e.g. free delivery, sales, or new drops"
def announcement_bar(assigns) do
~H"""
@@ -723,7 +723,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
<% else %>
<li>
<a
href="/delivery"
href="/contact"
class="transition-colors hover:opacity-80"
style="color: var(--t-text-secondary);"
>
@@ -732,7 +732,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
</li>
<li>
<a
href="/returns"
href="/contact"
class="transition-colors hover:opacity-80"
style="color: var(--t-text-secondary);"
>
@@ -764,7 +764,9 @@ defmodule SimpleshopThemeWeb.ShopComponents do
</p>
<div class="flex gap-2">
<a
href="#"
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"
@@ -782,7 +784,9 @@ defmodule SimpleshopThemeWeb.ShopComponents do
</svg>
</a>
<a
href="#"
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"
@@ -1226,7 +1230,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
## Attributes
* `item` - Required. Cart item with `name`, `variant`, `price`, `quantity`, `image`, `variant_id`.
* `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
@@ -1242,14 +1246,35 @@ defmodule SimpleshopThemeWeb.ShopComponents do
class="cart-item-row"
style={"display: flex; gap: #{if @size == :compact, do: "0.75rem", else: "1rem"}; padding: 0.75rem 0;"}
>
<div
class="cart-item-image"
style={"width: #{if @size == :compact, do: "60px", else: "80px"}; height: #{if @size == :compact, do: "60px", else: "80px"}; border-radius: var(--t-radius-card); background-size: cover; background-position: center; flex-shrink: 0; #{if @item.image, do: "background-image: url('#{@item.image}');", else: "background-color: var(--t-surface-sunken);"}"}
>
</div>
<%= 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; color: var(--t-text-primary); margin: 0 0 2px;"}>
{@item.name}
<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;">
@@ -1515,7 +1540,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
<% end %>
<%= if @show_delivery_text do %>
<p class="text-xs mt-1" style="color: var(--t-text-tertiary);">
Free delivery over £40
Made to order
</p>
<% end %>
</div>
@@ -2328,7 +2353,8 @@ defmodule SimpleshopThemeWeb.ShopComponents do
## Attributes
* `image_url` - Optional. Header image URL.
* `image_src` - Optional. Base path to image (without size/extension), used with responsive_image.
* `image_alt` - Optional. Alt text for the image. Defaults to "Page image".
## Slots
@@ -2336,11 +2362,12 @@ defmodule SimpleshopThemeWeb.ShopComponents do
## Examples
<.content_body image_url="/images/about.jpg">
<.content_body image_src="/mockups/night-sky-blanket-3" image_alt="A cosy blanket">
<p>Content here...</p>
</.content_body>
"""
attr :image_url, :string, default: nil
attr :image_src, :string, default: nil
attr :image_alt, :string, default: "Page image"
slot :inner_block, required: true
@@ -2350,11 +2377,18 @@ defmodule SimpleshopThemeWeb.ShopComponents do
class="content-body"
style="padding: var(--space-xl) var(--space-lg); max-width: 800px; margin: 0 auto;"
>
<%= if @image_url do %>
<%= if @image_src do %>
<div
class="content-image about-image"
style={"width: 100%; height: 300px; border-radius: var(--t-radius-image); margin-bottom: var(--space-lg); background-size: cover; background-position: center; background-image: url('#{@image_url}');"}
style="margin-bottom: var(--space-lg); border-radius: var(--t-radius-image); overflow: hidden;"
>
<.responsive_image
src={@image_src}
source_width={1200}
alt={@image_alt}
sizes="(max-width: 800px) 100vw, 800px"
class="w-full h-[300px] object-cover"
/>
</div>
<% end %>
@@ -2577,7 +2611,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
attr :title, :string, default: "Newsletter"
attr :description, :string,
default: "Get new designs and updates in your inbox. No spam, I promise."
default: "Sample newsletter signup. Replace with your own message to encourage subscribers."
attr :button_text, :string, default: "Subscribe"
attr :variant, :atom, default: :card
@@ -2661,6 +2695,8 @@ defmodule SimpleshopThemeWeb.ShopComponents do
<%= for link <- @links do %>
<a
href={link.url}
target="_blank"
rel="noopener noreferrer"
class="themed-button-outline flex items-center gap-2 px-3 py-2 text-sm transition-all hover:opacity-80"
style="text-decoration: none;"
>
@@ -2690,8 +2726,8 @@ defmodule SimpleshopThemeWeb.ShopComponents do
"""
attr :links, :list,
default: [
%{platform: :instagram, url: "#", label: "Instagram"},
%{platform: :pinterest, url: "#", label: "Pinterest"}
%{platform: :instagram, url: "https://instagram.com", label: "Instagram"},
%{platform: :pinterest, url: "https://pinterest.com", label: "Pinterest"}
]
def social_links(assigns) do
@@ -2700,6 +2736,8 @@ defmodule SimpleshopThemeWeb.ShopComponents do
<%= for link <- @links do %>
<a
href={link.url}
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={link.label}
@@ -3280,8 +3318,8 @@ defmodule SimpleshopThemeWeb.ShopComponents do
"""
attr :items, :list,
default: [
%{icon: :check, title: "Free Delivery", description: "On orders over £40"},
%{icon: :shield, title: "Easy Returns", description: "30-day return policy"}
%{icon: :check, title: "Made to Order", description: "Printed just for you"},
%{icon: :shield, title: "Quality Materials", description: "Premium inks and substrates"}
]
def trust_badges(assigns) do