deemanone/padelnomics
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(affiliate): fire preview on page load so edit form shows card immediately

Browse Source 
hx-trigger="load, input from:..." fires the preview POST as soon as the page
opens, so editing an existing product shows its card without needing to
touch any field first.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Deeman
2026-02-28 21:37:35 +01:00
parent 8c4a4078f9
commit c2dfefcc1e
1 changed files with 3 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/padelnomics/admin/templates/admin/affiliate_form.html
View File

@@ -39,10 +39,10 @@ document.addEventListener('DOMContentLoaded', function() {
<div style="display:grid;grid-template-columns:1fr 380px;gap:2rem;align-items:start" class="affiliate-form-grid"> <div style="display:grid;grid-template-columns:1fr 380px;gap:2rem;align-items:start" class="affiliate-form-grid">
{# ── Left: form ── #} {# ── Left: form ── #}
{# Invisible trigger: fires preview on any input change, includes the whole form #} {# Invisible trigger: fires preview on page load + any input change #}
<div hx-post="{{ url_for('admin.affiliate_preview') }}" <div hx-post="{{ url_for('admin.affiliate_preview') }}"
hx-target="#product-preview" hx-target="#product-preview"
hx-trigger="input from:#affiliate-form delay:600ms" hx-trigger="load, input from:#affiliate-form delay:600ms"
hx-include="#affiliate-form" hx-include="#affiliate-form"
hx-push-url="false"> hx-push-url="false">
</div> </div>
@@ -204,9 +204,7 @@ document.addEventListener('DOMContentLoaded', function() {
<div style="position:sticky;top:1.5rem;"> <div style="position:sticky;top:1.5rem;">
<div class="text-xs font-semibold text-slate mb-2" style="text-transform:uppercase;letter-spacing:.06em;">Preview</div> <div class="text-xs font-semibold text-slate mb-2" style="text-transform:uppercase;letter-spacing:.06em;">Preview</div>
<div id="product-preview" style="border:1px solid #E2E8F0;border-radius:12px;padding:1rem;background:#F8FAFC;min-height:180px;"> <div id="product-preview" style="border:1px solid #E2E8F0;border-radius:12px;padding:1rem;background:#F8FAFC;min-height:180px;">
<p class="text-slate text-sm" style="text-align:center;margin-top:2rem;"> <p style="color:#94A3B8;font-size:.875rem;text-align:center;margin-top:2rem;">Loading preview…</p>
Fill in the form to see a live preview.
</p>
</div> </div>
</div> </div>