Skip Navigation

[Resolved] Searching, filtering, sorting — can we separate these in the DOM?

This thread is resolved. Here is a description of the problem and solution.

Problem:
The output of a View normally occurs all in one place, with the filter controls and pagination and then the results, how can these be separated to customise the layout of the page?

Solution:
At the end of each View is the Output Editor.

There you can see that the filter section and output section are indeed added sequentially via the two shortcodes.

This editor is a normal markup editor, so you can add whatever markup you want to here, such as a grid, to layout the filter controls and results, plus other content, as you wish, and there's no reason why you can't reverse the order, for example.

If you are displaying the View on a page where your theme adds a sidebar along with the main content area (which is where the View would appear), then you can add the filter controls as a widget in the sidebar.

If you go to Appearance > Widgets you should find a widget to insert Views results, and another to insert the filter controls.

Note that there is one limitation with the filter controls widget, namely that your filters must include a submit button.

This support ticket is created 5 years, 5 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 -
- 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 -

Supporter timezone: Europe/London (GMT+00:00)

This topic contains 5 replies, has 2 voices.

Last updated by jeffM-12 5 years, 5 months ago.

Assisted by: Nigel.

Author
Posts
#1130225
Screen Shot 2018-10-18 at 5.53.25 PM.png

I am trying to: Position the filtering and search bar features on different parts of the page

Link to a page where the issue can be seen: hidden link

Hi,

I'm trying to create a website that displays different custom fields of custom post types to different user roles. I want to display custom post types, "Tests", and offer users a number of different filters. I've uploaded a picture of the comp I need to create.

I'm trying to decide if Toolset can accomplish this layout.

On my main test page, I can echo out some basic pagination and sorting. I haven't implemented filters yet. But the issue I see is that the elements must stack on top of each other.

Is there a way to add the filters to a sidebar? I'm not sure how to accomplish this. The shortcode from the Views plugin seems to display the filtering, the searching, and the pagination all at once. Is it possible to separate the filtering and the search features from the data?

#1130537

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Screenshot 2018-10-19 at 08.55.52.png

Hi Jeff

When you insert a View, yes, normally the filter controls and the View results appear sequentially in the page markup.

Take a look at the end of any View edit screen and you'll see the Output Editor (screenshot).

There you can see that the filter section and output section are indeed added sequentially via the two shortcodes.

This editor is a normal markup editor, so you can add whatever markup you want to here, such as a grid, to layout the filter controls and results, plus other content, as you wish, and there's no reason why you can't reverse the order, for example.

If you are displaying the View on a page where your theme adds a sidebar along with the main content area (which is where the View would appear), then you can add the filter controls as a widget in the sidebar.

If you go to Appearance > Widgets you should find a widget to insert Views results, and another to insert the filter controls.

Note that there is one limitation with the filter controls widget, namely that your filters must include a submit button.

#1130712

That's fantastic to hear -- thanks for explaining the output area to me.

So as far as sorting and search bar goes, do they have their own shortcodes, or are they bundled in with the filter shortcode? I foresee a challenge of getting the search bar to appear above the search results while the sorting controls are closer to the results.

#1130812

I have another question regarding this:

I'd like to throw some custom shortcodes and some of the code generated in the Search and Pagination boxes into Output Editor field. It seems that the filters and sorting options aren't working. Should I expect problems organizing the view this way?

SEARCH AND PAGINATION:

[wpv-filter-start hide="false"]
<div class="form-group">
<label>[wpml-string context="wpv-views"]Vendor[/wpml-string]</label>
[wpv-control-postmeta display_values="Expertox,LabCorp,Quest,Ravgen,Alere" field="wpcf-vendor" type="select" source="custom" url_param="wpv-wpcf-vendor"]
</div>
[wpv-filter-end]

Loop Editor:

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop>
[wpv-post-body view_template="Loop item in Main View"]
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

Loop Template:

