[Resolved] Is there any way to provide a tally for options in select fields?

[Author]

Posts

[brettB-4]

We've set up a view that shows all our Teams with fields showing Player Name and T-shirt Size. The page showing that view is here:

hidden link

We would like to see if you have any ideas for if it is possible to have a total display at the bottom of the view that will give a breakdown of how many times each T-shirt size option was selected in that view. Adding to the difficulty of this, the T-shirt Size is not coming from one field. We have fields set up within the Team content type for 12 Player Names and 12 T-shirt sizes. Then we have conditionals to not display the fields if they are empty. So if you see a team with 6 players, the T-shirt size fields are Player 1 T-shirt size, Player 2 T-shirt size, Player 3 T-shirt size, Player 4 T-shirt size, Player 5 T-shirt size, and Player 6 T-shirt size. All of these T-shirt size fields do have the same options though.

We'd like the desired output here to show as follows at the bottom of the view:

XXL - ##
XL - ##
L - ##
M - ##
S - ##

where ## reflects the total times that size was chosen among all the T-shirt size fields.

Is that possible?

[Waqar]

Hi,

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

There is no built-in method available to achieve this, so, it will need some custom code workaround.

Can you please share temporary admin login details, so that I can see exactly how this view and the relevant fields are set up? I'll be in a better position to suggest the next steps, accordingly.

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

regards,
Waqar

[Waqar]

Thank you for sharing the access details.

I was able to add the counter for the number of sizes used in each table, through the following custom script:

jQuery( document ).on( 'ready', function( event, data ) {
	jQuery('.js-wpv-view-layout-1944 > table').each(function () {
		var $this = jQuery(this);
		var XXXL = 0;
		var XXL = 0;
		var XL = 0;
		var L = 0;
		var M = 0;
		var S = 0;

		jQuery(this).find('tr').each(function() {
			var txt = jQuery(this).find('td:nth(1)').text();
				if (txt == 'XXXL') {XXXL += 1;}
				if (txt == 'XXL') {XXL += 1;}
				if (txt == 'XL') {XL += 1;}
				if (txt == 'L') {L += 1;}
				if (txt == 'M') {M += 1;}
				if (txt == 'S') {S += 1;}   	
		});

		jQuery(this).find('tbody').append('<tr><td colspan="2">Total: XXXL = '+XXXL+', XXL = '+XXL+', XL = '+XL+', L = '+L+', M = '+M+', S = '+S+'</td></tr>');

	});
});

You'll find it added in the view's 'JS editor'.
( screenshot: hidden link )

Note: The custom code examples from our forum are shared to get you started in the right direction. You're welcome to adjust them as needed and for more personalized customization assistance, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

[brettB-4]

This is looking good, but is there any way to get the totals for everything on the page instead of on a per team basis?

On the Tournament filter at the top of the page, choose the Atlanta option to filter the results down to just that. Ideally we're hoping to get the size total breakdown for the entire page of results.

This is so we can easily see the full size breakdown for a full tournament in advance of placing our order with the shirt printers. Seeing this without having to manually calculate it each time will make things much easier for knowing how many of each size we need to order.

[Waqar]

I've updated the code slightly so that it calculates the sizes for all the tables, collectively.

jQuery( document ).on( 'ready', function( event, data ) {
	var XXXL = 0;
	var XXL = 0;
	var XL = 0;
	var L = 0;
	var M = 0;
	var S = 0;

	jQuery('.js-wpv-view-layout > table').each(function () {
		var $this = jQuery(this);
		jQuery(this).find('tr').each(function() {
			var txt = jQuery(this).find('td:nth(1)').text();
			if (txt == 'XXXL') {XXXL += 1;}
			if (txt == 'XXL') {XXL += 1;}
			if (txt == 'XL') {XL += 1;}
			if (txt == 'L') {L += 1;}
			if (txt == 'M') {M += 1;}
			if (txt == 'S') {S += 1;}
		});
	});

	jQuery('.total-sizes-container').append('<p>Total: XXXL = '+XXXL+', XXL = '+XXL+', XL = '+XL+', L = '+L+', M = '+M+', S = '+S+'</p>');
});

You'll also find a special div container HTML, under the view's loop:
( screenshot: hidden link )

<div class="total-sizes-container"></div>

The script finds this Div and inserts the text for the totals, in it. You can move/place this HTML anywhere on the page, as needed.

[brettB-4]

Excellent! Last thing now, and I hope you don't grumble too badly at me for this. Can we get the per team counts back as well? I understood the request from the client as wanting full page totals. But when I showed him the progress on this after I had replied to you above, he said the per team totals would be helpful as well. So if we can get both the way you did it initially AND the way it is now, that would be perfect! Sorry I didn't update my previous post to reflect this.

[Waqar]

I've included the scripts from both my earlier messages in the view and they both are working now.

[brettB-4]

Awesome!!! Thanks as always.