engineering/make_post_sell
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 2 Packages Wiki Activity Actions

fix: link tag chip strip to the facet left-nav (same targets)

Browse source 
The chip strip linked to ?tag=<slug> (in-place filtered shop home)
while the facet sidebar/details Categories list linked to
{tag_base}/tag/<slug> (the canonical tag detail page). Clicking the
same category in the two navs took you to two different pages with
independently-computed active states — they were never in sync.

Point the chip strip at the same targets the facet nav uses:
  - "All"      -> shop home ({{ shop_url }})  (unchanged)
  - category   -> {{ tag_base }}/tag/{{ slug }}  (was ?tag={{ slug }})
Lane "See all ->" links moved the same way for consistency.

tag_filter.js already keeps full navigation for /tag/ hrefs (it bails
on init when the chip href contains /tag/), so this needs no JS
change — chips and the left nav now land on the identical page with
the identical active highlight. Server still resolves active_tag from
both /tag/<slug> and any legacy ?tag= param, so old links keep working.

33 tests in the home-layout / chip / facet / tag-detail / lane slice
pass.
This commit is contained in:
russell@unturf.com 2026-05-16 05:33:58 -04:00
parent 2329dc8f4a
commit 48a5eb715d
No known key found for this signature in database
2 changed files with 14 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

9
make_post_sell/templates/home.j2
View file

@ -88,7 +88,10 @@
Layout 0 (flat) keeps its existing simple grid with no nav. #}
{% set show_facet_nav = request.shop.home_layout and request.shop.home_layout >= 1 %}
{# MPS-24: tag chip strip — shown on layout 1 (chips) and 2 (lanes). #}
{# MPS-24: tag chip strip — shown on layout 1 (chips) and 2 (lanes).
Chips and the facet left-nav point at the SAME targets (shop home
for "All", {tag_base}/tag/{slug} per category) so the two stay in
lock-step. tag_filter.js keeps full navigation for /tag/ hrefs. #}
{% if home_chips %}
<nav class="tag-chip-strip" data-tag-strip aria-label="Browse by category">
<a href="{{ shop_url }}"
@ -96,7 +99,7 @@
data-tag-slug=""
rel="nofollow">All</a>
{% for chip in home_chips %}
<a href="?tag={{ chip.slug }}"
<a href="{{ tag_base }}/tag/{{ chip.slug }}"
class="tag-chip{% if active_tag and active_tag.id == chip.id %} tag-chip-active{% endif %}"
data-tag-slug="{{ chip.slug }}"
rel="nofollow">{{ chip.name }}</a>
@ -121,7 +124,7 @@
<section class="tag-lane" data-tag-lane="{{ lane.tag.slug }}">
<header class="tag-lane-header">
<h2 class="type-title tag-lane-title">{{ lane.tag.name }}</h2>
<a href="?tag={{ lane.tag.slug }}" class="tag-lane-more shop-theme-link-color" rel="nofollow">See all &rarr;</a>
<a href="{{ tag_base }}/tag/{{ lane.tag.slug }}" class="tag-lane-more shop-theme-link-color" rel="nofollow">See all &rarr;</a>
</header>
{# Desktop: horizontal tile scroll (Netflix-style). Hidden <800px. #}

10
make_post_sell/templates/shop.j2
View file

@ -16,6 +16,12 @@
{% set show_facet_nav = request.shop.home_layout and request.shop.home_layout >= 1 %}
{# MPS-24: tag chip strip — shown on layout 1 (chips) and 2 (lanes). #}
{# Chip strip and the facet left-nav point at the SAME targets: the
shop home for "All" and the canonical tag detail page
({tag_base}/tag/{slug}) per category. tag_filter.js detects the
/tag/ href and keeps full navigation, so a chip and its matching
sidebar entry always land on the same page with the same active
state. #}
{% if home_chips %}
<nav class="tag-chip-strip" data-tag-strip aria-label="Browse by category">
<a href="{{ shop_url }}"
@ -23,7 +29,7 @@
data-tag-slug=""
rel="nofollow">All</a>
{% for chip in home_chips %}
<a href="?tag={{ chip.slug }}"
<a href="{{ tag_base }}/tag/{{ chip.slug }}"
class="tag-chip{% if active_tag and active_tag.id == chip.id %} tag-chip-active{% endif %}"
data-tag-slug="{{ chip.slug }}"
rel="nofollow">{{ chip.name }}</a>
@ -47,7 +53,7 @@
<section class="tag-lane" data-tag-lane="{{ lane.tag.slug }}">
<header class="tag-lane-header">
<h2 class="type-title tag-lane-title">{{ lane.tag.name }}</h2>
<a href="?tag={{ lane.tag.slug }}" class="tag-lane-more shop-theme-link-color" rel="nofollow">See all &rarr;</a>
<a href="{{ tag_base }}/tag/{{ lane.tag.slug }}" class="tag-lane-more shop-theme-link-color" rel="nofollow">See all &rarr;</a>
</header>
{# Desktop: horizontal tile scroll. Hidden <800px. #}