Jump to content

Sort and Filter Combined in URL query (Separate inputs)


Liam88
 Share

Recommended Posts

Hello,

I have a separate sort dropdown and filter section. This is very similar to the processwire demo - https://demo.processwire.com/search/?sort=parent.name

I also have the same "issue" if you would call it that where i can sort or I can filter, but I can not do both. This is because the url changes.

So a sort URL may look like:

website.com/subpage/?sort=random

and a filter like:

website.com/subpage/?placement=x&channel=y_z

I'm looking to be able to sort and filter. So if I change the sort, it won't remove the current filter and vice versa.

I have the sort dropdown running off one bit of JS and the filter on another with examples of both below:

This is sort JS

$(document).ready(function() {
        $(".sort-select").on("change", function() {
            document.location.href = location.pathname+"?sort="+$(this).val();
            //console.log(location.pathname+"?sort="+$(this).val())
            //console.log(location.search)
        });
    });

This is filter JS

document.querySelector("form").onsubmit=ev=>{
	ev.preventDefault();
	let o={};
	let noPage = window.location.pathname.split("/").slice(0,-2).join("/") + "/";
	ev.target.querySelectorAll("[name]:checked").forEach(el=>{
	(o[el.name]=o[el.name]||[]).push(el.value)})
    if(noPage.length > 1){
	 	document.location.href = noPage+"?"+Object.entries(o).map(([v,f])=>v+"="+f.join("_")).join("&");
	}else{
	 	document.location.href = location.pathname+"?"+Object.entries(o).map(([v,f])=>v+"="+f.join("_")).join("&");
	}
}

This is my input build within the func.php doc:
 

$selector = '';

// Get the inputs, sanitize and whitelist. Then create an array, then replace _ for | in array for selector filter. Output selector 

if($input->get->sort){
	$sorted = $input->get->text('sort');
	$input->whitelist('sort', $sorted);
	//$selector = $selector .= ",sort=$sorted";
}

if($input->get->channel){
	$channel = $input->get->text('channel');
	$input->whitelist('channel', $channel);
	$chanArray = explode("_", $channel);
	$chan = $channel = str_replace('_', '|', $channel);
	$selector = $selector .= ",ab_channels=$chan";
}
if($input->get->content){
	$content = $input->get->text('content');
	$input->whitelist('content', $content);
	$contArray = explode("_", $content);
	$cont = $content = str_replace('_', '|', $content);
	$selector = $selector .= ",ab_content=$cont";
}
if($input->get->brand){
	$brands = $input->get->text('brand');
	$input->whitelist('brand', $brands);
	$brandArray = explode("_", $brands);
	$brand = $brands = str_replace('_', '|', $brands);
	$selector = $selector .= ",ab_brand=$brand";
}
if($input->get->style){
	$styles = $input->get->text('style');
	$input->whitelist('style', $styles);
	$styleArray = explode("_", $styles);
	$style = $styles = str_replace('_', '|', $styles);
	$selector = $selector .= ",ab_creative_style=$style";
}
if($input->get->ugc){
	$ugcs = $input->get->text('ugc');
	$input->whitelist('ugc', $ugcs);
	$ugcArray = explode("_", $ugcs);
	$ugc = $ugcs = str_replace('_', '|', $ugcs);
	$selector = $selector .= ",ab_influencer=$ugc";
}
if($input->get->place){
	$placement = $input->get->text('place');
	$input->whitelist('place', $placement);
	$placeArray = explode("_", $placement);
	$place = $placement = str_replace('_', '|', $placement);
	$selector = $selector .= ",ab_placement=$place";
}
if($page->template == 'adbank_brand_page'){
    $brand = $page->title;
    $selector = $selector .= ",adbank_brands=$brand";
}
$selector = "template='adbank_pages',limit=12,sort={$sorted} " . trim($selector, ", ");

Any direction on how to combine these would be really appreciate. I know AJAX may be the best route overall but I don't know how to action that and for time sake trying to get these to both work with page refresh feels more accessible...

TIA

Link to comment
Share on other sites

On 6/9/2022 at 10:19 AM, Liam88 said:

Hello,

I have a separate sort dropdown and filter section. This is very similar to the processwire demo - https://demo.processwire.com/search/?sort=parent.name

I also have the same "issue" if you would call it that where i can sort or I can filter, but I can not do both. This is because the url changes.

So a sort URL may look like:

website.com/subpage/?sort=random

and a filter like:

website.com/subpage/?placement=x&channel=y_z

I'm looking to be able to sort and filter. So if I change the sort, it won't remove the current filter and vice versa.

I have the sort dropdown running off one bit of JS and the filter on another with examples of both below:

I might get into the same "issue" in a project I am working on. If I find a solution I will inform you here 🙂

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...