Long list of manufacturers

Hi,

I want to use the nop ajax filter for a perfumery web shop. this means that i will have a list of maybe more then hundred of manufacturers. How do you suggest to display all those manufacturers on the filter?

Thanks in advance.

Hi haknesh,

The most compact way of displaying the Filter options is to use Dropdowns instead of Checkboxes.

Thanks

Hi Boyko,

One of the reasons that I like the filter, is because of multiple choice possibilities with the checkboxes. So using drop down instead is not a option for me. is it not possible to make the div of the manufacturer filter scrollable? or maybe other suggestions?

HI haknesh,

It is a matter of styling to make the box scrollable. You can add max-height to the ul element inside the filtersGroupPanel. For example if you have a lot of attributes you can make only the attributes scrollable.

.attributeFilterPanel7Spikes ul
{
max-height: 300px;
overflow: auto;
}

Hope this helps!

Thanks

Currently I am using trial version of nope 3.60 I have same issue.

Please tell me where I have to change.
I mean in which file so that i can make all filters scrollable.

Hi,

You can set it in Plugins\SevenSpikes.Nop.Plugins.AjaxFilters\Themes\YourTheme\Content\AjaxFilters.css, if you are using one of our themes. 

Play around with the max-height property so you can adjust the panel height according to your liking. 

I have changed below is my CSS but it has no effect.
/*
* Copyright 2015 Seven Spikes Ltd. All rights reserved. (http://www.nop-templates.com)
* http://www.nop-templates.com/t/licensinginfo
*/
.attributeFilterPanel7Spikes ul
{
max-height: 20px;
overflow: auto;
}




.nopAjaxFilters7Spikes .filtersTitlePanel {
  display: none;
}
.nopAjaxFilters7Spikes a {
    cursor: pointer;
}
.product-filters {
  display: none; /*hide empty default filters*/
}




.nopAjaxFilters7Spikes .block {
    min-height: 46px;
    margin: 0 auto 10px;
}
.nopAjaxFilters7Spikes .block .title {
    position: relative;
    overflow: hidden;
    padding: 0;
    background: #f6f6f6;
    margin: 0;
}
.nopAjaxFilters7Spikes .block .filtersGroupPanel {
    position: relative;
    padding: 15px 10px;
    overflow: hidden;
}
.nopAjaxFilters7Spikes .block .title a.toggleControl {
    position: relative;
    display: block;
    cursor: pointer;
    padding: 12px 40px 12px 10px;
    color: #444;
    font-size: 18px;
}
.nopAjaxFilters7Spikes .block .title a.toggleControl:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 12px;
  height: 19px;
  margin-top: -9px;
  background: url(images/filters-toggle.png) center no-repeat;
}
.nopAjaxFilters7Spikes .block .title a.clearFilterOptions {
    position: absolute;
    top: 50%;
    right: 40px;
    font-size: 14px;
    line-height: 1;
    text-transform: lowercase;
    color: #888;
    cursor: pointer;
    margin-top: -7px;
}
.nopAjaxFilters7Spikes .block .title a.clearFilterOptions:hover {
  text-decoration: underline;
}












/* search criteria */




.selected-options-list > li {
  margin: 10px 0 0;
  font-size: 16px;
    overflow: hidden;
}
.selected-options-list > li:first-child {
  margin: 0;
}
.selected-options-list > li label{
    display: block;
    color: #444;
    margin: 0 0 2px;
}
.selected-options-list > li span {
    float: left;
    padding: 6px 14px 6px 0;
    margin: 0 20px 0 0;
    color: #4ab2f1;
    cursor: pointer;
    background: url(images/filters-remove.png) right center no-repeat;
    line-height: 1;
}
.selected-options-list > li span:hover {
  text-decoration: underline;
}












/* price range slider */




.priceRangeFilterPanel7Spikes .ui-slider {
    margin: 0 0 20px;
    border-radius: 0;
    height: 11px;
    background: #f3f3f3;
    border: 1px solid #ddd;
}
.priceRangeFilterPanel7Spikes .ui-slider-range.ui-widget-header {
    top: -1px;
    height: 11px;
    background: #ccc;
    border: 1px solid #bbb;
}
.priceRangeFilterPanel7Spikes .priceRangeMinMaxPanel {
    overflow: hidden;
    margin-bottom: 20px;
}
.priceRangeMinPanel,
.priceRangeCurrentPricesPanel .currentMinPrice {
    float: left;
}
.priceRangeMaxPanel,
.priceRangeCurrentPricesPanel .currentMaxPrice {
    float: right;
}
.priceRangeMinPanel,
.priceRangeMaxPanel {
    font-size: 14px;
    color: #888;
}
.priceRangeCurrentPricesPanel .currentMinPrice,
.priceRangeCurrentPricesPanel .currentMaxPrice {
    font-size: 16px;
    color: #444;
}
.nopAjaxFilters7Spikes .block .title a.clearPriceRangeFilter {
    position: absolute;
    top: 50%;
    right: 40px;
    font-size: 14px;
    line-height: 1;
    text-transform: lowercase;
    color: #888;
    cursor: pointer;
    margin-top: -7px;
}
.nopAjaxFilters7Spikes .block .title a.clearPriceRangeFilter:hover {
  text-decoration: underline;
}
.priceRangeFilterPanel7Spikes .ui-slider-handle {
    top: -7px !important;
    width: 10px !important;
    height: 23px !important;
    padding: 0 !important;
    cursor: pointer !important;
    background: #aaa !important;
    border: 1px solid #999 !important;
    border-radius: 0 !important;
    margin: 0 0 0 -1px !important;
}
.priceRangeFilterPanel7Spikes .ui-slider-handle:last-child {
  margin-left: -9px !important;
}

Please provide the solution or provide update css for this problem

Hi,

Can you provide us with the path to your css file ? Also, make sure that the css file you are changing belongs to the active theme on your website.

My path is 
Desktop\nopCommerce_3.60_Source\Presentation\Nop.Web\Plugins\SevenSpikes.Nop.Plugins.AjaxFilters\Themes\DefaultClean\Content\AjaxFilters.css


and default clean is my active theme