Solution for categories dropdown

Question

I would like to share a code for categories dropdown:

 {.if categories}
     <select class="jscatdropdown">
     <option value="{collection.fullUrl}">Filter by category</option>
     {.repeated section categories}
         <option value="{collection.fullUrl}?category={@|url-encode}"{.equal? categoryFilter @} selected{.end}>{@}</option>
     {.end}
     </select>
     {.end}

And this Javascript in Blog settings -> Advanced -> Page header block injection will reload a page filtered with the selected category item.

 <script>
     $(function(){
       // bind change event to select
       $('.jscatdropdown').bind('change', function () {
           var url = $(this).val(); // get selected value
           if (url) { // require a URL
               window.location = url; // redirect
           }
           return false;
       });
     });
 </script>

Answer 1

Answer by ghostcat · Apr 09, 2015 at 02:12 PM

Nice code, @pervak!

Also, for anyone who wants this functionality but isn't in developer mode, you can use javascript to load the categories from the page's json with ajax. Place this code in a code block on your page where you want the dropdown menu to appear:

 <div id="category-dropdown"></div>
 <script>
 var currentPageBaseURL=window.location.href.split("?")[0];
   Y.on("domready",function(e){
       Y.io(currentPageBaseURL+"?format=json", {
         on:{success: jsonLoaded}
     });
     function jsonLoaded(err,data){
           var jsonResponse = Y.JSON.parse(data.responseText);
           var collection=jsonResponse.collection;
           var categories=collection.categories;
           var catSelectHTML='<select class="jscatdropdown">';
           catSelectHTML+='<option disabled selected>Choose a Category</option>';
         for(var i=0;i<categories.length;i++){
           catSelectHTML+='<option value="'+collection.fullUrl+"?category="+encodeURIComponent(categories[i])+'">'+categories[i]+'</option>';
         }
         catSelectHTML+='</select>'
         Y.one("#category-dropdown").setHTML(catSelectHTML);
         Y.one('.jscatdropdown').on('change', function () {
             var url = this.get('value');
             if (url) {
               window.location = url;
             }
             return false;
           });
     }
   });
 </script>

Also, @pervak, you need to put a disabled selected option with a call to action as the first option, otherwise you can never select the first category because it doesn't register as a change event.

Add comment Show 5 · Share

scoobie · Apr 09, 2015 at 05:20 PM 0

Share

How is this different from the Archive block drop category down?

ghostcat · Apr 09, 2015 at 05:40 PM 0

Share

Ha! I guess it isn't! I just found out about the archive list block yesterday, and I didn't check out all the layout options. Nice to know that that feature is there :)

pervak · Apr 10, 2015 at 04:02 AM 0

Share

Hey @ghostcat, a great code! Thank you for sharing.

@scoobie, I need this drop down on my blog page index and have no idea how to put it here (There is no content tab in it's settings window). May be you could advice how to do this?

scoobie · Apr 10, 2015 at 02:37 PM 0

Share

@pervak good point. If you're referring to the blog list page, some templates eg five have a page header that let's you insert any content block at the top of the bloglist page

5fk · Nov 12, 2015 at 07:32 PM 0

Share

Hey @ghostcat, any idea how to do this using dates as the selector instead of categories? I'd like to create an Archive dropdown with the option to select a month where a post was published. Thanks!

Solution for categories dropdown

1 Reply

Follow this Question

Related Questions