Profile: mstuart

I demoed the AjaxFilters to my client today.  They liked it, but had two complaints.

1) Performance.  

They did not like how long it took to return results.  I mentioned that it is was due to the including of subcategories and the number of products, but that didn't go over so well.

They showed me two sites where similar filters are used and have even more products than they do.

http://www.zappos.com/mens-shoes~ov

and

http://www.ebay.com/sch/93427/i.html?_sop=12&_ipg=48&_dcat=93427



2) As a compromise to the performance, they asked if it was possible to have a  "go" or "apply" filter button enabling the user to make multiple selections first then click a button to filter.  This would speed things up a bit due to not having to wait for the response before clicking each filter item.

Example: http://www.ebay.com/sch/93427/i.html?_sop=12&_ipg=48&_dcat=93427

(clicking the "see all" link displays more options with a "go" button)

Ah HA!!!   That fixed it.

Thanks so much for all your help!!!

Here are the steps I have taken that have resulted in the error message "Loading the page failed."


1) Fresh install of nopCommerce. (Using sample data)

2) Set nopCommerce Catalog setting > Include products from subcategories: (checked)

3) Installed NopAjaxFilters

4) Set NopAjaxFilters setting > Include Products From Subcategories: (checked)


Using DefaultClean theme...

5) Copy ~/Views/Shared/_ColumnsThree.cshtml over to ~/Themes/DefaultClean/Views/Shared/

6) Rename ~/Themes/DefaultClean/Views/Shared/_ColumnsThree.cshtml  to ~/Themes/DefaultClean/Views/Shared/_ColumnsThreeFilters.cshtml

7) In ~/Themes/DefaultClean/Views/Shared/_ColumnsThreeFilters.cshtml,
place widget @Html.Widget("NopAjaxFilters") in the <div class="rightside-3"> tag.   (This puts the filters on the right side of the page)

8) Create a new folder called "Catalog" in ~/Themes/DefaultClean/Views/

9) Copy ~/Views/Catalog/CategoryTemplate.ProductsInGridOrLines.cshtml over to ~/Themes/DefaultClean/Views/Catalog/

10) Rename ~/Themes/DefaultClean/Views/Catalog/CategoryTemplate.ProductsInGridOrLines.cshtml to ~/Themes/DefaultClean/Views/Catalog/CategoryTemplate.ProductsInGridOrLinesFilters.cshtml

11) Edit  ~/Themes/DefaultClean/Views/Catalog/CategoryTemplate.ProductsInGridOrLinesFilters.cshtml
Change the Layout from:

Layout = "~/Views/Shared/_ColumnsThree.cshtml";
to
Layout = "~/Themes/DefaultClean/Views/Shared/_ColumnsThreeFilters.cshtml";

12) Create new record in nopCommerce DB table [CategoryTemplate]

Name = 'Products In Grid Or Lines w/ Filters'
ViewPath = 'CategoryTemplate.ProductsInGridOrLinesFilters'
DisplayOrder = 2

13) In nopCommerce settings > Catalog > Categories: edit a category that contains subcategories.  Select the Category template "Products In Grid Or Lines w/ Filters" in the dropdown.  Save Category.

14) Browse to category w/ filter.  Click on a filter item.  Receive the error message.


Do you see anything wrong with the above steps?

Would you mind trying to do the steps and see if you receive the same error message "Loading the page failed."?

Great!  Thank you!

Awesome Support!

Ok... I figured out the second issue.... sort of.   This is more an issue with the
~/Views/Catalog/CategoryTemplate.ProductsInGridOrLines.cshtml

It only show products and the container <div> (product-list,  product-grid) when there are products assigned to that category.  So I need to make some adjustments.

Is there any documentation on the javascript processes?  

Specifically, I'm looking for how it populates the divs (product-list,  product-grid).  

I want to hide the sub-category-grid <div> when the filter returns results and show it again when all filters are cleared.

No sure which js include file and function(s) to look for.


Thanks again for all your help and patience.

Yes, I'm working on a new custom theme.  I copied the Default theme renamed it and have been adding to as needed.

So...

