Laravel 8 E-Commerce - Problem of Product Gallery and Their Solution

In this tutorial, we will explore the problem of product galleries and provide a solution.

First, let's identify the problem, and then we will discuss how to solve it.

On this product details page, you can see the product image and the product gallery images.

Initially, everything appears to be working correctly.

However, when we increase the product quantity, the product image gallery does not display properly.

So, how can we resolve this issue?

Fortunately, there is a simple solution to avoid this problem.

Go to the details component view file and locate the gallery code.

You can see the product gallery code here.

To fix the issue, add the following code inside the div:


<div class="detail-media">
	<div class="product-gallery" wire:ignore>
		<ul class="slides">
			<li data-thumb="{{ asset('assets/images/products' ) }}/{{$product->image}}">
				<img src="{{ asset('assets/images/products') }}/{{$product->image}}" alt="{{$product->name}}" />
			</li> 
			@php 
				$images = explode(",",$product->images);
			@endphp     
			@foreach($images as $image)
				@if($image)
					<li data-thumb="{{ asset('assets/images/products' ) }}/{{$image}}">
						<img src="{{ asset('assets/images/products') }}/{{$image}}" alt="{{$product->name}}" />
					</li> 
				@endif
			@endforeach                          
		</ul>
	</div>
</div>