Isotope.js Filter for Webflow

isofilter.html

<!-- Michael Leocádio @ 2017-->

<script src="https://unpkg.com/isotope-layout@3.0.1/dist/isotope.pkgd.min.js"></script>

<!-- ISOTOPE -->
<script>
    $(document)
        .ready(function() {
        
            /* Essencial items
            
                - DIV TARGET - Div containing all dynamic items to be included into this filtering context.
                - FILTER SELECTOR - Button/selector used to apply filter.
                - FILTERS WRAPPER - Div wrapping all filter selectors in this filtering context.
                - FILTER KEY
            */
            
            // Add dynamic class
            jQuery('.w-dyn-item .category') // KEY
                .each(
                    function(index, element) {
                        var _this = jQuery(element);
                        _this.parent()
                            .parent()
                            .addClass(_this.text()); // Removed .tolowercase
                    }
                );

            // Init Isotope after all images have loaded
            var $grid = $('.products-grid')
                .imagesLoaded(function() { // TARGET
                    $grid.isotope({
                        itemSelector: '.w-dyn-item',
                        sortBy: 'random',
                        stagger: 10,
                        hiddenStyle: {
                            opacity: 0
                        },
                        visibleStyle: {
                            opacity: 1
                        },
                        transitionDuration: 200
                    });
                });

            // Bind filter function
            $('.filters') // FILTERS WRAPPER
                .on('click', '.filterbutton', function() { // SELECTOR
                    // Set filter for Isotope
                    var filterValue = $(this)
                        .attr('data-filter');
                    $grid.isotope({
                        filter: filterValue
                    });
                });

            // Change is-checked class on buttons
            $('.filters')
                .on('click', '.filterbutton', function() {
                    $('.filters')
                        .find('.is-checked')
                        .removeClass('is-checked');
                    $(this)
                        .addClass('is-checked');
                });

            // Use value of search field to filter
            var $qsRegex;
            var $quicksearch = $('#quicksearch')
                .keyup(debounce(function() {
                    qsRegex = new RegExp($quicksearch.val(), 'gi');
                    $grid.isotope({
                        filter: function() {
                            return qsRegex ? $(this)
                                .text()
                                .match(qsRegex) : true;
                        }
                    });
                }));

            // Debounce so filtering doesn't happen every millisecond
            function debounce(fn, threshold) {
                var timeout;
                return function debounced() {
                    if (timeout) {
                        clearTimeout(timeout);
                    }

                    function delayed() {
                        fn();
                        timeout = null;
                    }
                    setTimeout(delayed, threshold || 100);
                };
            }

            // Disable submit on enter key press for the search field
            $('#quicksearch')
                .on('keyup keypress', function(e) {
                    var keyCode = e.keyCode || e.which;
                    if (keyCode === 13) {
                        e.preventDefault();
                        return false;
                    }
                });

            // Scroll Grid Wrapper back to top when clicking on a filter
            $('.filterbutton').click(function() {
                $('.grid-wrapper').scrollTop(0);
            });
        });
</script>