<div class="test-single">
[toolset_access role="Administrator,Consumer,Doctor"]<h2>[types field="test-name"][/types]</h2>[/toolset_access]
<div class="details-container">
<p class="click-for-details">Click to show details</p>
<div class="ul-container">

    [wpv-conditional if="( $(wpcf-additional-information) ne '' )"][toolset_access role="Administrator,Consumer,Doctor"]

  • Additional Information: [types field="additional-information"][/types]
  • [/toolset_access][/wpv-conditional]
    [wpv-conditional if="( $(wpcf-test-name) ne '' )"][toolset_access role="Administrator,Consumer,Doctor"]

  • Test Name: [types field="test-name"][/types]
  • [/toolset_access][/wpv-conditional]
    [wpv-conditional if="( $(wpcf-description) ne '' )"][toolset_access role="Administrator,Consumer,Doctor"]

  • Description: [types field="description"][/types]
  • [/toolset_access][/wpv-conditional]
    [wpv-conditional if="( $(wpcf-matrix) ne '' )"][toolset_access role="Administrator,Consumer,Doctor"]

  • Matrix: [types field="matrix"][/types]
  • [/toolset_access][/wpv-conditional]
    [wpv-conditional if="( $(wpcf-suggested-retail-price) ne '' )"][toolset_access role="Administrator,Consumer,Doctor"]

  • Suggested Retail Price: [types field="suggested-retail-price"][/types]
  • [/toolset_access][/wpv-conditional]
    [wpv-conditional if="( $(wpcf-patient-preparation) ne '' )"][toolset_access role="Administrator,Consumer,Doctor"]

  • Patient Preparation: [types field="patient-preparation"][/types]
  • [/toolset_access][/wpv-conditional]
    [wpv-conditional if="( $(wpcf-aliases) ne '' )"][toolset_access role="Administrator,Consumer,Doctor"]

  • Aliases: [types field="aliases"][/types]
  • [/toolset_access][/wpv-conditional]

    [wpv-conditional if="( $(wpcf-vendor-category) ne '' )"][toolset_access role="Administrator,Doctor"]

  • Vendor Category: [types field="vendor-category"][/types]
  • [/toolset_access][/wpv-conditional]
    [wpv-conditional if="( $(wpcf-vendor) ne '' )"][toolset_access role="Administrator,Doctor"]

  • Vendor: [types field="vendor"][/types]
  • [/toolset_access][/wpv-conditional]
    [wpv-conditional if="( $(wpcf-vendor-contact-name) ne '' )"][toolset_access role="Administrator,Doctor"]

  • Vendor Contact Name: [types field="vendor-contact-name"][/types]
  • [/toolset_access][/wpv-conditional]
    [wpv-conditional if="( $(wpcf-vendor-email-address) ne '' )"][toolset_access role="Administrator,Doctor"]

  • Vendor Email Address: [types field="vendor-email-address"][/types]
  • [/toolset_access][/wpv-conditional]
    [wpv-conditional if="( $(wpcf-vendor-phone) ne '' )"][toolset_access role="Administrator,Doctor"]

  • Vendor Phone: [types field="vendor-phone"][/types]
  • [/toolset_access][/wpv-conditional]
    [wpv-conditional if="( $(wpcf-vendor-website) ne '' )"][toolset_access role="Administrator,Doctor"]

  • Vendor Website: [types field="vendor-website"][/types]
  • [/toolset_access][/wpv-conditional]
    [wpv-conditional if="( $(wpcf-test-code) ne '' )"][toolset_access role="Administrator,Doctor"]

  • Test Code: [types field="test-code"][/types]
  • [/toolset_access][/wpv-conditional]
    [wpv-conditional if="( $(wpcf-cpt) ne '' )"][toolset_access role="Administrator,Doctor"]

  • CPT: [types field="cpt"][/types]
  • [/toolset_access][/wpv-conditional]

    [wpv-conditional if="( $(wpcf-segment) ne '' )"][toolset_access role="Administrator,Doctor"]

  • Segment: [types field="segment"][/types]
  • [/toolset_access][/wpv-conditional]
    [wpv-conditional if="( $(wpcf-poc) ne '' )"][toolset_access role="Administrator,Doctor"]

  • POC: [types field="poc"][/types]
  • [/toolset_access][/wpv-conditional]
    [wpv-conditional if="( $(wpcf-afg-cost) ne '' )"][toolset_access role="Administrator,Doctor"]

  • AFG Cost: [types field="afg-cost"][/types]
  • [/toolset_access][/wpv-conditional]
    [wpv-conditional if="( $(wpcf-shipping-cost) ne '' )"][toolset_access role="Administrator,Doctor"]

  • Shipping Cost: [types field="shipping-cost"][/types]
  • [/toolset_access][/wpv-conditional]
    [wpv-conditional if="( $(wpcf-collection-instruction) ne '' )"][toolset_access role="Administrator,Doctor"]

  • Collection Instruction: [types field="collection-instruction"][/types]
  • [/toolset_access][/wpv-conditional]
    [wpv-conditional if="( $(wpcf-specimen-stability) ne '' )"][toolset_access role="Administrator,Doctor"]

  • Specimen Stability: [types field="specimen-stability"][/types]
  • [/toolset_access][/wpv-conditional]
    [wpv-conditional if="( $(wpcf-transportation-notes) ne '' )"][toolset_access role="Administrator,Doctor"]

  • Transportation Notes: [types field="transportation-notes"][/types]
  • [/toolset_access][/wpv-conditional]
    [wpv-conditional if="( $(wpcf-notes) ne '' )"][toolset_access role="Administrator,Doctor"]

  • Notes: [types field="notes"][/types]
  • [/toolset_access][/wpv-conditional]

