Sort and Filter Combined in URL query (Separate inputs)

[Liam88]

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

[Stefanowitsch]

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 ?