Filters on front-end

Permalink Browser Info Environment
I was hoping that this extension would be able to set filters on the front-end so visitors could filter the list by attribute there.

Does anyone know how to add that or is it on the roadmap?

Type: Discussion
Status: New
1976Ltd
View Replies:
Shotster replied on at Permalink Reply
Shotster
> I was hoping that this extension would be able to set filters on the
> front-end so visitors could filter the list by attribute there.

Hi Gareth,

No, I'm sorry, but front end filters are not supported at this time - only keyword searching.

> Does anyone know how to add that or is it on the roadmap?

That capability might be supported in the future, but if it is, it will require some HTML and possibly JS knowledge to take advantage of it.

BTW, if there's anything in the add-on description that led you to believe it had that capability, please let me know, as my intention is not to deceive.

Regards,

-Steve
Shotster replied on at Permalink Reply
Shotster
By the way, if you're proficient with HTML and JavaScript and would be interested in a way to add filters to the front end using HTML and JS, let me know.

Regards,

-Steve
1976Ltd replied on at Permalink Reply
1976Ltd
Yes, I'd definitely like to know. I'm proficient in html/css and jquery and the basics of javascript.

Thanks.
Shotster replied on at Permalink Reply
Shotster
Hi Gareth,

> I'm proficient in html/css and jquery
> and the basics of javascript.

Ok, in that case, here's a secret... Yes, it's possible to implement front end filters. However, it's neither documented nor officially supported, and there is no simple UI in the block configuration dialog. It requires some HTML and JS. While I'm not prepared to officially document and release the technique to the masses, I can tell you that I have used it to create front end filters for clients.

What I can do is post a sample template to provide a working example. You can experiment, tweak, and customize from there. I'll try to post something in the next day or so.

Regards,

-Steve
1976Ltd replied on at Permalink Reply
1976Ltd
Great. Really appreciate it!
Shotster replied on at Permalink Reply 1 Attachment
Shotster
I wrote:

> I'll try to post something in the next day or so.

Hi Gareth, I've attached a sample view template that implements front end filters. You probably already know how to install a custom template, but just in case...

1) Create the following directory...

/blocks/pmw_enhanced_user_list/templates/

Please note that it's the "blocks" folder at the root of your C5 installation - i.e. not within the package itself.

2) Copy the contents of the attached archive into the "templates" directory you created above.

3) Activate the custom template by clicking your EUL block while the page is in edit mode, choosing "Custom Template", and then selecting "Front End Filters".

You should now see a form that allows the list to be filtered. Any active filters are applied, and then any keywords are applied on top of that to further restrict the results.

To add your own attribute filters, add form elements for both the attribute value and comparison operator. See the template's HTML code for examples; but in brief, the form elements must be named in a very specific way. Part of that name is the attribute handle.

If you have any questions after looking over the code and tinkering a bit, just post here, and I'll do my best to answer.

EDIT: I forgot to mention something that may or may not be obvious. You should configure the block as desired via the configuration dialog (page size, sort order, etc.); just don't specify any filters there.

-Steve
1976Ltd replied on at Permalink Reply
1976Ltd
Hey Steve,

Thanks hugely for the sample. I've got it working successfully. Can you tell me if there is a way to load the attribute values into a filter?

What I'm after is a dropdown with the attribute options rather than having "starts with", "contains" etc and a text field.

I have this working fine as a hard-coded list of options but ideally it would be great to load them dynamically.

Another thing entirely - I was wondering if you intend also on making future versions sortable on the front end?

Thanks
Shotster replied on at Permalink Reply 2 Attachments
Shotster
On Oct 14, 2012, at 10:56 PM, tinsoldier wrote:

> Can you tell me if there is a way to load the attribute values
> into a filter?

If you're referring to the OPTIONS (possible values) for something like a "select" attribute type, then the answer is yes. You can retrieve the available options for a particular attribute, but it requires some PHP coding. That capability is provided by the C5 framework. It's nothing specific to my add-on, although you can look at my block's edit.php and controller.php files to glean some insights.


> What I'm after is a dropdown with the attribute options rather
> than having "starts with", "contains" etc and a text field.

Well, the filter COMPARISON must be one of...

starts with
contains
ends with
>
>=
=
<=
<
!=

...where the first three apply only to "text" type attributes (not numeric ones). If you're just saying you want to present a list of options instead of a text field for entering the filter VALUE, then, as I said, you'll have to use the C5 framework. I've attached a bit of code demonstrating how to obtain attribute info. The code is not a complete template and has not been tested, but it should point you in the right direction.


> Another thing entirely - I was wondering if you intend also on
> making future versions sortable on the front end?

You can do that (although, as with front end filtering, it's not officially documented or supported). I've attached a new version of the front_end_filters sample template with a sort field. Of course, you probably wouldn't want the field to be an editable text field, but changing that is left as an exercise for you.

-Steve

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.