I have an array with products as objects in it. Each object contains a key = category_title
I have a foreach loop that generates products in Bootstrap rows with configurable columns, in my case $col=3
.
What I need is to have a new row if a new category_title comes up.
I created an array to push all the category_titles
in it and create a variable if it is a new category. But now I am stuck.
The foreach looks like this:
<?php foreach($productspercat as $product): ?>
<!-- Make sure product is enabled and visible @front end -->
<?php // if($product->enabled && $product->visibility):?>
<?php
$catnew = false;
$categorytitle = $product->category_title;
if(!in_array($categorytitle, $totalcategories, true)):?>
<?php array_push($totalcategories,$categorytitle );
$catnew=true;
?>
<?php endif;?>
<div class="j2store-products-row <?php echo 'row-'.$row; ?> row">
<?php endif;?>
<div class="col-sm-<?php echo round((12 / $col));?>">
<h2><?php echo $categorytitle; ;
var_dump($catnew);
?></h2>
test
</div>
<?php $counter++;
$firstrun = true; ?>
<?php if (($rowcount == $col) or ($counter == $total)) : ?>
</div>
<?php endif; ?>
<?php // endif; ?>
<?php endforeach;?>
So basically if a new category comes up, it should close the row and start a fresh row with a new column count.
appreciate any help!
If you don't want to page refresh then you can do that by using jQuery or Angular JS. By jQuery you can add data by jquery prepend() function if you wanna add data in starting or append() function to add ending section.
<?php
// Arranged products by category title
$arrangedProducts = array()
foreach($productspercat as $product) {
if (!array_key_exists($product->category_title, $arrangedProducts)) {
$arrangedProducts[$product->category_title] = array();
}
$arrangedProducts[$product->category_title][] = $product;
}
// each category is a key and its value is an array with all its products
foreach ($arrangedProducts as $categoryTitle => $products) {
// you create a new row
// ....
foreach ($products as $product) {
// you display product information
}
// you end the row
}
?>