amir
7ada8860f8
Consolidate the plugin into the TourWebsite repository (its separate nested git repo has been removed). Includes the full new-design reskin: scoped design stylesheet, SVG icon sprite, rebuilt listing/single/section templates, and homepage hero/FAQ/testimonials shortcodes. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01J4hNL1PSHxXbu94SCenpKj
132 lines
8.7 KiB
Markdown
132 lines
8.7 KiB
Markdown
# 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__block`s: 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 `.dcard`s. 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.
|