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

Creating something like this:

Hi all,

I stumbled upon this neat site, I have nearly 0 php coding experience.

I'm trying to create a free platform for all my partners to add value to their business and also to my clients.

Essentially What I'm looking for is a isotope with a multi-level filtering system like this: http://www.medicalministrytrips.org/project-calendar/

So I have 3 questions for my clients to pick:

Q1. What service they need (choose 1) Q2. What specific requirements they looking for (choose all that apply, available options change base on Q1, so my requirements for photographer will be different from a wedding planner) Q3. Price Range (choose 1, again price range options change base on Q1)

Someone already did something here: http://www.codersclan.net/ticket/73

I understand this may not be the best place for a newbie to ask for help, however this is extremely important to the current step of my business and I hope I can get this set up asap. I figured if someone already did it here, it'd be much easier.

I can add the custom post types and options myself if its not too much hassel, I just want it set up so I can fiddle with it.

Thanks,

User Gravatar

jsk13

Posted Oct 30 2013 9:37 UTC

$100


  • isotope
    taxonomies
    filter
  • 1229 Views

7 Replies


Hey,

Can you give some data as examples? Like 2-3 services and their relevant requirements and their prices?

Also, does the price change according to the requirements or is it a fixed price?

User Gravatar

guyisra

Posted Oct 30 2013 9:53 UTC

Hi yes, for sure.

For example #1:

Vendor type: Photographer Requirements: Indoor shoot, Outdoor shoot, Makeup included, Hair styling included, dress rental included Price range: $1500-2000, $2000-2500, $2500-3000, $3000-3500

Example #2:

Vendor type: Wedding Planner Requirements: Day of Coordination only, Full-Wedding Planning, Vintage Style, Modern Style, Price Range: $1000-$1500, $1500-2000, $2000-2500, $2500-3000, $3000-3500

Price will change according to the VENDOR type selected, they could select a vintage planner for $1000, but find none that exist, which is fine by me, but I don't want them to find a makeup artist and have price range go up to $3500 which is unnecessary.

Also after filtering, I wish to display my vendor's thumbnail in isotope format,

on hover it shows 3 things: Company name, a button to see testimonies, a button to visit their site.

something like this: http://codecanyon.net/item/mate-folio-wordpress-plugin/full_screen_preview/5965671

Doesnt have to be that fancy.

The hover thing is option, I just want the isotope in place first.

If you point me to look at a certain part of PHP or a file to add all my own vendor type and stuff I believe I can do it.

I hope that is clear enough, thanks!

User Gravatar

jsk13

Posted Oct 30 2013 10:19 UTC

do all requirement need to be viewable all the time? or only after a vendor is selected?

User Gravatar

guyisra

Posted Oct 30 2013 13:04 UTC

Thats up to you, whichever makes your life easier,

The only tricky part I can see is Q2, where they may have to select multiple requirements.

I am thinking a side bar for the 3 Qs would be easiest? make them collapsible?

Thank you.

User Gravatar

jsk13

Posted Oct 30 2013 13:14 UTC

Here is another example of something very similar: http://zoerooney.com/portfolio/

Though I'd prefer a more fluid action when the portfolio is filtered.

Hope this helps, if it helps you we can always talk through skype or email.

User Gravatar

jsk13

Posted Oct 30 2013 13:17 UTC

Ok, I made a rough demo

you can see if working here http://fiddle.jshell.net/naZkN/ The prices could be done better, like with a slider with a min and max, but not sure if you need that

this is the entire code (html and javascript), tell me what you think

<!DOCTYPE html>
<html>
<head>


<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>

<script src="http://cdn.jsdelivr.net/isotope/1.5.25/jquery.isotope.min.js"></script>

<script src="http://cdn.jsdelivr.net/select2/3.4.4/select2.min.js"></script>

<link href="http://cdn.jsdelivr.net/select2/3.4.4/select2.css" rel="stylesheet">

<style>


body {
    font-family:'Helvetica Neue', Arial, sans-serif;
}
#container {
    border: 1px solid;
    padding: 3px;
}
.item {
    width: 200px;
    height: 200px;
    margin: 3px;
    float: left;
    font-weight: bold;
}


/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/
 .isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}
/**** Isotope CSS3 transitions ****/
 .isotope, .isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
 .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    transition-duration: 0s;
}
/* End: Recommended Isotope styles */


