Site icon WDB24

PHP Shopping Cart – Create Single Product Page

Ahsan Zameer
PHP

This is fourth tutorial in PHP Shopping cart series and today I will create single product page. I will display single product data with one image.

First I will create a single-product.php page in folder root.

Single Product Page:

Now open single-product.php file and paste below code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<?php
    session_start();
    require_once('./inc/config.php');    
    require_once('./inc/helpers.php');  
if(isset($_GET['product']) && !empty($_GET['product']) && is_numeric($_GET['product']))
    {
        $sql = "SELECT p.*,pdi.img from products p
            INNER JOIN product_images pdi ON pdi.product_id = p.id WHERE pdi.is_featured =:featured AND p.id =:productID";
        $handle = $db->prepare($sql);
        $params = [
                ':featured'=>1,
                ':productID' =>$_GET['product'],
            ];
        $handle->execute($params);
        if($handle->rowCount() == 1 )
        {
            $getProductData = $handle->fetch(PDO::FETCH_ASSOC);
            $imgUrl = PRODUCT_IMG_URL.str_replace(' ','-',strtolower($getProductData ['product_name']))."/".$getProductData ['img'];
        }
        else
        {
            $error = '404! No record found';
        }
 
    }
include('layouts/header.php');
 
?>
 

In the above code first of all I have added session_start() function which will use in add to cart functionality. After that I included 2 php files and then I check the condition of getting product id or not. Next I wrote sql query to get product with image. If I get the product I store that product array in $getProductData or otherwise I will create a $error variable to print ‘404 not found error’.

Now lets move to HTML part of the single product page.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<?php if(isset($getProductData) && is_array($getProductData)){?>
<div class="row mt-3">
<div class="col-md-5">
<img src="<?php echo $imgUrl;?>">
</div>
<div class="col-md-7">
<h1><?php echo $getProductData['product_name']?></h1>
<p><?php echo $getProductData['short_description']?></p>
<h4>$<?php echo $getProductData['price']?></h4>
<form class="form-inline" method="POST">
<div class="form-group mb-2">
<input type="number" name="product_qty" id="productQty" class="form-control" placeholder="Quantity" min="1" max="1000" value="1">
<input type="hidden" name="product_id" value="<?php echo $getProductData['id']?>">
</div>
<div class="form-group mb-2 ml-2">
<button type="submit" class="btn btn-primary" name="add_to_cart" value="add to cart">Add to Cart</button>
</div>
</form>
</div>
</div>
<div class="row mt-3">
<div class="col-md-12">
<?php echo $getProductData['full_description']?>
</div>
</div>
 
<?php
}
?>
 
<?php include('layouts/footer.php');?>
 

As you can see in above code that at start I just add condition of isset and is_array just to avoid notice and warning. And then I put image on left. Heading, short description and price on right side and long description in the end. I also created a form for add to cart functionality which I will discuss in my next tutorial.

Also read:

Exit mobile version