Developer Proposal · familyleisure.com

Two features that will meaningfully improve conversions

A fully interactive proposal for adding a product comparison tool and a smart recommendation quiz — no third-party AI, built directly on your CS-Cart database.

0%
Of big-ticket shoppers compare products before purchasing
Conversion lift when a quiz recommendation leads to a product page
~0%
Cart abandonment reduction when on-site comparison is available
No Third-Party AI
100% CS-Cart Native Addon
🛡
Only Active Products Shown
Best-Sellers Ranked by Real Sales Data
1

Product Comparison Tool

Side-by-side comparison powered by live CS-Cart product data — spec highlighting shows customers exactly where each product wins

⬆ High Priority
$2K–$5K
Average product price — customers always research before committing
71%
Of big-ticket shoppers compare 2–4 products before purchasing
~26%
Cart abandonment reduction when comparison is available on-site

Customers leave to compare

Buyers open 4–5 browser tabs to compare hot tub specs. Most don't come back to Family Leisure.

📞

High support call volume

No compare view means customers call the store asking "what's the difference?" — wasting staff time on pre-sales questions.

🏆

Competitors already have it

Rival stores offer image-rich comparison tables. Family Leisure has no answer for customers in the "almost decided" stage.

⚖️ Compare Products
VS

🟢 Green rows = this product wins that spec  ·  In production this pulls live data from cscart_products where status = 'A'

Click any step to see the exact CS-Cart tables and filters used at that stage.

1
Admin marks product as Active click to expand ↓
CS-Cart admin sets product status. Only products with status = 'A' are eligible to appear.
CS-Cart Product Status Codes
Status CodeMeaningShown in Comparison?
AActive✅ Yes
DDisabled❌ Excluded at SQL level
HHidden❌ Excluded at SQL level
RRequires approval❌ Excluded at SQL level
2
Page loads → PHP queries CS-Cart DB for dropdown click to expand ↓
An AJAX call hits a custom PHP controller. It runs a filtered query to build the dropdown — discontinued products never reach the front-end.
Database Tables Used for Dropdown Population
cscart_products cscart_product_descriptions cscart_product_categories
SQL Filter Applied
SELECT p.product_id, pd.product, p.price
FROM cscart_products p
JOIN cscart_product_descriptions pd USING (product_id)
JOIN cscart_product_categories pc USING (product_id)
WHERE p.status = 'A'
AND pc.category_id = :current_category
ORDER BY pd.product ASC
3
User selects two products → AJAX fetches full detail click to expand ↓
When the customer picks Product A and Product B, a second AJAX call fetches the complete spec data for both.
Tables Used for Full Product Detail
cscart_products cscart_product_descriptions cscart_product_prices cscart_product_features cscart_product_feature_variants cscart_images cscart_images_links
What Gets Returned per Product
DataSource Table
Product namecscart_product_descriptions
Price (incl. sale price)cscart_product_prices
Product image URLcscart_images_links
Spec rows (jets, seating, etc.)cscart_product_features + variants
4
Browser renders side-by-side card with spec diff highlighting click to expand ↓
Vanilla JavaScript builds the comparison UI, aligns spec rows, highlights which product wins each spec in green, and calculates the price difference — all in the browser, zero extra server calls.
Client-Side Logic (No AI, No Framework)
ActionMethod
Spec row alignmentMatch by feature label, render grid
Boolean spec highlighttrue vs false → green / muted
Numeric spec highlightParse number → higher = green (configurable)
Price winnerArithmetic → "Product B is $700 less"
Score summaryCount wins per side → "Product A wins 6/9 specs"

A common question: "Why not use an AI to power comparisons?" Here's the honest answer:

With a Third-Party AI

Every comparison triggers an API call to an external service. You pay per query. Response times add 1–3 seconds of latency. Your product data leaves your server. If the API goes down, the feature breaks. And the "intelligence" isn't actually smarter than your own database.

Our Approach — Code + CS-Cart DB

All logic runs on your own server against your own CS-Cart database. Zero API fees. Sub-100ms response times. Works offline / without internet access. Data never leaves your server. The comparison is always accurate because it reads directly from your live product data.

⚠️

AI Can't Know Your DB

An AI model has no live connection to your CS-Cart tables. It would work from static snapshots that go stale. It could hallucinate specs or prices. Your actual product statuses (disabled, discontinued) would not be respected in real time.

🔒

Fully Auditable & Yours

Every rule in the comparison logic is readable PHP and JavaScript code. You own it completely. No vendor lock-in. If you want to change which specs are highlighted green, it's a one-line edit — no retraining, no API changes, no waiting.

What we build

CS-Cart comparison addon

A "Compare" button on each product card. Users pick any two products and see a visual side-by-side layout with real images, live pricing from the DB, and a colour-coded spec grid. Built as a CS-Cart PHP addon — install from admin panel.

What the client gains

Faster decisions, fewer calls

Customers who compare on-site are 3× more likely to convert. The spec highlighting removes confusion instantly. Direct reduction in "which one should I get?" calls to store staff.

❌ Without this feature

Customers leave to compare on competitor sites and often don't come back. High-value sales are lost at the "almost decided" stage. Support team spends hours answering spec questions by phone instead of closing deals.

✅ With this feature

Customers stay on-site through the decision phase. Product images + spec highlighting become a closing tool — buyers see differences clearly and add to cart with confidence. Measurable uplift in conversion rate for high-ticket SKUs.

Feature 2
2

"Which product is right for me?" Quiz

Rule-based recommendation engine — no AI, just smart PHP logic querying real CS-Cart data with best-seller ranking

