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

product edit: Tags is its own well at bottom of page (below Price History)

Browse source 
Pulled the Tags block out of the settings form entirely and made it a
standalone <section class='product-tags well2 edit-card-full'> placed
after Price History — the very last well on the page. Default explainer
(manual_tags off) reads as a pure tip about title/description-driven
categorization. Manual-mode kept the chip editor which already AJAXes to
/p/{id}/tags, so it no longer relies on the parent settings-form submit.
This commit is contained in:
russell@unturf.com 2026-06-15 20:30:00 -04:00
parent 70c3e647d1
commit c5d53c084a
No known key found for this signature in database
1 changed files with 66 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

145
make_post_sell/templates/product_edit.j2
View file

@ -546,85 +546,6 @@
<br />
{% endif %}
{# MPS-24: manual tagging is "ghost metadata" — invisible to the
humans and agents reading the page. Hidden by default
(request.manual_tags_enabled, see CLAUDE.md). Tags are derived
linguistically from the title + description instead and auto-
applied on save. Flip MPS_FEATURES_MANUAL_TAGS_ENABLED=True to
restore the manual chip editor below. #}
{% if request.manual_tags_enabled %}
{# Capability-driven: no-JS edits the comma field (persists on
"Save Settings"); product_tags.js turns it into a chip editor
that POSTs each add/remove to /p/{id}/tags. #}
<div class="product-tags-field"
data-product-tags
data-product-tags-url="/p/{{ product.id }}/tags">
<label for="tags_input">Tags</label>
{# JS-enhanced chip editor. base.j2 ships
<noscript>.js-only{display:none}</noscript>, so this stays hidden
without JS; product_tags.js drops `hidden` once it initialises. #}
<div class="product-tag-chips js-only" data-tag-chips hidden>
<ul class="tag-chip-list" data-tag-chip-list>
{% for t in request.product.tags %}
<li class="tag-chip-removable" data-tag-chip data-tag-slug="{{ t.slug }}">
<span class="tag-chip-removable-label">{{ t.name }}</span>
<button type="button" class="tag-chip-removable-x"
data-tag-remove
aria-label="Remove tag {{ t.name }}"
title="Remove tag">&times;</button>
</li>
{% endfor %}
</ul>
<div class="tag-chip-add">
<input type="text" data-tag-add-input maxlength="64"
placeholder="Add a tag, press Enter" autocomplete="off" />
<button type="button"
class="mps-button mps-button-small mps-button-primary"
data-tag-add-button>Add tag</button>
</div>
<div class="tag-chip-flash" data-tag-chip-flash aria-live="polite"></div>
</div>
{# No-JS fallback / sync target for the chip editor. #}
<input type="text" name="tags" id="tags_input"
maxlength="512"
placeholder="e.g. math, seasonal, valentines"
value="{% for t in request.product.tags %}{{ t.name }}{% if not loop.last %}, {% endif %}{% endfor %}" />
<small class="note-text">
Tags group this product on your shop's home page. Manage all tags at
<a href="/s/{{ request.shop.id }}/tags" class="shop-theme-link-color">your tag editor</a>.
</small>
</div>
{% else %}
<div class="product-tags-field">
<label>Tags</label>
<div class="well2 tag-explainer">
<p class="type-body-sm">
<b>Tags are derived from your title &amp; description</b> — not
hand-attached. Manual tags are <i>ghost metadata</i>: invisible
to the shoppers and agents actually reading the page. When you
save, this product is automatically filed into your shop's
existing categories by the words in its title and description.
</p>
<p class="type-body-sm">
Want it in a category? Say so in the title or description. To
see or create the categories themselves, visit
<a href="/s/{{ request.shop.id }}/tags" class="shop-theme-link-color">your tag editor</a>.
</p>
{% if request.product.tags|list %}
<p class="type-body-sm">
Currently filed under:
{% for t in request.product.tags %}<span class="tag-chip-removable"><span class="tag-chip-removable-label">{{ t.name }}</span></span>{% if not loop.last %} {% endif %}{% endfor %}
</p>
{% endif %}
</div>
</div>
{% endif %}
<br />
<br />
<input type="submit" name="submit" class="mps-submit" value="Save Settings" />
</form>
</section>
@ -655,6 +576,72 @@
</section>
{% endif %}
{# MPS-24: Tags well — bottom-of-page explainer. Manual tagging is
"ghost metadata" hidden by default (request.manual_tags_enabled).
Tags are derived linguistically from the title + description and
auto-applied on save. Flip MPS_FEATURES_MANUAL_TAGS_ENABLED=True to
restore the manual chip editor. #}
<section class="product-tags well2 edit-card-full">
<h3>
<span class="edit-card-icon">&#127991;&#65039;</span>
Tags
</h3>
{% if request.manual_tags_enabled %}
{# Capability-driven: with JS the chip editor POSTs each add/remove
to /p/{id}/tags via AJAX; product_tags.js drops `hidden` once it
initialises. Manual-mode no-JS edits are out-of-band (no parent
form here) — flip the kill switch only when JS is available. #}
<div class="product-tags-field"
data-product-tags
data-product-tags-url="/p/{{ product.id }}/tags">
<div class="product-tag-chips js-only" data-tag-chips hidden>
<ul class="tag-chip-list" data-tag-chip-list>
{% for t in request.product.tags %}
<li class="tag-chip-removable" data-tag-chip data-tag-slug="{{ t.slug }}">
<span class="tag-chip-removable-label">{{ t.name }}</span>
<button type="button" class="tag-chip-removable-x"
data-tag-remove
aria-label="Remove tag {{ t.name }}"
title="Remove tag">&times;</button>
</li>
{% endfor %}
</ul>
<div class="tag-chip-add">
<input type="text" data-tag-add-input maxlength="64"
placeholder="Add a tag, press Enter" autocomplete="off" />
<button type="button"
class="mps-button mps-button-small mps-button-primary"
data-tag-add-button>Add tag</button>
</div>
<div class="tag-chip-flash" data-tag-chip-flash aria-live="polite"></div>
</div>
<small class="note-text">
Tags group this product on your shop's home page. Manage all tags at
<a href="/s/{{ request.shop.id }}/tags" class="shop-theme-link-color">your tag editor</a>.
</small>
</div>
{% else %}
<p class="type-body-sm">
<b>Tags are derived from your title &amp; description</b> — not
hand-attached. Manual tags are <i>ghost metadata</i>: invisible
to the shoppers and agents actually reading the page. When you
save, this product is automatically filed into your shop's
existing categories by the words in its title and description.
</p>
<p class="type-body-sm">
Want it in a category? Say so in the title or description. To
see or create the categories themselves, visit
<a href="/s/{{ request.shop.id }}/tags" class="shop-theme-link-color">your tag editor</a>.
</p>
{% if request.product.tags|list %}
<p class="type-body-sm">
Currently filed under:
{% for t in request.product.tags %}<span class="tag-chip-removable"><span class="tag-chip-removable-label">{{ t.name }}</span></span>{% if not loop.last %} {% endif %}{% endfor %}
</p>
{% endif %}
{% endif %}
</section>
</div>
{% if request.manual_tags_enabled %}