Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Isotope Metafizzy v2 Customization

Hi Clan Members, I ask for your support for a ready to use solution with a "combination" of some filters of Isotope Metafizzy. Please have a Look at this example: http://isotope.metafizzy.co/filtering.html#combination-filters FIRST TASK: What I need is a solution, so that users can pick within one filter "red OR blue" - currrently the selectors are "red XOR blue". And I need this solution for all categories (color, size, shape). In my case it would be much more - up to 8 categories.

SECOND TASK: A filtering by a text field, (http://codepen.io/desandro/pen/wfaGu) will additionnaly reduce the amount of found items - and it has to work with TASK ONE.

THIRD TASK: The Buttons in "first task" should get an suffix: Red (132) | Blue (89) | Yellow (0) The Suffix is representing the current amount of found items. If the amount is (0) hide the button element - so that "zero"-answers couldn't appear

FOURTH TASK: In isotope v1 there was a ready to use-solution for hash-history: http://isotope.metafizzy.co/v1/docs/hash-history-jquery-bbq.html I'll need this for v2 as well. The format the url will have, should be readable by humans, but need not to be in the same format as in v1 - but could...

I don't know if the budget fits - please let me know - as well if i can support with example data...

Deadline is about 1 week.

User Gravatar

Christian

Posted May 19 2014 12:16 UTC

$100


  • Assigned To NBoychev
  • Solved
  • isotope
  • 1591 Views

18 Replies


Hi user2164,

Question about the first task:

You need filter, that can do this filtering:

Elements that are red or blue, and they're small.

Right?

Could you provide html/example data?

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted May 19 2014 12:22 UTC

Yes, elements that are red or blue, small or tall https://www.dropbox.com/s/hd06rp3bav3ed3s/retail-list.csv The categories in this csv above, can also be representet by an alias - disel-black-gold instead of "Diesel Black Gold". Please use UTF-8 due to German Special Characters ;-)

User Gravatar

Christian

Posted May 19 2014 12:45 UTC

HTML will need till tomorrow.

User Gravatar

Christian

Posted May 19 2014 23:42 UTC

Hi Christian,

Here is the fiddle with the first task done:

http://jsfiddle.net/NBoychev/ujc9w/

This will be the html that I will use for the other tasks (I may add some items).

Tell me if this is the filter functionality that you are looking for.

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted May 20 2014 15:35 UTC

Hi Nikola, great, this is what I exactly struggeld with. First task done (as far as for this 3 items i can see). Thanks a lot so far.

The text-input-filter should lookup for the full/nice Name like "Diesel Black Gold" instead for its alias "diesel-black-gold".

Cheers, Christian

User Gravatar

Christian

Posted May 21 2014 0:18 UTC

Please have a look here: http://fashion-labels.eu/01/ The Textfilter should filter the "human readable" text in the items... Like "Rock" as in Ebb & Flow: "Rock'n'Roll"...

User Gravatar

Christian

Posted May 21 2014 1:29 UTC

Hi Christian,

The 1st, 2nd and 4th tasks are done: http://jsfiddle.net/NBoychev/ujc9w/

I'll do the 3rd tomorrow.

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted May 25 2014 11:52 UTC

Hi Nikola, again: This is just awesome! Thank you very much :-) Looking forward for the third task. Best, Christian.

User Gravatar

Christian

Posted May 25 2014 22:31 UTC

Hi Nikola, I was just playing around with your Code - still awesome :-D

I have a change request for TASK 3: Please just count the elements as requested... Hiding Filter Buttons that are (0) doesn't make sense - so please let all elements be visible...

Thanks so far. Cheers, Christian.

User Gravatar

Christian

Posted May 26 2014 10:11 UTC

Hi Christian,

I'm glad that you like the code.

The third task is done, here is the final code:

http://jsfiddle.net/NBoychev/ujc9w/

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted May 26 2014 11:13 UTC

Solution

This didn't solve your task? Get your own custom solution.

Hi Nikola, first of all - thank you so far.

The third-task is -probably- not finally done... If the page loads, there should be a count - so every button/filter should show how many results of its kind are currently aviable.

Then you click on the first button/filter - some results disappear - and the numbers has to be recounted - and should now show how many results of its kind are currently aviable...

But anyway - I like your work and mark it as "correct answer".

Thanks again, best, Christian

User Gravatar

Christian

Posted May 26 2014 12:03 UTC

Christian,

So to make it clear - those counts should represent, how much items of that filter are currently visible. So on show, if there are two men items, '2' should be placed after men filter. Then after making some other filtering, only one men item stays visible, so '1' should be placed after men filter, right?

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted May 26 2014 13:16 UTC

Hi Nikola, I didn't expect that you'll still fix this for free ;-) But yes, now you've got it...

User Gravatar

Christian

Posted May 26 2014 13:23 UTC

Christian,

No worries, I'll fix this. And it's not for free - it was included in the main scope.

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted May 26 2014 13:29 UTC

Hi Christian,

The code is updated: http://jsfiddle.net/NBoychev/ujc9w/

Don't hesitate to contact me.

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted May 27 2014 12:04 UTC

Hi Nikola, holy moly - this is amazing hot voodoo shit :-) Thank you so much! Mission completed!

Best regards & KUDOS, Christian

User Gravatar

Christian

Posted May 27 2014 12:29 UTC

Hi nikola,

thanks for your example. I try to include a reset filter button but it doesn't work

var $anyButtons = $('.filter-item').find('button[data-filter=""]');
var $buttons = $('.filter-item');


$(".isotope-reset").click(function(){
new Wall(document.getElementById('container'), '', '');
filters = {};
result = {};
$("#container").isotope({
filter: '*'
});
$buttons.removeClass('active');
$anyButtons.removeClass('active');
});

could you have a look? Thanks
User Gravatar

steri-rex

Posted Jun 19 2015 9:41 UTC

Hi steri-rex,

The code is updated: http://jsfiddle.net/ujc9w/42/


Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Jun 21 2015 20:34 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions