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 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.
How is this different from the Archive block drop category down?
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 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
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!
Established 2003 Squarespace Handmade in NYC
Powered by AnswerHub