Product Finder

Product Finder

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

Please Note: 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. Contact our support team if you need any additional help.

Wireframe

Product Finder

Coding Instructions

1) Using your SFTP login locate the header template.html file as this is what we will be editing. You can find the file in /assets/themes/THEME-NAME/templates/headers/template.html.

2) Directly above the last closing </div> for the main header "container" tag, copy and paste the following:

<div class="row">
    <div class="col-xs-12">
        [%list type:'content' filter:'content_type=category&content_level=1' sort:'sortorder,content_name' limit:'999'%]
            [%param *header%]
                [%site_value id:'footer_javascript'%]
                    <script>
                        $(document).ready(function(){
                            $.compatListInit({});
                            $(".compatibility_list").change(function() {
                                $.buildCompatList($(this));
                            });
                        });
                    </script>
                [%/site_value%]                
                <div id="compat_list" class="n-wrapper-form-control">
                    <p class="product-finder-label">Product Finder</p>
                    <select name="clist" id="clist" class="compatibility_list form-control">
                        <option value="">Choose Option</option>
            [%/param%]
            [%param *body%]
                <option value="[@content_id@]">[@content_name@]</option>
            [%/param%]
            [%param *footer%]
                    </select>
                </div>
            [%/param%]
        [%/list%]
    </div>
</div>

Note You will want the filter:'content_type=category' to reflect the content type of your choice.

3) In the style.css file copy and paste the below CSS. The file is located in /assets/themes/THEME-NAME/css/style.css

#compat_list {
    margin-bottom: 15px;
}
.product-finder-label {
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
}
#compat_list .compatibility_list {
    display: inline-block;
    margin-left: 21px;
}
@media (min-width: 1200px) {
    #compat_list .compatibility_list {
        width: 308px;
    }
}
@media (max-width: 1199px) and (min-width: 992px) {
    #compat_list .compatibility_list {
        width: 247px;
    }
}
@media (max-width: 991px) and (min-width: 768px) {
    #compat_list .compatibility_list {
        width: 173px;
    }
}
@media (max-width: 767px) {
    #compat_list .compatibility_list {
        margin: 0 0 15px 0;
    }
}

Was this article useful?

Be notified when this page is updated. Optional.