This article has moved to a new home. View the updated version Tweak Library

Product Finder

A product finder in the form of dropdown boxes, allowing your customers to make a series of selections (e.g. make, model, year, for a parts finder) in order to find products.

Please note: This tweak requires a specific dataset to work and may need some changes to the configurations on the content type to achieve the required results. Contact support if additional help is required in this area.

Industries

  • Auto Parts
  • Computers & Electronics
  • Gifts

Wireframe

Product Finder

Coding Instructions

1) Directly above the 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,name'%]
            [%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.

2) In the style.css file for the template being used, copy and paste the below CSS:

<style>
    #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;
        }
    }
</style>