[Resolved] How to set the Sort Option select with JS?

[Author]

Posts

[smileBeda]

Trying to set the sort by value in Shop Archive created with Blocks.
Since Toolset does not offer any customisation for the Select with which we can define sorting direction (asc, desc), we need to create a hack using icons, and on click on those icons, fire JS, that changes the values of the sorting options so it trigger the sort direction

But it is not as easy as it seems
hidden link
There is a sort asc desc select
Next to it there are 2 icons arrow up and down
When you click arrow up or down it will change the value in the asc/desc select properly.

But nothing will happen. No change is induced, sorting is not changed, and the option values themselves stay unselected.
I tried by several approaches but got tired because each time I save the JS I need to save it twice for it to even save in the View, and even if I force a click on the option, somehow I cannot manage to fire the trigger that will update the page with the new sorting directions.

Probably because it uses a specific JS action fired only when the select is manually changed....

Can you help with this?
The goal is to display 2 arrows (up and down) that make the sorting happen.

If not, I understand. Custom code and contractor and such.

Thanks

[Waqar]

Hi Beda,

Hope you're well.

Thank you for sharing these details and I'll need to perform some testing and research on my website, to suggest some workaround/alternative.

I'll share my findings as soon as this testing completes.

regards,
Waqar

[Waqar]

Thank you for waiting.

I've performed some tests on my website and was able to trigger the sorting action on click, using this slightly modified script, that you already had on your page:

jQuery(document).ready(function() {
	jQuery( "a.asc-link" ).on( "click", function() {
		jQuery('[name="wpv_sort_order"]').val('asc').trigger('change');
		return false;
	});
	jQuery( "a.desc-link" ).on( "click", function() {
		jQuery('[name="wpv_sort_order"]').val('desc').trigger('change');
		return false;
	});
});

From the code, I'm sure it will be clear that the main difference here is that my code is forcing a "change" event instead of a "click".

Just for reference, here is the HTML code for custom ASC/DESC links I used:

<a href="#" class="asc-link">ASC</a> | <a href="#" class="desc-link">DESC</a>

[smileBeda]

Hello Waqar, sorry the late reply, I somehow did not get the email notification.

Looking closer I found that on one of the jQuery selectors I didn't add a . (dot) before the classname, when listening for the click 😀
This screwed it all up, as soon I added dot it worked, even when triggering click instead of change (but I kept change, makes more sense than click)

Thanks for the hint and eyes on the issue!