1) I just took a fresh copy of nopCommerce...and pointed it to my DB.  I installed the AjaxFilters again and now I no longer receive the error message.  So there is definitely something wrong with my new theme in relation to the AjaxFilters.  Not sure what the issue here is as my changes have all been minor HTML/CSS type edits....  I'm not sure how to proceed with this.


2) The above mentioned test raised another issue.  When I click on one of the filter items, as I said, there is no longer an error message, but the issue now is it only displays the paging buttons below the sub categories.  No products.   Does it matter if the category page that the Ajaxfilters are on has only sub categories, no products itself?

Ok, I deleted the AjaxFilters plugin folder and copied it over again.  This did not fix the issue.  

Do I need to download another version?


Some additional information....

I have the custom widget for the AjaxFilters placed in /Views/Shared/_ColumnsThree.cshtml (in the right column)

_ColumnsThree.cshtml is being referenced by /Views/Catalog/CategoryTemplate.ProductsInGridOrLines.cshtml

Looks like I went over the character limit.

One last bit...

Page URL:  http://localhost:2619/catalog7spikes/getfilteredproducts  

Ok... here goes...


The log entry message.Short message:  

The model item passed into the dictionary is of type 'SevenSpikes.Nop.AjaxFilters.Models.ProductsModel', but this dictionary requires a model item of type 'Nop.Web.Models.Catalog.CategoryModel'.  


The details for the log entry.Full message:  

System.InvalidOperationException: The model item passed into the dictionary is of type 'SevenSpikes.Nop.AjaxFilters.Models.ProductsModel', but this dictionary requires a model item of type 'Nop.Web.Models.Catalog.CategoryModel'. at System.Web.Mvc.ViewDataDictionary`1.SetModel(Object value) at System.Web.Mvc.ViewDataDictionary..ctor(ViewDataDictionary dictionary) at System.Web.Mvc.WebViewPage`1.SetViewData(ViewDataDictionary viewData) at System.Web.Mvc.RazorView.RenderView(ViewContext viewContext, TextWriter writer, Object instance) at System.Web.Mvc.BuildManagerCompiledView.Render(ViewContext viewContext, TextWriter writer) at System.Web.Mvc.ViewResultBase.ExecuteResult(ControllerContext context) at System.Web.Mvc.ControllerActionInvoker.InvokeActionResult(ControllerContext controllerContext, ActionResult actionResult) at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass1a.<InvokeActionResultWithFilters>b__17() at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass1a.<>c__DisplayClass1c.<InvokeActionResultWithFilters>b__19() at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass1a.<>c__DisplayClass1c.<InvokeActionResultWithFilters>b__19() at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass1a.<>c__DisplayClass1c.<InvokeActionResultWithFilters>b__19() at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass1a.<>c__DisplayClass1c.<InvokeActionResultWithFilters>b__19() at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass1a.<>c__DisplayClass1c.<InvokeActionResultWithFilters>b__19() at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass1a.<>c__DisplayClass1c.<InvokeActionResultWithFilters>b__19() at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass1a.<>c__DisplayClass1c.<InvokeActionResultWithFilters>b__19() at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass1a.<>c__DisplayClass1c.<InvokeActionResultWithFilters>b__19() at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultWithFilters(ControllerContext controllerContext, IList`1 filters, ActionResult actionResult) at System.Web.Mvc.Async.AsyncControllerActionInvoker.<>c__DisplayClass25.<>c__DisplayClass2a.<BeginInvokeAction>b__20() at System.Web.Mvc.Async.AsyncControllerActionInvoker.<>c__DisplayClass25.<BeginInvokeAction>b__22(IAsyncResult asyncResult) at System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncResult`1.End() at System.Web.Mvc.Async.AsyncControllerActionInvoker.EndInvokeAction(IAsyncResult asyncResult) at System.Web.Mvc.Controller.<>c__DisplayClass1d.<BeginExecut

Thanks for getting back so fast.

Currently, I'm working on my local machine using Visual Studios 2012.  I'm working on a website redesign for a client and would like to demo the Ajax Filter to them.


Will attaching the "view source" help?