Tasks
Product Detail Page
Create a product detail page.
You'll learn how to create a product detail page, so that customers are able to view a single product before adding it to the cart.
We can achieve this by in a couple of handful steps:
- Define the route
- Create a controller
- Render a template
Defining the route
First up, we need to define under which URL we can view a product.
// routes/web.php
<?php
use App\Http\Controllers\ProductController;
use Larasell\Larasell\Routing\ProductDetailRoute;
ProductDetailRoute::get(ProductController::show, prefix: 'p')
It's required that you define a prefix for this route. In this case
if you have product Classic T-Shirt the route will be
/p/classic-t-shirt.
Creating a controller
Next up, we'll actually fetch the product.
// ProductController.php
<?php
namespace App\Http\Controllers;
use Inertia\Inertia;
use Inertia\Response;
use Larasell\Larasell\Http\Requests\ProductDetailRequest;
class ProductController
{
public function show(ProductDetailRequest $request): Response
{
$product = $request->product()->load('images');
return Inertia::render('Products/Show', [
'product' => [
'id' => $product->id,
'name' => $product->name,
'description' => $product->description,
'price' => $product->price,
'images' => $product->images->map(fn ($image) => [
'id' => $image->id,
'url' => $image->url(),
'alt' => $image->alt,
'position' => $image->pivot->position,
]),
],
]);
}
}
Creating a template
Finally, create an Inertia page that receives the product from the controller.
// resources/js/Pages/Products/Show.jsx
export default function Show({ product }) {
return (
<main>
<h1>{product.name}</h1>
<p>{product.price}</p>
<p>{product.description}</p>
{product.images.map((image) => (
<img
key={image.id}
src={image.url}
alt={image.alt ?? ''}
/>
))}
<form method="post" action="/cart">
<input type="hidden" name="product_id" value={product.id} />
<button type="submit">Add to cart</button>
</form>
</main>
);
}