Tech Support Posted May 14, 2020 Share Posted May 14, 2020 In the new theme version we decided to add vanilla support for search suggestions. It can work in 2 modes: similar search mode, when suggestions are search queries that your other users submitted (default), and content mode, when search suggestions are grouped from models, videos and albums. Here are screenshots that show the difference: While this feature will be added into the upcoming new theme version, theme updates are never available for old projects and thus we decided to make this update available for everyone. Please go to Website UI -> Theme settings. If it says KVS Default (7.6) or above, then you don't need to do anything and this functionality is already included in your theme. Just scroll down theme settings to see this option: IMPORTANT. This functionality may heavily increase your database and overall server load. How to add search suggestions into older themes You can add this functionality to KVS default theme and to any other theme that uses jquery (all paid KVS themes are built using jquery). There is only one thing that may need to be adjusted if your theme is not KVS default theme, we will indicate that later. Step 1. Download this archive and unpack on top of your project FTP: https://kernel-scripts.com/updates/search_suggestions.zip This archive will create a new page named Search Suggestions. If you open this page in Website UI -> Pages section of your admin panel, in most cases it will be highlighted with orange color that indicates lack of filesystem permissions for editing this page settings in admin panel. This is OK in most cases, but if you want to adjust its options, for example suggestions sorting, you will have to set filesystem permissions for the files and directories mentioned in error details (666 for all files, 777 for all directories). Step 2. Update your theme CSS file with the following new styles: White skin (in KVS default theme you should update /static/styles/all-responsive-white.css file on FTP): .autocomplete-suggestions { border: 1px solid #999; background: #fff; overflow: auto; margin: 0 -60px 0 13px; } .autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; cursor: pointer; } .autocomplete-selected { background: #f0f0f0; } .autocomplete-suggestions strong { font-weight: normal; color: #276fdb; border-bottom: 1px solid #276fdb; } .autocomplete-group { padding: 5px; font-weight: bold;} .autocomplete-group strong { display: block; } Dark skin (in KVS default theme you should update /static/styles/all-responsive-metal.css file on FTP): .autocomplete-suggestions { border: 1px solid #1b1b1b; background: #000; overflow: auto; margin: 0 -60px 0 13px; } .autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; cursor: pointer; } .autocomplete-selected { background: #151515; } .autocomplete-suggestions strong { font-weight: normal; color: #276fdb; border-bottom: 1px solid #276fdb; } .autocomplete-group { padding: 5px; font-weight: bold;} .autocomplete-group strong { display: block; } You may need to adjust these styles later for better matching your site colors. But initially you can adjust #276fdb color, which refers to light blue highlight color on the above screenshots. Step 3. Go to Website UI -> Language files -> default and add the following texts at the end: urls.search_suggestions = /search_suggestions.php search_suggestions.similar_videos = Videos search_suggestions.similar_albums = Albums search_suggestions.similar_models = Models search_suggestions.type = searches The last option may be set to one of these values: searches (similar search mode) and mixed (content mode). Step 4. Go to Website UI -> Page Components -> include_footer_general.tpl and add the following code right before the closing </body> tag: <script src="{{$config.statics_url}}/static/js/jquery.autocomplete.min.js"></script> <script> {{if $lang.search_suggestions.type!='none' && $lang.urls.search_suggestions}} $('#search_form input[type="text"]').autocomplete({ minChars: 3, deferRequestBy: 100, serviceUrl: '{{$lang.urls.search_suggestions}}', {{if $lang.search_suggestions.type=='mixed'}}groupBy: 'type',{{/if}} paramName: 'q', onSelect: function(suggestion) { if (suggestion && suggestion.data && suggestion.data.url) { window.location = suggestion.data.url; } } }); {{/if}} </script> NOTE: if you theme is not KVS default theme, then you may need to change this selector to match your theme search input: #search_form input[type="text"] Step 5. If you need adjustments and customizations, you may want to check with plugin official documentation. Suggestions are configured to be max 20 per group and their sorting is set to popularity (most popular first). If you want to adjust these parameters, just go to Website UI -> Pages -> Search Suggestions for the needed controls. 1 Quote Link to comment Share on other sites More sharing options...
Tech Support Posted November 17, 2020 Author Share Posted November 17, 2020 Updated this guide to have search suggestions redirect to video / album / model / search page immediately when clicked. In order to merge the new functionality into your theme, please go to Website UI -> Theme settings: If it says KVS Default (8.2) or above, you already have this, search suggestions should already be clickable. If it says KVS Default (7.6) or above less than 8.2:Step 1. Download this archive and unpack on top of your project FTP:https://kernel-scripts.com/updates/search_suggestions.zipStep 2. Update this file in your project FTP:https://kvs-demo.com/static/js/main.min.js If it says other theme or version, please repeat Step #1 and Step #4 from the above guide. 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.