[Resolved] Filtering views for specific pages

[Author]

Posts

[talatcanU]

Hi there,

I have been trying to find this solution for a long time, but I want to understand how to do this.

I had created this ticket before but couldn't implement it. Here is the previous ticket that I created before.

https://toolset.com/forums/topic/filtered-view-for-different-pages/

I just want to show certain city inputs on certain pages. For example, Vancouver properties will need to be filtered from other cities to show this property on only the Vancouver page.

Can you help me figure this out?

[Nigel]

Hi there

Minesh gave you lots of specific steps in that previous ticket, so let me start with a broader explanation of what's involved so that you hopefully understand what we are working with.

A View queries the database for some specified content (building on the underlying WordPress WP_Query class), then outputs the results per your designs.

It is the querying we are interested in here.

You are querying property listings, and aim to filter by a city taxonomy, e.g. to only show results in Vancouver.

To do that you add a Query Filter to your View. Screenshot 1 has me adding a Query Filter for my "Colour" taxonomy, where I have to choose what the values will be that the View is filtered by. I can manually select colours (e.g. to only show red posts).

Paralleling your example, what if I want to use the same View on different pages, so red posts on my Red page, blue posts on my Blue page, etc?

In that case, everywhere I insert the View I specify which value to use in the filter for that instance of the View.

It is only possible to do that when inserting a View via the wpv-view shortcode. That comes from the legacy editor, which is why my screenshots are from the legacy editor. As an aside, it is possible to create Views and add similar Query Filters with the Block editor, but when it comes to adding the View to different pages, that must be via the wpv-view shortcode.

You can arbitrarily add attributes to shortcodes, and it is via shortcode attributes that we will pass the required values.

To illustrate the "arbitrary" part, I'm going to use a shortcode attribute "bananas" on my site.

Screenshot 2 shows my Query Filter for my Colours taxonomy will get the slug of the colour term to filter by from a shortcode attribute "bananas". (An attribute name will be proposed, e.g. wpvcolour, but you can change it if you wish, as long as that is the attributes added to your wpv-view shortcodes.)

So on my page Red, where I want to show red posts, I will insert the View via shortcode, like so:

[wpv-view name="My Colour View" bananas="red"]

And on the page Blue, it will be

[wpv-view name="My Colour View" bananas="blue"]

Hopefuly that clears things up for you.

[talatcanU]

I tried to use directly the shortcode but it didn't work. For example, I used the exact same view code that was provided before.

[wpv-view name="housing" wpvcitycanada="toronto"]

It doesn't show any item. Here is the following code that I created before for the left column. Where should I place this filtered view in the following code?

Here is the related page and I am trying to get the same style for only Toronto.

hidden link

