Laravel 5.1 - Nested Loop - Blade Templating

Question

I have this on View:

..
...
<div class="section group">
    @foreach ($product as $item)
    <div class="grid_1_of_4 images_1_of_4">
        <h4><a href="#">{!! $item->name !!}</a></h4>
        <div class="price-details">
            <div class="price-number">
                <p><span class="price">$ {!! $item->price !!} </span></p>
            </div>
            <div class="add-cart">                              
                <h4><a href="#">More Info</a></h4>
            </div>
            <div class="clear"></div>
        </div>                           
    </div>         
    @endforeach
</div>
...
..

And this on Controller:

..
...
public function index(){
    $product = product::paginate(8);
    return view('shop.index', compact('product'));
}
...
..

I want to show to the eight data I set the controller into two parts, so the output will be like this:

<div class="section group">
    <div class="grid_1_of_4 images_1_of_4">
        <h4><a href="#">item 01</a></h4>
        <div class="price-details">
            <div class="price-number">
                <p><span class="price">$ price 01 </span></p>
            </div>
            <div class="add-cart">                              
                <h4><a href="#">More Info</a></h4>
            </div>
            <div class="clear"></div>
        </div>                           
    </div>
    <div class="grid_1_of_4 images_1_of_4">
        <h4><a href="#">item 02</a></h4>
        <div class="price-details">
            <div class="price-number">
                <p><span class="price">$ price 02 </span></p>
            </div>
            <div class="add-cart">                              
                <h4><a href="#">More Info</a></h4>
            </div>
            <div class="clear"></div>
        </div>                           
    </div>
    <div class="grid_1_of_4 images_1_of_4">
        <h4><a href="#">item 03</a></h4>
        <div class="price-details">
            <div class="price-number">
                <p><span class="price">$ price 03 </span></p>
            </div>
            <div class="add-cart">                              
                <h4><a href="#">More Info</a></h4>
            </div>
            <div class="clear"></div>
        </div>                           
    </div>
    <div class="grid_1_of_4 images_1_of_4">
        <h4><a href="#">item 04</a></h4>
        <div class="price-details">
            <div class="price-number">
                <p><span class="price">$ price 04 </span></p>
            </div>
            <div class="add-cart">                              
                <h4><a href="#">More Info</a></h4>
            </div>
            <div class="clear"></div>
        </div>                           
    </div>
</div>

<div class="section group">
    <div class="grid_1_of_4 images_1_of_4">
        <h4><a href="#">item 05</a></h4>
        <div class="price-details">
            <div class="price-number">
                <p><span class="price">$ price 05 </span></p>
            </div>
            <div class="add-cart">                              
                <h4><a href="#">More Info</a></h4>
            </div>
            <div class="clear"></div>
        </div>                           
    </div>
    <div class="grid_1_of_4 images_1_of_4">
        <h4><a href="#">item 06</a></h4>
        <div class="price-details">
            <div class="price-number">
                <p><span class="price">$ price 06 </span></p>
            </div>
            <div class="add-cart">                              
                <h4><a href="#">More Info</a></h4>
            </div>
            <div class="clear"></div>
        </div>                           
    </div>
    <div class="grid_1_of_4 images_1_of_4">
        <h4><a href="#">item 07</a></h4>
        <div class="price-details">
            <div class="price-number">
                <p><span class="price">$ price 07 </span></p>
            </div>
            <div class="add-cart">                              
                <h4><a href="#">More Info</a></h4>
            </div>
            <div class="clear"></div>
        </div>                           
    </div>
    <div class="grid_1_of_4 images_1_of_4">
        <h4><a href="#">item 08</a></h4>
        <div class="price-details">
            <div class="price-number">
                <p><span class="price">$ price 08 </span></p>
            </div>
            <div class="add-cart">                              
                <h4><a href="#">More Info</a></h4>
            </div>
            <div class="clear"></div>
        </div>                           
    </div>
</div>

I think it should use nested loop, but i have no idea how to write it in laravel.

Anyone have any idea how it should be?

Answer 1

http://laravel.com/api/5.1/Illuminate/Database/Eloquent/Collection.html#method_chunk

I like chunk() function. More readable and reuseable than array_chunk

@foreach ($product->chunk(4) as $chunkedProducts)
<div class="section group">
@foreach ($chunkedProducts as $item)
<div class="grid_1_of_4 images_1_of_4">
    <h4><a href="#">{!! $item->name !!}</a></h4>
    <div class="price-details">
        <div class="price-number">
            <p><span class="price">$ {!! $item->price !!} </span></p>
        </div>
        <div class="add-cart">                              
            <h4><a href="#">More Info</a></h4>
        </div>
        <div class="clear"></div>
    </div>                           
</div>         
@endforeach
</div>
@endforeach

Answer 2

This question is solving a very similar problem, have a look.

Quote:

You could use array_chunk on $product->all() to split it in groups of 4, and make a nested @foreach.

In this case it might look like this (not tested!):

@foreach (array_chunk($product->all(), 4) as $productSection)
    <div class="section group">
        @foreach ($productSection as $item)
            <div class="grid_1_of_4 images_1_of_4">
                <h4><a href="#">{!! $item->name !!}</a></h4>
                <div class="price-details">
                    <div class="price-number">
                        <p><span class="price">$ {!! $item->price !!} </span></p>
                    </div>
                    <div class="add-cart">                              
                        <h4><a href="#">More Info</a></h4>
                    </div>
                    <div class="clear"></div>
                </div>                           
            </div>
        @endforeach
    </div>
@endforeach