A fragment of a custom WordPress page to take the information from `eph-ccdb-suite.php` and display it in a comparison page.

page-cordcut-compare.php

					<?php

function eph_get_child_tiers( $parent_id ) {
	$child_tiers = array();
	$child_tier_query = new WP_Query( array(
		'post_parent'            => $parent_id,
		'post_type'              => array( 'eph_ccdb_service' ),
		'nopaging'               => true,
		'order'                  => 'ASC',
		'orderby'                => 'title',
	) );
	while ( $child_tier_query->have_posts() ) {
		$child_tier_query->the_post();
		$this_tier = get_the_id();
		$child_tiers[] = array(
			'id' => $this_tier,
			'name' => get_the_title(),
			'price' => get_post_meta( $this_tier, 'eph_ccdb_tierprice', true ),
			'channels' => wp_get_post_terms( $this_tier, 'eph_ccdb_channel', array("fields" => "ids") ),
			'tiers' => eph_get_child_tiers( $this_tier ),
		);
	}
	wp_reset_postdata();
	return $child_tiers;
}

$services = array();					

// The Query
$service_q = new WP_Query( array(
	'post_parent'            => '0',
	'post_type'              => array( 'eph_ccdb_service' ),
	'nopaging'               => true,
	'order'                  => 'ASC',
	'orderby'                => 'title',
) );

// The Loop
if ( $service_q->have_posts() ) {
	while ( $service_q->have_posts() ) {
		$service_q->the_post();
		$service_id = get_the_id();
		$services[] = array(
			'id' => $service_id,
			'name' => get_the_title(),
			'permalink' => get_post_permalink(),
			'tiers' => eph_get_child_tiers( $service_id ),
		);
	}
} else {
	// no posts found
}

// Restore original Post Data
wp_reset_postdata();

$all_channels = get_terms( array(
    'taxonomy' => 'eph_ccdb_channel',
    'hide_empty' => true,
) );

