refactor: consolidate shop and preview page templates
- Create shared PageTemplates module in components/page_templates/ - Shop LiveViews now use explicit render/1 calling shared templates - Theme preview now uses preview_page/1 component calling shared templates - Delete duplicate preview_pages directory and shop_live/*.html.heex - Single source of truth: mode param controls shop vs preview behavior Templates: home, about, contact, collection, pdp, cart, error Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
21
lib/simpleshop_theme_web/components/page_templates.ex
Normal file
21
lib/simpleshop_theme_web/components/page_templates.ex
Normal file
@@ -0,0 +1,21 @@
|
||||
defmodule SimpleshopThemeWeb.PageTemplates do
|
||||
@moduledoc """
|
||||
Shared page templates used by both the public shop and theme preview.
|
||||
|
||||
These templates accept a `mode` parameter to control navigation behavior:
|
||||
- `:shop` - Links navigate normally (real shop pages)
|
||||
- `:preview` - Links send events to parent LiveView (theme editor)
|
||||
|
||||
All templates expect these common assigns:
|
||||
- `theme_settings` - Current theme configuration
|
||||
- `logo_image` - Logo image struct or nil
|
||||
- `header_image` - Header image struct or nil
|
||||
- `mode` - `:shop` or `:preview`
|
||||
- `cart_items` - List of cart items (can be empty)
|
||||
- `cart_count` - Number of items in cart
|
||||
"""
|
||||
use Phoenix.Component
|
||||
import SimpleshopThemeWeb.ShopComponents
|
||||
|
||||
embed_templates "page_templates/*"
|
||||
end
|
||||
@@ -0,0 +1,27 @@
|
||||
<div class="shop-container min-h-screen" 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="about" mode={@mode} cart_count={@cart_count} />
|
||||
|
||||
<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"
|
||||
background={:sunken}
|
||||
/>
|
||||
|
||||
<.content_body image_url="/mockups/night-sky-blanket-3.jpg">
|
||||
<.rich_text blocks={SimpleshopTheme.Theme.PreviewData.about_content()} />
|
||||
</.content_body>
|
||||
</main>
|
||||
|
||||
<.shop_footer theme_settings={@theme_settings} mode={@mode} />
|
||||
|
||||
<.cart_drawer cart_items={@cart_items} subtotal={@cart_subtotal} mode={@mode} />
|
||||
|
||||
<.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
|
||||
</div>
|
||||
@@ -0,0 +1,19 @@
|
||||
<div class="shop-container min-h-screen" 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="cart" mode={@mode} cart_count={@cart_count} />
|
||||
|
||||
<main id="main-content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<.page_title text="Your basket" />
|
||||
<.cart_layout items={@cart_page_items} subtotal={@cart_page_subtotal} mode={@mode} />
|
||||
</main>
|
||||
|
||||
<.shop_footer theme_settings={@theme_settings} mode={@mode} />
|
||||
|
||||
<.cart_drawer cart_items={@cart_items} subtotal={@cart_subtotal} mode={@mode} />
|
||||
<.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
|
||||
</div>
|
||||
@@ -0,0 +1,35 @@
|
||||
<div class="shop-container min-h-screen" 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="collection" mode={@mode} cart_count={@cart_count} />
|
||||
|
||||
<main id="main-content">
|
||||
<.collection_header title="All Products" product_count={length(@preview_data.products)} />
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<.filter_bar categories={@preview_data.categories} />
|
||||
|
||||
<.product_grid theme_settings={@theme_settings}>
|
||||
<%= for product <- @preview_data.products do %>
|
||||
<.product_card
|
||||
product={product}
|
||||
theme_settings={@theme_settings}
|
||||
mode={@mode}
|
||||
variant={:default}
|
||||
show_category={true}
|
||||
/>
|
||||
<% end %>
|
||||
</.product_grid>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<.shop_footer theme_settings={@theme_settings} mode={@mode} />
|
||||
|
||||
<.cart_drawer cart_items={@cart_items} subtotal={@cart_subtotal} mode={@mode} />
|
||||
|
||||
<.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
|
||||
</div>
|
||||
@@ -0,0 +1,41 @@
|
||||
<div class="shop-container min-h-screen" 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="contact" mode={@mode} cart_count={@cart_count} />
|
||||
|
||||
<main id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
<.hero_section
|
||||
variant={:page}
|
||||
title="Contact Us"
|
||||
description="Questions about your order or just want to say hello? Drop us a message and we'll get back to you as soon as we can."
|
||||
/>
|
||||
|
||||
<div class="grid gap-8 md:grid-cols-2 mb-12">
|
||||
<.contact_form />
|
||||
|
||||
<div class="space-y-6">
|
||||
<.order_tracking_card />
|
||||
|
||||
<.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"}
|
||||
]} />
|
||||
|
||||
<.contact_info_card email="hello@example.com" />
|
||||
|
||||
<.social_links />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<.shop_footer theme_settings={@theme_settings} mode={@mode} />
|
||||
|
||||
<.cart_drawer cart_items={@cart_items} subtotal={@cart_subtotal} mode={@mode} />
|
||||
|
||||
<.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
|
||||
</div>
|
||||
@@ -0,0 +1,42 @@
|
||||
<div class="shop-container min-h-screen" 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="error" mode={@mode} cart_count={@cart_count} />
|
||||
|
||||
<main id="main-content" class="flex items-center justify-center" style="min-height: calc(100vh - 4rem);">
|
||||
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
<.hero_section
|
||||
variant={:error}
|
||||
pre_title={@error_code}
|
||||
title={@error_title}
|
||||
description={@error_description}
|
||||
cta_text="Go to Homepage"
|
||||
cta_page="home"
|
||||
secondary_cta_text="Browse Products"
|
||||
secondary_cta_page="collection"
|
||||
mode={@mode}
|
||||
/>
|
||||
|
||||
<.product_grid columns={:fixed_4} gap="gap-4" class="mt-12 max-w-xl mx-auto">
|
||||
<%= for product <- Enum.take(@preview_data.products, 4) do %>
|
||||
<.product_card
|
||||
product={product}
|
||||
theme_settings={@theme_settings}
|
||||
mode={@mode}
|
||||
variant={:minimal}
|
||||
/>
|
||||
<% end %>
|
||||
</.product_grid>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<.shop_footer theme_settings={@theme_settings} mode={@mode} />
|
||||
|
||||
<.cart_drawer cart_items={@cart_items} subtotal={@cart_subtotal} mode={@mode} />
|
||||
|
||||
<.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
|
||||
</div>
|
||||
@@ -0,0 +1,43 @@
|
||||
<div class="shop-container min-h-screen" 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="home" mode={@mode} cart_count={@cart_count} />
|
||||
|
||||
<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."
|
||||
cta_text="Shop the collection"
|
||||
cta_page="collection"
|
||||
mode={@mode}
|
||||
/>
|
||||
|
||||
<.category_nav categories={@preview_data.categories} mode={@mode} />
|
||||
|
||||
<.featured_products_section
|
||||
title="Featured products"
|
||||
products={@preview_data.products}
|
||||
theme_settings={@theme_settings}
|
||||
mode={@mode}
|
||||
/>
|
||||
|
||||
<.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={@mode}
|
||||
/>
|
||||
</main>
|
||||
|
||||
<.shop_footer theme_settings={@theme_settings} mode={@mode} />
|
||||
|
||||
<.cart_drawer cart_items={@cart_items} subtotal={@cart_subtotal} mode={@mode} />
|
||||
|
||||
<.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
|
||||
</div>
|
||||
@@ -0,0 +1,44 @@
|
||||
<div class="shop-container min-h-screen" 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="pdp" mode={@mode} cart_count={@cart_count} />
|
||||
|
||||
<main id="main-content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<.breadcrumb items={[
|
||||
%{label: "Home", page: "home", href: "/"},
|
||||
%{label: @product.category, page: "collection", href: "/products"},
|
||||
%{label: @product.name, current: true}
|
||||
]} mode={@mode} />
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 mb-16">
|
||||
<.product_gallery images={@gallery_images} product_name={@product.name} />
|
||||
|
||||
<div>
|
||||
<.product_info product={@product} />
|
||||
<.variant_selector label="Size" options={["S", "M", "L", "XL"]} />
|
||||
<.quantity_selector quantity={@quantity} in_stock={@product.in_stock} />
|
||||
<.add_to_cart_button />
|
||||
<.trust_badges :if={@theme_settings.pdp_trust_badges} />
|
||||
<.product_details product={@product} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<.reviews_section :if={@theme_settings.pdp_reviews} reviews={SimpleshopTheme.Theme.PreviewData.reviews()} average_rating={5} total_count={24} />
|
||||
|
||||
<.related_products_section
|
||||
:if={@theme_settings.pdp_related_products}
|
||||
products={@related_products}
|
||||
theme_settings={@theme_settings}
|
||||
mode={@mode}
|
||||
/>
|
||||
</main>
|
||||
|
||||
<.shop_footer theme_settings={@theme_settings} mode={@mode} />
|
||||
|
||||
<.cart_drawer cart_items={@cart_items} subtotal={@cart_subtotal} mode={@mode} />
|
||||
<.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
|
||||
</div>
|
||||
Reference in New Issue
Block a user