giles
da8a766e3f
Eliminates every HTML tag from the market service's sexp component layer, replacing f-string HTML with composable sexp() calls throughout ~30 functions including product cards, filter panels, nav panels, product detail, meta tags, cart controls, like buttons, and sentinel infinite-scroll elements. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1954 lines
77 KiB
Python
1954 lines
77 KiB
Python
"""
|
|
Market service s-expression page components.
|
|
|
|
Renders market landing, browse (category/subcategory), product detail,
|
|
product admin, market admin, page markets, and all markets pages.
|
|
Called from route handlers in place of ``render_template()``.
|
|
"""
|
|
from __future__ import annotations
|
|
|
|
from typing import Any
|
|
from markupsafe import escape
|
|
|
|
from shared.sexp.jinja_bridge import sexp
|
|
from shared.sexp.helpers import (
|
|
call_url, get_asset_url, root_header_html,
|
|
search_mobile_html, search_desktop_html,
|
|
full_page, oob_page,
|
|
)
|
|
|
|
|
|
# ---------------------------------------------------------------------------
|
|
# Price helpers
|
|
# ---------------------------------------------------------------------------
|
|
|
|
_SYM = {"GBP": "£", "EUR": "€", "USD": "$"}
|
|
|
|
|
|
def _price_str(val, raw, cur) -> str:
|
|
if raw:
|
|
return str(raw)
|
|
if isinstance(val, (int, float)):
|
|
return f"{_SYM.get(cur, '')}{val:.2f}"
|
|
return str(val or "")
|
|
|
|
|
|
def _set_prices(item: dict) -> dict:
|
|
"""Extract price values from product dict (mirrors prices.html set_prices macro)."""
|
|
oe = item.get("oe_list_price") or {}
|
|
sp_val = item.get("special_price") or (oe.get("special") if oe else None)
|
|
sp_raw = item.get("special_price_raw") or (oe.get("special_raw") if oe else None)
|
|
sp_cur = item.get("special_price_currency") or (oe.get("special_currency") if oe else None)
|
|
rp_val = item.get("regular_price") or item.get("rrp") or (oe.get("rrp") if oe else None)
|
|
rp_raw = item.get("regular_price_raw") or item.get("rrp_raw") or (oe.get("rrp_raw") if oe else None)
|
|
rp_cur = item.get("regular_price_currency") or item.get("rrp_currency") or (oe.get("rrp_currency") if oe else None)
|
|
return dict(sp_val=sp_val, sp_raw=sp_raw, sp_cur=sp_cur,
|
|
rp_val=rp_val, rp_raw=rp_raw, rp_cur=rp_cur)
|
|
|
|
|
|
def _card_price_html(p: dict) -> str:
|
|
"""Render price line for product card (mirrors prices.html card_price macro)."""
|
|
pr = _set_prices(p)
|
|
sp_str = _price_str(pr["sp_val"], pr["sp_raw"], pr["sp_cur"])
|
|
rp_str = _price_str(pr["rp_val"], pr["rp_raw"], pr["rp_cur"])
|
|
inner = ""
|
|
if pr["sp_val"]:
|
|
inner += sexp('(div :class "text-lg font-semibold text-emerald-700" sp)', sp=sp_str)
|
|
if pr["rp_val"]:
|
|
inner += sexp('(div :class "text-sm line-through text-stone-500" rp)', rp=rp_str)
|
|
elif pr["rp_val"]:
|
|
inner += sexp('(div :class "mt-1 text-lg font-semibold" rp)', rp=rp_str)
|
|
return sexp(
|
|
'(div :class "mt-1 flex items-baseline gap-2 justify-center" (raw! inner))',
|
|
inner=inner,
|
|
)
|
|
|
|
|
|
# ---------------------------------------------------------------------------
|
|
# Header helpers
|
|
# ---------------------------------------------------------------------------
|
|
|
|
def _post_header_html(ctx: dict, *, oob: bool = False) -> str:
|
|
"""Build the post-level header row (feature image + title + page cart count)."""
|
|
post = ctx.get("post") or {}
|
|
slug = post.get("slug", "")
|
|
title = (post.get("title") or "")[:160]
|
|
feature_image = post.get("feature_image")
|
|
|
|
label_html = ""
|
|
if feature_image:
|
|
label_html += sexp(
|
|
'(img :src fi :class "h-8 w-8 rounded-full object-cover border border-stone-300 flex-shrink-0")',
|
|
fi=feature_image,
|
|
)
|
|
label_html += sexp('(span t)', t=title)
|
|
|
|
nav_html = ""
|
|
page_cart_count = ctx.get("page_cart_count", 0)
|
|
if page_cart_count and page_cart_count > 0:
|
|
cart_href = call_url(ctx, "cart_url", f"/{slug}/")
|
|
nav_html += sexp(
|
|
'(a :href ch :class "relative inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-full'
|
|
' border border-emerald-300 bg-emerald-50 text-emerald-800 hover:bg-emerald-100 transition"'
|
|
' (i :class "fa fa-shopping-cart" :aria-hidden "true")'
|
|
' (span pcc))',
|
|
ch=cart_href, pcc=str(page_cart_count),
|
|
)
|
|
|
|
# Container nav
|
|
container_nav = ctx.get("container_nav_html", "")
|
|
if container_nav:
|
|
nav_html += container_nav
|
|
|
|
link_href = call_url(ctx, "blog_url", f"/{slug}/")
|
|
|
|
return sexp(
|
|
'(~menu-row :id "post-row" :level 1'
|
|
' :link-href lh :link-label-html llh'
|
|
' :nav-html nh :child-id "post-header-child" :oob oob)',
|
|
lh=link_href,
|
|
llh=label_html,
|
|
nh=nav_html,
|
|
oob=oob,
|
|
)
|
|
|
|
|
|
def _market_header_html(ctx: dict, *, oob: bool = False) -> str:
|
|
"""Build the market-level header row (shop icon + market title + category slugs + nav)."""
|
|
from quart import url_for
|
|
|
|
market_title = ctx.get("market_title", "")
|
|
top_slug = ctx.get("top_slug", "")
|
|
sub_slug = ctx.get("sub_slug", "")
|
|
hx_select_search = ctx.get("hx_select_search", "#main-panel")
|
|
|
|
sub_div = sexp('(div sub)', sub=sub_slug) if sub_slug else ""
|
|
label_html = sexp(
|
|
'(div :class "font-bold text-xl flex-shrink-0 flex gap-2 items-center"'
|
|
' (div (i :class "fa fa-shop") " " mt)'
|
|
' (div :class "flex flex-col md:flex-row md:gap-2 text-xs"'
|
|
' (div ts) (raw! sd)))',
|
|
mt=market_title, ts=top_slug or "", sd=sub_div,
|
|
)
|
|
|
|
link_href = url_for("market.browse.home")
|
|
|
|
# Build desktop nav from categories
|
|
categories = ctx.get("categories", {})
|
|
qs = ctx.get("qs", "")
|
|
nav_html = _desktop_category_nav_html(ctx, categories, qs, hx_select_search)
|
|
|
|
return sexp(
|
|
'(~menu-row :id "market-row" :level 2'
|
|
' :link-href lh :link-label-html llh'
|
|
' :nav-html nh :child-id "market-header-child" :oob oob)',
|
|
lh=link_href,
|
|
llh=label_html,
|
|
nh=nav_html,
|
|
oob=oob,
|
|
)
|
|
|
|
|
|
def _desktop_category_nav_html(ctx: dict, categories: dict, qs: str,
|
|
hx_select: str) -> str:
|
|
"""Build desktop category navigation links."""
|
|
from quart import url_for
|
|
from shared.utils import route_prefix
|
|
|
|
prefix = route_prefix()
|
|
category_label = ctx.get("category_label", "")
|
|
select_colours = ctx.get("select_colours", "")
|
|
rights = ctx.get("rights", {})
|
|
|
|
all_href = prefix + url_for("market.browse.browse_all") + qs
|
|
all_active = (category_label == "All Products")
|
|
links = sexp(
|
|
'(div :class "relative nav-group"'
|
|
' (a :href ah :hx-get ah :hx-target "#main-panel"'
|
|
' :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
|
|
' :aria-selected (if aa "true" "false")'
|
|
' :class (str "block px-2 py-1 rounded text-center whitespace-normal break-words leading-snug bg-stone-200 text-black " sc)'
|
|
' "All"))',
|
|
ah=all_href, hs=hx_select, aa=all_active, sc=select_colours,
|
|
)
|
|
|
|
for cat, data in categories.items():
|
|
cat_href = prefix + url_for("market.browse.browse_top", top_slug=data["slug"]) + qs
|
|
cat_active = (cat == category_label)
|
|
links += sexp(
|
|
'(div :class "relative nav-group"'
|
|
' (a :href ch :hx-get ch :hx-target "#main-panel"'
|
|
' :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
|
|
' :aria-selected (if ca "true" "false")'
|
|
' :class (str "block px-2 py-1 rounded text-center whitespace-normal break-words leading-snug bg-stone-200 text-black " sc)'
|
|
' cn))',
|
|
ch=cat_href, hs=hx_select, ca=cat_active, sc=select_colours, cn=cat,
|
|
)
|
|
|
|
admin_link = ""
|
|
if rights and rights.get("admin"):
|
|
admin_href = prefix + url_for("market.admin.admin")
|
|
admin_link = sexp(
|
|
'(a :href ah :hx-get ah :hx-target "#main-panel"'
|
|
' :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
|
|
' :class "px-2 py-1 text-stone-500 hover:text-stone-700"'
|
|
' (i :class "fa fa-cog" :aria-hidden "true"))',
|
|
ah=admin_href, hs=hx_select,
|
|
)
|
|
|
|
return sexp(
|
|
'(nav :class "hidden md:flex gap-4 text-sm ml-2 w-full justify-end items-center"'
|
|
' (raw! links) (raw! al))',
|
|
links=links, al=admin_link,
|
|
)
|
|
|
|
|
|
def _product_header_html(ctx: dict, d: dict, *, oob: bool = False) -> str:
|
|
"""Build the product-level header row (bag icon + title + prices + admin)."""
|
|
from quart import url_for
|
|
from shared.browser.app.csrf import generate_csrf_token
|
|
|
|
slug = d.get("slug", "")
|
|
title = d.get("title", "")
|
|
hx_select_search = ctx.get("hx_select_search", "#main-panel")
|
|
link_href = url_for("market.browse.product.product_detail", product_slug=slug)
|
|
|
|
label_html = sexp(
|
|
'(<> (i :class "fa fa-shopping-bag" :aria-hidden "true") (div t))',
|
|
t=title,
|
|
)
|
|
|
|
# Prices in nav area
|
|
pr = _set_prices(d)
|
|
cart = ctx.get("cart", [])
|
|
prices_nav = _prices_header_html(d, pr, cart, slug, ctx)
|
|
|
|
rights = ctx.get("rights", {})
|
|
admin_html = ""
|
|
if rights and rights.get("admin"):
|
|
admin_href = url_for("market.browse.product.admin", product_slug=slug)
|
|
admin_html = sexp(
|
|
'(a :href ah :hx-get ah :hx-target "#main-panel"'
|
|
' :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
|
|
' :class "px-2 py-1 text-stone-500 hover:text-stone-700"'
|
|
' (i :class "fa fa-cog" :aria-hidden "true"))',
|
|
ah=admin_href, hs=hx_select_search,
|
|
)
|
|
nav_html = prices_nav + admin_html
|
|
|
|
return sexp(
|
|
'(~menu-row :id "product-row" :level 3'
|
|
' :link-href lh :link-label-html llh'
|
|
' :nav-html nh :child-id "product-header-child" :oob oob)',
|
|
lh=link_href,
|
|
llh=label_html,
|
|
nh=nav_html,
|
|
oob=oob,
|
|
)
|
|
|
|
|
|
def _prices_header_html(d: dict, pr: dict, cart: list, slug: str, ctx: dict) -> str:
|
|
"""Build prices + add-to-cart for product header row."""
|
|
from quart import url_for
|
|
from shared.browser.app.csrf import generate_csrf_token
|
|
|
|
csrf = generate_csrf_token()
|
|
cart_action = url_for("market.browse.product.cart", product_slug=slug)
|
|
cart_url_fn = ctx.get("cart_url")
|
|
|
|
# Add-to-cart button
|
|
quantity = sum(ci.quantity for ci in cart if ci.product.slug == slug) if cart else 0
|
|
add_html = _cart_add_html(slug, quantity, cart_action, csrf, cart_url_fn)
|
|
|
|
inner = add_html
|
|
sp_val, rp_val = pr.get("sp_val"), pr.get("rp_val")
|
|
if sp_val:
|
|
inner += sexp('(div :class "text-md font-bold text-emerald-700" "Special price")')
|
|
inner += sexp(
|
|
'(div :class "text-xl font-semibold text-emerald-700" ps)',
|
|
ps=_price_str(sp_val, pr["sp_raw"], pr["sp_cur"]),
|
|
)
|
|
if rp_val:
|
|
inner += sexp(
|
|
'(div :class "text-base text-md line-through text-stone-500" ps)',
|
|
ps=_price_str(rp_val, pr["rp_raw"], pr["rp_cur"]),
|
|
)
|
|
elif rp_val:
|
|
inner += sexp('(div :class "hidden md:block text-xl font-bold" "Our price")')
|
|
inner += sexp(
|
|
'(div :class "text-xl font-semibold" ps)',
|
|
ps=_price_str(rp_val, pr["rp_raw"], pr["rp_cur"]),
|
|
)
|
|
|
|
# RRP
|
|
rrp_raw = d.get("rrp_raw")
|
|
rrp_val = d.get("rrp")
|
|
case_size = d.get("case_size_count") or 1
|
|
if rrp_raw and rrp_val:
|
|
rrp_str = f"{rrp_raw[0]}{rrp_val * case_size:.2f}"
|
|
inner += sexp(
|
|
'(div :class "text-base text-stone-400" (span "rrp:") " " (span rs))',
|
|
rs=rrp_str,
|
|
)
|
|
|
|
return sexp(
|
|
'(div :class "flex flex-row items-center justify-between md:gap-2 md:px-2" (raw! inner))',
|
|
inner=inner,
|
|
)
|
|
|
|
|
|
def _cart_add_html(slug: str, quantity: int, action: str, csrf: str,
|
|
cart_url_fn: Any = None) -> str:
|
|
"""Render add-to-cart button or quantity controls."""
|
|
if not quantity:
|
|
return sexp(
|
|
'(div :id cid'
|
|
' (form :action act :method "post" :hx-post act :hx-target "#cart-mini" :hx-swap "outerHTML" :class "rounded flex items-center"'
|
|
' (input :type "hidden" :name "csrf_token" :value csrf)'
|
|
' (input :type "hidden" :name "count" :value "1")'
|
|
' (button :type "submit" :class "relative inline-flex items-center justify-center text-sm font-medium text-stone-500 hover:bg-emerald-50"'
|
|
' (span :class "relative inline-flex items-center justify-center"'
|
|
' (i :class "fa fa-cart-plus text-4xl" :aria-hidden "true")))))',
|
|
cid=f"cart-{slug}", act=action, csrf=csrf,
|
|
)
|
|
|
|
cart_href = cart_url_fn("/") if callable(cart_url_fn) else "/"
|
|
return sexp(
|
|
'(div :id cid'
|
|
' (div :class "rounded flex items-center gap-2"'
|
|
' (form :action act :method "post" :hx-post act :hx-target "#cart-mini" :hx-swap "outerHTML"'
|
|
' (input :type "hidden" :name "csrf_token" :value csrf)'
|
|
' (input :type "hidden" :name "count" :value minus)'
|
|
' (button :type "submit" :class "inline-flex items-center justify-center w-8 h-8 text-sm font-medium rounded-full border border-emerald-600 text-emerald-700 hover:bg-emerald-50 text-xl" "-"))'
|
|
' (a :class "relative inline-flex items-center justify-center text-emerald-700" :href ch'
|
|
' (span :class "relative inline-flex items-center justify-center"'
|
|
' (i :class "fa-solid fa-shopping-cart text-2xl" :aria-hidden "true")'
|
|
' (span :class "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"'
|
|
' (span :class "flex items-center justify-center bg-black text-white rounded-full w-4 h-4 text-xs font-bold" qty))))'
|
|
' (form :action act :method "post" :hx-post act :hx-target "#cart-mini" :hx-swap "outerHTML"'
|
|
' (input :type "hidden" :name "csrf_token" :value csrf)'
|
|
' (input :type "hidden" :name "count" :value plus)'
|
|
' (button :type "submit" :class "inline-flex items-center justify-center w-8 h-8 text-sm font-medium rounded-full border border-emerald-600 text-emerald-700 hover:bg-emerald-50 text-xl" "+"))))',
|
|
cid=f"cart-{slug}", act=action, csrf=csrf, ch=cart_href,
|
|
minus=str(quantity - 1), plus=str(quantity + 1), qty=str(quantity),
|
|
)
|
|
|
|
|
|
# ---------------------------------------------------------------------------
|
|
# Mobile nav panel
|
|
# ---------------------------------------------------------------------------
|
|
|
|
def _mobile_nav_panel_html(ctx: dict) -> str:
|
|
"""Build mobile nav panel with category accordion."""
|
|
from quart import url_for
|
|
from shared.utils import route_prefix
|
|
|
|
prefix = route_prefix()
|
|
categories = ctx.get("categories", {})
|
|
qs = ctx.get("qs", "")
|
|
category_label = ctx.get("category_label", "")
|
|
top_slug = ctx.get("top_slug", "")
|
|
sub_slug = ctx.get("sub_slug", "")
|
|
hx_select = ctx.get("hx_select_search", "#main-panel")
|
|
select_colours = ctx.get("select_colours", "")
|
|
|
|
all_href = prefix + url_for("market.browse.browse_all") + qs
|
|
all_active = (category_label == "All Products")
|
|
items = sexp(
|
|
'(a :role "option" :href ah :hx-get ah :hx-target "#main-panel"'
|
|
' :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
|
|
' :aria-selected (if aa "true" "false")'
|
|
' :class (str "block rounded-lg px-3 py-3 text-base hover:bg-stone-50 " sc)'
|
|
' (div :class "prose prose-stone max-w-none" "All"))',
|
|
ah=all_href, hs=hx_select, aa=all_active, sc=select_colours,
|
|
)
|
|
|
|
for cat, data in categories.items():
|
|
cat_slug = data.get("slug", "")
|
|
cat_active = (top_slug == cat_slug.lower() if top_slug else False)
|
|
cat_href = prefix + url_for("market.browse.browse_top", top_slug=cat_slug) + qs
|
|
bg_cls = " bg-stone-900 text-white hover:bg-stone-900" if cat_active else ""
|
|
|
|
chevron = sexp(
|
|
'(svg :class "w-4 h-4 shrink-0 transition-transform group-open/cat:rotate-180"'
|
|
' :viewBox "0 0 20 20" :fill "currentColor"'
|
|
' (path :fill-rule "evenodd" :clip-rule "evenodd"'
|
|
' :d "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"))',
|
|
)
|
|
|
|
cat_count = data.get("count", 0)
|
|
summary_html = sexp(
|
|
'(summary :class (str "flex items-center justify-between cursor-pointer select-none block rounded-lg px-3 py-3 text-base hover:bg-stone-50" bg)'
|
|
' (a :href ch :hx-get ch :hx-target "#main-panel"'
|
|
' :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
|
|
' :class (str "font-medium " sc " flex flex-row gap-2")'
|
|
' (div cn)'
|
|
' (div :aria-label cl cn2))'
|
|
' (raw! chev))',
|
|
bg=bg_cls, ch=cat_href, hs=hx_select, sc=select_colours,
|
|
cn=cat, cl=f"{cat_count} products", cn2=str(cat_count), chev=chevron,
|
|
)
|
|
|
|
subs = data.get("subs", [])
|
|
subs_html = ""
|
|
if subs:
|
|
sub_links = ""
|
|
for sub in subs:
|
|
sub_href = prefix + url_for("market.browse.browse_sub", top_slug=cat_slug, sub_slug=sub["slug"]) + qs
|
|
sub_active = (cat_active and sub_slug == sub.get("slug"))
|
|
sub_label = sub.get("html_label") or sub.get("name", "")
|
|
sub_count = sub.get("count", 0)
|
|
sub_links += sexp(
|
|
'(a :class (str "snap-start px-2 py-3 rounded " sc " flex flex-row gap-2")'
|
|
' :aria-selected (if sa "true" "false")'
|
|
' :href sh :hx-get sh :hx-target "#main-panel"'
|
|
' :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
|
|
' (div sl)'
|
|
' (div :aria-label scl sct))',
|
|
sc=select_colours, sa=sub_active, sh=sub_href, hs=hx_select,
|
|
sl=sub_label, scl=f"{sub_count} products", sct=str(sub_count),
|
|
)
|
|
subs_html = sexp(
|
|
'(div :class "pb-3 pl-2"'
|
|
' (div :data-peek-viewport "" :data-peek-size-px "18" :data-peek-edge "bottom" :data-peek-mask "true" :class "m-2 bg-stone-100"'
|
|
' (div :data-peek-inner "" :class "grid grid-cols-1 gap-1 snap-y snap-mandatory pr-1" :aria-label "Subcategories"'
|
|
' (raw! sl))))',
|
|
sl=sub_links,
|
|
)
|
|
else:
|
|
view_href = prefix + url_for("market.browse.browse_top", top_slug=cat_slug) + qs
|
|
subs_html = sexp(
|
|
'(div :class "pb-3 pl-2"'
|
|
' (a :class "px-2 py-1 rounded hover:bg-stone-100 block"'
|
|
' :href vh :hx-get vh :hx-target "#main-panel"'
|
|
' :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
|
|
' "View all"))',
|
|
vh=view_href, hs=hx_select,
|
|
)
|
|
|
|
items += sexp(
|
|
'(details :class "group/cat py-1" :open op'
|
|
' (raw! sh) (raw! subh))',
|
|
op=cat_active or None, sh=summary_html, subh=subs_html,
|
|
)
|
|
|
|
return sexp(
|
|
'(div :class "px-4 py-2" (div :class "divide-y" (raw! items)))',
|
|
items=items,
|
|
)
|
|
|
|
|
|
# ---------------------------------------------------------------------------
|
|
# Product card (browse grid item)
|
|
# ---------------------------------------------------------------------------
|
|
|
|
def _product_card_html(p: dict, ctx: dict) -> str:
|
|
"""Render a single product card for browse grid."""
|
|
from quart import url_for
|
|
from shared.browser.app.csrf import generate_csrf_token
|
|
from shared.utils import route_prefix
|
|
|
|
prefix = route_prefix()
|
|
slug = p.get("slug", "")
|
|
item_href = prefix + url_for("market.browse.product.product_detail", product_slug=slug)
|
|
hx_select = ctx.get("hx_select_search", "#main-panel")
|
|
asset_url_fn = ctx.get("asset_url")
|
|
cart = ctx.get("cart", [])
|
|
selected_brands = ctx.get("selected_brands", [])
|
|
selected_stickers = ctx.get("selected_stickers", [])
|
|
search = ctx.get("search", "")
|
|
user = ctx.get("user")
|
|
csrf = generate_csrf_token()
|
|
cart_action = url_for("market.browse.product.cart", product_slug=slug)
|
|
|
|
# Like button overlay
|
|
like_html = ""
|
|
if user:
|
|
liked = p.get("is_liked", False)
|
|
like_html = _like_button_html(slug, liked, csrf, ctx)
|
|
|
|
# Image
|
|
image = p.get("image")
|
|
labels = p.get("labels", [])
|
|
brand = p.get("brand", "")
|
|
brand_highlight = " bg-yellow-200" if brand in selected_brands else ""
|
|
|
|
if image:
|
|
labels_html = ""
|
|
if callable(asset_url_fn):
|
|
for l in labels:
|
|
labels_html += sexp(
|
|
'(img :src src :alt ""'
|
|
' :class "pointer-events-none absolute inset-0 w-full h-full object-contain object-top")',
|
|
src=asset_url_fn("labels/" + l + ".svg"),
|
|
)
|
|
img_html = sexp(
|
|
'(div :class "w-full aspect-square bg-stone-100 relative"'
|
|
' (figure :class "inline-block w-full h-full"'
|
|
' (div :class "relative w-full h-full"'
|
|
' (img :src im :alt "no image" :class "absolute inset-0 w-full h-full object-contain object-top" :loading "lazy" :decoding "async" :fetchpriority "low")'
|
|
' (raw! lh))'
|
|
' (figcaption :class (str "mt-2 text-sm text-center" bh " text-stone-600") br)))',
|
|
im=image, lh=labels_html, bh=brand_highlight, br=brand,
|
|
)
|
|
else:
|
|
labels_list = ""
|
|
for l in labels:
|
|
labels_list += sexp('(li l)', l=l)
|
|
img_html = sexp(
|
|
'(div :class "w-full aspect-square bg-stone-100 relative"'
|
|
' (div :class "p-2 flex flex-col items-center justify-center gap-2 text-red-500 h-full relative"'
|
|
' (div :class "text-stone-400 text-xs" "No image")'
|
|
' (ul :class "flex flex-row gap-1" (raw! ll))'
|
|
' (div :class "text-stone-900 text-center line-clamp-3 break-words [overflow-wrap:anywhere]" br)))',
|
|
ll=labels_list, br=brand,
|
|
)
|
|
|
|
price_html = _card_price_html(p)
|
|
|
|
# Cart button
|
|
quantity = sum(ci.quantity for ci in cart if ci.product.slug == slug) if cart else 0
|
|
cart_url_fn = ctx.get("cart_url")
|
|
add_html = _cart_add_html(slug, quantity, cart_action, csrf, cart_url_fn)
|
|
|
|
# Stickers
|
|
stickers = p.get("stickers", [])
|
|
stickers_html = ""
|
|
if stickers and callable(asset_url_fn):
|
|
sticker_items = ""
|
|
for s in stickers:
|
|
found = s in selected_stickers
|
|
src = asset_url_fn(f"stickers/{s}.svg")
|
|
ring = " ring-2 ring-emerald-500 rounded" if found else ""
|
|
sticker_items += sexp(
|
|
'(img :src src :alt sn :class (str "w-6 h-6" ring))',
|
|
src=src, sn=s, ring=ring,
|
|
)
|
|
stickers_html = sexp(
|
|
'(div :class "flex flex-row justify-center gap-2 p-2" (raw! si))',
|
|
si=sticker_items,
|
|
)
|
|
|
|
# Title with search highlight
|
|
title = p.get("title", "")
|
|
if search and search.lower() in title.lower():
|
|
idx = title.lower().index(search.lower())
|
|
highlighted = sexp(
|
|
'(<> pre (mark mid) post)',
|
|
pre=title[:idx], mid=title[idx:idx+len(search)], post=title[idx+len(search):],
|
|
)
|
|
else:
|
|
highlighted = sexp('(<> t)', t=title)
|
|
|
|
return sexp(
|
|
'(div :class "flex flex-col rounded-xl bg-white shadow hover:shadow-md transition overflow-hidden relative"'
|
|
' (raw! lk)'
|
|
' (a :href ih :hx-get ih :hx-target "#main-panel"'
|
|
' :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
|
|
' (raw! imh) (raw! ph))'
|
|
' (div :class "flex justify-center" (raw! ah))'
|
|
' (a :href ih :hx-get ih :hx-target "#main-panel"'
|
|
' :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
|
|
' (raw! sth)'
|
|
' (div :class "text-sm font-medium text-stone-800 text-center line-clamp-3 break-words [overflow-wrap:anywhere]"'
|
|
' (raw! hl))))',
|
|
lk=like_html, ih=item_href, hs=hx_select,
|
|
imh=img_html, ph=price_html, ah=add_html,
|
|
sth=stickers_html, hl=highlighted,
|
|
)
|
|
|
|
|
|
def _like_button_html(slug: str, liked: bool, csrf: str, ctx: dict) -> str:
|
|
"""Render the like/unlike heart button overlay."""
|
|
from quart import url_for
|
|
|
|
action = url_for("market.browse.product.like_toggle", product_slug=slug)
|
|
icon_cls = "fa-solid fa-heart text-red-500" if liked else "fa-regular fa-heart text-stone-400"
|
|
return sexp(
|
|
'(div :class "absolute top-2 right-2 z-10 text-6xl md:text-xl"'
|
|
' (form :id fid :action act :method "post"'
|
|
' :hx-post act :hx-target (str "#like-" slug) :hx-swap "outerHTML"'
|
|
' (input :type "hidden" :name "csrf_token" :value csrf)'
|
|
' (button :type "submit" :class "cursor-pointer"'
|
|
' (i :class ic :aria-hidden "true"))))',
|
|
fid=f"like-{slug}", act=action, slug=slug, csrf=csrf, ic=icon_cls,
|
|
)
|
|
|
|
|
|
# ---------------------------------------------------------------------------
|
|
# Product cards (pagination fragment)
|
|
# ---------------------------------------------------------------------------
|
|
|
|
_MOBILE_SENTINEL_HS = (
|
|
"init\n"
|
|
" if not me.dataset.retryMs then set me.dataset.retryMs to 1000 end\n"
|
|
" if window.matchMedia('(min-width: 768px)').matches then set @hx-disabled to '' end\n"
|
|
"on resize from window\n"
|
|
" if window.matchMedia('(min-width: 768px)').matches then set @hx-disabled to '' else remove @hx-disabled end\n"
|
|
"on htmx:beforeRequest\n"
|
|
" if window.matchMedia('(min-width: 768px)').matches then halt end\n"
|
|
" add .hidden to .js-neterr in me\n"
|
|
" remove .hidden from .js-loading in me\n"
|
|
" remove .opacity-100 from me\n"
|
|
" add .opacity-0 to me\n"
|
|
"def backoff()\n"
|
|
" set ms to me.dataset.retryMs\n"
|
|
" if ms > 30000 then set ms to 30000 end\n"
|
|
" add .hidden to .js-loading in me\n"
|
|
" remove .hidden from .js-neterr in me\n"
|
|
" remove .opacity-0 from me\n"
|
|
" add .opacity-100 to me\n"
|
|
" wait ms ms\n"
|
|
" trigger sentinelmobile:retry\n"
|
|
" set ms to ms * 2\n"
|
|
" if ms > 30000 then set ms to 30000 end\n"
|
|
" set me.dataset.retryMs to ms\n"
|
|
"end\n"
|
|
"on htmx:sendError call backoff()\n"
|
|
"on htmx:responseError call backoff()\n"
|
|
"on htmx:timeout call backoff()"
|
|
)
|
|
|
|
_DESKTOP_SENTINEL_HS = (
|
|
"init\n"
|
|
" if not me.dataset.retryMs then set me.dataset.retryMs to 1000 end\n"
|
|
"on htmx:beforeRequest(event)\n"
|
|
" add .hidden to .js-neterr in me\n"
|
|
" remove .hidden from .js-loading in me\n"
|
|
" remove .opacity-100 from me\n"
|
|
" add .opacity-0 to me\n"
|
|
" set trig to null\n"
|
|
" if event.detail and event.detail.triggeringEvent then set trig to event.detail.triggeringEvent end\n"
|
|
" if trig and trig.type is 'intersect'\n"
|
|
" set scroller to the closest .js-grid-viewport\n"
|
|
" if scroller is null then halt end\n"
|
|
" if scroller.scrollTop < 20 then halt end\n"
|
|
" end\n"
|
|
"def backoff()\n"
|
|
" set ms to me.dataset.retryMs\n"
|
|
" if ms > 30000 then set ms to 30000 end\n"
|
|
" add .hidden to .js-loading in me\n"
|
|
" remove .hidden from .js-neterr in me\n"
|
|
" remove .opacity-0 from me\n"
|
|
" add .opacity-100 to me\n"
|
|
" wait ms ms\n"
|
|
" trigger sentinel:retry\n"
|
|
" set ms to ms * 2\n"
|
|
" if ms > 30000 then set ms to 30000 end\n"
|
|
" set me.dataset.retryMs to ms\n"
|
|
"end\n"
|
|
"on htmx:sendError call backoff()\n"
|
|
"on htmx:responseError call backoff()\n"
|
|
"on htmx:timeout call backoff()"
|
|
)
|
|
|
|
|
|
def _product_cards_html(ctx: dict) -> str:
|
|
"""Render product cards with infinite scroll sentinels."""
|
|
from shared.utils import route_prefix
|
|
|
|
prefix = route_prefix()
|
|
products = ctx.get("products", [])
|
|
page = ctx.get("page", 1)
|
|
total_pages = ctx.get("total_pages", 1)
|
|
current_local_href = ctx.get("current_local_href", "/")
|
|
qs_fn = ctx.get("qs_filter")
|
|
|
|
parts = [_product_card_html(p, ctx) for p in products]
|
|
|
|
if page < total_pages:
|
|
# Build next page URL
|
|
if callable(qs_fn):
|
|
next_qs = qs_fn({"page": page + 1})
|
|
else:
|
|
next_qs = f"?page={page + 1}"
|
|
next_url = prefix + current_local_href + next_qs
|
|
|
|
# Mobile sentinel
|
|
parts.append(sexp(
|
|
'(div :id mid'
|
|
' :class "block md:hidden h-[60vh] opacity-0 pointer-events-none js-mobile-sentinel"'
|
|
' :hx-get nu :hx-trigger "intersect once delay:250ms, sentinelmobile:retry"'
|
|
' :hx-swap "outerHTML"'
|
|
' :_ mhs'
|
|
' :role "status" :aria-live "polite" :aria-hidden "true"'
|
|
' (div :class "js-loading text-center text-xs text-stone-400" "loading...")'
|
|
' (div :class "js-neterr hidden text-center text-xs text-stone-400" "Retrying..."))',
|
|
mid=f"sentinel-{page}-m", nu=next_url, mhs=_MOBILE_SENTINEL_HS,
|
|
))
|
|
|
|
# Desktop sentinel
|
|
parts.append(sexp(
|
|
'(div :id did'
|
|
' :class "hidden md:block h-4 opacity-0 pointer-events-none"'
|
|
' :hx-get nu :hx-trigger "intersect once delay:250ms, sentinel:retry"'
|
|
' :hx-swap "outerHTML"'
|
|
' :_ dhs'
|
|
' :role "status" :aria-live "polite" :aria-hidden "true"'
|
|
' (div :class "js-loading text-center text-xs text-stone-400" "loading...")'
|
|
' (div :class "js-neterr hidden text-center text-xs text-stone-400" "Retrying..."))',
|
|
did=f"sentinel-{page}-d", nu=next_url, dhs=_DESKTOP_SENTINEL_HS,
|
|
))
|
|
else:
|
|
parts.append(sexp(
|
|
'(div :class "col-span-full mt-4 text-center text-xs text-stone-400" "End of results")',
|
|
))
|
|
|
|
return "".join(parts)
|
|
|
|
|
|
# ---------------------------------------------------------------------------
|
|
# Browse filter panels (mobile + desktop)
|
|
# ---------------------------------------------------------------------------
|
|
|
|
def _desktop_filter_html(ctx: dict) -> str:
|
|
"""Build the desktop aside filter panel (search, category, sort, like, labels, stickers, brands)."""
|
|
from quart import url_for
|
|
from shared.utils import route_prefix
|
|
|
|
prefix = route_prefix()
|
|
category_label = ctx.get("category_label", "")
|
|
sort_options = ctx.get("sort_options", [])
|
|
sort = ctx.get("sort", "")
|
|
labels = ctx.get("labels", [])
|
|
selected_labels = ctx.get("selected_labels", [])
|
|
stickers = ctx.get("stickers", [])
|
|
selected_stickers = ctx.get("selected_stickers", [])
|
|
brands = ctx.get("brands", [])
|
|
selected_brands = ctx.get("selected_brands", [])
|
|
liked = ctx.get("liked", False)
|
|
liked_count = ctx.get("liked_count", 0)
|
|
subs_local = ctx.get("subs_local", [])
|
|
top_local_href = ctx.get("top_local_href", "")
|
|
sub_slug = ctx.get("sub_slug", "")
|
|
|
|
# Search
|
|
search_html = search_desktop_html(ctx)
|
|
|
|
# Category summary + sort + like + labels + stickers
|
|
cat_inner = sexp(
|
|
'(div :class "mb-4" (div :class "text-2xl uppercase tracking-wide text-black-500" cl))',
|
|
cl=category_label,
|
|
)
|
|
|
|
if sort_options:
|
|
cat_inner += _sort_stickers_html(sort_options, sort, ctx)
|
|
|
|
like_labels = _like_filter_html(liked, liked_count, ctx)
|
|
if labels:
|
|
like_labels += _labels_filter_html(labels, selected_labels, ctx, prefix="nav-labels")
|
|
cat_inner += sexp(
|
|
'(nav :aria-label "like" :class "flex flex-row justify-center w-full p-0 m-0 border bg-white shadow-sm rounded-xl gap-1"'
|
|
' (raw! ll))',
|
|
ll=like_labels,
|
|
)
|
|
|
|
if stickers:
|
|
cat_inner += _stickers_filter_html(stickers, selected_stickers, ctx)
|
|
|
|
if subs_local and top_local_href:
|
|
cat_inner += _subcategory_selector_html(subs_local, top_local_href, sub_slug, ctx)
|
|
|
|
cat_summary = sexp(
|
|
'(div :id "category-summary-desktop" :hxx-swap-oob "outerHTML" (raw! ci))',
|
|
ci=cat_inner,
|
|
)
|
|
|
|
# Brand filter
|
|
brand_inner = ""
|
|
if brands:
|
|
brand_inner = _brand_filter_html(brands, selected_brands, ctx)
|
|
brand_summary = sexp(
|
|
'(div :id "filter-summary-desktop" :hxx-swap-oob "outerHTML" (raw! bi))',
|
|
bi=brand_inner,
|
|
)
|
|
|
|
return search_html + cat_summary + brand_summary
|
|
|
|
|
|
def _mobile_filter_summary_html(ctx: dict) -> str:
|
|
"""Build mobile filter summary (collapsible bar showing active filters)."""
|
|
asset_url_fn = ctx.get("asset_url")
|
|
sort = ctx.get("sort", "")
|
|
sort_options = ctx.get("sort_options", [])
|
|
liked = ctx.get("liked", False)
|
|
liked_count = ctx.get("liked_count", 0)
|
|
selected_labels = ctx.get("selected_labels", [])
|
|
selected_stickers = ctx.get("selected_stickers", [])
|
|
selected_brands = ctx.get("selected_brands", [])
|
|
labels = ctx.get("labels", [])
|
|
stickers = ctx.get("stickers", [])
|
|
brands = ctx.get("brands", [])
|
|
|
|
# Search bar
|
|
search_bar = search_mobile_html(ctx)
|
|
|
|
# Summary chips showing active filters
|
|
chips = ""
|
|
|
|
if sort and sort_options:
|
|
for k, l, i in sort_options:
|
|
if k == sort and callable(asset_url_fn):
|
|
chips += sexp(
|
|
'(ul :class "relative inline-flex items-center justify-center gap-2"'
|
|
' (li :role "listitem" (img :src src :alt lb :class "w-10 h-10")))',
|
|
src=asset_url_fn(i), lb=l,
|
|
)
|
|
if liked:
|
|
liked_inner = sexp(
|
|
'(i :aria-hidden "true" :class "fa-solid fa-heart text-red-500 text-[40px] leading-none")',
|
|
)
|
|
if liked_count is not None:
|
|
cls = "text-[10px] text-stone-500" if liked_count != 0 else "text-md text-red-500 font-bold"
|
|
liked_inner += sexp(
|
|
'(div :class (str cls " mt-1 leading-none tabular-nums") lc)',
|
|
cls=cls, lc=str(liked_count),
|
|
)
|
|
chips += sexp(
|
|
'(div :class "flex flex-col items-center gap-1 pb-1" (raw! li))',
|
|
li=liked_inner,
|
|
)
|
|
|
|
# Selected labels
|
|
if selected_labels:
|
|
label_items = ""
|
|
for sl in selected_labels:
|
|
for lb in labels:
|
|
if lb.get("name") == sl and callable(asset_url_fn):
|
|
li_inner = sexp(
|
|
'(img :src src :alt sn :class "w-10 h-10")',
|
|
src=asset_url_fn("nav-labels/" + sl + ".svg"), sn=sl,
|
|
)
|
|
if lb.get("count") is not None:
|
|
cls = "text-[10px] text-stone-500" if lb["count"] != 0 else "text-md text-red-500 font-bold"
|
|
li_inner += sexp(
|
|
'(div :class (str cls " mt-1 leading-none tabular-nums") ct)',
|
|
cls=cls, ct=str(lb["count"]),
|
|
)
|
|
label_items += sexp(
|
|
'(li :role "listitem" :class "flex flex-col items-center gap-1 pb-1" (raw! li))',
|
|
li=li_inner,
|
|
)
|
|
chips += sexp(
|
|
'(ul :class "relative inline-flex items-center justify-center gap-2" (raw! li))',
|
|
li=label_items,
|
|
)
|
|
|
|
# Selected stickers
|
|
if selected_stickers:
|
|
sticker_items = ""
|
|
for ss in selected_stickers:
|
|
for st in stickers:
|
|
if st.get("name") == ss and callable(asset_url_fn):
|
|
si_inner = sexp(
|
|
'(img :src src :alt sn :class "w-10 h-10")',
|
|
src=asset_url_fn("stickers/" + ss + ".svg"), sn=ss,
|
|
)
|
|
if st.get("count") is not None:
|
|
cls = "text-[10px] text-stone-500" if st["count"] != 0 else "text-md text-red-500 font-bold"
|
|
si_inner += sexp(
|
|
'(div :class (str cls " mt-1 leading-none tabular-nums") ct)',
|
|
cls=cls, ct=str(st["count"]),
|
|
)
|
|
sticker_items += sexp(
|
|
'(li :role "listitem" :class "flex flex-col items-center gap-1 pb-1" (raw! si))',
|
|
si=si_inner,
|
|
)
|
|
chips += sexp(
|
|
'(ul :class "relative inline-flex items-center justify-center gap-2" (raw! si))',
|
|
si=sticker_items,
|
|
)
|
|
|
|
# Selected brands
|
|
if selected_brands:
|
|
brand_items = ""
|
|
for b in selected_brands:
|
|
count = 0
|
|
for br in brands:
|
|
if br.get("name") == b:
|
|
count = br.get("count", 0)
|
|
if count:
|
|
brand_items += sexp(
|
|
'(li :role "listitem" :class "flex flex-row items-center gap-2"'
|
|
' (div :class "text-md" bn) (div :class "text-md" ct))',
|
|
bn=b, ct=str(count),
|
|
)
|
|
else:
|
|
brand_items += sexp(
|
|
'(li :role "listitem" :class "flex flex-row items-center gap-2"'
|
|
' (div :class "text-md text-red-500" bn) (div :class "text-xl text-red-500" "0"))',
|
|
bn=b,
|
|
)
|
|
chips += sexp('(ul (raw! bi))', bi=brand_items)
|
|
|
|
chips_html = sexp(
|
|
'(div :class "flex flex-row items-start gap-2" (raw! ch))',
|
|
ch=chips,
|
|
)
|
|
|
|
# Full mobile filter details
|
|
from shared.utils import route_prefix
|
|
prefix = route_prefix()
|
|
mobile_filter = _mobile_filter_content_html(ctx, prefix)
|
|
|
|
return sexp(
|
|
'(details :class "md:hidden group" :id "/filter"'
|
|
' (summary :class "cursor-pointer select-none" :id "filter-summary-mobile"'
|
|
' (raw! sb)'
|
|
' (div :class "col-span-12 min-w-0 grid grid-cols-1 gap-1 bg-gray-100 px-2" :role "list"'
|
|
' (raw! ch)))'
|
|
' (div :id "filter-details-mobile" :style "display:contents"'
|
|
' (raw! mf)))',
|
|
sb=search_bar, ch=chips_html, mf=mobile_filter,
|
|
)
|
|
|
|
|
|
def _mobile_filter_content_html(ctx: dict, prefix: str) -> str:
|
|
"""Build the expanded mobile filter panel contents."""
|
|
selected_labels = ctx.get("selected_labels", [])
|
|
selected_stickers = ctx.get("selected_stickers", [])
|
|
selected_brands = ctx.get("selected_brands", [])
|
|
current_local_href = ctx.get("current_local_href", "/")
|
|
hx_select = ctx.get("hx_select_search", "#main-panel")
|
|
sort_options = ctx.get("sort_options", [])
|
|
sort = ctx.get("sort", "")
|
|
liked = ctx.get("liked", False)
|
|
liked_count = ctx.get("liked_count", 0)
|
|
labels = ctx.get("labels", [])
|
|
stickers = ctx.get("stickers", [])
|
|
brands = ctx.get("brands", [])
|
|
search = ctx.get("search", "")
|
|
qs_fn = ctx.get("qs_filter")
|
|
|
|
parts = []
|
|
|
|
# Sort options
|
|
if sort_options:
|
|
parts.append(_sort_stickers_html(sort_options, sort, ctx, mobile=True))
|
|
|
|
# Clear filters button
|
|
has_filters = search or selected_labels or selected_stickers or selected_brands
|
|
if has_filters and callable(qs_fn):
|
|
clear_url = prefix + current_local_href + qs_fn({"clear_filters": True})
|
|
parts.append(sexp(
|
|
'(div :class "flex flex-row justify-center"'
|
|
' (a :href cu :hx-get cu :hx-target "#main-panel"'
|
|
' :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
|
|
' :role "button" :title "clear filters" :aria-label "clear filters"'
|
|
' :class "flex flex-col items-center justify-start p-1 rounded bg-stone-200 text-black cursor-pointer"'
|
|
' (span :class "mt-1 leading-none tabular-nums" "clear filters")))',
|
|
cu=clear_url, hs=hx_select,
|
|
))
|
|
|
|
# Like + labels row
|
|
like_labels = _like_filter_html(liked, liked_count, ctx, mobile=True)
|
|
if labels:
|
|
like_labels += _labels_filter_html(labels, selected_labels, ctx, prefix="nav-labels", mobile=True)
|
|
parts.append(sexp(
|
|
'(div :class "flex flex-row gap-2 justify-center items-center" (raw! ll))',
|
|
ll=like_labels,
|
|
))
|
|
|
|
# Stickers
|
|
if stickers:
|
|
parts.append(_stickers_filter_html(stickers, selected_stickers, ctx, mobile=True))
|
|
|
|
# Brands
|
|
if brands:
|
|
parts.append(_brand_filter_html(brands, selected_brands, ctx, mobile=True))
|
|
|
|
return "".join(parts)
|
|
|
|
|
|
def _sort_stickers_html(sort_options: list, current_sort: str, ctx: dict, mobile: bool = False) -> str:
|
|
"""Render sort option stickers."""
|
|
asset_url_fn = ctx.get("asset_url")
|
|
current_local_href = ctx.get("current_local_href", "/")
|
|
hx_select = ctx.get("hx_select_search", "#main-panel")
|
|
qs_fn = ctx.get("qs_filter")
|
|
from shared.utils import route_prefix
|
|
prefix = route_prefix()
|
|
|
|
items = ""
|
|
for k, label, icon in sort_options:
|
|
if callable(qs_fn):
|
|
href = prefix + current_local_href + qs_fn({"sort": k})
|
|
else:
|
|
href = "#"
|
|
active = (k == current_sort)
|
|
ring = " ring-2 ring-emerald-500 rounded" if active else ""
|
|
src = asset_url_fn(icon) if callable(asset_url_fn) else icon
|
|
items += sexp(
|
|
'(a :href h :hx-get h :hx-target "#main-panel"'
|
|
' :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
|
|
' :class (str "flex flex-col items-center gap-1 p-1 cursor-pointer" ring)'
|
|
' (img :src src :alt lb :class "w-10 h-10")'
|
|
' (span :class "text-xs" lb))',
|
|
h=href, hs=hx_select, ring=ring, src=src, lb=label,
|
|
)
|
|
return sexp(
|
|
'(div :class "flex flex-row gap-2 justify-center p-1" (raw! items))',
|
|
items=items,
|
|
)
|
|
|
|
|
|
def _like_filter_html(liked: bool, liked_count: int, ctx: dict, mobile: bool = False) -> str:
|
|
"""Render the like filter toggle."""
|
|
current_local_href = ctx.get("current_local_href", "/")
|
|
hx_select = ctx.get("hx_select_search", "#main-panel")
|
|
qs_fn = ctx.get("qs_filter")
|
|
from shared.utils import route_prefix
|
|
prefix = route_prefix()
|
|
|
|
if callable(qs_fn):
|
|
href = prefix + current_local_href + qs_fn({"liked": not liked})
|
|
else:
|
|
href = "#"
|
|
|
|
icon_cls = "fa-solid fa-heart text-red-500" if liked else "fa-regular fa-heart text-stone-400"
|
|
size = "text-[40px]" if mobile else "text-2xl"
|
|
return sexp(
|
|
'(a :href h :hx-get h :hx-target "#main-panel"'
|
|
' :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
|
|
' :class "flex flex-col items-center gap-1 p-1 cursor-pointer"'
|
|
' (i :aria-hidden "true" :class (str ic " " sz " leading-none")))',
|
|
h=href, hs=hx_select, ic=icon_cls, sz=size,
|
|
)
|
|
|
|
|
|
def _labels_filter_html(labels: list, selected: list, ctx: dict, *,
|
|
prefix: str = "nav-labels", mobile: bool = False) -> str:
|
|
"""Render label filter buttons."""
|
|
asset_url_fn = ctx.get("asset_url")
|
|
current_local_href = ctx.get("current_local_href", "/")
|
|
hx_select = ctx.get("hx_select_search", "#main-panel")
|
|
qs_fn = ctx.get("qs_filter")
|
|
from shared.utils import route_prefix
|
|
rp = route_prefix()
|
|
|
|
items = ""
|
|
for lb in labels:
|
|
name = lb.get("name", "")
|
|
is_sel = name in selected
|
|
if callable(qs_fn):
|
|
new_sel = [s for s in selected if s != name] if is_sel else selected + [name]
|
|
href = rp + current_local_href + qs_fn({"labels": new_sel})
|
|
else:
|
|
href = "#"
|
|
ring = " ring-2 ring-emerald-500 rounded" if is_sel else ""
|
|
src = asset_url_fn(f"{prefix}/{name}.svg") if callable(asset_url_fn) else ""
|
|
items += sexp(
|
|
'(a :href h :hx-get h :hx-target "#main-panel"'
|
|
' :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
|
|
' :class (str "flex flex-col items-center gap-1 p-1 cursor-pointer" ring)'
|
|
' (img :src src :alt nm :class "w-10 h-10"))',
|
|
h=href, hs=hx_select, ring=ring, src=src, nm=name,
|
|
)
|
|
return items
|
|
|
|
|
|
def _stickers_filter_html(stickers: list, selected: list, ctx: dict, mobile: bool = False) -> str:
|
|
"""Render sticker filter grid."""
|
|
asset_url_fn = ctx.get("asset_url")
|
|
current_local_href = ctx.get("current_local_href", "/")
|
|
hx_select = ctx.get("hx_select_search", "#main-panel")
|
|
qs_fn = ctx.get("qs_filter")
|
|
from shared.utils import route_prefix
|
|
rp = route_prefix()
|
|
|
|
items = ""
|
|
for st in stickers:
|
|
name = st.get("name", "")
|
|
count = st.get("count", 0)
|
|
is_sel = name in selected
|
|
if callable(qs_fn):
|
|
new_sel = [s for s in selected if s != name] if is_sel else selected + [name]
|
|
href = rp + current_local_href + qs_fn({"stickers": new_sel})
|
|
else:
|
|
href = "#"
|
|
ring = " ring-2 ring-emerald-500 rounded" if is_sel else ""
|
|
src = asset_url_fn(f"stickers/{name}.svg") if callable(asset_url_fn) else ""
|
|
cls = "text-[10px] text-stone-500" if count != 0 else "text-md text-red-500 font-bold"
|
|
items += sexp(
|
|
'(a :href h :hx-get h :hx-target "#main-panel"'
|
|
' :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
|
|
' :class (str "flex flex-col items-center gap-1 p-1 cursor-pointer" ring)'
|
|
' (img :src src :alt nm :class "w-6 h-6")'
|
|
' (span :class cls ct))',
|
|
h=href, hs=hx_select, ring=ring, src=src, nm=name, cls=cls, ct=str(count),
|
|
)
|
|
return sexp(
|
|
'(div :class "flex flex-wrap gap-2 justify-center p-1" (raw! items))',
|
|
items=items,
|
|
)
|
|
|
|
|
|
def _brand_filter_html(brands: list, selected: list, ctx: dict, mobile: bool = False) -> str:
|
|
"""Render brand filter checkboxes."""
|
|
current_local_href = ctx.get("current_local_href", "/")
|
|
hx_select = ctx.get("hx_select_search", "#main-panel")
|
|
qs_fn = ctx.get("qs_filter")
|
|
from shared.utils import route_prefix
|
|
rp = route_prefix()
|
|
|
|
items = ""
|
|
for br in brands:
|
|
name = br.get("name", "")
|
|
count = br.get("count", 0)
|
|
is_sel = name in selected
|
|
if callable(qs_fn):
|
|
new_sel = [s for s in selected if s != name] if is_sel else selected + [name]
|
|
href = rp + current_local_href + qs_fn({"brands": new_sel})
|
|
else:
|
|
href = "#"
|
|
bg = " bg-yellow-200" if is_sel else ""
|
|
cls = "text-md" if count else "text-md text-red-500"
|
|
items += sexp(
|
|
'(a :href h :hx-get h :hx-target "#main-panel"'
|
|
' :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
|
|
' :class (str "flex flex-row items-center gap-2 px-2 py-1 rounded hover:bg-stone-100" bg)'
|
|
' (div :class cls nm) (div :class cls ct))',
|
|
h=href, hs=hx_select, bg=bg, cls=cls, nm=name, ct=str(count),
|
|
)
|
|
return sexp(
|
|
'(div :class "space-y-1 p-2" (raw! items))',
|
|
items=items,
|
|
)
|
|
|
|
|
|
def _subcategory_selector_html(subs: list, top_href: str, current_sub: str, ctx: dict) -> str:
|
|
"""Render subcategory vertical nav."""
|
|
hx_select = ctx.get("hx_select_search", "#main-panel")
|
|
from shared.utils import route_prefix
|
|
rp = route_prefix()
|
|
|
|
all_cls = " bg-stone-200 font-medium" if not current_sub else ""
|
|
all_full_href = rp + top_href
|
|
items = sexp(
|
|
'(a :href ah :hx-get ah :hx-target "#main-panel"'
|
|
' :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
|
|
' :class (str "block px-2 py-1 rounded hover:bg-stone-100" ac)'
|
|
' "All")',
|
|
ah=all_full_href, hs=hx_select, ac=all_cls,
|
|
)
|
|
for sub in subs:
|
|
slug = sub.get("slug", "")
|
|
name = sub.get("name", "")
|
|
href = sub.get("href", "")
|
|
active = (slug == current_sub)
|
|
active_cls = " bg-stone-200 font-medium" if active else ""
|
|
full_href = rp + href
|
|
items += sexp(
|
|
'(a :href fh :hx-get fh :hx-target "#main-panel"'
|
|
' :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
|
|
' :class (str "block px-2 py-1 rounded hover:bg-stone-100" ac)'
|
|
' nm)',
|
|
fh=full_href, hs=hx_select, ac=active_cls, nm=name,
|
|
)
|
|
return sexp(
|
|
'(div :class "mt-4 space-y-1" (raw! items))',
|
|
items=items,
|
|
)
|
|
|
|
|
|
# ---------------------------------------------------------------------------
|
|
# Product detail page content
|
|
# ---------------------------------------------------------------------------
|
|
|
|
def _product_detail_html(d: dict, ctx: dict) -> str:
|
|
"""Build product detail main panel content."""
|
|
from quart import url_for
|
|
from shared.browser.app.csrf import generate_csrf_token
|
|
|
|
asset_url_fn = ctx.get("asset_url")
|
|
user = ctx.get("user")
|
|
liked_by_current_user = ctx.get("liked_by_current_user", False)
|
|
csrf = generate_csrf_token()
|
|
|
|
images = d.get("images", [])
|
|
labels = d.get("labels", [])
|
|
stickers = d.get("stickers", [])
|
|
brand = d.get("brand", "")
|
|
slug = d.get("slug", "")
|
|
|
|
# Gallery
|
|
if images:
|
|
# Like button
|
|
like_html = ""
|
|
if user:
|
|
like_html = _like_button_html(slug, liked_by_current_user, csrf, ctx)
|
|
|
|
# Main image + labels
|
|
labels_overlay = ""
|
|
if callable(asset_url_fn):
|
|
for l in labels:
|
|
labels_overlay += sexp(
|
|
'(img :src src :alt ""'
|
|
' :class "pointer-events-none absolute inset-0 w-full h-full object-contain object-top")',
|
|
src=asset_url_fn("labels/" + l + ".svg"),
|
|
)
|
|
|
|
gallery_inner = sexp(
|
|
'(<> (raw! lk)'
|
|
' (figure :class "inline-block"'
|
|
' (div :class "relative w-full aspect-square"'
|
|
' (img :data-main-img "" :src im :alt alt'
|
|
' :class "w-full h-full object-contain object-top" :loading "eager" :decoding "async")'
|
|
' (raw! lo))'
|
|
' (figcaption :class "mt-2 text-sm text-stone-600 text-center" br)))',
|
|
lk=like_html, im=images[0], alt=d.get("title", ""),
|
|
lo=labels_overlay, br=brand,
|
|
)
|
|
|
|
# Prev/next buttons
|
|
nav_buttons = ""
|
|
if len(images) > 1:
|
|
nav_buttons = sexp(
|
|
'(<>'
|
|
' (button :type "button" :data-prev ""'
|
|
' :class "absolute left-2 top-1/2 -translate-y-1/2 z-10 grid place-items-center w-12 h-12 md:w-14 md:h-14 rounded-full bg-white/90 hover:bg-white shadow-lg text-3xl md:text-4xl"'
|
|
' :title "Previous" "\u2039")'
|
|
' (button :type "button" :data-next ""'
|
|
' :class "absolute right-2 top-1/2 -translate-y-1/2 z-10 grid place-items-center w-12 h-12 md:w-14 md:h-14 rounded-full bg-white/90 hover:bg-white shadow-lg text-3xl md:text-4xl"'
|
|
' :title "Next" "\u203a"))',
|
|
)
|
|
|
|
gallery_html = sexp(
|
|
'(div :class "relative rounded-xl overflow-hidden bg-stone-100"'
|
|
' (raw! gi) (raw! nb))',
|
|
gi=gallery_inner, nb=nav_buttons,
|
|
)
|
|
|
|
# Thumbnails
|
|
if len(images) > 1:
|
|
thumbs = ""
|
|
for i, u in enumerate(images):
|
|
thumbs += sexp(
|
|
'(<> (button :type "button" :data-thumb ""'
|
|
' :class "shrink-0 rounded-lg overflow-hidden bg-stone-100 hover:opacity-90 ring-offset-2"'
|
|
' :title ti'
|
|
' (img :src u :class "h-16 w-16 object-contain" :alt ai :loading "lazy" :decoding "async"))'
|
|
' (span :data-image-src u :class "hidden"))',
|
|
ti=f"Image {i+1}", u=u, ai=f"thumb {i+1}",
|
|
)
|
|
gallery_html += sexp(
|
|
'(div :class "flex flex-row justify-center"'
|
|
' (div :class "mt-3 flex gap-2 overflow-x-auto no-scrollbar" (raw! th)))',
|
|
th=thumbs,
|
|
)
|
|
else:
|
|
like_html = ""
|
|
if user:
|
|
like_html = _like_button_html(slug, liked_by_current_user, csrf, ctx)
|
|
gallery_html = sexp(
|
|
'(div :class "relative aspect-square bg-stone-100 rounded-xl flex items-center justify-center text-stone-400"'
|
|
' (raw! lk) "No image")',
|
|
lk=like_html,
|
|
)
|
|
|
|
# Stickers below gallery
|
|
stickers_html = ""
|
|
if stickers and callable(asset_url_fn):
|
|
sticker_items = ""
|
|
for s in stickers:
|
|
sticker_items += sexp(
|
|
'(img :src src :alt sn :class "w-10 h-10")',
|
|
src=asset_url_fn("stickers/" + s + ".svg"), sn=s,
|
|
)
|
|
stickers_html = sexp(
|
|
'(div :class "p-2 flex flex-row justify-center gap-2" (raw! si))',
|
|
si=sticker_items,
|
|
)
|
|
|
|
# Right column: prices, description, sections
|
|
pr = _set_prices(d)
|
|
details_inner = ""
|
|
|
|
# Unit price / case size extras
|
|
extras = ""
|
|
ppu = d.get("price_per_unit") or d.get("price_per_unit_raw")
|
|
if ppu:
|
|
extras += sexp(
|
|
'(div (str "Unit price: " ps))',
|
|
ps=_price_str(d.get("price_per_unit"), d.get("price_per_unit_raw"), d.get("price_per_unit_currency")),
|
|
)
|
|
if d.get("case_size_raw"):
|
|
extras += sexp('(div (str "Case size: " cs))', cs=d["case_size_raw"])
|
|
if extras:
|
|
details_inner += sexp(
|
|
'(div :class "mt-2 space-y-1 text-sm text-stone-600" (raw! ex))',
|
|
ex=extras,
|
|
)
|
|
|
|
# Description
|
|
desc_short = d.get("description_short")
|
|
desc_html = d.get("description_html")
|
|
if desc_short or desc_html:
|
|
desc_inner = ""
|
|
if desc_short:
|
|
desc_inner += sexp('(p :class "leading-relaxed text-lg" ds)', ds=desc_short)
|
|
if desc_html:
|
|
desc_inner += sexp(
|
|
'(div :class "max-w-none text-sm leading-relaxed" (raw! dh))',
|
|
dh=desc_html,
|
|
)
|
|
details_inner += sexp(
|
|
'(div :class "mt-4 text-stone-800 space-y-3" (raw! di))',
|
|
di=desc_inner,
|
|
)
|
|
|
|
# Sections (expandable)
|
|
sections = d.get("sections", [])
|
|
if sections:
|
|
sec_items = ""
|
|
for sec in sections:
|
|
sec_items += sexp(
|
|
'(details :class "group rounded-xl border bg-white shadow-sm open:shadow p-0"'
|
|
' (summary :class "cursor-pointer select-none px-4 py-3 flex items-center justify-between"'
|
|
' (span :class "font-medium" st)'
|
|
' (span :class "ml-2 text-xl transition-transform group-open:rotate-180" "\u2304"))'
|
|
' (div :class "px-4 pb-4 max-w-none text-sm leading-relaxed" (raw! sh)))',
|
|
st=sec.get("title", ""), sh=sec.get("html", ""),
|
|
)
|
|
details_inner += sexp(
|
|
'(div :class "mt-8 space-y-3" (raw! si))',
|
|
si=sec_items,
|
|
)
|
|
|
|
details_html = sexp('(div :class "md:col-span-3" (raw! di))', di=details_inner)
|
|
|
|
return sexp(
|
|
'(<> (div :class "mt-3 grid grid-cols-1 md:grid-cols-5 gap-6" :data-gallery-root ""'
|
|
' (div :class "md:col-span-2" (raw! gh) (raw! sh))'
|
|
' (raw! dh))'
|
|
' (div :class "pb-8"))',
|
|
gh=gallery_html, sh=stickers_html, dh=details_html,
|
|
)
|
|
|
|
|
|
# ---------------------------------------------------------------------------
|
|
# Product meta (OpenGraph, JSON-LD)
|
|
# ---------------------------------------------------------------------------
|
|
|
|
def _product_meta_html(d: dict, ctx: dict) -> str:
|
|
"""Build product meta tags for <head>."""
|
|
import json
|
|
from quart import request
|
|
|
|
title = d.get("title", "")
|
|
desc_source = d.get("description_short") or ""
|
|
if not desc_source and d.get("description_html"):
|
|
import re
|
|
desc_source = re.sub(r"<[^>]+>", "", d.get("description_html", ""))
|
|
description = desc_source.strip().replace("\n", " ")[:160]
|
|
image_url = d.get("image") or (d.get("images", [None])[0] if d.get("images") else None)
|
|
canonical = request.url if request else ""
|
|
brand = d.get("brand", "")
|
|
sku = d.get("sku", "")
|
|
price = d.get("special_price") or d.get("regular_price") or d.get("rrp")
|
|
price_currency = d.get("special_price_currency") or d.get("regular_price_currency") or d.get("rrp_currency")
|
|
|
|
parts = sexp('(title t)', t=title)
|
|
parts += sexp('(meta :name "description" :content desc)', desc=description)
|
|
if canonical:
|
|
parts += sexp('(link :rel "canonical" :href can)', can=canonical)
|
|
|
|
# OpenGraph
|
|
site_title = ctx.get("base_title", "")
|
|
parts += sexp('(meta :property "og:site_name" :content st)', st=site_title)
|
|
parts += sexp('(meta :property "og:type" :content "product")')
|
|
parts += sexp('(meta :property "og:title" :content t)', t=title)
|
|
parts += sexp('(meta :property "og:description" :content desc)', desc=description)
|
|
if canonical:
|
|
parts += sexp('(meta :property "og:url" :content can)', can=canonical)
|
|
if image_url:
|
|
parts += sexp('(meta :property "og:image" :content iu)', iu=image_url)
|
|
if price and price_currency:
|
|
parts += sexp('(meta :property "product:price:amount" :content pa)', pa=f"{price:.2f}")
|
|
parts += sexp('(meta :property "product:price:currency" :content pc)', pc=price_currency)
|
|
if brand:
|
|
parts += sexp('(meta :property "product:brand" :content br)', br=brand)
|
|
|
|
# Twitter
|
|
card_type = "summary_large_image" if image_url else "summary"
|
|
parts += sexp('(meta :name "twitter:card" :content ct)', ct=card_type)
|
|
parts += sexp('(meta :name "twitter:title" :content t)', t=title)
|
|
parts += sexp('(meta :name "twitter:description" :content desc)', desc=description)
|
|
if image_url:
|
|
parts += sexp('(meta :name "twitter:image" :content iu)', iu=image_url)
|
|
|
|
# JSON-LD
|
|
jsonld = {
|
|
"@context": "https://schema.org",
|
|
"@type": "Product",
|
|
"name": title,
|
|
"image": image_url,
|
|
"description": description,
|
|
"sku": sku,
|
|
"url": canonical,
|
|
}
|
|
if brand:
|
|
jsonld["brand"] = {"@type": "Brand", "name": brand}
|
|
if price and price_currency:
|
|
jsonld["offers"] = {
|
|
"@type": "Offer",
|
|
"price": price,
|
|
"priceCurrency": price_currency,
|
|
"url": canonical,
|
|
"availability": "https://schema.org/InStock",
|
|
}
|
|
parts += sexp(
|
|
'(script :type "application/ld+json" (raw! jl))',
|
|
jl=json.dumps(jsonld),
|
|
)
|
|
|
|
return parts
|
|
|
|
|
|
# ---------------------------------------------------------------------------
|
|
# Market cards (all markets / page markets)
|
|
# ---------------------------------------------------------------------------
|
|
|
|
def _market_card_html(market: Any, page_info: dict, *, show_page_badge: bool = True,
|
|
post_slug: str = "") -> str:
|
|
"""Render a single market card."""
|
|
from shared.infrastructure.urls import market_url
|
|
|
|
name = getattr(market, "name", "")
|
|
description = getattr(market, "description", "")
|
|
slug = getattr(market, "slug", "")
|
|
container_id = getattr(market, "container_id", None)
|
|
|
|
if show_page_badge and page_info:
|
|
pi = page_info.get(container_id, {})
|
|
p_slug = pi.get("slug", "")
|
|
p_title = pi.get("title", "")
|
|
market_href = market_url(f"/{p_slug}/{slug}/") if p_slug else ""
|
|
else:
|
|
p_slug = post_slug
|
|
p_title = ""
|
|
market_href = market_url(f"/{post_slug}/{slug}/") if post_slug else ""
|
|
|
|
title_html = ""
|
|
if market_href:
|
|
title_html = sexp(
|
|
'(a :href mh :class "hover:text-emerald-700"'
|
|
' (h2 :class "text-lg font-semibold text-stone-900" nm))',
|
|
mh=market_href, nm=name,
|
|
)
|
|
else:
|
|
title_html = sexp(
|
|
'(h2 :class "text-lg font-semibold text-stone-900" nm)',
|
|
nm=name,
|
|
)
|
|
|
|
desc_html = ""
|
|
if description:
|
|
desc_html = sexp(
|
|
'(p :class "text-sm text-stone-600 mt-1 line-clamp-2" d)',
|
|
d=description,
|
|
)
|
|
|
|
badge_html = ""
|
|
if show_page_badge and p_title:
|
|
badge_href = market_url(f"/{p_slug}/")
|
|
badge_html = sexp(
|
|
'(div :class "flex flex-wrap items-center gap-1.5 mt-3"'
|
|
' (a :href bh :class "inline-block px-2 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800 hover:bg-amber-200"'
|
|
' pt))',
|
|
bh=badge_href, pt=p_title,
|
|
)
|
|
|
|
return sexp(
|
|
'(article :class "rounded-xl bg-white shadow-sm border border-stone-200 p-5 flex flex-col justify-between hover:border-stone-400 transition-colors"'
|
|
' (div (raw! th) (raw! dh))'
|
|
' (raw! bh))',
|
|
th=title_html, dh=desc_html, bh=badge_html,
|
|
)
|
|
|
|
|
|
def _market_cards_html(markets: list, page_info: dict, page: int, has_more: bool,
|
|
next_url: str, *, show_page_badge: bool = True,
|
|
post_slug: str = "") -> str:
|
|
"""Render market cards with infinite scroll sentinel."""
|
|
parts = [_market_card_html(m, page_info, show_page_badge=show_page_badge,
|
|
post_slug=post_slug) for m in markets]
|
|
if has_more:
|
|
parts.append(sexp(
|
|
'(div :id sid :class "h-4 opacity-0 pointer-events-none"'
|
|
' :hx-get nu :hx-trigger "intersect once delay:250ms"'
|
|
' :hx-swap "outerHTML" :role "status" :aria-hidden "true"'
|
|
' (div :class "text-center text-xs text-stone-400" "loading..."))',
|
|
sid=f"sentinel-{page}", nu=next_url,
|
|
))
|
|
return "".join(parts)
|
|
|
|
|
|
# ---------------------------------------------------------------------------
|
|
# OOB header helpers
|
|
# ---------------------------------------------------------------------------
|
|
|
|
def _oob_header_html(parent_id: str, child_id: str, row_html: str) -> str:
|
|
"""Wrap a header row in OOB div with child placeholder."""
|
|
return sexp(
|
|
'(div :id pid :hx-swap-oob "outerHTML" :class "w-full"'
|
|
' (div :class "w-full" (raw! rh)'
|
|
' (div :id cid)))',
|
|
pid=parent_id, cid=child_id, rh=row_html,
|
|
)
|
|
|
|
|
|
# ===========================================================================
|
|
# PUBLIC API
|
|
# ===========================================================================
|
|
|
|
|
|
# ---------------------------------------------------------------------------
|
|
# All markets
|
|
# ---------------------------------------------------------------------------
|
|
|
|
def _markets_grid(cards: str) -> str:
|
|
"""Wrap market cards in a grid."""
|
|
return sexp(
|
|
'(div :class "max-w-full px-3 py-3 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4" (raw! c))',
|
|
c=cards,
|
|
)
|
|
|
|
|
|
def _no_markets_html(message: str = "No markets available") -> str:
|
|
"""Empty state for markets."""
|
|
return sexp(
|
|
'(div :class "px-3 py-12 text-center text-stone-400"'
|
|
' (i :class "fa fa-store text-4xl mb-3" :aria-hidden "true")'
|
|
' (p :class "text-lg" msg))',
|
|
msg=message,
|
|
)
|
|
|
|
|
|
async def render_all_markets_page(ctx: dict, markets: list, has_more: bool,
|
|
page_info: dict, page: int) -> str:
|
|
"""Full page: all markets listing."""
|
|
from quart import url_for
|
|
from shared.utils import route_prefix
|
|
|
|
prefix = route_prefix()
|
|
next_url = prefix + url_for("all_markets.markets_fragment", page=page + 1)
|
|
|
|
if markets:
|
|
cards = _market_cards_html(markets, page_info, page, has_more, next_url)
|
|
content = _markets_grid(cards)
|
|
else:
|
|
content = _no_markets_html()
|
|
content += sexp('(div :class "pb-8")')
|
|
|
|
hdr = root_header_html(ctx)
|
|
return full_page(ctx, header_rows_html=hdr, content_html=content)
|
|
|
|
|
|
async def render_all_markets_oob(ctx: dict, markets: list, has_more: bool,
|
|
page_info: dict, page: int) -> str:
|
|
"""OOB response: all markets listing."""
|
|
from quart import url_for
|
|
from shared.utils import route_prefix
|
|
|
|
prefix = route_prefix()
|
|
next_url = prefix + url_for("all_markets.markets_fragment", page=page + 1)
|
|
|
|
if markets:
|
|
cards = _market_cards_html(markets, page_info, page, has_more, next_url)
|
|
content = _markets_grid(cards)
|
|
else:
|
|
content = _no_markets_html()
|
|
content += sexp('(div :class "pb-8")')
|
|
|
|
oobs = root_header_html(ctx, oob=True)
|
|
return oob_page(ctx, oobs_html=oobs, content_html=content)
|
|
|
|
|
|
async def render_all_markets_cards(markets: list, has_more: bool,
|
|
page_info: dict, page: int) -> str:
|
|
"""Pagination fragment: all markets cards."""
|
|
from quart import url_for
|
|
from shared.utils import route_prefix
|
|
|
|
prefix = route_prefix()
|
|
next_url = prefix + url_for("all_markets.markets_fragment", page=page + 1)
|
|
return _market_cards_html(markets, page_info, page, has_more, next_url)
|
|
|
|
|
|
# ---------------------------------------------------------------------------
|
|
# Page markets
|
|
# ---------------------------------------------------------------------------
|
|
|
|
async def render_page_markets_page(ctx: dict, markets: list, has_more: bool,
|
|
page: int) -> str:
|
|
"""Full page: page-scoped markets listing."""
|
|
from quart import url_for
|
|
from shared.utils import route_prefix
|
|
|
|
prefix = route_prefix()
|
|
post = ctx.get("post", {})
|
|
post_slug = post.get("slug", "")
|
|
next_url = prefix + url_for("page_markets.markets_fragment", page=page + 1)
|
|
|
|
if markets:
|
|
cards = _market_cards_html(markets, {}, page, has_more, next_url,
|
|
show_page_badge=False, post_slug=post_slug)
|
|
content = _markets_grid(cards)
|
|
else:
|
|
content = _no_markets_html("No markets for this page")
|
|
content += sexp('(div :class "pb-8")')
|
|
|
|
hdr = root_header_html(ctx)
|
|
hdr += sexp(
|
|
'(div :id "root-header-child" :class "w-full" (raw! ph))',
|
|
ph=_post_header_html(ctx),
|
|
)
|
|
return full_page(ctx, header_rows_html=hdr, content_html=content)
|
|
|
|
|
|
async def render_page_markets_oob(ctx: dict, markets: list, has_more: bool,
|
|
page: int) -> str:
|
|
"""OOB response: page-scoped markets."""
|
|
from quart import url_for
|
|
from shared.utils import route_prefix
|
|
|
|
prefix = route_prefix()
|
|
post = ctx.get("post", {})
|
|
post_slug = post.get("slug", "")
|
|
next_url = prefix + url_for("page_markets.markets_fragment", page=page + 1)
|
|
|
|
if markets:
|
|
cards = _market_cards_html(markets, {}, page, has_more, next_url,
|
|
show_page_badge=False, post_slug=post_slug)
|
|
content = _markets_grid(cards)
|
|
else:
|
|
content = _no_markets_html("No markets for this page")
|
|
content += sexp('(div :class "pb-8")')
|
|
|
|
oobs = _oob_header_html("post-header-child", "market-header-child", "")
|
|
oobs += _post_header_html(ctx, oob=True)
|
|
return oob_page(ctx, oobs_html=oobs, content_html=content)
|
|
|
|
|
|
async def render_page_markets_cards(markets: list, has_more: bool,
|
|
page: int, post_slug: str) -> str:
|
|
"""Pagination fragment: page-scoped markets cards."""
|
|
from quart import url_for
|
|
from shared.utils import route_prefix
|
|
|
|
prefix = route_prefix()
|
|
next_url = prefix + url_for("page_markets.markets_fragment", page=page + 1)
|
|
return _market_cards_html(markets, {}, page, has_more, next_url,
|
|
show_page_badge=False, post_slug=post_slug)
|
|
|
|
|
|
# ---------------------------------------------------------------------------
|
|
# Market landing page
|
|
# ---------------------------------------------------------------------------
|
|
|
|
async def render_market_home_page(ctx: dict) -> str:
|
|
"""Full page: market landing page (post content)."""
|
|
post = ctx.get("post") or {}
|
|
content = _market_landing_content(post)
|
|
|
|
hdr = root_header_html(ctx)
|
|
child = _post_header_html(ctx) + _market_header_html(ctx)
|
|
hdr += sexp(
|
|
'(div :id "root-header-child" :class "w-full" (raw! h))',
|
|
h=child,
|
|
)
|
|
menu = _mobile_nav_panel_html(ctx)
|
|
return full_page(ctx, header_rows_html=hdr, content_html=content, menu_html=menu)
|
|
|
|
|
|
async def render_market_home_oob(ctx: dict) -> str:
|
|
"""OOB response: market landing page."""
|
|
post = ctx.get("post") or {}
|
|
content = _market_landing_content(post)
|
|
|
|
oobs = _oob_header_html("post-header-child", "market-header-child",
|
|
_market_header_html(ctx))
|
|
oobs += _post_header_html(ctx, oob=True)
|
|
menu = _mobile_nav_panel_html(ctx)
|
|
return oob_page(ctx, oobs_html=oobs, content_html=content, menu_html=menu)
|
|
|
|
|
|
def _market_landing_content(post: dict) -> str:
|
|
"""Build market landing page content (excerpt + feature image + html)."""
|
|
inner = ""
|
|
if post.get("custom_excerpt"):
|
|
inner += sexp(
|
|
'(div :class "w-full text-center italic text-3xl p-2" ce)',
|
|
ce=post["custom_excerpt"],
|
|
)
|
|
if post.get("feature_image"):
|
|
inner += sexp(
|
|
'(div :class "mb-3 flex justify-center"'
|
|
' (img :src fi :alt "" :class "rounded-lg w-full md:w-3/4 object-cover"))',
|
|
fi=post["feature_image"],
|
|
)
|
|
if post.get("html"):
|
|
inner += sexp(
|
|
'(div :class "blog-content p-2" (raw! h))',
|
|
h=post["html"],
|
|
)
|
|
return sexp(
|
|
'(<> (article :class "relative w-full" (raw! inner)) (div :class "pb-8"))',
|
|
inner=inner,
|
|
)
|
|
|
|
|
|
# ---------------------------------------------------------------------------
|
|
# Browse page
|
|
# ---------------------------------------------------------------------------
|
|
|
|
def _product_grid(cards_html: str) -> str:
|
|
"""Wrap product cards in a grid."""
|
|
return sexp(
|
|
'(<> (div :class "grid grid-cols-1 sm:grid-cols-3 md:grid-cols-6 gap-3" (raw! c)) (div :class "pb-8"))',
|
|
c=cards_html,
|
|
)
|
|
|
|
|
|
async def render_browse_page(ctx: dict) -> str:
|
|
"""Full page: product browse with filters."""
|
|
cards_html = _product_cards_html(ctx)
|
|
content = _product_grid(cards_html)
|
|
|
|
hdr = root_header_html(ctx)
|
|
child = _post_header_html(ctx) + _market_header_html(ctx)
|
|
hdr += sexp(
|
|
'(div :id "root-header-child" :class "w-full" (raw! h))',
|
|
h=child,
|
|
)
|
|
menu = _mobile_nav_panel_html(ctx)
|
|
filter_html = _mobile_filter_summary_html(ctx)
|
|
aside_html = _desktop_filter_html(ctx)
|
|
|
|
return full_page(ctx, header_rows_html=hdr, content_html=content,
|
|
menu_html=menu, filter_html=filter_html, aside_html=aside_html)
|
|
|
|
|
|
async def render_browse_oob(ctx: dict) -> str:
|
|
"""OOB response: product browse."""
|
|
cards_html = _product_cards_html(ctx)
|
|
content = _product_grid(cards_html)
|
|
|
|
oobs = _oob_header_html("post-header-child", "market-header-child",
|
|
_market_header_html(ctx))
|
|
oobs += _post_header_html(ctx, oob=True)
|
|
menu = _mobile_nav_panel_html(ctx)
|
|
filter_html = _mobile_filter_summary_html(ctx)
|
|
aside_html = _desktop_filter_html(ctx)
|
|
|
|
return oob_page(ctx, oobs_html=oobs, content_html=content,
|
|
menu_html=menu, filter_html=filter_html, aside_html=aside_html)
|
|
|
|
|
|
async def render_browse_cards(ctx: dict) -> str:
|
|
"""Pagination fragment: product cards only."""
|
|
return _product_cards_html(ctx)
|
|
|
|
|
|
# ---------------------------------------------------------------------------
|
|
# Product detail
|
|
# ---------------------------------------------------------------------------
|
|
|
|
async def render_product_page(ctx: dict, d: dict) -> str:
|
|
"""Full page: product detail."""
|
|
content = _product_detail_html(d, ctx)
|
|
meta = _product_meta_html(d, ctx)
|
|
|
|
hdr = root_header_html(ctx)
|
|
child = _post_header_html(ctx) + _market_header_html(ctx) + _product_header_html(ctx, d)
|
|
hdr += sexp(
|
|
'(div :id "root-header-child" :class "w-full" (raw! h))',
|
|
h=child,
|
|
)
|
|
return full_page(ctx, header_rows_html=hdr, content_html=content, meta_html=meta)
|
|
|
|
|
|
async def render_product_oob(ctx: dict, d: dict) -> str:
|
|
"""OOB response: product detail."""
|
|
content = _product_detail_html(d, ctx)
|
|
|
|
oobs = _market_header_html(ctx, oob=True)
|
|
oobs += _oob_header_html("market-header-child", "product-header-child",
|
|
_product_header_html(ctx, d))
|
|
menu = _mobile_nav_panel_html(ctx)
|
|
return oob_page(ctx, oobs_html=oobs, content_html=content, menu_html=menu)
|
|
|
|
|
|
# ---------------------------------------------------------------------------
|
|
# Product admin
|
|
# ---------------------------------------------------------------------------
|
|
|
|
async def render_product_admin_page(ctx: dict, d: dict) -> str:
|
|
"""Full page: product admin."""
|
|
content = _product_detail_html(d, ctx)
|
|
|
|
hdr = root_header_html(ctx)
|
|
child = (_post_header_html(ctx) + _market_header_html(ctx)
|
|
+ _product_header_html(ctx, d) + _product_admin_header_html(ctx, d))
|
|
hdr += sexp(
|
|
'(div :id "root-header-child" :class "w-full" (raw! h))',
|
|
h=child,
|
|
)
|
|
return full_page(ctx, header_rows_html=hdr, content_html=content)
|
|
|
|
|
|
async def render_product_admin_oob(ctx: dict, d: dict) -> str:
|
|
"""OOB response: product admin."""
|
|
content = _product_detail_html(d, ctx)
|
|
|
|
oobs = _product_header_html(ctx, d, oob=True)
|
|
oobs += _oob_header_html("product-header-child", "product-admin-header-child",
|
|
_product_admin_header_html(ctx, d))
|
|
return oob_page(ctx, oobs_html=oobs, content_html=content)
|
|
|
|
|
|
def _product_admin_header_html(ctx: dict, d: dict, *, oob: bool = False) -> str:
|
|
"""Build product admin header row."""
|
|
from quart import url_for
|
|
|
|
slug = d.get("slug", "")
|
|
link_href = url_for("market.browse.product.admin", product_slug=slug)
|
|
return sexp(
|
|
'(~menu-row :id "product-admin-row" :level 4'
|
|
' :link-href lh :link-label "admin!!" :icon "fa fa-cog"'
|
|
' :child-id "product-admin-header-child" :oob oob)',
|
|
lh=link_href,
|
|
oob=oob,
|
|
)
|
|
|
|
|
|
# ---------------------------------------------------------------------------
|
|
# Market admin
|
|
# ---------------------------------------------------------------------------
|
|
|
|
async def render_market_admin_page(ctx: dict) -> str:
|
|
"""Full page: market admin."""
|
|
content = "market admin"
|
|
|
|
hdr = root_header_html(ctx)
|
|
child = _post_header_html(ctx) + _market_header_html(ctx) + _market_admin_header_html(ctx)
|
|
hdr += sexp(
|
|
'(div :id "root-header-child" :class "w-full" (raw! h))',
|
|
h=child,
|
|
)
|
|
return full_page(ctx, header_rows_html=hdr, content_html=content)
|
|
|
|
|
|
async def render_market_admin_oob(ctx: dict) -> str:
|
|
"""OOB response: market admin."""
|
|
content = "market admin"
|
|
|
|
oobs = _market_header_html(ctx, oob=True)
|
|
oobs += _oob_header_html("market-header-child", "market-admin-header-child",
|
|
_market_admin_header_html(ctx))
|
|
return oob_page(ctx, oobs_html=oobs, content_html=content)
|
|
|
|
|
|
def _market_admin_header_html(ctx: dict, *, oob: bool = False) -> str:
|
|
"""Build market admin header row."""
|
|
from quart import url_for
|
|
|
|
link_href = url_for("market.admin.admin")
|
|
return sexp(
|
|
'(~menu-row :id "market-admin-row" :level 3'
|
|
' :link-href lh :link-label "admin" :icon "fa fa-cog"'
|
|
' :child-id "market-admin-header-child" :oob oob)',
|
|
lh=link_href,
|
|
oob=oob,
|
|
)
|
|
|
|
|
|
# ---------------------------------------------------------------------------
|
|
# Public API: POST handler fragment renderers
|
|
# ---------------------------------------------------------------------------
|
|
|
|
def render_like_toggle_button(slug: str, liked: bool, *,
|
|
like_url: str | None = None,
|
|
item_type: str = "product") -> str:
|
|
"""Render a standalone like toggle button for HTMX POST response.
|
|
|
|
Used by both market and blog like_toggle handlers.
|
|
"""
|
|
from shared.browser.app.csrf import generate_csrf_token
|
|
from quart import url_for
|
|
from shared.utils import host_url
|
|
|
|
csrf = generate_csrf_token()
|
|
if not like_url:
|
|
like_url = host_url(url_for("market.browse.product.like_toggle", product_slug=slug))
|
|
|
|
if liked:
|
|
colour = "text-red-600"
|
|
icon = "fa-solid fa-heart"
|
|
label = f"Unlike this {item_type}"
|
|
else:
|
|
colour = "text-stone-300"
|
|
icon = "fa-regular fa-heart"
|
|
label = f"Like this {item_type}"
|
|
|
|
return sexp(
|
|
'(button :class (str "flex items-center gap-1 " colour " hover:text-red-600 transition-colors w-[1em] h-[1em]")'
|
|
' :hx-post lu :hx-target "this" :hx-swap "outerHTML" :hx-push-url "false"'
|
|
' :hx-headers hh'
|
|
' :hx-swap-settle "0ms" :aria-label lb'
|
|
' (i :aria-hidden "true" :class ic))',
|
|
colour=colour, lu=like_url,
|
|
hh=f'{{"X-CSRFToken": "{csrf}"}}',
|
|
lb=label, ic=icon,
|
|
)
|
|
|
|
|
|
def render_cart_added_response(cart: list, item: Any, d: dict) -> str:
|
|
"""Render the HTMX response after add-to-cart.
|
|
|
|
Returns OOB fragments: cart-mini icon + product add/remove buttons + cart item row.
|
|
"""
|
|
from shared.browser.app.csrf import generate_csrf_token
|
|
from quart import url_for, g
|
|
from shared.infrastructure.urls import cart_url as _cart_url
|
|
|
|
csrf = generate_csrf_token()
|
|
slug = d.get("slug", "")
|
|
count = sum(getattr(ci, "quantity", 0) for ci in cart)
|
|
|
|
# 1. Cart mini icon OOB
|
|
if count > 0:
|
|
cart_href = _cart_url("/")
|
|
cart_mini = sexp(
|
|
'(div :id "cart-mini" :hx-swap-oob "outerHTML"'
|
|
' (a :href ch :class "relative inline-flex items-center justify-center"'
|
|
' (span :class "relative inline-flex items-center justify-center"'
|
|
' (i :class "fa-solid fa-shopping-cart text-xl" :aria-hidden "true")'
|
|
' (span :class "absolute -top-1.5 -right-2 pointer-events-none"'
|
|
' (span :class "flex items-center justify-center bg-emerald-500 text-white rounded-full min-w-[1.25rem] h-5 text-xs font-bold px-1"'
|
|
' ct)))))',
|
|
ch=cart_href, ct=str(count),
|
|
)
|
|
else:
|
|
from shared.config import config
|
|
blog_href = config().get("blog_url", "/")
|
|
logo = config().get("logo", "")
|
|
cart_mini = sexp(
|
|
'(div :id "cart-mini" :hx-swap-oob "outerHTML"'
|
|
' (a :href bh :class "relative inline-flex items-center justify-center"'
|
|
' (img :src lg :class "h-8 w-8 rounded-full object-cover border border-stone-300" :alt "")))',
|
|
bh=blog_href, lg=logo,
|
|
)
|
|
|
|
# 2. Add/remove buttons OOB
|
|
action = url_for("market.browse.product.cart", product_slug=slug)
|
|
quantity = getattr(item, "quantity", 0) if item else 0
|
|
add_html = sexp(
|
|
'(div :id aid :hx-swap-oob "outerHTML" (raw! ah))',
|
|
aid=f"cart-add-{slug}",
|
|
ah=_cart_add_html(slug, quantity, action, csrf, cart_url_fn=_cart_url),
|
|
)
|
|
|
|
return cart_mini + add_html
|