Home Jquery product filter not working together
Reply: 0

Jquery product filter not working together

jays
1#
jays Published in 2018-02-14 06:21:26Z

I have created this filter for my WordPress site. I have used Price slide filter, text search filter, radio filter and checkbox filter. All of this filter works individually. But its not working together. I want to work all of filters to work together. I am using this in WordPress by ACF custom fields. I have already used price slider and radio checkbox. Now I want to use this filter and also need to all filter works on together not individually. I am using this filter because I have not found any suitable Customizable free plugin for product filter. If you have any suggestion for the plugin please suggest me. Thanks

DEMO

<ul id="filter-options">
  <li><input type="checkbox" value="filter_red" data-filter_id="red"> Red</li>
  <li><input type="checkbox" value="filter_green" data-filter_id="green"> Green</li>
  <li><input type="checkbox" value="filter_blue" data-filter_id="blue"> Blue</li>
  <li><input type="checkbox" value="filter_orange" data-filter_id="orange"> Orange</li>
  <li><input type="checkbox" value="filter_yellow" data-filter_id="yellow"> Yellow</li>
</ul>
<input type="text" class="text-input" id="filter" value="" />
<span id="filter-count"></span>
    <p>
      <label for="amount">Price range:</label>
      <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
    </p>

    <div id="slider-range"></div>

    <div class="demo">
        <p>
            <label for="amount">Price range:</label>
            <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
        </p>
        <div id="slider-range"></div>
    </div>

      <div id="CategoryContent">
        <ul id="products">
            <li class="product filter_red"  data-price="10">Red Brand1 PRODUCT1 TeamA</li>
            <li class="product filter_blue" data-price="20">Blue Brand1 PRODUCT2 TeamB</li>
            <li class="product filter_blue filter_green" data-price="30">Brand2 PRODUCT3 TeamB</li>
            <li class="product filter_yellow" data-price="40">Brand2 PRODUCT4 TeamC</li>
            <li class="product filter_red" data-price="50">Brand3 PRODUCT5 TeamA</li>
            <li class="product " data-price="60">Brand3 PRODUCT6 TeamD</li>
            <li class="product filter_red" data-price="70">Brand4 PRODUCT7 TeamD</li>
            <li class="product" data-price="80">Brand1 PRODUCT8 TeamA</li>
            <li class="product filter_yellow" data-price="90">Brand1 PRODUCT9 TeamA</li>
            <li class="product filter_blue " data-price="100">Brand1 PRODUCT10 TeamB</li>
            <li class="product filter_blue" data-price="110">Brand4 PRODUCT11 TeamD</li>
            <li class="product filter_yellow" data-price="120">Brand2 PRODUCT12 TeamA</li>
        </ul>

        <div style="clear:both;"></div>
        <div class="filter">
          <form id= "brandfilter" action="">
            <h2>Attribute1:</h2>
            <input type="radio" name="brand" value="Brand1"/>Brand1 </br>
            <input type="radio" name="brand" value="Brand2"/>Brand2 </br>
            <input type="radio" name="brand" value="Brand3"/>Brand3 </br>    
            <input type="radio" name="brand" value="Brand1"/>Brand4 </br>
          </form>

          <h2>Attribute2:</h2>
          <form id="teamfilter" action="">
            <input type="radio" name="team" value="TeamA"/>TeamA </br>
            <input type="radio" name="team" value="TeamB"/>TeamB </br>
            <input type="radio" name="team" value="TeamC"/>TeamC </br>
            <input type="radio" name="team" value="TeamD"/>TeamD </br>
          </form>
        </div>

      </div>

Jquery

//TEXT FILTER

 $("#filter").keyup(function(){

        // Retrieve the input field text and reset the count to zero
        var filter = $(this).val(), count = 0;

        // Loop through the comment list
        $("#products li").each(function(){

            // If the list item does not contain the text phrase fade it out
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).fadeOut();

            // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).show();
                count++;
            }
        });

        // Update the count
        var numberItems = count;
        $("#filter-count").text("Number of Comments = "+count);
    });


//PRICE SLIDE FILTER

var $filters = $("input:radio[name='brand'],input:radio[name=team]").prop('checked', false); // start all checked
var $categoryContent = $('#CategoryContent li');
$filters.click(function() {
    // if any of the checkboxes for brand or team are checked, you want to show LIs containing their value, and you want to hide all the rest.
    $categoryContent.hide();
    $filters.filter(':checked').each(function(i, el) {
        $categoryContent.filter(':contains(' + el.value + ')').show();
    });
});


//PRICE FILTER
function showProducts(minPrice, maxPrice) {
    $("#products li").hide().filter(function() {
        var price = parseInt($(this).data("price"), 10);
        return price >= minPrice && price <= maxPrice;
    }).show();
}

$(function() {
    var options = {
        range: true,
        min: 0,
        max: 500,
        values: [50, 300],
        slide: function(event, ui) {
            var min = ui.values[0],
                max = ui.values[1];

            $("#amount").val("$" + min + " - $" + max);
            showProducts(min, max);
        }
    }, min, max;

    $("#slider-range").slider(options);

    min = $("#slider-range").slider("values", 0);
    max = $("#slider-range").slider("values", 1);

    $("#amount").val("$" + min + " - $" + max);

    showProducts(min, max);
});


//CHEKSBOX FILTER

 $("#filter-options :checkbox").click(function() 
    {
        $("#products li").hide();
        $("#filter-options :checkbox:checked").each(function() 
        {
           $("." + $(this).val()).fadeIn();
        });

        if($('#filter-options :checkbox').filter(':checked').length < 1) 
        {
            $("#products li").fadeIn();

        }

});
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.324755 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO