General Discussion

Topic for general discussion regarding Nop Ajax Filters

I developed a NopAjax Filters variation with hide() and show() jquery effect. You can see it here.

All the filters are included in div "specificationFilterGroupPanel". What I need to manage is to separate the specifications by "data-optionsGroupId" and when I click on each item of "specificationFilterGroupPanel", to show the relevant item only and hide all the others of the "specificationFilterPanel7Spikes".

Any idea how to do this?

Hi,

In the SpecificationFilter\Styles\DarkOrange\SpecificationFilter.css file there four styles:

1. .specificationFilterPanel7Spikes .specificationFilterGroupPanel a.filterItemUnselected

2. .specificationFilterPanel7Spikes .specificationFilterGroupPanel a.filterItemSelected

3. .specificationFilterPanel7Spikes .specificationFilterGroupPanel a.filterItemSelectedDisabled

4. .specificationFilterPanel7Spikes .specificationFilterGroupPanel a.filterItemDisabled

Basically the filters work in the following way.

If an item is relevant but not selected it has the filterItemUnSelected style.
If the item is selected and still relevant it has the filterItemSelected style.
If the item is selected but a subsequent selection from another specificationFilterGroupPanel makes it irrelevant it has the filterItemSelectedDisabled style.
If the item is unselected but a selection from another specificationFilterGroupPanel makes it irrelevant it has the filterItemDisabled style.

So you can edit the filteItemSelectedDisabled and filterItemDisabled styles to have display: none so that all disabled items will not be visible.

Are you certain that you want the user not to see what items are being disabled by their current selection, because this might turn out to be confusing to the user? You can see here what I mean here by clicking on the AMD option. Or by clicking AMD, then Itel, then 3GB.

Anyways, let us know how you are getting on with your work. If you need further assistance please let us know!

Thanks

Hi,

I want to click on specification title and show its filter items. My problem is that on clicking the title, it opens all filter items of every specification.

I need to open each specification separately and hide the others (but, I don't mind if the already opened items stay opened on clicking the others).

The selection of the hidden filters are not being disabled, so I suppose I will not have any problem if they are hidden.

The script that I use is

@if (Model.NopAjaxFiltersSettingsModel.EnableSpecificationsFilter)
{
    
<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        var $div = $('.specificationFilterGroupPanel');
        var e = $div.attr("data-optionsGroupId");
        var f = {};
        f.Id = e;

        var $div1 = $('.manufacturerFilterGroupPanel');
        var $div2 = $('.attributeFilterGroupPanel');

        var height = $div.height();
        $div.hide().css({ height: 10 });

        ab = $(".specificationFilterPanel7Spikes");
        $(ab).click(function () {

            if (e == "2") { $div.show().animate({ height: height }, { duration: 500 }); }
            if ($div.is(':visible')) {
                $div.animate({ height: 0 }, { duration: 500, complete: function () {
                    $div.hide();
                }
                });
            } else {
                $div.show().animate({ height: height }, { duration: 500 });
                $div1.hide();
                $div2.hide();
            }

            return false;
        });
    });

</script>
    
    @Html.Action("GetSpecificationFilter", "SpecificationFilter7Spikes")

}

in the NopFilters.cshtml page.

I hope it's more helpfull now.

Thanks in advance.

Looking at your web site and the example you have included, I can say that the problem is this line:

var $div = $('.specificationFilterGroupPanel');

Here your are selecting all specification groups (inspect the $div and you will see three elements there) and you should be selecting only the one that is under the element that is being clicked.

So on document.ready you should hook click events to all the <div class="title"> elements (I believe this where you want your click events to be intercepted).
In the click handler for the event you should have something like this:

var $div = $(this).siblings('.specificationFilterGroupPanel');

This will get you the specificationFilterGroupPanel only for the currently clicked specification group.

Hope this helps!

Hello,

As I mentioned above, I made some custom changes in specification filters.

The filters work fine, but I encountered a huge delay on loading categories.
It happends only when I enable

SevenSpikes.NopAjaxFilters.Admin.EnableSpecificationsFilter.

Any idea on this??

Thanks in advance.

Hi,

By Categories do you mean, when loading the products, upon filter selection?
Please note that we have identified a performance issue with the filters, which can be tracked all the way back to nopCommerce 2.0 and the use of Linq. We have been working to fix that and are planning to ship an update by the end of this week.
We will notify all our customers, so that they can update their installations.

I hope this works for you and will not be holding you back in your development!

Best Regards

Hi,

Does it also work with dropdown/select boxes instead of radio/checkboxes ?
Can I get a Trial ?

Kind regards,

Stephen

Hi Stephen,

The filters does not come with an automatic support for dropdowns.
But today we have released a new version of the filters, in which all the razor views are open to modifications, so you should be able to change them to be dropdowns.
If you have difficulties we can help of course.

Hello,

I am using nopCommerce 2.3 and when I have nopAjax filters enabled I am tracing a huge delay on loading categories and their products.

The site url is www.eleftheriouonline.gr

Could you help me with this issue??

Thanks in advance.