Creating a for loop for showing dynamic data - php

Question

I'm currently developing a custom WordPress template. Within this template I'm trying to show all post from specific categories, see it as a sort of products segment (no selling or anything). So what I've got now is showing all posts image and title dynamically with all the styling and filtering through settings of ACF.
What I would like to achieve is the following result: (using bootstrap).
4 columns on each row, but when there are more than 4 posts. (so when there needs to be a second or third row of a specific category), Create a collapse functionality for showing posts 5 >.
So after some trying, I've come to the conclusion that the best way would be to create a for loop, in combination with filtering this would create the view I'm trying to create. Sadly after trying some different methods, I've got a bit stuck. The code is shown below:
<div id="items">
<?php
if (have_rows('products_category')) {
while (have_rows('products_category')) : the_row();
// Your loop code
$title = get_sub_field('product_category_name');
$slug = get_sub_field('product_category_slug');
/* Start the filter categpries segment */
$category = get_category_by_slug($slug);
$filter_id = $category->term_id;
$filters = array();
var_dump($filters);
array_push($filters, $filter_id);
var_dump($filters);
array_push($filters, 7);
var_dump($filters);
?>
<div id="items" class="row products margin-0 justify-content-between">
<div class=" <?php echo $filter_id ?> ">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 padding-0 padding-b-10">
<h2><?php echo $title ?></h2>
</div>
<div class="col-lg-12 padding-0">
<div id="products" class="row products margin-0 justify-content-between">
<?php $argsNew = array(
'offset' => 0,
'category' => $filters,
'orderby' => 'date',
'order' => 'DESC',
'include' => '',
'exclude' => '',
'meta_key' => '',
'meta_value' => '',
'post_type' => 'post',
'post_mime_type' => '',
'post_parent' => '',
'author' => '',
'author_name' => '',
'post_status' => 'publish',
'posts_per_page' => -1,
'suppress_filters' => false,
'connected_items' => get_queried_object(),
);
$posts_array = get_posts($argsNew);
$number_posts = count($posts_array);
echo $number_posts;
$i = 0;
foreach ($posts_array as $post) : setup_postdata($post);
$i++;
if($i <= 4) {
?>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 margin-fix padding-s-15 padding-b-30 image_filter">
<?php echo get_the_post_thumbnail($post->ID, '', array('class' => 'img-responsive big_image products_image img_small')); ?>
<?php the_title(sprintf('<h2 class="text-center big_image_product_text products_text"><a href="%s" rel="bookmark">', esc_url(get_permalink())),
'</a></h2>'); ?>
<?php
?>
</div>
<?php
}
else if($i > 4) {
?>
</div>
<div class="row">
<button data-toggle="collapse" class="btn-collapse" data-target="#products_collapse_<?php echo $filter_id ?>">Show more</button>
</div>
<div id="products_collapse_<?php echo $filter_id ?>" class="row products collapse margin-0 justify-content-between">
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 margin-fix padding-s-15 padding-b-30 image_filter">
<?php echo get_the_post_thumbnail($post->ID, '', array('class' => 'img-responsive big_image products_image img_small')); ?>
<?php the_title(sprintf('<h2 class="text-center big_image_product_text products_text"><a href="%s" rel="bookmark">', esc_url(get_permalink())),
'</a></h2>'); ?>
</div>
</div>
<?php
}
endforeach;
wp_reset_postdata(); ?>
</div>
</div>
</div>
<?php
endwhile;
}
else {
// no rows found
echo "nothing found!";
}
?>
</div>
UPDATE
I've tried creating the for loop with the $number_posts and a count method but sadly then the view is badly corrupted. So my question is:
Create a for loop / counter to count the number of posts foreach category shown.
Specify the view on those results:
for -> items 1,2,3,4. Place them in a row. (1 1 1 1).
if(more than 4 items). Place items > 5 (and so on). Under a collapse block.
e.g.
3 items:
Normal view:
1 1 1.
7 items:
view + collapse (
1 1 1 1
-collapse button-
1 1 1
(more items)
)
Could anyone show me in the right direction and or help me with this one?
Thanks in advance!
PS: If you have any questions please ask them in the comments below

Answer 1

Assuming the field products_category returns an array of chosen category IDs:
This will work:
<div id="items">
<?php
// Retrieve all product categories
$terms = get_terms( 'product_cat' );
// Retrieve chosen categories to display
$specified_cats = get_field( "products_category" );
// Loop though product cats
foreach ( $terms as $term ) {
$filter_id = $term->term_id;
// If the current product category id is not in the array 'specified_cats' just to the next iteration
if(!in_array($filter_id, $specified_cats)){
continue;
}
$title = $term->name;
$slug = $term->slug;
?>
<div id="items" class="row products margin-0 justify-content-between">
<div class=" <?php echo $filter_id ?> ">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 padding-0 padding-b-10">
<h2><?php echo $title ?></h2>
</div>
<div class="col-lg-12 padding-0">
<div id="products" class="row products margin-0 justify-content-between">
<?php
$argsNew = array (
'offset' => 0,
'orderby' => 'date',
'order' => 'DESC',
'post_type' => 'product',
'post_status' => 'publish',
'posts_per_page' => -1,
'product_cat'=> $term->name
);
$posts_array = get_posts($argsNew);
$number_posts = count($posts_array);
$i = 0;
foreach ($posts_array as $post) : setup_postdata($post);
$i++;
if($i <= 4) {
?>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 margin-fix padding-s-15 padding-b-30 image_filter">
<?php echo get_the_post_thumbnail($post->ID, '', array('class' => 'img-responsive big_image products_image img_small')); ?>
<?php the_title(sprintf('<h2 class="text-center big_image_product_text products_text"><a href="%s" rel="bookmark">', esc_url(get_permalink())),
'</a></h2>'); ?>
<?php
?>
</div>
<?php
}else if($i > 4) {
?>
<div class="row">
<button data-toggle="collapse" class="btn-collapse" data-target="#products_collapse_<?php echo $filter_id ?>">Show more</button>
</div>
<div id="products_collapse_<?php echo $filter_id ?>" class="row products collapse margin-0 justify-content-between">
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 margin-fix padding-s-15 padding-b-30 image_filter">
<?php echo get_the_post_thumbnail($post->ID, '', array('class' => 'img-responsive big_image products_image img_small')); ?>
<?php the_title(sprintf('<h2 class="text-center big_image_product_text products_text"><a href="%s" rel="bookmark">', esc_url(get_permalink())),
'</a></h2>'); ?>
</div>
</div>
<?php
}
endforeach;
wp_reset_postdata(); ?>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<?php
}
?>
</div>
The code is tested and working. I even included Bootstrap to make sure everything functioning correctly:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>