[Resolved] Views: Nested loops with multiple taxonomies

[Author]

Posts

[philippeS-4]

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

[Waqar]

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

[Waqar]

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

[philippeS-4]

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

[Waqar]

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 )

[philippeS-4]

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

[Waqar]

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 )

[philippeS-4]

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

[Waqar]

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" );
            }
        });
    });
});