CODEWITHSUNDEEP
javascriptjqueryhtmlcssmixitup
finners
finners

Reputation: 885

Filtering "premium" option on page load using mix it up

I have a grid set up that shows numerous listings. Within these listings are 'premium' categories. I.e - food listing 1, accommodation listing 1, food listing 2, premium food listing.

Basically, at the moment they are loaded in the order they are set in the HTML. But I want to list the 'premium' listings first when "All" is selected and then first when the category "food" is selected.

Can anybody help me out? Fiddle here - https://jsfiddle.net/r1yd01fq/2/

$('#Container').mixItUp();

Upvotes: 0

Views: 148

Answers (2)

finners
finners

Reputation: 885

Found out a way which was relatively simple. Ended up using .insertAfter a premium div holder located at the top of the container. I've then used a shuffle plugin to randomise the premium listing so the ones loaded first don't show all the time.

https://jsfiddle.net/r1yd01fq/4/

$.fn.shuffle = function() {

    var allElems = this.get(),
        getRandom = function(max) {
            return Math.floor(Math.random() * max);
        },
        shuffled = $.map(allElems, function(){
            var random = getRandom(allElems.length),
                randEl = $(allElems[random]).clone(true)[0];
            allElems.splice(random, 1);
            return randEl;
       });

    this.each(function(i){
        $(this).replaceWith($(shuffled[i]));
    });

    return $(shuffled);

};

// Insert all premium listings first
$(".premium").insertAfter(".prem");

// Shuffle premium listing so they appear randomly
$('.premium').shuffle();

// Instantiate MixItUp:
$('#Container').mixItUp({});

Upvotes: 0

Gerard
Gerard

Reputation: 15796

This should do the trick for the "All" option

$(document).on("click", ".filter", function() {
  var choice = $(this).data("filter");
  switch (choice) {
    case "all":
      $("#Container div").attr("data-sort", 0);
      $("#Container div.premium").attr("data-sort", 1);
      break;
  }
  var d = $("#Container div");
  d.sort(function(a, b){
    return $(b).data("sort")-$(a).data("sort")
  });
  $("#Container").html(d);
});

Upvotes: 0

Related Questions