Developer notes
Compass is a child theme of Responsive (design/themes/kv_compass) delivered by the add-on kv_theme_compass. The
add-on installs and refreshes the theme files, checks the licence and assigns the template variable $kv_theme only
while the licensed design is on. Every Compass template prints the stock output (or nothing) without $kv_theme, so a
storefront never breaks when the licence or the add-on is off.
Built with the Kavio theme kit 1.2.4: the quiz engine, the kit countdown, the seller line, spec chips, the cached top products per category, the buy bar, option chips, the filter sheet and the swipe gallery.
| Path | Purpose |
|---|---|
design/themes/kv_compass/templates/addons/kv_theme_compass/blocks/quiz/kv_cp_dial.tpl |
the consultation (quiz block template; kv_quiz.tpl = plain answer tiles) |
.../addons/kv_theme_compass/partials/kv_cp_match.tpl |
match card (quiz results, product blocks, list view) |
.../blocks/products/kv_cp_matches.tpl, .../product_list_templates/kv_cp_match.tpl |
match cards (block and list view) |
.../blocks/products/kv_cp_compare.tpl |
comparison in plain words |
.../blocks/categories/kv_cp_index.tpl |
goal index |
.../blocks/static_templates/kv_cp_goal.tpl, kv_cp_alts.tpl |
goal page header, compared with two alternatives |
.../addons/blog/blocks/kv_cp_notes.tpl |
field notes |
.../addons/kv_theme_compass/hooks/products/* |
eyebrow, fit checklist, price per unit, unit badge |
design/themes/kv_compass/css/skin.less |
the theme’s look (classes co-*), presets in styles/data/*.less |
js/addons/kv_theme_compass/theme.js |
needle, route dots, ask field, goal sentence, phone ask bar |
js/addons/kv_theme_compass/kit-modules.js |
kit runtime (quiz: one question at a time, live matches, result state) |
Quiz engine
Section titled “Quiz engine”- Block type
kv_theme_compass_quiz: contentquiz(plain text, per language);Theme\Kit::quizBlock()parses it and resolves feature, variant and category names to IDs when the block renders (block cache: feature, filter and category tables). Each answer carries a constraint stringc<category id>|<feature id>:<variant id>.<variant id>. - Matches:
index.php?dispatch=kv_theme_compass_kit.quiz&a[]=<constraints>&n=<1-12>(GET, JSON,Cache-Control: private):html(cards rendered with the theme’s card partial),best,good,total,relaxed,url,ids. Usesfn_get_productswithfeature_variantsandcid+subcats, thenfn_gather_additional_products_data, so prices, visibility and usergroups are the visitor’s. - Without JavaScript the form submits to
kv_theme_compass_kit.quiz_go, which redirects to the filtered page. - Events for your scripts (
$.ceEvent('on', …)):kv.quiz.answer(root, fieldset, input),kv.quiz.step(root, fieldset),kv.quiz.result(root, data); APIelement.kvQuizApi(path, answered, chosen, labelOf, show, finish, isDone, isOpenEnded).
Catalogue data only, assigned on the storefront while the design is on (safe with the block cache and the full page cache; nothing per visitor):
$product.kv_cp: rating and review count,unit(price per unit;unit_p+unit_l),for(first CP_NEED value),fit(rows of the CP_FIT feature group: name, value, no) andfv(feature id => value).$category.kv_top(goal index): the category’s top products (kit 1.2.3 cache).$cp(page data):$cp.goalon category pages (name, lead, needs with counts),$cp.altsand$cp.caton product pages.
Customising
Section titled “Customising”- Colours: Theme editor per style, or the
@co_*tokens instyles/data/<Style>.less(@co_markhighlighter,@co_ring/@co_ring2dial and needle,@co_lens1-@co_lens4image lenses,@co_caslcasual axis of the headline voice). - Copy a template into your own child theme or use the hook points of the stock templates; Compass’s own templates are plain Smarty without custom modifiers.
- Upgrades replace only theme files you did not change.