Умный поиск

<script>
    var shop2SmartSearchSettings = {ldelim}
        shop2_currency: '{$shop2.currency_shortname}'
    {rdelim}
</script>

{literal}
<div id="search-app"  v-on-clickaway="resetData">
{/literal}
    <form action="{get_seo_url uri_prefix=$shop2.uri mode='search'}" enctype="multipart/form-data" id="smart-search-block" class="search-block">{literal}
        <input type="hidden" name="gr_smart_search" value="1">
        <input autocomplete="off" placeholder="#SHOP2_SEARCH#" v-model="search_query" v-on:keyup="searchStart" type="text" name="s[name]" class="search-block__input" id="shop2-name">
        <button class="search-block__btn">#SEARCH#</button>
    </form>
    <div id="search-result" class="custom-scroll scroll-width-thin scroll" v-if="(foundsProduct + foundsFolders + foundsVendors) > 0" v-cloak>
        <div class="search-result-top">
            <div class="search-result-left" v-if="foundsProduct > 0">
                <div class="result-products">
                    <div class="products-search-title">#PRODUCTS# <span>{{foundsProduct}}</span></div>
                    <div class="product-items">
                        <div class="product-item" v-for='product in products'>
                            <div class="product-image" v-if="product.image_url">
                                <a v-bind:href="'/'+product.alias">
                                    <img v-bind:src="product.image_url" v-bind:alt="product.name" v-bind:title="product.name">
                                </a>
                            </div>

                            <div class="product-image no-image" v-else>
                                <a v-bind:href="'/'+product.alias"></a>
                            </div>

                            <div class="product-text">
                                <div class="product-name"><a v-bind:href="'/'+product.alias">{{product.name}}</a></div>
                                <div class="product-text-price">
                                    <div class="price-old" v-if="product.price_old > 0"><strong>{{product.price_old}}</strong> <span>{{shop2SmartSearchSettings.shop2_currency}}</span></div>
                                    <div class="price"><strong>{{product.price}}</strong> <span>{{shop2SmartSearchSettings.shop2_currency}}</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="search-result-right" v-if="foundsFolders > 0 || foundsVendors > 0">
                <div class="result-folders" v-if="foundsFolders > 0">
                    <div class="folders-search-title">#FOLDERS# <span>{{foundsFolders}}</span></div>
                    <div class="folder-items">
                        <div class="folder-item" v-for="folder in foldersSearch">
                            <a v-bind:href="'/'+folder.alias" class="found-folder"><span>{{folder.folder_name}}</span></a>
                        </div>
                    </div>
                </div>
                <div class="result-vendors" v-if="foundsVendors > 0">
                    <div class="vendors-search-title">#SHOP2_VENDORS# <span>{{foundsVendors}}</span></div>
                    <div class="vendor-items">
                        <div class="vendor-item" v-for="vendor in vendorsSearch">
                            <a v-bind:href="vendor.alias" class="found-vendor"><span>{{vendor.name}}</span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="search-result-bottom">
            <span class="search-result-btn"><span>#GR_ALL_RESULTS#</span></span>
        </div>
    </div>
</div>
{/literal}


<script>
var shop2SmartSearch = {ldelim}
        folders: {$smart_search_folders|default:$folders_shared|@json_encode},
        vendors: {$smart_search_vendors|default:$vendors_shared|@json_encode},
        img_width: {$img_width|default:160},
        img_height: {$img_height|default:160},
        limit_products: {$limit_products|default:10}
{rdelim}
</script>
<script src="/g/libs/vue/2.4.3/vue.min.js"></script>
<script src="/g/libs/ba_throttle_debounce/js/jquery.ba_throttle_debounce.min.js"></script>
<script src="/g/libs/vue_clickaway/js/vue_clickaway.min.js"></script>
<script src="images/smart_search/m.smart_search.js"></script>
<link rel="stylesheet" href="images/smart_search/smart_search.scss.css">