//echo '<script type="text/javascript">var eph_services = '.wp_json_encode( $services ).';</script>';
					?>
					
					<script type="text/javascript">
					jQuery('document').ready(function() {
						var services = {};
						<?php foreach ( $services as $service ) : ?>
						services['<?php echo $service['id']; ?>'] = <?php echo wp_json_encode( $service ); ?>;
						<?php endforeach; ?>
						
						var removeEmpties = function() {
							jQuery('.channelRow').each(function() {
								var myChildren = jQuery(this).children();
								if ((myChildren[1].innerHTML == '' && myChildren[2].innerHTML == '') ||
								    (document.getElementById('onlyShowDiffs').checked && myChildren[1].innerHTML == myChildren[2].innerHTML)) {
									jQuery(this).hide();
								} else {
									jQuery(this).show();
								}
							});
						}
						
						var updatePrice = function(column) {
							var newPrice = 0;
							jQuery('#col'+column+'info .tierCheck').each(function() {
								if (this.checked) newPrice += jQuery(this).data('price');
							});
							jQuery('#col'+column+'price').html(newPrice);
						}
						
						var outputTier = function(colname, thisTier) {
							var currentHTML = '<label style="display:block;padding:5px;" for="col'+colname+'tier'+thisTier['id']+'">';
							currentHTML += '<input type="checkbox" class="tierCheck" id="col'+colname+'tier'+thisTier['id']+'"';
							currentHTML += ' data-column="'+colname+'" data-channels="'+thisTier['channels']+'" data-price="'+thisTier['price']+'"';
							if (thisTier['tiers'] && thisTier['tiers'].length > 0) {
								currentHTML += ' data-childdiv="col'+colname+'tier'+thisTier['id']+'children"> '+thisTier['name']+'</label>';
								currentHTML += '<div id="col'+colname+'tier'+thisTier['id']+'children" style="padding-left:5px;display:none;">';
								thisTier['tiers'].forEach(function(childTier) {
									currentHTML += outputTier(colname, childTier);
								});
								currentHTML += '</div>';
							} else {
								currentHTML += '> '+thisTier['name']+'</label>';
							}
							return currentHTML;
						}
						
						var onTierCheck = function(tierCheckbox) {
							if (jQuery(tierCheckbox).data('childdiv')) {
								jQuery('#'+jQuery(tierCheckbox).data('childdiv')).show();
							}
							
							var cellPrefix = '#'+jQuery(tierCheckbox).data('column').toLowerCase()+'-';
							
							jQuery(tierCheckbox).data('channels').split(',').forEach(function(channelID) {
								jQuery(cellPrefix+channelID).html('<strong>&#10003;</strong>');
							});
							
							updatePrice(jQuery(tierCheckbox).data('column'));
							removeEmpties();
						};
						
						var onTierUncheck = function(tierCheckbox) {
							if (jQuery(tierCheckbox).data('childdiv')) {
								jQuery('#'+jQuery(tierCheckbox).data('childdiv')+' .tierCheck').prop( "checked", false );
								jQuery('#'+jQuery(tierCheckbox).data('childdiv')+' .tierCheck').each(function() {
									onTierUncheck(this);
								});
								jQuery('#'+jQuery(tierCheckbox).data('childdiv')).hide();
							}
							
							var cellPrefix = '#'+jQuery(tierCheckbox).data('column').toLowerCase()+'-';
							
							jQuery(tierCheckbox).data('channels').split(',').forEach(function(channelID) {
								jQuery(cellPrefix+channelID).html('');
							});
							
							updatePrice(jQuery(tierCheckbox).data('column'));
							removeEmpties();
						};
						
						var onServiceChange = function(colname, serviceID) {
							jQuery('.col'+colname+'channel').html('');
						
							if (serviceID != "no") {
								var infoHTML = '';
								services[serviceID]['tiers'].forEach(function(tier) {
									infoHTML += outputTier(colname, tier);
								});
								infoHTML += '<div style="background:#ccc;padding:5px;">Price: <span id="col'+colname+'price" data-current="0"><span></div>';
								jQuery('#col'+colname+'info').html(infoHTML);
							}
							
							jQuery('.tierCheck').change(function() {
								if (this.checked) {
									onTierCheck(this);
								} else {
									onTierUncheck(this);
								}
							});
							
							removeEmpties();
						};
						jQuery('#colAselect').change(function() {onServiceChange('A', jQuery('#colAselect').val());});
						jQuery('#colBselect').change(function() {onServiceChange('B', jQuery('#colBselect').val());});
						jQuery('#onlyShowDiffs').change(removeEmpties);
						
						removeEmpties();
					});
					</script>
					
					<label for="onlyShowDiffs" style="display:block;width:500px;max-width:100%;margin:10px auto;">
						<input type="checkbox" id="onlyShowDiffs">
						Only show differences
					</label>
					
					<table>
						<thead>
							<tr>
								<th scope="col">Channel</th>
								<th scope="col">
									<select id="colAselect">
										<option value="no" selected>(Please select)</option>
									<?php foreach ( $services as $service ) : ?>
										<option value="<?php echo $service['id']; ?>"><?php echo $service['name']; ?></option>
									<?php endforeach; ?>
									</select>
									<div id="colAinfo">
									</div>
								</th>
								<th scope="col">
									<select id="colBselect">
										<option value="no" selected>(Please select)</option>
									<?php foreach ( $services as $service ) : ?>
										<option value="<?php echo $service['id']; ?>"><?php echo $service['name']; ?></option>
									<?php endforeach; ?>
									</select>
									<div id="colBinfo">
									</div>
								</th>
							</tr>
						</thead>
						<tbody>
						<?php foreach ( $all_channels as $channel ) : ?>
							<tr class="channelRow" id="row<?php echo $channel->term_id; ?>">
								<td><?php echo $channel->name; ?></td>
								<td class="colAchannel" id="a-<?php echo $channel->term_id; ?>"></td>
								<td class="colBchannel" id="b-<?php echo $channel->term_id; ?>"></td>
							</tr>
						<?php endforeach; ?>
						</tbody>
					</table>