hoponhopofftickets/viator-collector/docs/superpowers/plans/2026-09-11-new-front-reskin.md

New Front Re-skin — Implementation Plan

For agentic workers: Use superpowers:executing-plans to implement task-by-task. This is a WordPress/PHP visual re-skin: tasks verify by rendering markup / inspecting output, not by pytest.

Goal: Replace the viator-collector plugin's entire front-end look with the "Hop On Hop Off" design from ../new front/, keeping all WordPress data/query logic.

Architecture: Port the mockup's markup into the plugin's PHP templates/shortcodes; port new front/css/style.css scoped under #vc-app; port the SVG icon sprite and the needed main.js interactions; ship decorative assets. Drop Lucide + noUiSlider + old CSS.

Tech Stack: PHP (WordPress), CSS (token-based), vanilla JS, Node (build-time CSS scoper only).

Spec: docs/superpowers/specs/2026-09-11-new-front-reskin-design.md

Global Constraints

• All plugin output wrapped in #vc-app; every ported CSS rule prefixed #vc-app (except :root, @keyframes steps, @font-face).
• No change to CPT/taxonomy/meta keys, importer, cron, API, or filter/query logic.
• Server-side filtering/sort/pagination retained (GET params).
• Site header/nav/footer remain theme-owned (not rendered by plugin).
• Real tour data fills all content; only decorative images ship with plugin.
• Text domain viator-collector; escape all output.

---

Phase 1 — Foundation assets

Task 1: CSS scoper + scoped stylesheet

Files: Create build/scope-css.js, assets/css/vc-design.css (generated); source ../new front/css/style.css.

