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 /httpdocs/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 /httpdocs/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;
            }
        }
        
### 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 /httpdocs/assets/themes/[THEME-NAME]/templates/headers/template.html. 2) Directly below the closing tag for the <header> tag, copy and paste the following:
[%site_value id:'footer_javascript'%]
    <script>
        $(document).ready(function(){
            $('.mobile-pf-wrapper').click(function(){
                $(this).find('.fa').toggleClass("fa-angle-down fa-angle-up")
            });

            $.compatListInit({});
            $(".compatibility_list").change(function() {
                $.buildCompatList($(this));
            });
        })
    </script>
[%/site_value%]

<div class="d-block d-md-none mobile-pf-wrapper">
    <div class="container">
        <div class="row" data-toggle="collapse" data-target=".parts-finder-outer-wrapper">
            <div class="col-10">
                <h4 class="parts-finder-title d-flex align-items-center"><i class="fa fa-search"></i> Product Finder</h4>
            </div>
            <div class="col-2 text-center d-flex align-items-center justify-content-center">
                <i class="fa fa-angle-down float-right"></i>
            </div>
        </div>
    </div>
</div>

<div class="parts-finder-outer-wrapper collapse">
    <div class="container">
        <div class="row">
            <div class="col-12">
                [%compatibility_list id:'parts-finder' stype:'button' size:'3' sortby:''%]    
                    [%PARAM *search%]
                    <input type="hidden" id="clist_search" value="[@stype@]" />
                    [%END PARAM%]
                    [%PARAM *header%]
                        <div class="partfinder-fields">
                            <input type="hidden" id="clist_size" value="[@ssize@]" />
                            <input type="hidden" id="clist_hidden" value="[@shidden@]" />
                            <div id="compat_list">
                                <h4 class="parts-finder-title d-none d-md-flex align-items-center"><i class="fa fa-search"></i> Product Finder</h4>
                    [%END PARAM%]
                    [%PARAM *subheader%]
                        [%IF [@compatcat_level@]==1%]
                            <div class="part-select"><select name="clist_[@compat_id@]_[@compatcat_level@]" [@style@] id="clist_[@compat_id@]_[@compatcat_level@]" class="compatibility_list form-control" rel="[@compatcat_label@]">
                                <option value="">Make</option>
                        [%ELSEIF [@compatcat_level@]==2%]
                            <div class="part-select"><select name="clist_[@compat_id@]_[@compatcat_level@]" [@style@] id="clist_[@compat_id@]_[@compatcat_level@]" class="compatibility_list form-control" rel="[@compatcat_label@]">
                                <option value="">Model</option>
                        [%ELSEIF [@compatcat_level@]==3%]
                            <div class="part-select"><select name="clist_[@compat_id@]_[@compatcat_level@]" [@style@] id="clist_[@compat_id@]_[@compatcat_level@]" class="compatibility_list form-control" rel="[@compatcat_label@]">
                                <option value="">Year</option>
                        [%/if%]
                    [%END PARAM%]
                    [%PARAM *body%]
                        <option value="[@compatcat_id@]" [@compat_selected@]>[@compatcat_name@]</option>
                    [%END PARAM%]
                    [%PARAM subfooter%]
                        </select>
                    </div>
                    [%END PARAM%]
                    [%PARAM footer%]
                                <div class="wrap-select-inline hidden-xs hidden-sm submit-button-wrapper"><button type="submit" class="btn white compat-btn uppercase primary-bg">Find <i class="fas fa-arrow-circle-right"></i></button></div>
                            </div>
                        </div>
                    [%END PARAM%]
                [%END compatibility_list%]
            </div>
        </div>
    </div>
</div>
Note You will want the id:'parts-finder' parameter in the compatibility_list function 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 /httpdocs/assets/themes/[THEME-NAME]/css/style.css
css
    #compat_list {
        display: flex;
        width: 100%;
    }

    .part-select {
        flex: 1;
    }

    .part-select > select {
        width: 90%;
        margin: 0 auto;
    }

    .parts-finder-title {
        margin-bottom: 0;
    }

    .parts-finder-title i {
        margin-right: 5px;
    }

    .compatibility_list {
        display: block;
        width: 100%;
        padding: 6px 12px;
        padding: 0.375rem 0.75rem;
        font-size: 14px;
        font-size: 0.875rem;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
        transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    }

    span.loading_span {
        display: none;
    }

    @media (min-width: 768px) {
        .parts-finder-outer-wrapper.collapse {
            display: flex !important;
        }

        .parts-finder-outer-wrapper {
            padding-bottom: 0.5rem;
        }
    }

    @media (max-width: 768px) {
        #compat_list {
            display: block;
        }

        .part-select {
            margin-bottom: 5px;
        }

        .part-select > select {
            width: 100%;
        }

        .parts-finder-title {
            padding: 15px 0;
        }

        .submit-button-wrapper {
            margin-bottom: 0.5rem;
        }

        .mobile-pf-wrapper {
            margin-bottom: 10px;
            background-color: #ebebeb;
        }

        .mobile-pf-wrapper, .mobile-pf-wrapper:hover {
            cursor: pointer;
        }
    }

Was this article useful?

Be notified when this page is updated. Optional.