Laravel 8 E-Commerce - Admin Edit Product Gallery

In this video, we will learn how to edit the product gallery.

Let's explore how to achieve this.

To start, open the AdminEditProductComponent class file.

Create two new properties:

public $images;
public $newimages;

Next, inside the mount method, add the following code:

$this->images = explode(",",$product->images);

Now, navigate to the AdminEditProductComponent view file and add the following code:

<div class="form-group">
	<label class="col-md-4 control-label">Product Gallery</label>
	<div class="col-md-4">
		<input type="file" class="input-file" wire:model="newimages" multiple />
		@if($newimages)
			@foreach($newimages as $newimage)
				@if($newimage)
					<img src="{{$newimage->temporaryUrl()}}" width="120" />
				@endif
			@endforeach
		@else
			@foreach($images as $image)
				@if($image)
					<img src="{{asset('assets/images/products')}}/{{$image}}" width="120" />
				@endif
			@endforeach
		@endif                                    
	</div>
</div> 

Return to the class file and inside the updateProduct method, add the following code:

if($this->newimages)
{
	if($product->images)
	{
		$images = explode(",",$product->images);
		foreach($images as $image)
		{
			if($image)
			{
				unlink('assets/images/products'.'/'.$image); 
			}
		}
	}

	$imagesname ='';
	foreach($this->newimages as $key=>$image)
	{
		$imgName = Carbon::now()->timestamp . $key . '.' . $image->extension();
		$image->storeAs('products',$imgName);
		$imagesname = $imagesname . ',' . $imgName;
	}
	$product->images =  $imagesname;
}

That's it! Let's check the result.

Switch to your browser and refresh the page.

Edit any product and add an image gallery.

You should see the image gallery added.

Let's verify this by going to the shop page and finding the product.

You should see the image gallery.

Now, let's change the image gallery.

Go to the product page, edit the product, and change the image.

Click on update.

The product gallery images should now be updated.

Go to the product details page to verify the changes.

You should see the updated product gallery images.

In this way, you can edit the product gallery.

That's all about editing the product gallery.