No longer boring

[fisicx]

I've bitten the bullet and upgraded my very functional to something a little more pretty.

Everything still works as it did before but instead of dropdowns and selectors we now have some funky buttons:

https://comparisons.bankcomparisonplugin.com/all-the-things/

What does the team think? If you have one of those new fangled mobile phone things is it usable?

Font sizes, colours, border etc all editable.

 

[Opinion87]

Working fine on my Android phone.

 

[KM-Tiger]

Have only looked on a PC, but buttons are good IMHO.

You can do what you want in one click, and see options all at once.

 

[fisicx]

You can do what you want in one click, and see options all at once.

Yup - and it's fast.

 

[The Supplier Central]

Works well!

 

[presentationgenius]

Looks good on Safari... but what are the 'filter for' things?

 

[fisicx]

Looks good on Safari... but what are the 'filter for' things?

Click on them and see what happens...

 

[husseycoding]

From a technical perspective I would have performance concerns - looks like it's doing all of the filtering client side, which whilst for a small amount of data as per the demo should be both quick to load and filter, but the more data you want to be able to filter the slower it will become.

It will be slow to load the page because the browser needs to load all of the data it's possible to display when first accessing the page, even if you never select the filtering which presents certain options. That really ties into another point - it does look like on first page load every possible filter option is shown, this is definitely going to be an issue for many people if the filtering is handling more data.

What you are doing here is basically putting the work to filter client side, which in some cases is fine, but when it involves processing a reasonable amount of data it should always happen server side. Otherwise you are completely dependant on the users connection speed, and machine/device performance. Those with a faster connection and good speed machine/device will have a very much better experience than those with a slower connection and perhaps older machine/device both in initial page load time, and when actually performing the filtering. It would be a lot better to have no options shown (and not delivered to the browser) on first load, and instead when actually filtering, send small AJAX requests to the server to retrieve the data relevant just to that filtering - and you could leverage both server and client side caching to ensure good performance here. Basically the more filtering options you have the larger the initial request payload and so the longer the TTFB, and the poorer the performance when actually filtering.

Ultimately as it's a plugin it's not your responsibility to attempt to ensure performance is good - you should code well and efficiently, but having the server do the work of providing filtered results puts control of performance in the hands of the site owner, rather than the user who they have no control over.

I'm also not keen on the codebase, it would be much better written in OOP - much better to use the functions as methods inside objects, and that would allow you to break out code into logical classes with each method handling just one task. You could also do things like separate out the templating sections to their own dedicated classes or even template files. This would make the whole thing cleaner, easier to read and better to maintain in the future, and allow you to follow better coding practices. And PLEASE switch to 4 space indenting rather than tab, it's horrible to read (see the PSR-12 extended coding style).

Styling and JS - I'd let the user who wants the plugin choose the font, they almost definitely won't be using the same font as you define here. It would also be good to use jQuery objects again to make things cleaner and more structured, but if you do move the filtering server side it should hugely cut down on the JS you are currently using.

 

[fisicx]

Thanks for the review. I’ve tested with 100 rows of data and not seen a performance drop.

As to everything else, I’m very much a self taught coder. This project began after a client requests for a custom plugin and was built to their spec. I’ve just adapted and refined.

You get the css file to do with as you wish, the font comes from your theme not the plugin and the colours are just a hang over from the original project.

So yes, I could do lots of thing to make it better but that may make it less adaptable for all the custom version I build for people. And some of them are really weird and complex. Right now I’m working on a multistep application form with an embedded comparison table that filters on 7 different parameters (such as location and property type).

That being said if you want to have a play with that OOP thing and AJAX requests be my guest. I would even know where to start with that!

 

[Brian WorkPilot]

Works well!

 

[Manchester12]

It looks cool both on PC and android, the only thing is that the manual filter slider works with some minimal delay, which is visible to the eye. this would be corrected