Product Finder

A product finder allows your customers to make a series of selections from dropdown boxes (make, model, year) in order to find products. After correctly following the steps below, you will have a functioning parts/product finder within your header.

Wireframe

Preparation Checklist

Before you start this tweak, it's a good idea to run through our preparation checklist below:

• Read through the Getting Started Guide to get a better sense of how the Control Panel, Database and Front End store interact.
• Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
• Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.
• The code snippet in this tweak doc uses Bootstrap 4, you may need to alter this code depending on what version of Bootstrap your theme is using. You can find out what version your theme is using here.

Coding Instructions

Step 1: Setup the parts finder content type and data

This tweak requires a specific data set to work and may need some changes to the configurations on the content type to achieve the required results. Follow our parts finder data setup doc. Please contact our support team if you need any additional help.

Step 2: Open the header template

Navigate to the header template /httpdocs/assets/themes/[THEME-NAME]/templates/headers/template.html.

Step 3: Add the code into the template

Paste the following code before the closing header tag </header>.

[%compatibility_list id:'part-finder' stype:'button' size:'3'%]
    [%PARAM *search%]
        <input type="hidden" id="clist_search" value="[@stype@]" />
    [%/PARAM%]
    [%PARAM *header%]
        <div id="parts_finder">
            <button class="d-md-none btn btn-secondary btn-block mb-2" data-toggle="collapse" data-target=".parts-finder-content"><i class="fa fa-search pr-2"></i> Product Finder</button>
            <div class="parts-finder-content py-1 collapse d-md-block">
                <input type="hidden" id="clist_size" value="[@ssize@]" />
                <input type="hidden" id="clist_hidden" value="[@shidden@]" />
                <div id="compat_list" class="d-flex flex-column flex-md-row justify-content-around align-items-center">
                    <h4 class="d-none d-md-flex mb-0 text-nowrap mr-md-3"><i class="fa fa-search pr-2"></i> Product Finder</h4>
    [%/PARAM%]
    [%PARAM *subheader%]
                [%IF [@compatcat_level@]==1%]
                    <select name="clist_[@compat_id@]_[@compatcat_level@]" [@style@] id="clist_[@compat_id@]_[@compatcat_level@]" class="compatibility_list" rel="[@compatcat_label@]">
                        <option value="">Choose Option</option>
                [%ELSEIF [@compatcat_level@]==2%]
                    <select name="clist_[@compat_id@]_[@compatcat_level@]" [@style@] id="clist_[@compat_id@]_[@compatcat_level@]" class="compatibility_list" rel="[@compatcat_label@]">
                        <option value="">Choose Option</option>
                [%ELSEIF [@compatcat_level@]==3%]
                    <select name="clist_[@compat_id@]_[@compatcat_level@]" [@style@] id="clist_[@compat_id@]_[@compatcat_level@]" class="compatibility_list" rel="[@compatcat_label@]">
                        <option value="">Choose Option</option>
                [%/IF%]
    [%/PARAM%]
    [%PARAM *body%]
                        <option value="[@compatcat_id@]" [@compat_selected@]>[@compatcat_name@]</option>
    [%/PARAM%]
    [%PARAM subfooter%]
                    </select>
    [%/PARAM%]
    [%PARAM footer%]
                    <button type="submit" class="btn btn-primary btn-block compat-btn">Find <i class="fas fa-arrow-circle-right"></i></button>
                </div>
            </div>
        </div>
        [%site_value id:'footer_javascript'%]
            <script>
                $(document).ready(function(){
                    $.compatListInit({});
                    $(".compatibility_list").change(function() {
                        $.buildCompatList($(this));
                    });
                })
            </script>
        [%/site_value%]
    [%END PARAM%]
[%END compatibility_list%]

Note: the id:'part-finder' parameter within the compatibility_list function should reflect your content type ID.

Step 4: Style the product finder

Navigate to the CSS stylesheet /httpdocs/assets/themes/[THEME-NAME]/css/style.css.

/* Parts Finder Styling */
.compatibility_list {
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    color: #495057;
    background-color: #FFFFFF;
    border: 1px solid #CED4DA;
    margin-bottom: 10px;
}
span.loading_span {
    display: none;
}
@media (min-width: 768px) {
    .compatibility_list {
        margin: 5px 10px 5px 0;
    }
}