.select2-input{
    min-width: 100px !important;
}


.item.wedding{
    background-color: yellow;
}

.item.photographer{
    background-color: blue;
}

</style>
</head>


<body>
<select id="filters-vendor" class="filter">
    <option value="*" selected="selected">all</option>
    <option value=".photographer">Photographer</option>
    <option value=".wedding">Wedding Planner</option>

</select>
<select multiple id="filters-req" class="filter">
    <option class="photographer wedding" value="*" s>all</option>
    <option class="photographer" value=".indoor">indoor</option>
    <option class="photographer" value=".outdoor">outdoor</option>
    <option class="photographer" value=".makeup">makeup</option>
    <option class="photographer" value=".hair">hair</option>
    <option class="photographer" value=".dress">dress rental</option>
    <option class="wedding" value=".day_coordination">Day of Coordination only</option>
    <option class="wedding" value=".full_planning">Full-Wedding Planning</option>
    <option class="wedding" value=".vintage">Vintage Style</option>
    <option class="wedding" value=".modern">Modern Style</option>
</select>



<select id="filters-price" class="filter ">
    <option value="*" selected="selected">all</option>
    <option value=".1000-1500">$1000-$1500</option>
    <option value=".1500-2000"> $1500-2000</option>
    <option value=".2000-2500">$2000-2500</option>
    <option value=".2500-3000">$2500-3000</option>
    <option value=".3000-3500">$3000-3500</option>
</select>
<div id="container">





    <div class="item wedding full_planning vintage" data-color="red" data-price="2000">

    </div>

    <div class="item wedding full_planning day_coordination" data-color="red" data-price="2000">

    </div>
     <div class="item wedding day_coordination vintage" data-color="red" data-price="2000">

    </div>
     <div class="item wedding day_coordination " data-color="red" data-price="2000">

    </div>
     <div class="item wedding modern day_coordination" data-color="red" data-price="1000">

    </div>

    <div class="item photographer indoor hair" data-color="red" data-price="3400">

    </div>

     <div class="item photographer dress hair" data-color="red" data-price="2800">

    </div>

     <div class="item photographer indoor dress" data-color="red" data-price="1110">

    </div>

     <div class="item photographer makeup " data-color="red" data-price="3000">

    </div>

</div>


<script>
$(document).ready(function(){

    $(".item").each(function(){

        $(this).text($(this).attr('class') + $(this).data('price'));

        var price = $(this).data('price');

        if (price>=1000 && price<1500){
            $(this).addClass('1000-1500');
        }
        else if(price>=1500 && price<2000){
                        $(this).addClass('1500-2000');

        }
        else if(price>=2000 && price<2500){
            $(this).addClass('2000-2500');

        }
        else if(price>=2500 && price<3000){
            $(this).addClass('2500-3000');

        }
        else if(price>=3000 && price<3500){
            $(this).addClass('3000-3500');

        }


    });
$("#filters-req").select2({placeholder: 'Requirements'});

$(function () {
    var $container = $('#container');
    $container.isotope({})
    $('.filter').change(function () {
     var req_selected = [];
     var vendor_selected = [];
     var price_selected =[];

    $('#filters-vendor').find(':selected').each(function () {
            if (this.value != "*") {
                vendor_selected.push(this.value);
            }
    });

      $('#filters-req').find(':selected').each(function () {
            if (this.value != "*") {
                req_selected.push(this.value);
            }
    });


  $('#filters-price').find(':selected').each(function () {
            if (this.value != "*") {
                price_selected.push(this.value);
            }
    });





        if (vendor_selected.length == 0) {
            vendor_selected.push("");
        }
         if (req_selected.length == 0) {
            req_selected.push("");
        }
         if (price_selected.length == 0) {
            price_selected.push("");
        }

        var selected = [vendor_selected, req_selected.join(''), price_selected].join('');
        if (selected == ''){
            selected = '*'
        }
        var $filt = $(selected);

        $container.isotope({
            filter: $filt
        });
    });
});



$("#filters-vendor").change(function(){
    var t= $(this).find(':selected').val();


    var $opts = $("#filters-req").find(t);
    $("#filters-req option").hide();
});


});
</script>
</body>

</html>
User Gravatar

guyisra

Posted Nov 1 2013 5:54 UTC

Are you there?

User Gravatar

guyisra

Posted Nov 7 2013 1:19 UTC

Add a reply

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