<div class="wp-block-toolset-views-view-editor wpv-gutenberg-view-wrapper-257272">
<div class="wp-block-toolset-views-custom-search-container">[wpv-filter-start hide="false"] [wpv-filter-controls]<div>
<div class="wp-block-toolset-views-custom-search-filter wpv-custom-search-filter wpv-custom-search-filter-label-top" data-toolset-views-custom-search-filter="1"><div><div class="form-group"><span class="wpv-custom-search-filter__input">[wpv-control-post-taxonomy default_label='Select the city' taxonomy='homestay-city' url_param='wpv-homestay-city' type='select']</span></div></div></div>
<div class="wp-block-toolset-views-custom-search-filter wpv-custom-search-filter wpv-custom-search-filter-label-top" data-toolset-views-custom-search-filter="1"><div><div class="form-group"><span class="wpv-custom-search-filter__input">[wpv-control-post-taxonomy default_label='Select Your City' taxonomy='city-canada' url_param='wpv-city-canada' type='select']</span></div></div></div>
<div id="maximum-right" class="wp-block-toolset-views-custom-search-filter wpv-custom-search-filter wpv-custom-search-filter-label-top wpv-custom-search-filter-columns" data-toolset-views-custom-search-filter="1"><div><div class="form-group"><label class="wpv-custom-search-filter__label" for="wpcf-room-price_min">Minimum price</label><!-- ## --><span class="wpv-custom-search-filter__input">[wpv-control-postmeta order='ascnum' value_type='NUMERIC' value_compare='BETWEEN' type='textfield' two_columns='true' field='wpcf-room-price' url_param='wpv-wpcf-room-price_min']</span></div><div class="form-group"><!-- ## --><label class="wpv-custom-search-filter__label" for="wpcf-room-price_max">Maximum price</label><!-- ## --><span class="wpv-custom-search-filter__input">[wpv-control-postmeta order='ascnum' value_type='NUMERIC' value_compare='BETWEEN' type='textfield' two_columns='true' field='wpcf-room-price' url_param='wpv-wpcf-room-price_max']</span></div></div></div>
<div class="wp-block-toolset-views-custom-search-filter wpv-custom-search-filter wpv-custom-search-filter-label-top" data-toolset-views-custom-search-filter="1"><div><div class="form-group"><label class="wpv-custom-search-filter__label" for="wpcf-available-months">Available months</label><!-- ## --><span class="wpv-custom-search-filter__input">[wpv-control-postmeta default_label='Select the month' type='select' source='database' values='' display_values='' field='wpcf-available-months' url_param='wpv-wpcf-available-months']</span></div></div></div>
<div class="wpv-custom-search-filter-reset" data-toolset-views-custom-search-reset="1">[wpv-filter-reset reset_label="× Clear all filters" class="" type="input"]</div>
<div class="wpv-custom-search-filter-submit" data-toolset-views-custom-search-submit="1">[wpv-filter-submit name="Search" class="" type="input"]</div>
</div>[/wpv-filter-controls] [wpv-filter-end]</div>
<div class="wp-block-toolset-views-view-template-block wpv-block-loop-item php-to-be-replaced-with-shortcode" data-toolset-views-view-template-block="1">
<div class="tb-fields-and-text" data-toolset-blocks-fields-and-text="1">
[wpv-map-marker map_id='map-1' marker_id='marker-[wpv-post-id]' marker_field='wpcf-location-on-the-map']<p>[wpv-post-link]</p><p><span style="color: #409f4a; font-size: 30px;">$ [types field='room-price' format='FIELD_VALUE'][/types]</span><span style="color: #6b7280;">/\ a month</span></p>[/wpv-map-marker]
<div class="room-card">
<div class="room-image">
<div class="tb-image-slider" data-toolset-blocks-image-slider="1"><div class="tb-image-slider--carousel tb-image-slider--crop glide" data-glide-number-slides="1"><div class="glide__arrows" data-glide-el="controls"><button class="glide__arrow glide__arrow--left" data-glide-dir="<"><span class="tb-slider-left-arrow"></span></button><button class="glide__arrow glide__arrow--right" data-glide-dir=">"><span class="tb-slider-right-arrow"></span></button></div><div class="glide__track" data-glide-el="track"><ul class="glide__slides">[wpv-for-each field="wpcf-room-image"]<li class="glide__slide">[types field='room-image' alt='%%ALT%%' size='large'][/types][/wpv-for-each]</div></div></div>
</div>
<div class="room-details js-wpv-addon-maps-focus-map js-toolset-maps-hover-map-map-1-marker-marker-[wpv-post-id] js-toolset-maps-open-infowindow-map-map-1-marker-marker-[wpv-post-id]" data-map="map-1" data-marker="marker-[wpv-post-id]">
<p class="custom-post-title">[wpv-post-title]</p>
<p class="custom-post-address">[types field='location-on-the-map'][/types]</p>
<p><span style="color: #409f4a; font-size: 30px;">$ [types field='room-price' format='FIELD_VALUE'][/types]</span><span style="color: #6b7280;"> / a month</span></p>
</div>
<div class="room-availability">
<div class="availability">Available from</div>
<div class="align-text-availability">[types field='available-months' state="checked" option="0"]Jan 1st, 2025[/types][types field='available-months' state="checked" option="1"]Feb 1st, 2025[/types][types field='available-months' state="checked" option="2"]Mar 1st, 2025[/types][types field='available-months' state="checked" option="3"]Apr 1st, 2024[/types][types field='available-months' state="checked" option="4"]May 1st, 2024[/types][types field='available-months' state="checked" option="5"]Jun 1st, 2024[/types][types field='available-months' state="checked" option="6"]Jul 1st, 2024[/types][types field='available-months' state="checked" option="7"]Aug 1st, 2024[/types][types field='available-months' state="checked" option="8"]Sept 1st, 2024[/types][types field='available-months' state="checked" option="9"]Oct 1st,2024[/types][types field='available-months' state="checked" option="10"]Nov 1st, 2024[/types][types field='available-months' state="checked" option="11"]Dec 1st, 2024[/types]</div>
<div style="width: 100%;">View more</div></div>
</div></div>
</div>
<div class="wpv-pagination-nav-links" data-toolset-views-view-pagination-block="1">[wpv-pager-nav-links output="bootstrap" anchor_text="%%PAGE%%" ellipsis="..." ]</div>
</div>

