Please Help Me Troubleshoot

  • Resolved paulbitner

    (@paulbitner)


    4 years, 4 months ago

    Hello all,

    I am trying to create a custom ACF Page Builder component using this AJAX Load More plugin. Basically, the ACF fields let you choose which post type(s) you want to load and then AJAX Load More should pull all of the posts in a grid with a Load More button.

    Well, by default no posts show, I need to click the load more button to see. And only a default ‘Hello World’ post is showing, not any of the posts which are selected in the page builder.

    All help is appreciated.

    PHP CODE FOR ACF PAGE BUILDER:

<?php
	/**
	 * Page Builder: AJAX Post Grid panel
	 *
	 * @package WordPress
	 * @subpackage Foodbuy
	 * @since 1.0
	 * @version 1.0
	 */

	// Prepare fields
	$postType = implode(',', $panel['post_type']);
	$postsPerPage = $panel['posts_per_page'] ? $panel['posts_per_page'] : get_option('posts_per_page');
	$taxonomyName = 'category';

	$template = $postType == 'case_study' ? 'case-study.php' : 'post.php';
	$template = 'post.php'; // disable if you want to re-enable a custom template for case studies
	$page_id = get_the_ID();

	$terms_args = [
		'hide_empty' => true,
		'order' => 'ASC',
		'orderby' => $panel['filter_ordering'] ? $panel['filter_ordering'] : 'name',
		'taxonomy' => 'category',
	];
	$buttonLabel = 'Load More';
	if( strpos($postType, 'press') !== false || strpos($postType, 'article') !== false || strpos($postType, 'case_study') !== false || strpos($postType, 'resource') !== false ) {
		$taxonomyName = 'industry';
		$terms_args['taxonomy'] = 'industry';
	}
	$terms = get_terms($terms_args);

	if( !empty($terms) ) {
		$filters = '';
		$termsQuery = [];

		foreach( $terms as $i => $term ) {
			$filters .= '<a href="#" class="filter button button--filled" data-taxonomy="'.$taxonomyName.'" data-'.($terms_args['taxonomy'] != 'category' ? 'taxonomy-terms' : 'category').'="'.$term->slug.'">'.$term->name.'</a>';

			array_push($termsQuery, $term->slug);
		}

		$termsQueryStr = implode(',', $termsQuery);
		// $taxonomyTerms = ($terms_args['taxonomy'] != 'category' ? ($panel['display_filters'] == 'yes' ? $terms[0]->slug : $termsQueryStr) : '');
	}

	if ($postType == 'article' && get_field('article_type', $page_id) != '') {
		$meta_key = 'article_type';
		$meta_value = get_field('article_type', $page_id)[0];
		$meta_compare = 'LIKE';
	} else {
		$meta_key = '';
		$meta_value = '';
		$meta_compare = '';
	}

	// Prepare 'Ajax Load More' shortcode
	$ajm_shortcode = '[ajax_load_more css_classes="posts posts-per-page--'.$postsPerPage.' ajax-post-grid-panel__posts grid grid--justify-center" preloaded="true" preloaded_amount="'.$postsPerPage.'" pause="true" theme_repeater="'.$template.'" post_type="'.$postType.'" taxonomy="'.$taxonomyName.'" taxonomy_terms="'.$taxonomyTerms.'" taxonomy_relation="AND" posts_per_page="'.$postsPerPage.'" order="'.$panel['post_ordering'].'" orderby="'.$panel['post_ordering_by'].'" post__not_in="'.$heroPostID.'" scroll="false" transition="fade" transition_container="false" button_label="'.$buttonLabel.'" meta_key="'.$meta_key.'" meta_value="'.$meta_value.'" meta_compare="'.$meta_compare.'"]';

	// Prepare styles
	$inlineCss = isset($panel['inline_css']) ? $panel['inline_css'] : '';
