[Resolved] Text links as custom search

[Author]

Posts

[CommMgr]

Using Toolset and Views, I have created an Exhibitor list setup as a table. Each exhibitor has an "agency" affiliation.

I also have an Agency Name List.

I want to create a search where someone can click an Agency Name in my filter list and the Exhibitor List table will display those agency's exhibitors (see screenshot as reference).

Thanks for your assistance.
CommMgr

[Christian Cox]

Using Toolset and Views, I have created an Exhibitor list setup as a table. Each exhibitor has an "agency" affiliation.
How is this connection established in Types? Is there a post relationship, or a taxonomy, or a custom field used to link Agencies and Exhibitors?

[CommMgr]

Hi, Christian...

Each exhibitor is setup as a custom post with their Agency as a check box (see screenshot as reference).

CommMgr

[Christian Cox]

When filtering by a custom field like this there are no built-in text link filters. We offer checkboxes filters, radio button filters, select filters, and multiselect filters (see the attachment here). Also text input, but that's not really practical in this case. You might be able to achieve something like what you're describing with a radio filter, but it would require custom CSS to hide the button. Customizing filter controls is outside the scope of support we provide here. You can find examples online by searching for something like "hide radio button with css".

Another option is using your own text links to set a specific URL parameter, then configure your filter to respond to the same URL parameter.

There is a "reset" button built-in to Views. You can find it above the Search and Pagination editor panel in the View editor screen. Or, you can create your own text link that reloads the current page, which is effectively the same as resetting the filters.

[CommMgr]

Hi, Christian...

Thank you for the information. I am proficient at CSS so hiding radio buttons would not be a problem.

However, the option of setting a specific URL parameter to the text seems more of a fit for me. How do I do that?

Also, I was doing some researching on your site documentation and I would like to know what is the difference between a filtered search and a "sort"?

Would a "sort" be more what I need?

CommMgr

[Christian Cox]

However, the option of setting a specific URL parameter to the text seems more of a fit for me. How do I do that?
First, you need to configure your Query Filter to respond to a URL parameter. If you have any Query Filters set for this checkboxes field, you should delete them. If you have any Filter controls for this field in the Search and Pagination editor panel, delete them as well and start over.

In the Search and Pagination editor panel, add a new filter based on the checkboxes custom field. When configuring the filter, you will be able to specify a URL parameter. The system will automatically create a corresponding Query Filter for you with the matching URL parameter. In my example the URL parameter is "wpv-wpcf-cbs". If you cannot see the Search and Pagination editor panel or the Query Filter panel in your View editor screen, click "Screen Options" in the top right corner to activate them.

Now the View's filter will respond to the specified URL parameter, and display the appropriate results. The value of the URL parameter must match the value of a specific checkbox option. Note that the value and the label may be different, so check the field settings in the custom field group editor screen. Try using the front-end filters for the View to see how the URL parameters work. I don't recommend using AJAX to update this View, unless you're comfortable with JS as well. Then you should be able to remove the filter control from Search and Pagination (not the Query Filter, just the filter control shortcode) and construct your own text links that redirect the User to the correct URL, something like this:

<a href="<em><u>hidden link</u></em>">Filter text for option 12345</a><br />
<a href="<em><u>hidden link</u></em>">Filter text for option 67890</a>

Also, I was doing some researching on your site documentation and I would like to know what is the difference between a filtered search and a "sort"?
In most cases sorting (ordering) just influences the order of the results that are displayed in the list. A filter, however, determines which results are displayed in the list. Sorting by checkboxes fields probably won't make sense, because multiple values are possible for a single post.

One caveat - there is a quirk in WordPress searches that can cause sort to affect which results are shown. If you try to order by a custom field, but that custom field is not set in some post, that post will not appear in the results. Tricky stuff.

[CommMgr]

Hi, Christian...

Okay, I worked with the search setup over the last few days and I got it to work using checkboxes.

Now I need help styling the search form. I have the code created that includes the agency icon box and agency name. I can't figure out where to put that customized code in the form so it looks like the screenshot attached.

For reference, here is the code from the Search and Pagination section:

[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="form-group">
	<label style="display: none;">[wpml-string context="wpv-views"]AGENCY[/wpml-string]</label>
	[wpv-control-postmeta field="wpcf-agency" type="checkboxes" url_param="wpv-wpcf-agency"]
</div>
[wpv-filter-submit output="bootstrap"]
[wpv-filter-reset output="bootstrap"][/wpv-filter-controls]

[wpv-filter-end]

For reference, here is my customized code for the agency icon box and agency name. I am happy to adjust this code as needed:

<div style="display:table;"><span style="vertical-align: middle; display: table-cell;"><img style="padding-right: 10px;" src="<em><u>hidden link</u></em>" alt="California Lighting Sales - LightShow West Agency Sponsor"></span> <span style="vertical-align: middle; display: table-cell;"><a href="<em><u>hidden link</u></em>" target="blank">California Lighting Sales</a></span></div>

Thank you for your continued assistance,
CommMgr

[Christian Cox]

Unfortunately there's no markup editor for filter options, or template to customize. There's no JavaScript API for facilitating filter interactions either, so you're effectively limited to the markup produced automatically based on the shortcode options defined here: https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-control-postmeta

You can definitely use your own CSS to style the output that is generated automatically by the system. For example, you can use CSS selectors that target specific input values, then use pseudo selectors, :after, :before, and so on to style the contents. Sounds like you're versed in CSS so attribute selectors will be familiar to you: https://css-tricks.com/attribute-selectors/

Or, you can use custom JavaScript to manipulate the DOM after the filters are displayed, adding classes, markup elements, etc. You're basically on your own with JavaScript filter customizations, as support for that type of customization is quite limited. I can show you how to hook into a few specific AJAX search or pagination events in Views if you'd like to trigger your own functions based on those events.

Let me know if you have additional questions about these approaches.

[CommMgr]

Hi, Christian...

Thank you for the information.

Unfortunately, I can't seem to get CSS to put the agency icon (the little boxes with the letters) after the checkboxes.

Could you please write the code I need for that?

As reference, this is the code I got from inspecting the page with my web developer tool for the checkbox for the first agency, California Lighting Sales:

<input type="checkbox" class="js-wpv-filter-trigger" name="wpv-wpcf-agency[]" value="CALIFORNIA LIGHTING SALES" id="form-374a7a5bfc880398337b7a779d5abda9-8">

Here is the url to the agency icon:
hidden link

Your help is greatly appreciated.
CommMgr

[Christian Cox]

Again, we do not offer that type of filter customization here in support. If you want someone to write custom code for your specific implementation, you can visit our contractors portal to connect with an independent professional: https://toolset.com/contractors

Sorry if that wasn't clear.

[CommMgr]

Thank you, Christian, for the assistance you were able to provide. It is greatly appreciated.

CommMgr