• Write build/scope-css.js: brace-aware parser; prefix each selector with #vc-app except :root, keyframe steps, @font-face descriptors; map html/body/* leading tokens to #vc-app scope; leave @media/@supports wrappers, recurse into them; keep @keyframes names/steps intact.
• Run it to generate assets/css/vc-design.css.
• Verify: no rule leaks (grep that every non-:root/non-keyframe selector line contains #vc-app); :root tokens present; keyframes intact.
• Commit.

Task 2: Icon sprite + helpers

Files: Create assets/icons/sprite.svg, add helpers to includes/helpers.php.

• Extract the <symbol id="i-…"> set from new front/index.html into assets/icons/sprite.svg, plus a <defs><path id="ringPathScroll" …></defs>.
• vc_print_icon_sprite() — prints the sprite once (static guard).
• vc_icon($name, $extra_class='') — returns <svg class="icon …"><use href="#i-$name"></svg>.
• vc_ring_badge($label, $url, $variant='card') — returns the ring-badge anchor markup.
• Verify: helpers return expected strings; sprite has all icons referenced by templates.
• Commit.

Task 3: Decorative assets

Files: Create assets/img/ (copy bus-iso.png, bus-open-top.png, tower.png, ellipse-17.png, ellipse-17-2.png, hero.png, hero2.png, hero3.jpg from ../new front/assets).

• Copy the decorative images.
• Add vc_asset_url($rel) helper (returns VC_PLUGIN_URL . 'assets/' . $rel) if not present.
• Commit.

Task 4: JS interactions

Files: Create assets/js/vc-design.js; trim assets/js/vc-frontend.js.

• Port from main.js: card rails, FAQ accordion, testimonials marquee (ring-badge spin is CSS). Omit header/nav/sticky and the client-side listing filter.
• In vc-frontend.js, remove noUiSlider init; keep auto-submit + mobile filter drawer behaviors used by the listing.
• Verify: no reference to removed globals; file loads without error.
• Commit.

Task 5: Enqueue swap

Files: Modify includes/class-vc-display.php::enqueue_assets.

• Remove Lucide, noUiSlider (css+js), vc-listing.css, vc-single.css, viator-collector.css enqueues.
• Add Plus Jakarta Sans (Google Fonts), vc-design.css, vc-design.js. Print sprite via wp_footer/inline on our pages.
• Keep gating (single/archive/shortcode). Bump VC_VERSION.
• Verify: on a tour page only new assets load; Lucide/noUiSlider absent.
• Commit.

Phase 2 — Tour card (shared)

Task 6: card-tour.php → dcard

Files: Modify templates/card-tour.php.

• Rewrite to emit article.dcard (variants: dcard--wide for listing li.titem, plain dcard for homepage li rail). Slots: .dcard__img (vc_tour_image_html), .rating (_vc_rating + vc_icon('star')), .dcard__title (permalinked), .dcard__meta (Start at → vc_money, Duration → vc_duration_human), vc_ring_badge('BOOK NOW', permalink), badge via vc_card_badge, .titem__desc (excerpt) for listing variant.
• Accept $variant arg; default wide.
• Verify: renders both variants with real data; icons resolve.
• Commit.

Phase 3 — Listing / archive

Task 7: listing.php hero + filter bar

Files: Modify templates/listing.php.

• Replace hero + sidebar with section.hero.hero--archive + form.filters (GET). Map controls to existing params: search→vc_q, dest[], cat[], price <select>→price, duration <select>→dur[] (half/full/multi), filters__bar checks→freecancel/bestdeal/sellout, sort control→sort, Apply submit.
• Verify: submitting each control updates results via server query; active-filter chips still work (restyled).
• Commit.

Task 8: listing.php grid + results + pager

Files: Modify templates/listing.php.

• Render ul.tgrid of card-tour.php (wide); .results with server count; custom .pager/.pager__num from $vc_query->max_num_pages preserving query string; styled empty state.
• Verify: pagination navigates server pages; count correct; URLs shareable.
• Commit.

Phase 4 — Single tour

Task 9: single-viator_tour.php hero + head + facts

Files: Modify templates/single-viator_tour.php.

• section.hero-tour (primary image, kicker, destination word, tower.png figure), breadcrumb, .tour-head + .tmeta (rating/location/supplier), ul.facts (duration/max/free-cancel/category) via vc_icon.
• Verify: renders with real meta; missing fields omitted cleanly.
• Commit.

Task 10: single-viator_tour.php body blocks

Files: Modify templates/single-viator_tour.php.

• tour__blocks: Overview (the_content), Gallery (.gallery from gallery URLs), includes/excludes (.ilist + .tick), Good to know, Cancellation Policy (.policy + .statcard--yes/--no), Reviews.
• Verify: each block appears only when data present; matches mockup.
• Commit.

Task 11: single-viator_tour.php booking aside + mobile bar

Files: Modify templates/single-viator_tour.php.

• aside.tour__aside > .bookcard: From/price, Check Availability → _vc_booking_url, statcard--teal free-cancel + statcard--yes reserve-now. Restyle mobile book bar.
• Verify: CTA links to booking URL; price from meta.
• Commit.

Phase 5 — Homepage sections

Task 12: Re-skin data shortcodes to rails

Files: Modify includes/class-vc-display.php (render_section) or class-vc-sections.php; templates/card-destination.php, card-attraction.php, card-activity.php.

• viator_top_destinations/viator_top_tours → section.section + .sec-head (title, lead, See-all, .rail-nav prev/next) + ul.rail of .dcards. Attractions/activities → feature/activity section styling.
• Verify: rails scroll via vc-design.js; real terms/tours render.
• Commit.

Task 13: New static-chrome shortcodes

Files: Modify includes/class-vc-display.php (register) + create templates/section-hero.php, section-faq.php, section-testimonials.php.

• viator_hero → section.hero + form.booking (Location from viator_destination terms, Date, Seats) submitting to listing archive with filter params.
• viator_faq → section.faq accordion; content via shortcode inner content / atts (Q/A pairs).
• viator_testimonials → section.testimonials marquee; items via inner content / atts.
• Register in SHORTCODES + enqueue gating.
• Verify: shortcodes render on a Page; booking form routes to filtered listing.
• Commit.

Phase 6 — Verify & finish

Task 14: Full-page verification

• With a theme (Astra) active, load listing, single, and a homepage-shortcode Page; confirm visual match to mockup within content area; no style bleed outside #vc-app; no console errors; Lucide/noUiSlider not loaded; server filtering/pagination work.
• Update SHORTCODES.md; bump version; final commit.

Self-review notes

• Spec coverage: scoping (T1), icons/ring-badge (T2), assets (T3), JS (T4), enqueue (T5), card (T6), listing (T7–8), single (T9–11), homepage data+chrome (T12–13), acceptance (T14) — all mapped.
• Duration mismatch handled in T7 (plugin buckets). FAQ/testimonials content source resolved in T13 (inner content/atts). Footer back-to-top badge dropped (theme-owned) per spec default.