AjaxFilter Not working on a customized themes

Hi, I'm new to nopCommerce, so please be patient with me :) thank you!

I downloaded your AjaxFilter demo version, to feel if its really what we need on our project, when we installed it, it's working perfectly with the default themes of nopCommerce, but when we use our customized themes, i don't know what happen, the filter is not working, do i need to configure something or maybe i missed something?

Hi,

Could you please give us a little more information on what is not working. Are there any errors while you filter the product?

A link to your site would be very useful as in this way we can inspect what is not working.

Looking forward to your reply!

Hi, we're running the site into our local, but I think we already solve the problem, we just add "nop7SpikesAjaxFiltersGrid" into the class of the product grid.. here's what we did

<div class="product-grid nop7SpikesAjaxFiltersGrid">

we notice that, on the default theme of the nopCommerce, this portion is automatically added on the product grid class once we filtered it.. is there any way we can do that also?

another thing, the infinite scroll is not working also..
below is the structure of the product-grid view

<ul class="eyeglasses-list">
<div class="product-grid nop7SpikesAjaxFiltersGrid">
   <li data-productid="">
  <img src="#">
   <div class=" eyeglasses-info-container">
     <h3> PRODUCT TITLE </h3>
      <span class="price actual-price">$49.99</span>
  </div>
    <div class="stock-status"></div>
    <div class="tools">
          <a class="form-submit default-button cta cta-dark" href="/">View Detail</a>
              <span class="favorite-btn"></span>
    </div>
    
  </li>

  <div class="productPanelAjaxBusy" style="display: none;"></div>
  <div class="clear"></div>
  <div class="infinite-scroll-loader" style="display: none;">Loading more products ...</div>
</div>
</ul>

as you can see.. we added the "productPanelAjaxBusy", "clear", "infinite-scroll-loader", still, the infinite scroll is not working, did we missed something?

Thanks,
Don

Hi Don,

you should not add any classes in order to make the Ajax Filters to work.

It is hard to identify the problem without checking your site, but I will start with the most common mistakes.

If you have custom category templates please follow this article: https://www.nop-templates.com/ajax-filters-plugin-for-nopcommerce-documentation#addcategorytemplate

About the infinite scrolling, again you should not add anything ( neither classes nor elements ). The only thing that needs to be present in the code is the pager. It should be something like this:

<div class="pager">
<ul>
<li class="current-page"></li>
<li class="individual-page"></li>
<li class="next-page"></li>
</ul>
</div>

Hope this helps!

Hi Thanks for the info, we don't rename anything, we just copy the Catalog folder from the default nopCommerce and paste in inside our theme, Themes\Views\VisionHub\Catalog, so, we don't rename any file name, we just edit the CSS.. so i guess we don't need to add anything from the admin\system\templates\category templates.. if we remove this "nop7SpikesAjaxFiltersGrid", which i already mentioned above, the filter will not work.

and for the infinite scroll, we already have the pager.. but its not working..

Thanks,
Don

Hi Don,

I don't think that it is possible to find the problem without inspecting your site. Everything that I already suggested was just assumptions based on past experience.

If you need to keep the conversation private ( e.g. share a link to your site ), you can submit a ticket where the conversation won't be visible by anyone except you and our staff.

Hi,

Sorry if it took me some time before i could replay to this, i will send a ticket to share you the link of our site :)

Thanks in advance!

Hi, 

As we have replied to your ticket you have to make the following changes:

1. On the element '.main' add class "master-wrapper-page".

2. Add this CSS to "clear" the float of the inner elements:
.product-grid, .product-list {
   overflow: hidden;
}

3. Each <li data-productid=""> that holds a product must have class "item-box".


Regards !