?>
<section id="panel-<?=$panel['id']?>" class="ajax-post-grid-panel panel__ajax-post-grid panel panel--<?=$key+1?> animate wow fadeIn" style="<?=$inlineCss?>">

	<div class="panel__wrapper">

		<?php if( $panel['section_title'] ): ?>
			<h1 class="ajax-post-grid-panel__section-title section-title"><?=$panel['section_title']?></h1>
		<?php endif; ?>

		<?php if( $panel['display_filters'] && !is_amp_endpoint()): ?>
			<div class="ajax-post-grid-panel__filters panel-filters <?=$panel['section_title']?'':'text-center'?>">

				<div class="filters-toggle">
					<button class="button filter-toggle active" data-filter="all">All</button>
					<button class="button filter-toggle" data-filter="article" data-article-filter-type="news">News</button>
					<button class="button filter-toggle" data-filter="article" data-article-filter-type="blog">Articles</button>
					<!-- <button class="button filter-toggle" data-filter="case_study">Case Studies</button> disabled for now -->
					<button class="button filter-toggle" data-filter="press">Press</button>
				</div>
			</div>
		<?php endif; ?>
			
		<?php if ($panel['category_filters']): ?>
			<div class="ajax-post-grid-panel__filters panel-filters <?=$panel['section_title']?'':'text-center'?>">
				Filter:&nbsp; <select class="posts-grid-select-filter century-gothic bold" autocomplete="off" data-parent-name="" style="margin-bottom: 30px;">
					<option selected value="none">All</option>
				<?php foreach($panel['category_filters'] as $item){
					$industry_terms = get_terms(array('taxonomy' => 'industry', 'term_taxonomy_id' => $item->term_id, 'hide_empty' => false));
						
						$num = 0; foreach($industry_terms as $term){ $num++;
							echo '<option value="'.$term->slug.'" data-name="'.$term->name.'">';
								echo $term->name;
							echo '</option>';
						}
				} ?>

					</select>
			</div>
		<?php endif ?>

		<div class="posts-wrapper posts-all-wrapper ajax-post-grid-panel__posts-wrapper posts-per-page--<?=$postsPerPage?>">
			<?php echo do_shortcode($ajm_shortcode); ?>
		</div>

	<?php if ($panel['category_filters']): ?>
		<div class="filter-posts">
			

		<?php foreach($panel['category_filters'] as $item){
				$industry_terms = get_terms(array('taxonomy' => 'industry', 'term_taxonomy_id' => $item->term_id, 'hide_empty' => false));
				foreach ($industry_terms as $term) { ?>
					<div class="posts-wrapper posts-filter-wrapper ajax-post-grid-panel__posts-wrapper posts-per-page--<?=$postsPerPage?>" data-term="<?=$term->slug?>">
						<?php // Prepare 'Ajax Load More' shortcode
						$ajm_shortcode = '[ajax_load_more css_classes="posts posts-per-page--'.$postsPerPage.' ajax-post-grid-panel__posts grid grid--justify-center" preloaded="true" preloaded_amount="'.$postsPerPage.'" pause="true" theme_repeater="'.$template.'" post_type="article" taxonomy="industry" taxonomy_terms="'.$term->slug.'" taxonomy_relation="AND" posts_per_page="'.$postsPerPage.'" order="'.$panel['post_ordering'].'" orderby="'.$panel['post_ordering_by'].'" post__not_in="'.$heroPostID.'" scroll="false" transition="fade" transition_container="false" button_label="'.$buttonLabel.'" ]';
						echo do_shortcode($ajm_shortcode); ?>
					</div>
				<?php }
		} ?>

			
		</div>
	<?php endif; ?>

	<?php if ($panel['display_filters']) : ?>
		<div class="filter-posts">

			<div class="posts-wrapper posts-filter-wrapper ajax-post-grid-panel__posts-wrapper posts-per-page--<?=$postsPerPage?>" data-filter-type="article" data-article-type="blog">
			<?php

			// Prepare 'Ajax Load More' shortcode
			$ajm_shortcode = '[ajax_load_more css_classes="posts posts-per-page--'.$postsPerPage.' ajax-post-grid-panel__posts grid grid--justify-center" preloaded="true" preloaded_amount="'.$postsPerPage.'" pause="true" theme_repeater="'.$template.'" post_type="article" taxonomy="'.$taxonomyName.'" taxonomy_terms="'.$taxonomyTerms.'" taxonomy_relation="AND" posts_per_page="'.$postsPerPage.'" order="'.$panel['post_ordering'].'" orderby="'.$panel['post_ordering_by'].'" post__not_in="'.$heroPostID.'" scroll="false" transition="fade" transition_container="false" button_label="'.$buttonLabel.'" meta_key="article_type" meta_value="blog" meta_compare="LIKE" ]';
				echo do_shortcode($ajm_shortcode); ?>
			</div>

			<div class="posts-wrapper posts-filter-wrapper ajax-post-grid-panel__posts-wrapper posts-per-page--<?=$postsPerPage?>" data-filter-type="article" data-article-type="news">
			<?php

			// Prepare 'Ajax Load More' shortcode
			$ajm_shortcode = '[ajax_load_more css_classes="posts posts-per-page--'.$postsPerPage.' ajax-post-grid-panel__posts grid grid--justify-center" preloaded="true" preloaded_amount="'.$postsPerPage.'" pause="true" theme_repeater="'.$template.'" post_type="article" taxonomy="'.$taxonomyName.'" taxonomy_terms="'.$taxonomyTerms.'" taxonomy_relation="AND" posts_per_page="'.$postsPerPage.'" order="'.$panel['post_ordering'].'" orderby="'.$panel['post_ordering_by'].'" post__not_in="'.$heroPostID.'" scroll="false" transition="fade" transition_container="false" button_label="'.$buttonLabel.'" meta_key="article_type" meta_value="news" meta_compare="LIKE" ]';
				echo do_shortcode($ajm_shortcode); ?>
			</div>

			<div class="posts-wrapper posts-filter-wrapper ajax-post-grid-panel__posts-wrapper posts-per-page--<?=$postsPerPage?>" data-filter-type="press">
			<?php
			// Prepare 'Ajax Load More' shortcode
			$ajm_shortcode = '[ajax_load_more css_classes="posts posts-per-page--'.$postsPerPage.' ajax-post-grid-panel__posts grid grid--justify-center" preloaded="true" preloaded_amount="'.$postsPerPage.'" pause="true" theme_repeater="'.$template.'" post_type="press" taxonomy="'.$taxonomyName.'" taxonomy_terms="'.$taxonomyTerms.'" taxonomy_relation="AND" posts_per_page="'.$postsPerPage.'" order="'.$panel['post_ordering'].'" orderby="'.$panel['post_ordering_by'].'" post__not_in="'.$heroPostID.'" scroll="false" transition="fade" transition_container="false" button_label="'.$buttonLabel.'"]';
				echo do_shortcode($ajm_shortcode); ?>
			</div>

			<div class="posts-wrapper posts-filter-wrapper ajax-post-grid-panel__posts-wrapper posts-per-page--<?=$postsPerPage?>" data-filter-type="case_study">
			<?php
			// Prepare 'Ajax Load More' shortcode
			$ajm_shortcode = '[ajax_load_more css_classes="posts posts-per-page--'.$postsPerPage.' ajax-post-grid-panel__posts grid grid--justify-center" preloaded="true" preloaded_amount="'.$postsPerPage.'" pause="true" theme_repeater="'.$template.'" post_type="case_study" taxonomy="'.$taxonomyName.'" taxonomy_terms="'.$taxonomyTerms.'" taxonomy_relation="AND" posts_per_page="'.$postsPerPage.'" order="'.$panel['post_ordering'].'" orderby="'.$panel['post_ordering_by'].'" post__not_in="'.$heroPostID.'" scroll="false" transition="fade" transition_container="false" button_label="'.$buttonLabel.'"]';
				echo do_shortcode($ajm_shortcode); ?>
			</div>
		</div>
	<?php endif; ?>

	</div>

	<script>
		document.addEventListener( "DOMContentLoaded", function(){
			$('.filter-toggle').click(function() {
				$('.filter-toggle').removeClass('active');
				$(this).addClass('active');
				$('.posts-filter-wrapper').hide();
				$('.posts-all-wrapper').hide();
				var filter_type = $(this).data('filter');
				var is_article = filter_type == 'article';
				var article_type = is_article ? $(this).data('article-filter-type') : false;
				if (filter_type == 'all') {
					$('.posts-all-wrapper').show();
				} else if(is_article) {
					$('.posts-filter-wrapper[data-filter-type="article"][data-article-type="'+article_type+'"]').show();
				} else {
					$('.posts-filter-wrapper[data-filter-type="'+filter_type+'"]').show();
				}
			});

			$( ".posts-grid-select-filter" ).change(function() {
				$('.posts-filter-wrapper').hide();
				$('.posts-all-wrapper').hide();
				var filter_by = $(this).val();
				if (filter_by == 'none') {
					$('.posts-all-wrapper').show();
					return false;
				}
				$('.posts-filter-wrapper[data-term="'+filter_by+'"]').show();
				
			});

		});
	</script>

</section>

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter paulbitner

    (@paulbitner)

    Page Builder Panel: https://imgur.com/UPJtxkD

    Plugin Author Darren Cooney

    (@dcooney)

    @paulbitner
    Set pause_override="true" to enable scrolling to initiate posts loading when using pause.

    As far as your query. I’m not sure what the issue is but it appears you are not passing the post_type as it is empty in the rendered HTML.
    <ul aria-live="polite" aria-atomic="true" class="alm-listing alm-ajax posts posts-per-page--12 ajax-post-grid-panel__posts grid grid--justify-center" data-container-type="ul" data-theme-repeater="post.php" data-post-type="" data-taxonomy="category" data-taxonomy-relation="AND" data-order="" data-orderby="" data-offset="0" data-posts-per-page="12" data-scroll="false" data-pause="true" data-button-label="Load More" data-transition-container="false"></ul>

    You might be passing the post type incorrectly. It needs to be a comma separated list.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Please Help Me Troubleshoot’ is closed to new replies.