⬆ High Priority
68%
First-time buyers unsure which product category fits their needs
Higher conversion when a recommendation leads to a product page
↓40%
Reduction in "help me choose" support inquiries after quiz launch
😵

Choice overload

A first-time buyer doesn't know if they need a hot tub, above-ground pool, or patio setup. The site throws all products at them — they bounce.

🛒

Lost at browse stage

Customers who feel overwhelmed leave. They're not price-sensitive — they're just lost. A guided quiz keeps them engaged and moving toward a purchase.

🏪

Online ≠ in-store

Family Leisure excels at in-store consultation. The quiz replicates that guided experience digitally — available 24/7, no staff time needed.

Find your perfect Family Leisure product

Answer 5 quick questions — we'll recommend the best fit from our live product catalogue.

Step 1 of 5
Your answers
You might also love

Click any step to see exactly what happens at each stage — from quiz render to live database query.

1
Quiz renders client-side — zero server calls click to expand ↓
The 5 questions and answer options are a static JS config object. The quiz UI renders instantly in the browser — no loading spinner between steps.
No Database Call Needed Here

Questions, answer options, and their tags (e.g. relax, swim, fun) are hard-coded in a PHP template rendered once on page load. The quiz UI is 100% client-side JavaScript — no AJAX until the customer submits.

2
Customer answers 5 questions → tags collected click to expand ↓
Each answer is mapped to a short tag. After 5 answers the JS holds an array like ['relax', 'small', 'medium_space', 'mid', 'outdoor'] — no personal data collected yet.
Answer Tag Map
QuestionExample AnswerTag Sent
Primary goalRelaxation & therapyrelax
Group size3–4 peoplesmall
Available spaceMedium backyardmedium_space
Budget$2,000–$4,000mid
SettingOutdoor onlyoutdoor
3
PHP decision tree selects a product category — no AI click to expand ↓
Tags are posted via AJAX to a PHP controller. A rule-based decision tree (plain if/else logic) maps the combination of answers to the most relevant CS-Cart category.
Example Decision Rules (PHP)
if ($goal === 'relax' && $budget === 'mid') {
$category = 'hot_tubs'; // CS-Cart category ID 12
} elseif ($goal === 'relax' && $budget === 'low') {
$category = 'massage'; // CS-Cart category ID 44
} elseif ($goal === 'swim' && $space === 'large_space') {
$category = 'pools'; // CS-Cart category ID 18
} elseif ($goal === 'fun' && $space === 'indoor') {
$category = 'game_tables'; // CS-Cart category ID 27
} // ... 12+ rules covering all combinations

All rules are in one readable PHP file — fully editable by the admin without touching the database.

4
PHP queries CS-Cart DB — active, in-stock, best-selling products click to expand ↓
The selected category ID is used to query the live CS-Cart database. Only active, in-stock products are returned, ranked by real sales popularity.
Tables Used
cscart_products cscart_product_descriptions cscart_product_prices cscart_product_categories cscart_images_links cscart_popularity
SQL Query (Simplified)
SELECT p.product_id, pd.product, p.price, pop.total
FROM cscart_products p
JOIN cscart_product_descriptions pd USING (product_id)
JOIN cscart_product_categories pc USING (product_id)
JOIN cscart_popularity pop USING (product_id)
WHERE p.status = 'A'
AND p.amount > 0
AND pc.category_id = :recommended_category
ORDER BY pop.total DESC -- best sellers first
LIMIT 4
status = 'A' → Active only amount > 0 → In-stock only pop.total DESC → Best sellers first
5
Result screen renders with real product cards click to expand ↓
The browser receives the JSON result and renders the personalised recommendation screen — 1 primary card + 3 "also love" suggestions, all pulled live from the database.
What the cscart_popularity Table Tracks
ColumnIncremented when…Weight
pop.viewsCustomer views the product pageLow
pop.add_to_cartCustomer adds product to cartMedium
pop.purchasedCustomer completes a purchaseHighest
pop.totalComposite score (maintained by CS-Cart)Used for ranking

This means the quiz naturally surfaces your most loved products — no manual curation needed. As sales change, rankings update automatically.

What we build

Interactive JS quiz + PHP engine

A 5-step wizard as a CS-Cart addon. Rule-based PHP logic maps answers to categories, then pulls real best-selling products from your database. Optional email capture at result for lead generation.

What the client gains

A 24/7 digital sales consultant

Every quiz completion is a warm lead directed to a specific product page. Completion data reveals what customers want — informing inventory and marketing decisions without any extra effort.

❌ Without this feature

New visitors land on a large product catalogue, feel overwhelmed, and leave. The site only works for customers who already know what they want — a huge segment of "exploring" buyers is completely unserved and lost.

✅ With this feature

Browsing visitors become guided shoppers. Product images in the result build purchase intent immediately. Completion data also gives the client invaluable buyer intent signals for inventory and marketing decisions.

Implementation

Implementation Timeline

Both features are delivered as a single CS-Cart addon — installable from the admin panel with no server command-line access needed.

⚖️

Phase 1 — Comparison Tool

Weeks 1–2

PHP controller, DB query with status filtering, JS comparison card UI, spec diff highlighting, QA testing.

PHP addon controller
AJAX endpoint
Spec diff highlighting
Status filter QA
🎯

Phase 2 — Recommendation Quiz

Weeks 3–4

PHP decision tree, live DB fetch, best-seller ranking, quiz JS renderer, progress bar, email capture.

Decision engine (PHP)
Best-seller ranking
Quiz JS + breadcrumb
Email capture
🚀

Phase 3 — Polish & Launch

Week 5

Mobile testing, performance check (target <300ms AJAX), admin settings panel, handover docs.

Mobile QA
Performance check
Admin settings panel
Documentation