added on local at 2026-07-01 13:48:05
| 1 | <!-- | |
| 2 | MVT slot editor for ab_tests rows with surface=page_blocks. The | |
| 3 | seller named the slots when they created the test from the Tests | |
| 4 | tab; this page surfaces one textarea per (variant, slot) pair so | |
| 5 | they can fill the actual content. On save, /mvt_slots.cgi rebuilds | |
| 6 | the variants JSON's block_overrides field per variant. | |
| 7 | --> | |
| 8 | <div class="page-shell"> | |
| 9 | ||
| 10 | <div class="mb-3" style="display:flex;align-items:center;gap:12px;flex-wrap:wrap"> | |
| 11 | <a href="/storefront.cgi#tests" class="text-secondary text-xs" style="text-decoration:none">← Back to Tests</a> | |
| 12 | </div> | |
| 13 | ||
| 14 | <div class="module mb-3"> | |
| 15 | <div class="module-head"> | |
| 16 | <div class="left"> | |
| 17 | <div class="module-icon" style="background:rgba(124,58,237,0.18);color:#c4b5fd"> | |
| 18 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z"/></svg> | |
| 19 | </div> | |
| 20 | <div> | |
| 21 | <div class="module-title">$test_name</div> | |
| 22 | <div class="module-sub"> | |
| 23 | Page: <a href="$page_edit_url" class="text-brand">$page_title ($page_slug)</a> · | |
| 24 | Slots: <code>$slot_names_csv</code> | |
| 25 | </div> | |
| 26 | </div> | |
| 27 | </div> | |
| 28 | <a href="$storefront_url" target="_blank" class="btn btn-secondary btn-sm">Preview live storefront →</a> | |
| 29 | </div> | |
| 30 | <div class="module-body"> | |
| 31 | <div class="banner info"> | |
| 32 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg> | |
| 33 | <div class="text-xs"> | |
| 34 | Paste <code style="background:var(--col-surface-3);padding:2px 6px;border-radius:4px">{{slot:NAME}}</code> tokens into your page body (via <a href="$page_edit_url" class="text-brand">Edit page</a>) wherever you want the variant content to appear. For this test those tokens are: <strong>[loop:@slot_names]<code>{{slot:$loop1.name}}</code> [/loop]</strong>. When the test is Running, every visitor sees their bucketed variant's text in place of the tokens. | |
| 35 | </div> | |
| 36 | </div> | |
| 37 | </div> | |
| 38 | </div> | |
| 39 | ||
| 40 | <form method="POST" action="/mvt_slots.cgi" id="mvt-slot-form"> | |
| 41 | <input type="hidden" name="id" value="$test_id"> | |
| 42 | ||
| 43 | [loop:@variants] | |
| 44 | <div class="module mb-3" style="background:var(--col-surface-2)"> | |
| 45 | <div class="module-head"> | |
| 46 | <div class="left"> | |
| 47 | <div style="font-family:var(--font-display);font-size:18px;color:[if:$loop1.is_control]var(--col-text)[/if][if:!$loop1.is_control]var(--col-violet-bright)[/if];font-weight:700"> | |
| 48 | $loop1.label | |
| 49 | </div> | |
| 50 | <div class="text-xs text-dim">Traffic share: $loop1.traffic_pct%</div> | |
| 51 | </div> | |
| 52 | </div> | |
| 53 | <div class="module-body" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px"> | |
| 54 | [loop:@loop1.slot_inputs] | |
| 55 | <div class="form-group" style="margin:0"> | |
| 56 | <label class="form-label"> | |
| 57 | Slot <code style="background:var(--col-surface-3);padding:1px 6px;border-radius:4px;font-size:11px">{{slot:$loop2.slot}}</code> | |
| 58 | </label> | |
| 59 | <textarea class="input" name="$loop2.field_name" rows="3" placeholder="$loop2.placeholder">$loop2.value</textarea> | |
| 60 | </div> | |
| 61 | [/loop] | |
| 62 | </div> | |
| 63 | </div> | |
| 64 | [/loop] | |
| 65 | ||
| 66 | <div class="flex gap-2 mb-3"> | |
| 67 | <button type="submit" class="btn btn-primary">Save slot values</button> | |
| 68 | <a href="/storefront.cgi#tests" class="btn btn-secondary">Cancel</a> | |
| 69 | </div> | |
| 70 | </form> | |
| 71 | ||
| 72 | </div> |