Making Pagination & Attribute Filter Aware CSS Using Jquery
I run a toy website and manufacturers release a large number of various toy series. This can be problematic because in order to view the products in the main category you have to do a lot of scrolling. Likewise this can be a problem when using attributes to filter products, requiring a lot of scrolling to see the actual filtered products.
Example: https://toybomb.com/funko/pop
To do this I put together some code using Jquery. Feel free to use on your own sites. Returning the favor to the community after the folks at /r/Jquery helped me troubleshoot my initial attempts.
Goal 1 - Remove Category List When Attribute Filters Are Applied
<script>
$(function () {
if ($('div').hasClass('applied-attribute-filter')) {
$( "#CategoriesList" ).addClass( "displayNone" );
}
});
</script>
Script Explanation: Searches the category page for a div with the "applied-attribute-filter" class, a class that appears when attribute filters are applied. If true, it adds the class "displayNone" to my wrapper div #CategoriesList.
Goal 2 - Display Category List Only On First Page Pagination
<script>
$(function () {
if ($('.pagination li:nth-child(2)').hasClass('active')) {
$( "#CategoriesList" ).addClass( "displayYes" );
}
});
</script>
Script Explanation: Searches the category page's "pagination" div to see if the "nth child", where the 2nd one is the first page, is "active". If true, it applies "displayYes" class to my #CategoriesList wrapper div. By default display is set to "none" unless this "displayYes" class with "display: block !important;" is applied.
I am a relative newbie to Jquery so I am not going to say this is the most ideal or optimized code but it is something that I got working, suited my needs, and I felt was worth sharing if anyone else with Americommerce runs as many categories as me.
Please sign in to leave a comment.
Comments
0 comments