[Resolved] How to Add Heading on Views Layout's List?

[Author]

Posts

[syafS]

Currently I have a directory with a loop of shop as follows:

Shop A - Category 1
Shop B - Category 1
Shop C - Category 2
Shop D - Category 2

What I want to achieve, is to display the heading before the loop.

Category 1
Shop A
Shop B

Category B
Shop C
Shop D

Here is the directory I'm working at: hidden link

Here is an example of what I want to achieve: sunwaypyramid.com/directory/

Looking at the reference site, each filter (Alphabetical, Floors, Zones) will display the list with a heading (Amenities, Anchors, Beauty and so on). How do I create something like this in Views?

[Mohammed]

Hi,

Create two Views
View A => Lists the taxonomies of the post type you need
View B => Lists the posts of each taxonomy

View A configurations:
-- Content Selection: Taxonomy (Then select the taxonomy you need)
--in the loop output editor of View A, add the category title
-- Insert View B in the loop output editor of View A (Using the Fields and Views button)
-- Pass the Taxonomy slug to View B as shortcode attribute.
Example:
<wpv-loop>[wpv-view name="View B" wpvcategory="[wpv-taxonomy-slug]" ]
Later you will use this wpvcategory shortcode attribute in view B.

View B configuration:
-- Content Selection: The post type you need
-- Query Filter
----Add a Query Filter that filters by taxonomy (Just Click the add filter button, it's self explanatory)
----Select (The category slug) is (Any of the values) coming from the Shortcode attribute (wpvcategory)
--Scroll to the Loop output editor of View B and add whatever you want

Documentation:
https://toolset.com/documentation/user-guides/passing-arguments-to-views/
https://toolset.com/documentation/user-guides/filtering-views-by-custom-fields/

thanks.

[syafS]

Thanks Mohammed!

I managed to separate the category here: hidden link

Now, I still have another 2 taxonomies (floor and alphabetical) that I want to display in a same way (Heading and list) using a filter.

Is this filter possible to achieve in a same page? Again, the same effect as sunwaypyramid.com/directory/

In your guide, I can only create View A for one taxonomy (in this case category). Does this mean I have to create View A1 (category), View A2 (floor) and View A3 (alphabetical)?

[Mohammed]

Hi Syaf,

I'm not sure I 100% understand your website structure. but anyway, having many views in the same page should work properly.

So, give it a try and let me know if this setup will do the job for you.

I will be waiting for your reply.

Thanks.

[syafS]

Hi Muhammed

What I want to achieve is the filtering of 4 taxonomies similar to: hidden link
In the link above, the taxonomies are Alphabetical, Category, Floor and Zones
If you click any of the filter (attached screenshot), you will see their list is sorted with the Taxonomy name as the <h1> in the same page

Now, what I have setup one Taxonomy view, which is Category.
Link: hidden link
This page was setup based on your guide ( View A + View B )

I haven't create a separate View for Floor and Alphabetical yet because I need a guide to combine Floor and Alphabetical Taxonomies as filter option for front end user to enable them to sort the list in the same page (with similar link and search form as screenshot attachment) hidden link

[Mohammed]

Hi Syaf,

I think it will be the same idea. you will need to create a page, add the main categories names manually as headings (Timepieces & Optical, Specialty & Services, Health, Beauty & Wellness, Facilities)

For each of these categories names, you will need to create a taxonomy View A and for each taxonomy View you will need to create a posts view B that will list the posts depending on the views shortcode attribute that will be passed from View A.

If it's a testing site, we can work on this together.

I will just need the admin credentials to your website to prepare an example for you on the website.

I will set the next reply as a private one in case you preferred to provide the credentials.

Thanks.

[Mohammed]

Hi Syaf,

I've added an example for you.

Please check the following:

--Main view: TS main view
--Directories alphabeticals view
--Directories caegories view
--Directories floors view
--Page: yourdomain/ts-main-search/

The main view contains the other 3 views and its inserted in the page TS main view.

I added a filter to your functions.php to make the custom search works.

FYI, The filter is added because it's not supported natively to search in a view depending on a value got fro URL parameter passed from another view.

Please let me know if this helps.

Thanks.

[syafS]

Thanks Muhammad. We're getting somewhere.

I've seen the code you add in functions.php

add_filter('wpv_filter_query', 'tssupp_test_function', 101, 3);

function tssupp_test_function($query_args, $view_settings, $view_id)
{
    if ($view_id == 546||$view_id == 545||$view_id == 543) {
        $query_args['s'] = $_GET['wpv_post_search'];
		//echo '<pre>';
		//print_r($query_args); 
    }
	return $query_args;
}

Since you mentioned that search doesn't work natively in View, what shortcode should I use to let user filter between the 3 views? This shortcode below only work for filtering one Taxonomy, not filtering View.

[wpv-control-post-taxonomy taxonomy="category" type="radios" default_label="All Categories" url_param="wpv-category"]

[Mohammed]

Hi Syaf,

The previous code should enable the search to work on the three Views. It was working when I tested it.

Can you explain what exactly what is not working? I will be happy to fix it.

Thanks.