[Minesh]

I need to check how you exactly build the current view.

Can you please share admin access details and let me review how you build your view and why its not working.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

When you want to filter the view result using the view's shortcode attribute, you should not use the view's widget.

In stead of using view's widget, you should try to add the view's shortcode:

[wpv-view name="My Colour View" bananas="red"]

For that - you should add the "Text" module and then try to add the view's shortcode as shared above to filter the view with specific city.

On this page:
- hidden link

Do you want to display only post belongs to Vancouver?

[talatcanU]

I will have the same listing with co-living but the title and content will be about "student housing in Vancouver"

For example; I used this shortcode to be able to filter only Vancouver's properties.

[wpv-view name="coliving list canada" wpvcitycanada="vancouver"]

I tried this shortcode on the following page.

hidden link

It is still showing entire listings even though I filter it by the city. To make what I am trying more clear for you, I will have coliving listings on the link that I just shared but I want to show only properties from Vancouver.

If I can solve this issue, it is going to be amazing for me to structure the website better. Hope we can find a solution for this.

Thank you very much for your support.

[Minesh]

But on the page you shared:
- hidden link

You already have a city filter.

Do you mean when you are on the following page: hidden link
- it's showing the page name as city name and then you want to pre-filer the view result based on the post title "vancouver"? If yes, what happen when you change the city filter available on this page?

[talatcanU]

What I am trying to do is to ensure that when people click on the link (hidden link), they see only "properties in Vancouver" without using the city filter.

I thought that when we use a shortcode with a city filter, it will show only Vancouver properties with the same design I have on the link below.

hidden link

I just want to see all properties in Vancouver without using any filters from the same view style. Did I explain it well?

[Minesh]

No that's not true both frontend filters and filtering with view's shortcode attribute is different mechanism.

Can you please check now:
- hidden link

What I've done is:
- I've created the following content template that will hold the view namely "ct-filter-view-shortcode-attr"
=> hidden link

- Then, to this content template I've added the view block and under the section "Use existing View" I've selected the view "Coliving list Canada" and click on "Use View" button and then further clicked on the button "Edit Copy" and to this copy view I've name the view "Coliving list Canada shortcode attr" and save and added the "Query Filter" from "Content Selection" tab of the view view block on right side bar to add the query filter to filter with taxonomy "Cities in canada" shortcode attribute and save content template.

- Then I've reload the content template and removed the view block that displays the view "Coliving list Canada shortcode attr" and added "Fields and Text" block and selected the view "Coliving list Canada shortcode attr" by clicking on the "Add field or view" from "Fields and Text" block and added the view to the content template and saved the content template.

Please check the screenshot.
- hidden link

With your Divi builder, I've added the following shortcode to display the content template:
=> hidden link

[wpv-post-body view_template="ct-filter-view-shortcode-attr"]

[talatcanU]

Hi Minesh, thank you very much! That was exactly what I was trying to achieve. Before checking on the other pages during this weekend, could you please have a look at why it doesn't show pictures on this page? It appears and disappears again. The other pages are fine.

hidden link

Thank you so much once again! Can I keep the ticket open until I complete the same changes on the other pages in case I come across any issues?

[Minesh]

Glad to know that your original issue is resolved with the solution I shared.

As per our support policy, we entertain only one question per ticket. May I kindly ask you to open a new ticket with every new question you may have. This will help other users searching on the forum as well as help us to write problem resolution summery for the original issue reported with this ticket.

Thank you for understanding.

[talatcanU]

Hi Minesh, it was a great help from you. During the weekend I created other pages with this technique as well. However, I am facing an issue that pictures are not being loaded on these pages.

To give you example, please follow the pages below.

hidden link
hidden link

New threads created by Minesh and linked to this one are listed below:

https://toolset.com/forums/topic/split-filtering-views-for-specific-pages/

[Minesh]

I've split the ticket with your new question.

And I will try to address it with the following split ticket:
- https://toolset.com/forums/topic/split-filtering-views-for-specific-pages/

You're welcome to mark resolve this ticket.