Skip Navigation

[Resolved] Views: Nested loops with multiple taxonomies

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
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 8 replies, has 2 voices.

Last updated by Waqar 2 months, 1 week ago.

Assisted by: Waqar.

Author
Posts
#2696230
View with sectors filtering.png
View with Alphabet grouing.png

Hi there,

I have a CPT called Glossary with a couple of CF and 2 taxonomies. One called Alphabet which has the first letter of the post title and it is used to group them alphabetically. This page hidden link use a parent/child views, where the parent parse through the Alphabet taxonomy and the child the posts assigned to it. This allows me to set an anchor on each letter for a quick link.

The other taxonomy is called Sectors and multiple sectors can be applied to a post. I have a view wich list all posts and filters them based on the Sectors see hidden link

Now I would like to render a page where I can have both where I have first the dynamic filtering based on the sectors and then the grouping by the Alphabet taxonomy and quick links.

I am afraid I have reach my limit with Toolset and would appreciate your help with this. Not sure if changing one or both taxonomies as a CF would help, but I can easily do that if needed.

This is on a devl site which I can easily provide you access to it.

Thanks for your help.Alphab

#2696340

Hi,

Thank you for contacting us and I'd be happy to assist.

To understand the exact setup and suggest the next steps, I'll need to see how these elements are set up in the admin area.

Can you please share temporary admin login details, along with the link to the page where you'd like to show this combined filtering list?

Note: Your next reply will be private and making a complete backup copy is recommended before sharing the access details.

regards,
Waqar

#2697161

Hi Phil,

Thank you for sharing the access details.

I've created a page named 'Test page from TS support', where you'll find three views:

1). View to loop through Sectors:

This view is a taxonomy view for sector taxonomy, that loops through all the terms in the taxonomy to create a container/section for each.

2). View to loop through Alphabets:

This view is a taxonomy view for Alphabets taxonomy, which loops through all the terms in the taxonomy to create a sub-container/sub-section for each alphabet. This is nested within the loop of the first view.

3). View to show filtered Glossary items:

This view creates the list of all the 'Glossaries' posts but doesn't show the list.
( the items are hidden through the CSS code )

In this same view, you'll see this custom script, which cycles through each result item or 'Glossaries' post from the view and puts them in the relevant sections, created through the first two views:


jQuery(document).ready(function( $ ) {
	$('.glossary-item-container').each(function()
	{
		var dataSector = $(this).attr('data-sector');
		var dataAlphabet = $(this).attr('data-alphabet');
		var dataSectorArr = dataSector.split("##");

		for(var i = 0; i < dataSectorArr.length; i++) {
			console.log("loop", dataSectorArr[i]);
			$('.sector-container[data-sector="'+dataSectorArr[i]+'"] .row .sector-alphabet-container[data-alphabet="'+dataAlphabet+'"]').append($(this).html());
		}
	});
});

Feel free to review the setup and let me know if some point needs further explanation.

regards,
Waqar

#2697334
Result I would like.png
Glossary Sectors All.png

Hi Waqar,

Thank you very much for all your hard work on this, this is not exactly the result I am after. Apologies my original brief was not detailed enough.

Time being I have created an extra custom field called Character Index - which has the same value as the alphabet taxonomy. On the view Glossary All Sectors what I would like. everytime there is a new Character Index we put the blue circle (anchor) with the character - if it is the same as the previous post we don't show it - basically a Group By (the sorting by CF and then Post Title) takes care of that it is just rendering that Character Index on the first post when there is a change. See picture "Result I would like"

I have modified the view so that the Character Index is currently shown on each post, so basically looking to test if Character Index = Character Index -1 (from previous post) we don't show it. If it is different than we do.

hidden link

Hope this makes sense.
Thanks for your continous support on this,
Phil

#2697533

Thank you for sharing these details.

To make it clear, on the existing page 'Glossary All Sectors', the only concern is the repeating starting character showing in the blue icon. (it should be showing only for the first item of the group)
( screenshot: hidden link )

#2697551

Hi Waqar,

Yes the blue icon should only show on the first item/post which has the same character index and has 2 purposes:
1) to show the start of the glossary items where the character index is the same.
2) to assign an ID to that element so that it can be used as an anchor for the quick links at the top of the page: example when I click on M it will take me to the M blue icon.

hidden link Sectors All-text.png

Hope this make sense,
Thanks again,
Phil

#2697623

I have added following changes to make this work:

1). In the view's loop item, I've added some identifying 'class' and 'data-index' attributes to the span tag that holds the index information:


<span class="character-index-container" data-index="[types field='character-index'][/types]">

2). And in the view's JS editor, included the following script that cycles through all index items and hides the duplicate ones:


jQuery(document).ready(function( $ ) {
	var indexOptions = ['#','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
	$.each(indexOptions , function(index, val) {
		$('.character-index-container[data-index='+val+']').each(function(i) {
			if(i>0) {
				$(this).css( "visibility", "hidden" );
			}
		});
	});
});

Important note: For the index custom field, the value of the "E" alphabet seems to be saved in lower-case (i.e. 'e'), while all others are saved in upper-case. You'll need to update those values in uppercase too, for normal functionality.
( screenshot: hidden link )

#2697628
Sector-filter-AJAX.png

Thanks Waqar, this is almost perfect. Can the script run on any AJAX update as well and not just page load, like when I filter based on a Sector or do a text search?

As you can see on screenshot when there is an AJAX update, all the icons are showing again.

Thanks for your continous support, this is much appreciated.
Phil

#2697638

You're welcome and glad I could help.

I've updated the script slightly so that it also executes on AJAX-based changes:


$( document ).on( 'ready js_event_wpv_pagination_completed js_event_wpv_parametric_search_form_updated js_event_wpv_parametric_search_results_updated', function( event, data ) {
    var indexOptions = ['#','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
    $.each(indexOptions , function(index, val) {
        $('.character-index-container[data-index='+val+']').each(function(i) {
            if(i>0) {
                $(this).css( "visibility", "hidden" );
            }
        });
    });
});

philippeS-4 confirmed that the issue was resolved on 2024-05-14 17:58:14.
This ticket is now closed. If you're a Toolset client and need related help, please open a new support ticket.