Laravel 12 E-Commerce Project

Laravel 12 E-Commerce Project - Admin Edit Product


Laravel 12 E-Commerce: Implementing Admin Edit Product

Hi everyone, welcome back to the Laravel E-Commerce Project Tutorial. This video focuses on implementing the functionality to edit existing products in the admin panel.


1. Controller Function and Route Setup

Create Edit Function (`AdminController.php`)

Create a function to fetch the product by ID, along with all categories and brands needed to populate the form'sdropdowns, and pass them to the edit view:

public function edit_product($id)
    {
        $product = Product::find($id);
        $categories = Category::Select("id","name")->orderBy("name")->get();
        $brands = Brand::Select("id","name")->orderBy("name")->get();
        return view("admin.product-edit",compact("product","categories","brands"));
    }

Define Route for Edit View (`web.php`)

Create the GET route for accessing the product edit form:

Route::get("/admin/product/{id}/edit",[AdminController::class,"edit_product"])->name("admin.product.edit’);

Create Edit View (`product-edit.blade.php`)

Create the view file, copying all content from `product-add.blade.php`. This provides the base form structure for editing.


2. Populate Form with Existing Product Data

Modify `product-edit.blade.php` to display current product data, handle form action/method, and include the hidden ID field.

Form Action and Hidden ID

Update the form action to the new update route, use the `PUT` method, and include the product ID:

<form method="POST" enctype="multipart/form-data" action="{{route("admin.product.update")}}" data-parsley-validate>
    @csrf
    @method("PUT")
    <input type="hidden" name="id" value="{{$product->id}}"/>
    </form>

Populate Input Values

Set the `value` property for all input fields (Name, Slug, Prices, SKU, Quantity, etc.):

value="{{$product->name}}"
value="{{$product->slug}}"
value="{{$product->regular_price}}"
value="{{$product->SKU}}"

Dropdown Selection

Use conditional logic to ensure the current category and brand are selected in the dropdowns:

<!-- Category Dropdown -->
@foreach($categories as $category)
    <option value="{{$category->id}}" {{$product->category_id == $category->id ? "selected" : ""}}>{{$category->name}}</option>
@endforeach
<!-- Brand Dropdown -->
@foreach($brands as $brand)
    <option value="{{$brand->id}}" {{$product->brand_id == $brand->id ? "selected" : ""}}>{{$brand->name}}</option>
@endforeach

Image and Gallery Display

Display the current main image and gallery images with a link to delete them (using a separate delete function, if implemented later):

<!-- Main Image Preview (similar to Brand/Category edit) -->
<img id="image-preview" src="{{asset("uploads/products")}}/{{$product->image}}" alt="Image Preview" style="max-width: 120px; height: auto;">
<!-- Gallery Images Display -->
@php
    $images = explode(",", $product->images);
@endphp
@if(count($images) > 0)
    @foreach ($images as $img)
        <div class="gallery-image-wrapper">
            <img class="img-fluid" src="{{asset("uploads/products")}}/{{$img}}" style="max-width: 80px;">
            <a href="#" data-image-name="{{$img}}">Delete</a>
        </div>
    @endforeach
@endif

3. Implement Update Logic and Route

Update Function (`AdminController.php - update_product`)

Create the `update_product` function. It validates the data (excluding the current product'sslug/SKU from uniqueness checks), handles image replacement/deletion, and appends new gallery images to the existing list.

public function update_product(Request $request)
{
    // 1. Validation (Slug and SKU check excludes the current product'sID)
    $request->validate([
        "id" => "required",
        "name" => "required",
        "slug" => "required|unique:products,slug," . $request->id,
        "sKU" => "required|unique:products,SKU," . $request->id,
        // ... other validation rules ...
    ]);
    // 2. Find Product and Update Attributes
    $product = Product::find($request->id);
    $product->name = $request->name;
    $product->slug = Str::slug($request->name);
    // ... [Assign remaining fields] ...
    // 3. Handle Main Image Update (Delete old if new is uploaded)
    if($request->hasFile("image")) {
        // ... Delete old image ...
        // ... Upload new image and save $product->image = $file_name; ...
    }
    // 4. Handle Gallery Images Update (Append new images)
    $gallery_arr = [];
    if ($product->images) {
        $gallery_arr = explode(",", $product->images);
    }
    if ($request->hasFile("images")) {
        // ... Loop through new images, generate names, upload, and array_push($gallery_arr, $new_filename); ...
    }
    
    $product->images = implode(",", $gallery_arr);
    // 5. Save Changes and Redirect
    $product->save();
    return redirect()->route("admin.products")->with("status","Record has been updated successfully !");
}

Define Route for Update (`web.php`)

Create the PUT route for the update logic:

Route::put("/admin/product/update",[AdminController::class,"update_product"])->name("admin.product.update’);

This concludes the implementation of the Admin Edit Product functionality. Thanks for watching this video.

Written by Surfside Media

Senior Full Stack Developer specializing in Web Technologies.