I have a channel on my site which holds the products and services available. Each has various categories to narrow it down. I want to build a product selector and not sure the best method to go about it. Concept is in image: enter image description here

The first 3 questions are filters by categories which apply to each product/service. The Q4 is a price which each product/service has.

I already have a page set up with a custom route which filters the products based on the categories e.g:

/products-services/inks/sales-marketing/tiles which is /(to load template)/category/category/category

And that currently filters the products as required.

What is my best way to build the product selector? I'm guessing it is to build a url somehow and link to the above route I have already set up? Could it be done with a structure with a sub level for each question?


If I understand correctly, it looks like you really only have 2 branches to your tree (products and services). Everything else applies to all products or all services respectively and is one-to-one (except for budget). Instead of using categories, I would probably opt for using Entry Type to determine whether it's a product or service, and dropdown and/or checkbox fields to determine the product/service attributes, which you can then use to search for products/services directly using an ElementCriteriaModel.

Channel => productsServices
    Entry Type => product
        Field => testingType (dropdown)
        Field => surfaceType (dropdown)
    Entry Type => service
        Field => reportingLevel (dropdown)
        Field => isoCertification (checkbox)
        Field => price

In your template, you can use javascript to display the correct form questions (based on the answer to the first question) using .on('change', function(event){..}). Select field options can be set dynamically from the field options. Budget options can perhaps be stored in a separate field in a global set ('budgetOptions') for example.

Who will test your self-cleaning surface?
<select name="productServiceType">
    <option value="product">I'll test it myself</option>
    <option value="service">I want the experts</option>

<div class="product-questions" style="display:none">
    What is the reason for your testing?
    <select name="testingType">...</select>
    What surface type will you be testing?
    <select name="surfaceType">...</select>

<div class="services-questions" style="display:none">
    What level of reporting do you require?
    <select name="reportingLevel">...</select>
    Do you require ISO certification?
    <select name="isoCertification">...</select>
    What is your budget?
    <select name="budget">...</select>

You can then submit the form to your productServices template, retrieve the attributes and find the associated products/services.

{# set default params #}
{% set params = {
    section: 'productsServices',
    limit: null
} %}

{# determine productService Type #}
{% set type = craft.request.getParam('productServiceType') %}

{# set product params #}
{% if type == "product" %}
    {% set testingTypeParam = craft.request.getParam('testingType') %}
    {% set surfaceTypeParam = craft.request.getParam('surfaceType') %}
    {% set params = params|merge([
        testingType: testingTypeParam, 
        surfaceType: surfaceTypeParam 
    ]) %}
{% endif %}

{# set service params #}
{% if type == "service" %}
    {% set reportingLevelParam = craft.request.getParam('reportingLevel') %}
    {% set isoCertificationParam = craft.request.getParam('isoCertification') %}
    {% set budgetParam = craft.request.getParam('budget') %}
    {% set params = params|merge( [
        reportingLevel: reportingLevelParam, 
        isoCertification: isoCertificationParam
        price: '>= ' ~ budgetParam
    ]) %}
{% endif %}

{# retrieve entries #}
{% set entries = craft.entries(params) %}
{% for entry in entries %}
    {{ title }}
{% endfor %}

Not tested, but should be close.

  • Cheers - the whole logic of that works very well and fully understand it. Couple of things which complicate it. It is not a straight split between Products and Services. On my initial products/services page it has Inks, Acessories, Kits and Services. Each of those has an image as well. Would that work with an entry type. Also on the Homepage I have a section for what product would it be used on with images for each. If that is a checkbox option I can hardly have images for each option?
    – mmc501
    Jan 5 '15 at 19:53
  • Entry types allow you to customize all the fields, so yes.. it would support images or anything else you need. However, placing products and services in the same channel is really optional. You could adapt this to use separate product/service channels if needed. You would just want to move the 'section' parameter from the 'default params' to the 'conditional params' if that makes sense. Jan 5 '15 at 20:09
  • You could also change the products/services channel to a structure with 'inks, accessories, kits, and services' as parent entries, with an Entry Type called 'landingPage' or 'index' or 'productServiceType' for example, where you could define additional fields for 'feature image', 'description', etc. Jan 5 '15 at 20:18
  • Regarding the homepage issue.. are you saying you have sample images for each option? Jan 5 '15 at 20:20
  • Yep I have sample images for each option - glass, concrete, tiles etc. You have got me thinking though, it will probably be possible to use the forms as you suggested and with JavaScript build a url with the specific options and load that. It would prob work with what I already have.
    – mmc501
    Jan 5 '15 at 20:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.