[Resolved] Build a view with three sections layout

[Author]

Posts

[edF-5]

Jamal,

Thanks for your response. I'm a developer and unafraid of reading documentation or writing custom code. I'm just trying to find out what Toolset does out of the box and, for things it doesn't do out of the box, pointers for where I can build those things myself. The reference to wpv-search-term is exactly what I'm looking for.

Now, a new question. I've managed to implement a text search field and filter with a list of checkboxes that updates a list of posts. In the Output Editor, based on a link you shared, I created a two-column layout (see current layout.png). In my layout, I'd like to split up the search field from the filters (see desired layout.png). But it seems to be the case that the search and filters are a single unit in the Output Editor. Can I locate these two elements in different places on my webpage?

Saul

[Jamal]

Hello Saul,

If you are building the view using the blocks editor, I think that you will need custom CSS code to be able to get to this layout. Or you may use custom Javascript code to duplicate the text search field, hide the original one, move the duplicate above the 2 columns view, then sync the value/event from the duplicated text search to the original, which is inside the <form> tag.

Using the legacy editor and the Bootstrap grid system, I was able to build this design hidden link
Check my sample view below:
1. Filters

[wpv-filter-start hide="false"]
[wpv-filter-controls]

<div class="col-md-12">
  <div class="form-group">
	[wpv-filter-search-box output="bootstrap"]
  </div>
</div>

<div class="col-md-3">
  <div class="form-group">
	<label for="wpv-category"></label>
	[wpv-control-post-taxonomy taxonomy="category" type="select" default_label="All categories" format="%%NAME%% (%%COUNT%%)" url_param="wpv-category"]
</div>
</div>

[/wpv-filter-controls]
[wpv-filter-end]

2. Loop Editor

<div class="col-md-9">
  [wpv-layout-start]
      [wpv-items-found]
      <!-- wpv-loop-start -->
      <wpv-loop>
        <div class=row">
          [wpv-post-link]
        </div>
      </wpv-loop>
      <!-- wpv-loop-end -->
      [/wpv-items-found]
      [wpv-no-items-found]
          <strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
      [/wpv-no-items-found]
  [wpv-layout-end]
</div>

Output Editor

<div class="container">
  	<div class="row">
      [wpv-filter-meta-html]
      [wpv-layout-meta-html]
	</div>
</div>

Read more about the Bootstrap 3 grid system here hidden link

Let me know if you have any questions about this.

[edF-5]

For the purpose of completeness, and so my original references in the first message make sense, I am re-uploading the mockups in the original ticket.

[edF-5]

This worked wonderfully, Jamal! There's a tiny amount of weird padding, but I think I can just remove it using CSS.

In the text search field, I'd like to add an icon of a magnifying glass on the right side of the field which, when clicked, executes the search (right now users have to press the Return key). Is there special JavaScript I need to attach to an on-click listener to the magnifying glass icon? (I know there's a Submit button out-of-the-box, but I don't want to use the default button.)

Saul

[Jamal]

Well, that depends heavily on how you build the icon. However, the code should be similar to this:

jQuery(function($){
	$('selector_of_the_icon').on('click', function(event){
		event.preventDefault(); // prevent the browser from executing the default behavior
		$('selector_of_the_filters_submit_button').trigger('click')
	})
})

Please note, that "selector_of_the_icon" and "selector_of_the_filters_submit_button" depends on how you are building your page.

[edF-5]

Jamal,

Thanks for your response. The information in my question may not have been complete. The code snippet you included basically clicks a submits button. I don't want to have a submit button on my webpage; I want to have a magnifying glass which, when clicked, submits the search form. Does that make sense?

Saul

[Jamal]

Hello Saul,

As I already explained, that depends entirely on how you are building your page/view.

The code snippet you included basically clicks a submits button.
You are right. When the icon is clicked on it(line 2), we trigger a click on the filters submit button, to let the view do its job, because we do not have an API to submit the view's filters.
If for example, you are activating AJAX on your filters, we can change this click on the submit button, by triggering a change on another field(for example checkboxes field, or taxonomy control):

jQuery('selector_of_the_field').trigger('change')

Which will be equivalent to clicking the submit button, and it will instruct the view to do the AJAX call.

On line 2:

$('selector_of_the_icon').on('click', function(event){})

We are listening to a click on the "magnifying class" icon.

I hope, I have explained the idea well this time. Let me know if you have any questions.