</div>
</div>
</div>

Output Editor:

<div class="main-desktop-grid">
<div class="filter-meta-html">
[wpv-filter-meta-html]
</div>
<div class="login-controls">
[login-screen]
</div>
<div class="search-box">
[wpv-filter-controls]
<div class="form-group">
<label>[wpml-string context="wpv-views"]Search[/wpml-string]</label>
[wpv-filter-search-box output="bootstrap"]
</div>
[/wpv-filter-controls]
[wpv-filter-submit output="bootstrap"]
</div>

<div class="results">
[wpv-sort-orderby type="list" options="field-wpcf-test-name,field-wpcf-segment,field-wpcf-vendor,field-wpcf-suggested-retail" label_for_field-wpcf-test-name="By Test Name" label_for_field-wpcf-segment="By Segment" label_for_field-wpcf-vendor="By Vendor" label_for_field-wpcf-suggested-retail="By Price" orderby_ascending_for="field-wpcf-test-name,field-wpcf-segment,field-wpcf-vendor,field-wpcf-suggested-retail" list_style="default"]
[wpv-layout-meta-html]
<div class="current page">You're on Page [wpv-pager-current-page]</div>
<div class="form-inline">
<div class="form-group">
<label>[wpml-string context="wpv-views"]Go to page: [/wpml-string]</label>
[wpv-pager-nav-dropdown output="bootstrap"]
</div>
</div>
</div>

</div>

#1131960

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Hi Jeff

To clarify,

the wpv-filter-meta-html shortcode outputs whatever is in the Search and Pagination editor;
the wpv-layout-meta-html shortcode outputs whatever is in the Loop Editor.

I expect you to find that the location of the filter controls is not flexible—they must be included within the Search and Pagination editor inside the wpv-filter-start shortcodes—but that the pagination controls *are* flexible. You can move those to the Loop Editor, after the closing wpv-loop tag but before the closing wpv-items-found shortcode, for example, or you could move them to the Output Editor.

If you find different let me know and I'll investigate further.

#1132911

You're right -- separating the filters and search was more difficult than separating the pagination. I've ended up adding markup to both the search/pagination and output boxes, and I'm getting close. I just can't have the search bar in that middle column. Hopefully, the client won't mind having the search bar in the left-hand column; otherwise, I'm going to have to build my own queries and results using AJAX and PHP.

When you're using AJAX, it seems that there's no need to contain all these filter elements into a single <form> (which is what is causing the issue). Maybe you guys could build out a feature where all the elements are separate inputs, not bound together in a single form? Just a thought 🙂

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.