ExpressionEngine CMS
Open, Free, Amazing

Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

Filter by categories, dropdown selects

July 21, 2008 3:53am

Subscribe [4]
  • #1 / Jul 21, 2008 3:53am

    Davor

    114 posts

    Hi all..

    I searched, but didn’t found nothing for now..

    Is it possible without custom queries to make category filter of products?
    Something similiar as weblog/category dropdowns in advanced search but only for categories.

    so, if I put first dropdown for parents, then one for childs and so on (max. 2 sub categories).

    and ofcourse, it would be great to have the url created like
    /parent/child/child/

    at the end, if I customize category archive list and make all this, the question is related with the URL creating.


    What would be “the best” way to do this?
    Thank you
    davor

  • #2 / Sep 26, 2008 1:44pm

    lukemcr

    154 posts

    Were you able to find an easy way to do this? I’m trying something similar, and have gotten about 75% of the way there three different ways. :-(

  • #3 / Sep 26, 2008 1:52pm

    Davor

    114 posts

    Were you able to find an easy way to do this? I’m trying something similar, and have gotten about 75% of the way there three different ways. :-(

    Hi Lukemcr

    Yes I did,, at the end, I use awesome extension called “Subcategories”, and with little help of jquery it works great!

    you can see it here (no english site)

    I hope I helped.

    davor

    edit: if you have quiestion, be my guest!

  • #4 / Oct 01, 2008 11:03pm

    lukemcr

    154 posts

    You have a great site, by the way - I love the design. 😊

    I do have a couple questions, if you don’t mind.

    I’ve found two main ways to implement dynamic dropdown lists like you have in your site. The first way uses mostly PHP, and involves passing the value of the first selected dropdown element to the URL, so that the second dropdown can show its results based on that. I’ve been able to pass the value to the URL as {segment_3}, but haven’t been able to get the second dropdown to accept {segment_3} as a value, and do matching off of it. I’ve populated both dropdowns with an SQL query and by using the subcategory module, like you’ve described.

    The second way involves either Javascript or AJAX to make the second dropdown dependent on the value of the first. Unfortunately, every tutorial I’ve found on this so far hasn’t included a way to pass the option value of the second dropdown to the Advanced Search form in EE. The option values for the second select dropdown don’t show up in the page source, so I can’t give the select element an

    id="cat_id[]"

    value, so the Advanced Search form recognizes it.

    I see in the source of your page that the second dropdown has all of its option values. Were those hard-coded? It looks like you have multiple “second dropdowns”, all pre-populated, but hidden. Once a user selects an option from the first dropdown, you use jquery to unhide the relevant div? Is that how it works?

    Thanks a lot for your help.

  • #5 / Oct 01, 2008 11:46pm

    Davor

    114 posts

    hi Luke.. and thanx 😊

    well, I spent few night breaking my head for that..

    it would be much easer if I hardcoded it. BUT, my solution have one “bug”, it has only one subcategory level, we had little time for publishing the site so, we went with one level of subcategory, and that saved me a lot of time.

    ok.. what I’m doing? with plugin subcategories I create a list of all sub categories idepended on the list with parent categories.

    {!-- FIRST DROP DOWN --}
    <select id="parentCat">
        <option>Odaberite</option>
    {exp:weblog:category_archive category_group="1" weblog="products" style="linear" parent_only="yes"}
    
    {categories}
    <option value="{category_id}" id="{category_url_title}" {if segment_2 == category_url_title}selected="selected"{/if}>{category_name}</option>
    {/categories}
    
    {/exp:weblog:category_archive}
    </select> 
    
    
    {!-- Creating an reapeater and passing category_id which will be used as ID for hiding and displaying selects and for filtering categories for shure --}
    {exp:weblog:category_archive category_group="1" weblog="products" style="linear" parent_only="yes"}
    
    {categories}
    {embed="includes/proizvodi_submenu" my_parent="{category_id}"}
    {/categories}
    
    {/exp:weblog:category_archive}


    includes/proizvodi_submenu

    
    
    

    this short php code took me some time. but I made it. so, I have all <select> hidden by default. every select has unique ID (his category id).

    and that’s it, simple yuh? the 70% of work is in the jquery code.
    Which you can check it. it late for writing all down :(
    d

  • #6 / Oct 02, 2008 12:00am

    Davor

    114 posts

    The second way involves either Javascript or AJAX to make the second dropdown dependent on the value of the first. Unfortunately, every tutorial I’ve found on this so far hasn’t included a way to pass the option value of the second dropdown to the Advanced Search form in EE. The option values for the second select dropdown don’t show up in the page source, so I can’t give the select element an

    id="cat_id[]"

    value, so the Advanced Search form recognizes it.

    I see in the source of your page that the second dropdown has all of its option values. Were those hard-coded? It looks like you have multiple “second dropdowns”, all pre-populated, but hidden. Once a user selects an option from the first dropdown, you use jquery to unhide the relevant div? Is that how it works?

    Thanks a lot for your help.

    you got it,, that is how it works, I preload all, and with this jquery I show and hide <select>

    //action for first select
        $("select#parentCat").change(function () {
                    //hide all sub selects
                    $("select.podKategorijeSelect").css({ display:"none" });
                    // I made function for taking the values because I wanted if someone enter to direct link, have all opened
                  uzmiVrijednosti();
                    //displaying the right select, "selektiran" is ID of category group
                    $("select#" + selektiran).css({ display:"block" });
                    //action for second select
                    $("#podKategorije select").change(function () {
                        //again taking values
                        uzmiVrijednosti();
                        //displaying "search" button
                        $("#idemo").css({ display:"inline" });
                    });
        });
    
    //taking values from selects
    function uzmiVrijednosti() {
            selektiran = $("select#parentCat option:selected").val();
            imeSelektiranog = $("select#parentCat option:selected").attr("id");
            selektiran2 = $("select#" + selektiran + " option:selected").val();
            podSelektiran = $("select#" + selektiran + " option:selected").attr("id");
        };
    
    //it selects the first select if some category is opened
        {if segment_2 != ""}
            uzmiVrijednosti();
            $("select#" + selektiran).css({ display:"inline" });
            $("#idemo").css({ display:"inline" });
        {/if}

    I made some some effect that I didn’t post here, you can check it in the jquery directly, they are for check if all selects are selected and then it redirect page to it.

    I hope you get it, at least for doing what you are doing.

    as I could see, you are trying to do this for advanced search, with my button I redirect my page, but you could use form submit also with jquery, or generally with javascript.

    dp

  • #7 / Oct 02, 2008 2:21pm

    lukemcr

    154 posts

    That’s really interesting. You’ve completely sidestepped both of the problems that I’ve had: the segment issue with dependent dropdowns in PHP/EE and the Javascript-not-showing-option-values problem. The one downside that I can see is that it works pretty slowly with lots of parent categories - I have ~100 of them, and the page takes about 15 seconds to load. Adding show_empty=“no” to the second exp:weblog:category_archive trims things down a lot, though. (Most of my parent categories don’t have subcategories yet - they will when the site goes live, however.)

    Thanks a lot for your help, Davor. You’ve been invaluable. I haven’t started doing the jquery hide/show css fun stuff yet, but I don’t think it’ll be a problem.

  • #8 / Oct 02, 2008 2:38pm

    Davor

    114 posts

    yes,, as I sad,, I found solution for me, and you have right, with that size of categories, you may want to use json and ajax, also with jqery, and generate you select on the request, as I have small list of categories, it’s working fast, but with more, hm, will be a trouble.

    When I was searchin solutions, I found this one, but it was too much for me ,, but it seems like a nice solution.

    http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/

    good luck 😊

  • #9 / Oct 02, 2008 4:33pm

    lukemcr

    154 posts

    This is super obvious for most people, I think, but it wasn’t for me at first: Davor‘s example jquery code a couple posts up won’t work unless you add

    $(document).ready(function(){
    at the very beginning, right before the first comment. Be sure to close it out with
    });

    at the very end, right before your closing script tag.

    (Shows how much jquery I know.)  😉

  • #10 / Oct 02, 2008 5:22pm

    Davor

    114 posts

    of course 😊
    As I didn’t post all of my jquery code,  I passed to post that.. thanx..

    dp

.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases