CINXE.COM

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> <meta name="theme-color" content="#ffffff"> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="author" content="Administrator" /> <meta name="generator" content="Joomla! - Open Source Content Management" /> <title>HikaShop - Filters and sorting of products on listings</title> <link href="/templates/flatishop/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" /> <link href="/media/com_hikashop/css/hikashop.css?v=510" rel="stylesheet" type="text/css" /> <link href="/media/com_hikashop/css/frontend_default.css?t=1718392890" rel="stylesheet" type="text/css" /> <link href="/media/com_hikashop/css/font-awesome.css?v=5.2.0" rel="stylesheet" type="text/css" /> <link href="/templates/flatishop/css/menu.css?v3" rel="stylesheet" type="text/css" /> <link href="/templates/flatishop/css/template.css?v3" rel="stylesheet" type="text/css" /> <link href="/templates/flatishop/css/shadowbox.css" rel="stylesheet" type="text/css" /> <link href="/plugins/system/dicaptionpopup/style.css" rel="stylesheet" type="text/css" /> <link href="/modules/mod_maximenuck/templatelayers/beez3-position1.css" rel="stylesheet" type="text/css" /> <link href="/media/com_hikashop/css/vex.css?v=510" rel="stylesheet" type="text/css" /> <style type="text/css"> div#hikamaximenu ul.maximenuck li.maximenuck.item170.level2, div#hikamaximenu ul.maximenuck2 li.maximenuck.item170.level2{ margin-top: 0px !important;margin-right: 0px !important;margin-bottom: 0px !important;margin-left: 0px !important;background: #1F6B85 !important;background-color: #1F6B85 !important; } div#hikamaximenu ul.maximenuck li.maximenuck.item170.level2 > a, div#hikamaximenu ul.maximenuck li.maximenuck.item170.level2 > *:not(div) { padding-top: 0px !important;padding-right: 0px !important;padding-bottom: 0px !important;padding-left: 0px !important; } div#hikamaximenu ul.maximenuck li.maximenuck.item171.level2, div#hikamaximenu ul.maximenuck2 li.maximenuck.item171.level2{ margin-top: 0px !important;margin-right: 0px !important;margin-bottom: 0px !important;margin-left: 0px !important;background: #1F6B85 !important;background-color: #1F6B85 !important; } div#hikamaximenu ul.maximenuck li.maximenuck.item171.level2 > a, div#hikamaximenu ul.maximenuck li.maximenuck.item171.level2 > *:not(div) { padding-top: 0px !important;padding-right: 0px !important;padding-bottom: 0px !important;padding-left: 0px !important; } div#hikamaximenu ul.maximenuck li.maximenuck.item172.level2, div#hikamaximenu ul.maximenuck2 li.maximenuck.item172.level2{ margin-top: 0px !important;margin-right: 0px !important;margin-bottom: 0px !important;margin-left: 0px !important;background: #1F6B85 !important;background-color: #1F6B85 !important; } div#hikamaximenu ul.maximenuck li.maximenuck.item172.level2 > a, div#hikamaximenu ul.maximenuck li.maximenuck.item172.level2 > *:not(div) { padding-top: 0px !important;padding-right: 0px !important;padding-bottom: 0px !important;padding-left: 0px !important; } #hikamaximenu div.floatck, #hikamaximenu ul.maximenuck li:hover div.floatck div.floatck, #hikamaximenu ul.maximenuck li:hover div.floatck:hover div.floatck div.floatck, #hikamaximenu ul.maximenuck li.sfhover div.floatck div.floatck, #hikamaximenu ul.maximenuck li.sfhover div.floatck.sfhover div.floatck div.floatck { display: none; } #hikamaximenu ul.maximenuck li:hover div.floatck, #hikamaximenu ul.maximenuck li:hover div.floatck li:hover div.floatck, #hikamaximenu ul.maximenuck li:hover div.floatck li:hover div.floatck li:hover div.floatck, #hikamaximenu ul.maximenuck li.sfhover div.floatck, #hikamaximenu ul.maximenuck li.sfhover div.floatck li.sfhover div.floatck, #hikamaximenu ul.maximenuck li.sfhover div.floatck li.sfhover div.floatck li.sfhover div.floatck { display: block; } @media screen and (max-width: 524px) {#hikamaximenu .maximenumobiletogglericonck {display: block !important;font-size: 33px !important;text-align: right !important;padding-top: 10px !important;}#hikamaximenu ul.maximenuck .maximenumobiletogglerck ~ li.maximenuck.level1 {display: none !important;}#hikamaximenu ul.maximenuck .maximenumobiletogglerck:checked ~ li.maximenuck.level1 {display: block !important;}} @media screen and (max-width: 524px) {div#hikamaximenu ul.maximenuck li.maximenuck.nomobileck, div#hikamaximenu .maxipushdownck ul.maximenuck2 li.maximenuck.nomobileck { display: none !important; }}@media screen and (min-width: 525px) {div#hikamaximenu ul.maximenuck li.maximenuck.nodesktopck, div#hikamaximenu .maxipushdownck ul.maximenuck2 li.maximenuck.nodesktopck { display: none !important; }} </style> <script type="application/json" class="joomla-script-options new">{"csrf.token":"250cfc9566208e4a21ba80e8fd61280d","system.paths":{"root":"","base":""},"system.keepalive":{"interval":3600000,"uri":"\/component\/ajax\/?format=json"}}</script> <script src="/media/jui/js/jquery.min.js?5b71252e3c77095a92978cff57b90764" type="text/javascript"></script> <script src="/media/jui/js/jquery-noconflict.js?5b71252e3c77095a92978cff57b90764" type="text/javascript"></script> <script src="/media/jui/js/jquery.ui.core.min.js?5b71252e3c77095a92978cff57b90764" type="text/javascript"></script> <script src="/media/com_hikashop/js/hikashop.js?v=510" type="text/javascript"></script> <script src="/media/jui/js/jquery-migrate.min.js?5b71252e3c77095a92978cff57b90764" type="text/javascript"></script> <script src="/media/jui/js/bootstrap.min.js?5b71252e3c77095a92978cff57b90764" type="text/javascript"></script> <script src="/media/system/js/core.js?5b71252e3c77095a92978cff57b90764" type="text/javascript"></script> <script src="/templates/flatishop/js/shadowbox.js" type="text/javascript"></script> <script src="/templates/flatishop/js/template.js?v3" type="text/javascript"></script> <script src="/templates/flatishop/js/slide.js" type="text/javascript"></script> <script src="/plugins/system/dicaptionpopup/isotope.js" type="text/javascript"></script> <script src="/modules/mod_maximenuck/assets/maximenuck.js" type="text/javascript"></script>  <script src="/media/system/js/keepalive.js?5b71252e3c77095a92978cff57b90764" type="text/javascript"></script> <script src="/media/com_hikashop/js/vex.min.js?v=510" type="text/javascript"></script> <script src="/plugins/hikashop/cartnotify/media/notify-vex.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(window).on('load', function() { }); jQuery(document).ready(function($) { $('.faq_question').click(function(){ $(this).next().toggle('blind', '', 500); }); }); jQuery(document).ready(function($) { $('.captionpopup').imagesLoaded( function(){ $('.captionpopup').isotope({ itemSelector : '.photo' }); }); }); function showCaption(name,opa){ jQuery('#caption_'+name).fadeIn(); jQuery('#div_'+name).hover( function(){ jQuery('#caption_'+name).animate({opacity: opa},{queue: false}); }, function(){ jQuery('#caption_'+name).animate({opacity: '0'},{queue: false}); } ); } function getWidth() { xWidth = null; if(window.screen != null) xWidth = window.screen.availWidth; if(window.innerWidth != null) xWidth = window.innerWidth; if(document.body != null) xWidth = document.body.clientWidth; return xWidth; } function getHeight() { xHeight = null; if(window.screen != null) xHeight = window.screen.availHeight; if(window.innerHeight != null && xHeight == null) xHeight = window.innerHeight; if(document.body != null && xHeight == null) xHeight = document.body.clientHeight; return xHeight; } jQuery(function($) { SqueezeBox.initialize({}); initSqueezeBox(); $(document).on('subform-row-add', initSqueezeBox); function initSqueezeBox(event, container) { SqueezeBox.assign($(container || document).find('a.modal').get(), { parse: 'rel' }); } }); window.jModalClose = function () { SqueezeBox.close(); }; // Add extra modal close functionality for tinyMCE-based editors document.onreadystatechange = function () { if (document.readyState == 'interactive' && typeof tinyMCE != 'undefined' && tinyMCE) { if (typeof window.jModalClose_no_tinyMCE === 'undefined') { window.jModalClose_no_tinyMCE = typeof(jModalClose) == 'function' ? jModalClose : false; jModalClose = function () { if (window.jModalClose_no_tinyMCE) window.jModalClose_no_tinyMCE.apply(this, arguments); tinyMCE.activeEditor.windowManager.close(); }; } if (typeof window.SqueezeBoxClose_no_tinyMCE === 'undefined') { if (typeof(SqueezeBox) == 'undefined') SqueezeBox = {}; window.SqueezeBoxClose_no_tinyMCE = typeof(SqueezeBox.close) == 'function' ? SqueezeBox.close : false; SqueezeBox.close = function () { if (window.SqueezeBoxClose_no_tinyMCE) window.SqueezeBoxClose_no_tinyMCE.apply(this, arguments); tinyMCE.activeEditor.windowManager.close(); }; } } }; jQuery(document).ready(function(jQuery){jQuery('#hikamaximenu').DropdownMaxiMenu({fxtransition : 'linear',dureeIn : 0,dureeOut : 0,menuID : 'hikamaximenu',testoverflow : '0',orientation : 'horizontal',behavior : 'mouseover',opentype : 'noeffect',fxdirection : 'normal',directionoffset1 : '30',directionoffset2 : '30',showactivesubitems : '0',ismobile : 0,menuposition : '0',effecttype : 'dropdown',topfixedeffect : '1',topfixedoffset : '',clickclose : '0',fxduration : 0});}); jQuery(function($){ initTooltips(); $("body").on("subform-row-add", initTooltips); function initTooltips (event, container) { container = container || document;$(container).find(".hasTooltip").tooltip({"html": true,"container": "body"});} }); function do_nothing() { return; } if(window.Oby) { vex.defaultOptions.className = "vex-theme-default"; vex.dialog.buttons.YES.text = "OK"; window.cartNotifyParams = {"img_url":"\/media\/com_hikashop\/images\/icons\/icon-32-newproduct.png","redirect_url":"","redirect_delay":"4000","hide_delay":5000,"title":"Product added to the cart","text":"Product successfully added to the cart","wishlist_title":"Product added to the wishlist","wishlist_text":"Product successfully added to the wishlist","list_title":"Products added to the cart","list_text":"Products successfully added to the cart","list_wishlist_title":"Products added to the wishlist","list_wishlist_text":"Products successfully added to the wishlist","err_title":"Product not added to the cart","err_text":"Product not added to the cart","err_wishlist_title":"Product not added to the wishlist","err_wishlist_text":"Product not added to the wishlist"}; window.cartNotifyParams.cart_params = {buttons:[ {text:"Proceed to checkout",type:"button",className:"vex-dialog-button-primary",click:function proceedClick(){window.top.location="/extensions/checkout.html";}}, {text:"Continue shopping",type:"submit",className:"vex-dialog-button-primary",click:function continueClick(){if(window.top.vex.closeAll) window.top.vex.closeAll();}} ]}; } </script>  </head> <body class="site com_content view-article layout- task- itemid-177 ">  <div class="headerlogo"> <div id="header"> <div class="row-fluid header"> <div class="span6 logo"> <div class="moduletable"> <div class="custom" > <p><a href="/index.php"><img src="/images/logo.png" alt="hikashop" /></a><a href="/index.php"><img class="complete_logo" src="/images/logo_hikashop.png" alt="e-commerce" /></a></p></div> </div> </div> <div class="span6 login"> <div class="moduletablehikalogin"> <form action="/support/documentation.html" method="post" id="login-form" class="form-inline"> <div class="userdata"> <div id="form-login-username" class="control-group"> <div class="controls"> <div class="input-prepend input-append"> <span class="add-on"><i class="icon-user tip" title="Username"></i><label for="modlgn-username" class="element-invisible">Username</label></span><input id="modlgn-username" type="text" name="username" class="input-small" tabindex="1" size="18" placeholder="Username" /><a href="/login.html?view=remind" class="btn hasTooltip" title="Forgot your username?"><i class="icon-question-sign"></i></a> </div> </div> </div> <div id="form-login-password" class="control-group"> <div class="controls"> <div class="input-prepend input-append"> <span class="add-on"><i class="icon-lock tip" title="Password"></i><label for="modlgn-passwd" class="element-invisible">Password</label></span><input id="modlgn-passwd" type="password" name="password" class="input-small" tabindex="2" size="18" placeholder=" Password" /><a href="/login.html?view=reset" class="btn hasTooltip" title="Forgot your password?"><i class="icon-question-sign"></i></a> </div> </div> </div> <div id="form-login-remember" class="control-group checkbox"> <label for="modlgn-remember" class="control-label">Remember Me</label> <input id="modlgn-remember" type="checkbox" name="remember" class="inputbox" value="yes"/> </div> <div id="form-login-submit" class="control-group"> <div class="controls"> <button type="submit" tabindex="3" name="Submit" class="btn btn-primary btn hasTooltip" data-original-title="Log in"><i class="icon-arrow-right"></i></button> </div> </div> <div id="form-login-create" class="control-group"> <div class="controls" style="margin-right: 0px;"> <button type="button" onclick="window.location.href='/login.html?view=registration'" tabindex="3" name="Submit" class="btn btn-primary btn hasTooltip" data-original-title="Create an account"><i class="icon-plus"></i></button> </div> </div> <input type="hidden" name="option" value="com_users" /> <input type="hidden" name="task" value="user.login" /> <input type="hidden" name="return" value="aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL3N1cHBvcnQvZG9jdW1lbnRhdGlvbi8xMDAtaGlrYXNob3AtZmlsdGVyLWxpc3RpbmcuaHRtbA==" /> <input type="hidden" name="250cfc9566208e4a21ba80e8fd61280d" value="1" /> </div> </form> </div> </div> </div> </div> </div> <div id="mainbarsep"></div> <div id="mainbar" class="navbar navbar-dynamic">  <div class="navbar-inner"> <div class="nav-small-screen"> <div class="moduletable smallscreen_menu"> <select class="chzn-done" onchange="window.location.href=this[this.selectedIndex].value;" ><option value="/home" >- Home</option><option value="/home/blog" >-- Blog</option><option value="/home/brand" >-- Brand</option><option value="/home/our-partners" >-- Partners</option><option value="/extensions" >- Extensions</option><option value="/extensions/hika-essential" >-- Hikashop essential <span class="price">60€</span></option><option value="/extensions/hikamarket" >-- Hikamarket</option><option value="/extensions/hikaserial" >-- Hikaserial</option><option value="/extensions/marketplace" >-- Marketplace</option><option value="/extensions/hika-business" >-- Hikashop business <span class="price">120€</span></option><option value="/extensions/hikaauction" >-- Hikaauction <span class="price">40€</span></option><option value="/extensions/hika-multisites" >-- Hikashop multi-sites <span class="price">420€</span></option><option value="/extensions/checkout" >-- Access the checkout</option><option value="/extensions/hikashop-starter" >-- Hikashop starter</option><option value="/extensions/compare-versions" >-- Compare versions</option><option value="/extensions/upgrade-my-version" >-- Essential to business</option><option value="/download" >- Download</option><option value="/download/languages" >-- Languages</option><option value="/download/styles-for-hikashop" >-- Styles for hikashop <span class="price">40€</span></option><option value="/download/templates-for-hikashop" >-- Templates for hikashop</option><option value="/support" >- Support</option><option value="/support/documentation" selected="selected">-- Documentation</option><option value="/support/forum" >-- Forum</option><option value="/support/faq" >-- Faq</option><option value="/support/contact-us" >-- Contact us</option><option value="http://demo.hikashop.com" >- Demo</option><option value="http://demo.hikashop.com" >-- Live demo</option><option value="/showcase" >-- They use hikashop !</option><option value="/my-account" >- My account</option><option value="/my-account/my-orders" >-- My orders</option><option value="/my-account/your-subscriptions" >-- My subscriptions</option><option value="/my-account/affiliate-program" >-- Affiliate program</option><option value="/custom-dev-menu" >- The hikashop team can work for you !</option></select> </div> </div> <div> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> </div> <div class="nav-collapse"> <div class="moduletable bigscreen_menu">  <div class="maximenuckh" id="hikamaximenu" style="z-index:10;"> <div class="maxiroundedleft"></div> <div class="maxiroundedcenter"> <ul class="nav menu bigscreen_menu maximenuck" style=""> <li class="maximenuck item101 first parent level1 " style="z-index : 12000;"><a class="maximenuck " href="/"><span class="titreck">Home</span></a> <div class="floatck" ><div class="maximenuck2 first " > <ul class="maximenuck2"><li class="maximenuck nodropdown item683 first level2 " style="z-index : 11999;"><a class="maximenuck " href="/home/blog.html"><img src="/images/menu/book_icon.png" alt="BLOG" style="display: block; margin: 0 auto;" /><span class="titreck">BLOG<span class="descck">News from the front</span></span> </a> </li><li class="maximenuck nodropdown item441 level2 " style="z-index : 11998;"><a class="maximenuck " href="/home/brand.html"><img src="/images/menu/brand_icon.png" alt="BRAND" style="display: block; margin: 0 auto;" /><span class="titreck">BRAND<span class="descck">About Hikari Software</span></span> </a> </li><li class="maximenuck nodropdown item425 last level2 " style="z-index : 11997;"><a class="maximenuck " href="/home/our-partners.html"><img src="/images/menu/partner_icon.png" alt="PARTNERS" style="display: block; margin: 0 auto;" /><span class="titreck">PARTNERS<span class="descck">HikaShop Partners</span></span> </a> </li> </ul> <div class="clr"></div></div> <div class="clr"></div></div> </li><li class="maximenuck item102 parent level1 " style="z-index : 11996;"><a class="maximenuck " href="/extensions.html"><span class="titreck">Extensions</span></a> <div class="floatck" style="width:720px;"><div class="maximenuck2 first " style="width:280px;float:left;"> <ul class="maximenuck2"><li class="maximenuck nodropdown item194 first level2 " style="z-index : 11995;"><a class="maximenuck " href="/extensions/hika-essential.html"><img src="/images/menu/logo_hikashop.png" alt="HIKASHOP ESSENTIAL 60€" style="display: block; margin: 0 auto;" /><span class="titreck">HIKASHOP ESSENTIAL <span class="price">60€</span><span class="descck">The basic version. With the main features for a little shop.</span></span> </a> </li><li class="maximenuck nodropdown item169 level2 " style="z-index : 11994;"><a class="maximenuck " href="/extensions/hikamarket.html"><img src="/images/menu/logo_hikamarket.png" alt="HIKAMARKET" style="display: block; margin: 0 auto;" /><span class="titreck">HIKAMARKET<span class="descck"><span class="label label-success">Add-on</span> Create a multivendor platform. Enable many vendors on your website.</span></span> </a> </li><li class="maximenuck nodropdown item167 level2 " style="z-index : 11993;"><a class="maximenuck " href="/extensions/hikaserial.html"><img src="/images/menu/logo_hikaserial.png" alt="HIKASERIAL" style="display: block; margin: 0 auto;" /><span class="titreck">HIKASERIAL<span class="descck"><span class="label label-success">Add-on</span> Sale e-tickets, vouchers, gift certificates, serial numbers and more! </span></span> </a> </li><li class="maximenuck nodropdown item703 level2 " style="z-index : 11992;"><a class="maximenuck " href="/marketplace.html"><img src="/images/menu/plugin.png" alt="MARKETPLACE" style="display: block; margin: 0 auto;" /><span class="titreck">MARKETPLACE<span class="descck">Plugins, modules and other kinds of integrations for HikaShop</span></span> </a> </li></ul><div class="clr"></div></div><div class="maximenuck2" style="width:280px;float:left;"><ul class="maximenuck2"><li class="maximenuck nodropdown item168 level2 " style="z-index : 11991;"><a class="maximenuck " href="/extensions/hika-business.html"><img src="/images/menu/logo_hikashop.png" alt="HIKASHOP BUSINESS 120€" style="display: block; margin: 0 auto;" /><span class="titreck">HIKASHOP BUSINESS <span class="price">120€</span><span class="descck">The best version for a big shop online. With all the best features.</span></span> </a> </li><li class="maximenuck nodropdown item608 level2 " style="z-index : 11990;"><a class="maximenuck " href="/extensions/hikaauction.html"><img src="/images/menu/logo_hikaauction.png" alt="HIKAAUCTION 40€" style="display: block; margin: 0 auto;" /><span class="titreck">HIKAAUCTION <span class="price">40€</span><span class="descck"><span class='label label-success'>Add-on</span> Create auctions and let your customers bid for products. </span></span> </a> </li><li class="maximenuck nodropdown item751 level2 " style="z-index : 11989;"><a class="maximenuck " href="/extensions/hika-multisites.html"><img src="/images/menu/logo_hikashop.png" alt="HIKASHOP MULTI-SITES 420€" style="display: block; margin: 0 auto;" /><span class="titreck">HIKASHOP MULTI-SITES <span class="price">420€</span><span class="descck">Hikashop Business edition for multiple sites.</span></span> </a> </li><li class="maximenuck nodropdown item846 level2 " style="z-index : 11988;"><a class="maximenuck " href="/extensions/checkout.html"><img src="/images/menu/checkout.png" alt="ACCESS THE CHECKOUT" style="display: block; margin: 0 auto;" /><span class="titreck">ACCESS THE CHECKOUT<span class="descck">Click here to access the payment area</span></span> </a> </li></ul><div class="clr"></div></div><div class="maximenuck2" style="width:160px;float:left;"><ul class="maximenuck2"><li class="maximenuck nodropdown item170 level2 " style="z-index : 11987;"><a class="maximenuck " href="/extensions/hikashop-starter.html"><span class="titreck">HIKASHOP STARTER<span class="descck">Download now !</span></span></a> </li><li class="maximenuck nodropdown item171 level2 " style="z-index : 11986;"><a class="maximenuck " href="/extensions/compare-versions.html"><span class="titreck">COMPARE VERSIONS<span class="descck">See all features</span></span></a> </li><li class="maximenuck nodropdown item172 last level2 " style="z-index : 11985;"><a class="maximenuck " href="/extensions/upgrade-my-version.html"><span class="titreck">ESSENTIAL TO BUSINESS<span class="descck">Upgrade now</span></span></a> </li> </ul> <div class="clr"></div></div> <div class="clr"></div></div> </li><li class="maximenuck item103 parent level1 " style="z-index : 11984;"><a class="maximenuck " href="/download.html"><span class="titreck">Download</span></a> <div class="floatck" style="width:250px;"><div class="maximenuck2 first " style="width:250px;float:left;"> <ul class="maximenuck2"><li class="maximenuck nodropdown item174 first level2 " style="z-index : 11983;"><a class="maximenuck " href="/download/languages.html"><img src="/images/menu/langue.png" alt="LANGUAGES" style="display: block; margin: 0 auto;" /><span class="titreck">LANGUAGES<span class="descck">HikaShop is translated in more than 40 languages</span></span> </a> </li><li class="maximenuck nodropdown item176 level2 " style="z-index : 11982;"><a class="maximenuck " href="/download/styles-for-hikashop.html"><img src="/images/menu/styles.png" alt="STYLES FOR HIKASHOP 40€" style="display: block; margin: 0 auto;" /><span class="titreck">STYLES FOR HIKASHOP <span class="price">40€</span><span class="descck">Change the layout of HikaShop to fit your website design</span></span> </a> </li><li class="maximenuck nodropdown item435 last level2 " style="z-index : 11981;"><a class="maximenuck " href="/download/templates-for-hikashop.html"><img src="/images/menu/icon_templates.png" alt="TEMPLATES FOR HIKASHOP" style="display: block; margin: 0 auto;" /><span class="titreck">TEMPLATES FOR HIKASHOP<span class="descck">Joomla templates optimized for HikaShop</span></span> </a> </li> </ul> <div class="clr"></div></div> <div class="clr"></div></div> </li><li class="maximenuck item104 active parent level1 " style="z-index : 11980;"><a class="maximenuck " href="/support.html"><span class="titreck">Support</span></a> <div class="floatck" style="width:500px;"><div class="maximenuck2 first " style="width:250px;float:left;"> <ul class="maximenuck2"><li class="maximenuck nodropdown item177 current active first level2 " style="z-index : 11979;"><a class="maximenuck " href="/support/documentation.html"><img src="/images/menu/documentation.png" alt="DOCUMENTATION" style="display: block; margin: 0 auto;" /><span class="titreck">DOCUMENTATION<span class="descck">Where everything is explained !</span></span> </a> </li><li class="maximenuck nodropdown item178 level2 " style="z-index : 11978;"><a class="maximenuck " href="/support/forum.html"><img src="/images/menu/forum.png" alt="FORUM" style="display: block; margin: 0 auto;" /><span class="titreck">FORUM<span class="descck">If our doc didn't answer your question</span></span> </a> </li></ul><div class="clr"></div></div><div class="maximenuck2" style="width:250px;float:left;"><ul class="maximenuck2"><li class="maximenuck nodropdown item179 level2 " style="z-index : 11977;"><a class="maximenuck " href="/support/faq.html"><img src="/images/menu/faq.png" alt="FAQ" style="display: block; margin: 0 auto;" /><span class="titreck">FAQ<span class="descck">Frequently Asked Questions</span></span> </a> </li><li class="maximenuck nodropdown item180 last level2 " style="z-index : 11976;"><a class="maximenuck " href="/support/contact-us.html"><img src="/images/menu/contact.png" alt="CONTACT US" style="display: block; margin: 0 auto;" /><span class="titreck">CONTACT US<span class="descck">For specific requests only</span></span> </a> </li> </ul> <div class="clr"></div></div> <div class="clr"></div></div> </li><li class="maximenuck item105 parent level1 " style="z-index : 11975;"><a class="maximenuck " href="http://demo.hikashop.com" target="_blank" ><span class="titreck">Demo</span></a> <div class="floatck" style="width:250px;"><div class="maximenuck2 first " style="width:250px;float:left;"> <ul class="maximenuck2"><li class="maximenuck nodropdown item181 first level2 " style="z-index : 11974;"><a class="maximenuck " href="http://demo.hikashop.com" target="_blank" ><img src="/images/menu/demo.png" alt="LIVE DEMO" style="display: block; margin: 0 auto;" /><span class="titreck">LIVE DEMO<span class="descck">Test HikaShop by yourself. Front-end and Back-end.</span></span> </a> </li><li class="maximenuck nodropdown item182 level2 " style="z-index : 11973;"><a class="maximenuck " href="/showcase.html"><img src="/images/menu/showcase.png" alt="THEY USE HIKASHOP !" style="display: block; margin: 0 auto;" /><span class="titreck">THEY USE HIKASHOP !<span class="descck">Gallery of the best websites realized with HikaShop.</span></span> </a> </li><li class="maximenuck nodropdown item373 last level2 " style="z-index : 11972;"><a class="maximenuck " href="/my-account/your-subscriptions.html"><img src="/images/menu/subscription.png" alt="MY SUBSCRIPTIONS" style="display: block; margin: 0 auto;" /><span class="titreck">MY SUBSCRIPTIONS<span class="descck">All your HikaShop products</span></span> </a> </li> </ul> <div class="clr"></div></div> <div class="clr"></div></div> </li> </ul> </div> <div class="maxiroundedright"></div> <div style="clear:both;"></div> </div> <div style="clear:both;"></div>  </div> </div> </div> </div> <div class="banner-spacer"></div>  <div class="body"> <div class="container"> <div id="system-message-container"> </div>  <div class="row-fluid"> <div class="span12"> <div class="item-page" itemscope itemtype="https://schema.org/Article"> <meta itemprop="inLanguage" content="en-GB" /> <div class="page-header"> <h2 itemprop="headline"> Filters and sorting of products on listings </h2> </div> <div itemprop="articleBody"> <table width="100%" border="0"> <tbody> <tr> <td> <ul> <li><a href="#description">Description</a></li> <li><a href="#global_info">Global Information</a></li> <li><a href="#toolbar">Toolbar</a></li> <li><a href="#main">Set the main information</a></li> <li><a href="#extra">Extra Information</a></li> <li><a href="#options">Options</a></li> <li><a href="#display">Display</a></li> <li><a href="#details">Detailed Possibilities</a></li> <li><a href="#example">Examples</a></li> </ul> </td> <td> <p><img style="display: block; margin-left: auto; margin-right: auto; width:150px;" src="/images/icon_doc/filter_form_small.png" alt="" /></p> </td> </tr> </tbody> </table> <p> </p> <h3><a name="description"></a>Description</h3> <p style="padding-left: 30px;">This screen enables you to create or edit your filters. In HikaShop, you will be able to manage filters for the customer products listing. That way, if he wants to see products with specific attributes, he can select some filters and reduce the products displayed on the listing to the products he is interested in. For example, in a computer shop he might want to select the quantity of RAM, or which kind of processor he would like in his computer. That will also allow you to display a sorting selector so that the customer can select how the listing should be sorted.</p> <p style="padding-left: 30px;">Filters are only available in the Business edition of HikaShop.</p> <h3><a name="global_info"></a>Global Information</h3> <p>Filters can be found in Display>Filters. A<span style="line-height: 1.3em;">dditional options for filters display can be found in the Display tab of the configuration of HikaShop.</span></p> <p><span style="line-height: 1.3em;">To display your filters, you have to make sure your module/listing has the "filters" display option set to Yes.</span></p> <p>Also note that you can also display your filters as a module by configuring the HikaShop Filter module via the joomla module manager. In your filter module, don't forget to set the id of a HikaShop category listing menu (you need to create that menu beforehand) in the menu option. If you use categories, the menu won't display products but only the categories on the search results page by default. You will have to change the "sub elements filter" option of the associated module of your category listing menu to "all sub elements" so that it displays all the products and not only the products directly linked to the parent category of your menu.</p> <p>And if you want to hide the filters at the top of the products listing, you can turn off the "filters" display option of your products listing menu item on the options page of your menu item that you can find via the Joomla menu manager when you edit the menu item.</p> <p> </p> <h3><a name="toolbar"></a>Toolbar</h3> <p style="text-align: center;"><img src="/images/icon_doc/view_form_toolbar.png" alt="" /></p> <p style="text-align: center;"> </p> <ul> <li><strong>Save & Close </strong>: Save the filter and return to the filters Management screen.</li> <li><strong>Save </strong>: Apply the modifications to the filter and stay on the same screen.</li> <li><strong>Cancel </strong>: Return to the previous screen without saving the modifications.</li> <li><strong>Help </strong>: This button enables you to turn ON/OFF the help section, this screen will appear or disappear.</li> </ul> <p> </p> <h3><span class="mw-headline"><a name="main"></a>Set the main information</span></h3> <p style="text-align: center;"><img src="/images/icon_doc/filters_main_info.png" alt="" /></p> <ul> <li><strong style="line-height: 1.3em;">Name</strong><span style="line-height: 1.3em;"> : Here you have to define the name of your filter.</span></li> <li><strong style="line-height: 1.3em;">Type</strong><span style="line-height: 1.3em;"> : Select the type of your filter, many choices are available like text, dropdown, cursor, etc.</span><span style="line-height: 1.3em;">Here you can see the different types of filters available:</span></li> </ul> <p> </p> <p style="padding-left: 30px; text-align: center;"><img src="/images/icon_doc/filters_examples.png" alt="" /></p> <ul> <li><strong>Category</strong> : Select the category where you want the filter to display. If no category is selected, the filter will always be displayed on products listings</li> <li><strong>Including sub categories</strong> : If you have sub categories inside the category you selected in the previous option, turning on that option will allow the filter to also be displayed when displaying products in sub categories of that category.</li> <li>Note that when you have a filter with an "apply on" set to "category", you'll get a second "category" setting where you can select the category from which the filter will use the direct sub categories as choices. The "Including sub categories" setting above won't have any effect on that and the category filter will only be able to filter the products directly linked to the category selected in the filter.</li> </ul> <h3><span class="mw-headline"><a name="extra"></a>Extra Information</span></h3> <p style="padding-left: 30px; text-align: center;"><img src="/images/icon_doc/filters_extra_info.png" alt="" /></p> <ul> <li><strong>Published </strong>: If a filter is published it means that it will be used by the system, otherwise, it won't be taken into account.</li> <li><strong>Submit on click : </strong>If you enable this option, you don't need to click on the "Filter" button. The filter will be applied automatically on click.</li> <li><strong>Height : </strong>Set the height of your filter.</li> <li><strong>Deletable filter : </strong>If that option is turned on, when a filter has been used, there is a delete icon next to it in order to cancel the filter.</li> <li><strong>Dynamic display : </strong>That option enables you to change the options of the filters according to the previously selected filters. For example, if all your products are computers with 4Go Ram and 250Go hard disks, if you select 4Go in the first filter, the second will show only the 250Go option and not the other values.</li> <li><strong style="line-height: 1.3em;">Access level</strong><span style="line-height: 1.3em;"> : You can restrict that filter from being displayed to some joomla groups of users.</span></li> </ul> <p> </p> <h3><span class="mw-headline"><a name="options"></a>Options</span></h3> <p style="padding-left: 30px; text-align: center;"><img src="/images/icon_doc/filters_options.png" alt="" /></p> <ul> <ul> <li><strong>Apply on </strong>: You can choose here, the type of information managed by your filter. It can be a list of the data columns of your products, custom fields, the price, the categories, the characteristics, the manufacturers, ...</li> <li><strong>Title position </strong>: Choose the position of the title of the filter. You can place it on the top, left, right, at the bottom or inside your filter.</li> <li><strong>Number of columns </strong>: You can choose the size (width) of each filter. It can be used for cursors to be more precise while setting an interval.</li> </ul> </ul> <p><br /><strong>Other options are available according to the selected type. You can find the complete options list there.</strong></p> <p> </p> <h3><span class="mw-headline"><a name="display"></a>Display</span></h3> <p>Additional options are available in the Features tab of the configuration of HikaShop. These options are global options of the whole filters zone.</p> <p style="padding-left: 30px; text-align: center;"><img src="/images/icon_doc/filters_config.png" alt="" /></p> <ul> <li><strong>Number of columns </strong>: Here you can set the number of columns for your filters, if you want 4 filters by row, for more visibility, it's possible.</li> <li><strong>Limit </strong>: With limit, you can define the number of filters shown.</li> <li><strong>Height </strong>: To define the height of each row of filters.</li> <li><strong>Show filter button </strong>: If you disable this option, the "Filter" button will not be visible. In that case, you should activate the option "Submit on click" on the different filters you created, otherwise the filters won't do anything.</li> <li><strong>Show reset button : </strong>This option will display a reset button emptying all filters.</li> <li><strong>Display fieldset </strong>: Display or not the fieldset around the filters.</li> <li><strong>Filter button position </strong>: You can change the position of the filter button, you can place it on the left or right of the filters, or next to the last field with the option "Inside".</li> </ul> <p> </p> <h3><a name="details"></a>Detailed Possibilities </h3> <ul> <li><span style="line-height: 1.3em;"> <strong>Text : </strong>If you choose this option, a text field will be displayed.</span></li> <ul> <li><span style="line-height: 1.3em;"><em>Apply on</em>: Define on which field the search will be done. Note that filters on price won't search for variants' price so if your products have no price, nothing will be displayed. We suggest to set a price to yours main products in this case.</span></li> <li><em><span style="line-height: 1.3em;">Search Processing </span></em><span style="line-height: 1.3em;">: Every words will distinctly search each word typed (but they both have to appear somewhere), complete expression will search for the whole expression, any word will search for each word with or without the others. Finally the search operators features allow our customers to use quotes for a complete expression search (like "red balloon"), plus for a every word search (red+balloon) and spaces for an any word search (red balloon)</span></li> <li><span style="line-height: 1.3em;"><em>Maximum length</em> : You can here define a maximum length for the typed expression</span></li> </ul> <li><strong>Radio Button : </strong>This filter will display radio buttons with the values you specified or specific information</li> <ul> <li><em>Apply on</em>: This option define on which data the filter will be executed. Changing it may display additional information.</li> <li><em>Inline button </em>: change the button display and put the radio button in a line</li> <li><em>Currencies : </em>If you selected "price" in the "apply on" option you must select a currency</li> <li><em>Values </em>: Here you can set the different values of your radio buttons. If the "<span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; line-height: 18px;">Defined limits" is set to No, it will display theses values this way: "from X to Y" and "superior to Y" and "inferior to X"</span></li> <li><em><span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; line-height: 18px;">Defined limits </span></em><span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; line-height: 18px;">: This option will make the radio buttons display the exact values you specified without anything else</span></li> <li><em><span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; line-height: 18px;">Categories/caracteristics </span></em><span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; line-height: 18px;">: This option will be displayed iy you choose category or characteristic in the "apply on" option. It will display the different values of your characteristics or the sub-categories of the selected category</span></li> <li><span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; line-height: 18px;"><em>Sort</em> : If you chose the "sort" option in "apply on", this field will allow you to pick up the data on which the sort have to be done. Since it's a multiselect, you can pick "price" and "weight" if you want to display "ascending price", "ascending weight", "descending price", "descending weight".</span></li> <li><em><span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; line-height: 18px;">Custom Fields </span></em><span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; line-height: 18px;">: allow you to pick up a custom field. You then have to add values so it will filter on these custom field.</span></li> </ul> <li><span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: small;"><span style="line-height: 18px;"><strong>Check box</strong> : Display check boxes. The options available for this filter type are the same as for the radio button. <br /></span></span></li> <li><span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: small;"><span style="line-height: 18px;"><strong>Single Dropdown</strong> : This filter type display a single dropdown. The options available are the same as for the buttons except you can define a specific size.<br /></span></span></li> <li><span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: small;"><span style="line-height: 18px;"><strong>Multiple Dropdown</strong> : This filter type display a mulitple dropdown. The options available are the same as for the Single dropdown</span></span></li> <li><span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: small;"><span style="line-height: 18px;"><strong>Cursor : </strong> This filter type will display a cursor which allow simple and quick filtering on your product data.</span></span></li> <ul> <li><span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: small;"><span style="line-height: 18px;"><em>Apply on</em>: Choose here on which data of product you want the cursor to be apply.</span></span></li> <li><span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: small;"><span style="line-height: 18px;"><em>Cursor number </em>: You can there choose how much cursor you want to display. One will make the filtering to go from 0 to the given value. Two allow a more precise selection from X to Y. Three allow from X to Y and Z to MAX (or 0 to Z) and Four allow from X to Y and Z to W.</span></span></li> <li><span><span><em><span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: small;"><span style="line-height: 18px;">Maximum and Minimum value</span></span></em><span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: small;"><span style="line-height: 18px;">: Allow you to specify a maximum and minimum value instead of 0 and the maximum automatically found.</span></span><br /></span></span></li> <li><span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: small;"><span style="line-height: 18px;"><em>Cursor step</em>: If you want the cursor to go from 5 to 5, set 5 here.</span></span></li> <li><span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: small;"><span style="line-height: 18px;"><em>Cursor effect</em>: Display a smooth effect when clicking on a cursor<br /></span></span></li> <li><span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: small;"><span style="line-height: 18px;"><em>Cursor width :</em> You can here define the exact width of the cursor bar.</span></span></li> </ul> <li><span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: small;"><span style="line-height: 18px;"><strong>List </strong>: Display the select information in a simple list. This filter type working the same way as the dropdown and buttons<br /></span></span></li> <li><span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: small;"><span style="line-height: 18px;"><strong>Attributes </strong>: You can there write and set HTML attributes which will be applied to your filter<br /></span></span></li> <li><span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: small;"><span style="line-height: 18px;"><strong>In stock Checkbox</strong> : Display a simple checkbox. If this box is checked, only in stock product will be displayed.<a name="example"></a><br /></span></span></li> </ul> <h3><span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: small;"><span style="line-height: 18px;">Example</span></span></h3> <p><span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: small;"><span style="line-height: 18px;">To conclude this documentation, here is a small tutorial on how to create a filter which display a cursor of prices next to a dropdown allowing to sort by price and name.</span></span></p> <p><span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: small;"><span style="line-height: 18px;">First of all you have to go in Display>Filters, then create a new filter by clicking on "New". Configure your first filter like this:</span></span></p> <p><span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: small;"><span style="line-height: 18px;"><img style="display: block; margin-left: auto; margin-right: auto;" src="/images/icon_doc/filters_example1.png" alt="" width="759" height="627" /></span></span></p> <p> </p> <p>As you can see we selected the type cursor for this one, it will display a nice Jquery cursor allowing user to define a range of price for the product displayed, including discounted products. The filter will be applied on price since it's the selected option and we set a maximum and minimum value for it. You can notice that cursor effect is activated to give a smooth scroll when you click on the cursor bar.</p> <p>Second filter has to be configured this way:</p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="/images/icon_doc/filters_example2.png" alt="" width="784" height="552" /></p> <p>This one will display a sort dropdown where you'll be able to choose between "price ascending", "price descending", "name ascending" and "name descending". You can see that the sort field allow you to add as much data as you want. Two new entries will be displayed for each data.</p> <p>To conclude this, here is the result:<img style="display: block; margin-left: auto; margin-right: auto;" src="/images/icon_doc/filters_example_result.png" alt="" /></p> </div> </div> </div> </div>  </div> </div>  <div id="footer"> <div class="navbar"> <div><a class="btn btn-navbar" data-toggle="collapse" data-target=".nav2-collapse"><span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></a></div> <div class="nav2-collapse"> <div class="moduletable footer_menu"> <ul class="nav menu mod-list"> <li class="item-195"><a href="/privacy-policy.html" >Privacy Policy</a></li><li class="item-196 divider"><span class="separator ">|</span> </li><li class="item-197"><a href="/license-agreement.html" >License Agreement</a></li><li class="item-622"><a href="/terms-of-use.html" >Terms of Use</a></li><li class="item-198 divider"><span class="separator ">|</span> </li><li class="item-199"><a href="/money-back-policy.html" >Money-back Policy</a></li><li class="item-200 divider"><span class="separator ">|</span> </li><li class="item-201"><a href="/affiliate.html" >Affiliate</a></li><li class="item-202 divider"><span class="separator ">|</span> </li><li class="item-611"><a href="/support/contact-us.html" >Contact us</a></li><li class="item-204 divider"><span class="separator ">|</span> </li><li class="item-205"><a href="https://twitter.com/hikashop" ><img src="/images/menu/twitter.png" alt="Follow us on Twitter" /></a></li><li class="item-438"><a href="https://www.youtube.com/channel/UCbVQsVlP6mkuyT4IsItWcpA" ><img src="/images/menu/youtube.png" alt="Follow us on Youtube" /></a></li></ul> </div> <br/> <div style="text-align:center;max-width:550px;margin:0 auto;color:#8f8f8f;font-size:10px;"> HikaShop.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla!® name and logo are trademarks of Open Source Matters, Inc., in the United States and other countries. </div> </div> </div> </div> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create','UA-18636956-1','auto'); ga('send','pageview'); </script> </body> </html>