Cusom collection filter - shopify

collection-filter-sort.js

    //Collection page
    // Start of filter
    var grid_view_items = $('.grid--view-items');
    var grid_product = $(grid_view_items).find('.grid__item');

    var $filterCheckboxes = $('input[type="radio"].collection-filter');

    $filterCheckboxes.on('change', function() {

      var selectedFilters = {};

      $filterCheckboxes.filter(':checked').each(function() {

        if (!selectedFilters.hasOwnProperty(this.name)) {
          selectedFilters[this.name] = [];
        }

        selectedFilters[this.name].push(this.value);
        
      });

      var $filteredResults = $(grid_view_items).find('.grid__item');
     
      $.each(selectedFilters, function(name, filterValues){
        $filteredResults = $filteredResults.filter(function(){
          var matched = false, 
          currentFilterValues = $(this).data('tags').split(' ');
    
          $.each(currentFilterValues, function(_, currentFilterValue) {
            
            if ($.inArray(currentFilterValue, filterValues) != -1) {
              
              matched = true;

              return false;
            }
          });
          
          return matched;

        });

      });
      
      $(grid_product).hide().filter($filteredResults).show();
      $('input[type="radio"]#bike-sort').attr('checked', true).trigger('click');
      $('#filter-icon').removeClass('rotate');
      
    });

    // Start sorting
    $('input[type="radio"][name="bike-sort"]').on('change', function(){
       
      var sort_value = $(this).val();
    
      switch (sort_value) {
        case 'price-high-to-low':
          sortProductsDescending(sort_value);
          colorVariantSelect();
        break;
        case 'price-low-to-high':
          sortProductsAscending(sort_value);
          colorVariantSelect();
        break;
        case 'a-z':
          sortProductsAscending(sort_value);
          colorVariantSelect();
        break;
        case 'z-a':
          sortProductsDescending(sort_value);
          colorVariantSelect();
        break;
        case 'all':
          sortProductsDefault();
          colorVariantSelect();
        break;
      }

      $('#filter-icon').removeClass('rotate');

    });

    function sortProductsDefault(value) {
      var products = $(grid_product);
      products.sort(function(a, b){ 
        if(value === 'all') {
          return;
        }
      })
      $(grid_view_items).html(products);
    }

    function sortProductsAscending(value){
      
      var products = $(grid_product);
      products.sort(function(a, b){ 

        if(value === 'price-low-to-high') {
          return $(a).data("price")-$(b).data("price");
        }
       
        if(value === 'a-z') {
         
          var compareA = $(a).data("title");
          var compareB = $(b).data("title");

          return (compareA < compareB) ? -1 : 1;
        }
       
      });
      $(grid_view_items).html(products);

    }

    function sortProductsDescending(value) {

      var products = $(grid_product);
      products.sort(function(a, b){ 

        if(value === 'price-high-to-low') {
          return $(b).data("price") - $(a).data("price");
        }

        if(value === 'z-a') {
          var compareA = $(a).data("title");
          var compareB = $(b).data("title");

          return (compareA > compareB) ? -1 : 1;
        }
       
      });
      $(grid_view_items).html(products);
    
    }

    // Reset filters
    $("#collection-clear-filter").click(function(){
      
      $('input[type="radio"]#all-bike').attr('checked', true).trigger('click');
      $('input[type="radio"]#bike-sort').attr('checked', true).trigger('click');
      $('input[type="radio"]#all-suspension').attr('checked', true).trigger('click');
      $('input[type="radio"]#all-wheel-size').attr('checked', true).trigger('click');
      $('input[type="radio"]#all-shifter').attr('checked', true).trigger('click');
      $('input[type="radio"]#all-frame').attr('checked', true).trigger('click');
      
      sortProductsDescending('all');
      colorVariantSelect();

      console.log($(this).find($('#filter-icon')));
      $('#filter-icon').addClass('rotate');
      
    });