Tweak Library
Note: We have updated our folder structure in Neto 6 and this has not been updated on all tweaks yet. More info.

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) Add the following code to the custom.js file, directly underneath the "$(document).ready(function(){" line:

$.compatListInit({});
$(".compatibility_list").change(function() {
    $.buildCompatList($(this));
});

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

<div class="row">
    <div class="col-xs-12">
        [%compatibility_list id:'category' stype:''%]
            [%param header%]
                <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">
                        <option value="">Choose Option</option>
            [%/param%]
            [%param *body%]
                <option value="[@compatcat_id@]">[@compatcat_name@]</option>
            [%/param%]
            [%param footer%]
                    </select>
                </div>
            [%/param%]
        [%/compatibility_list%]
    </div>
</div>

3) 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>