Amazon like Product Images Showcase for Shopping Cart
by Vincy. Last modified on September 27th, 2022.
In general, the shopping cart software product view page will show the preview image with slideshow. The product slideshow is used to preview the product’s images.
In earlier tutorials, we have seen PHP shopping cart examples with a single image per product. If a product has multiple preview images, then the online shopping applications provide options to the user to preview images with a slideshow.
In this example, we will see how to showcase product images with a slideshow.
We saw PHP shopping cart examples with Product image zooming and product quick look, the view page template had a single product image. I have used the same template to integrate the product images slideshow.
In this template, the product’s first image will be an enlarged view and the rest of the images are shown as small thumbnails.
On clicking the small thumbnail image the enlarged view of that image will be shown. The image slideshow effect on the product view is done by using jQuery. The product view and the slideshow will be responsive to fit into various viewport size.
Shopping Cart Product View HTML with Image Slideshow
This code is to create a responsive shopping cart product view page by showcasing multiple images of a product. Initially, the first image will be focused and its enlarged view is shown in the product preview section.
The rest of the image previews are shown as thumbnail images below the enlarged image. On clicking the thumbnail image element, the jQuery script is called to display the enlarged preview of the selected image.
The currently previewed image will be highlighted among the thumbnails.
<?php
include 'DBController.php';
$db_handle = new DBController();
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<?php
$productResult = $db_handle->runQuery("SELECT * FROM tbl_products WHERE id = 2");
if (! empty($productResult)) {
?>
<div id="product-view">
<?php
$productImageResult = $db_handle->runQuery("SELECT * FROM tbl_product_image WHERE product_id = 2");
if (! empty($productImageResult)) {
?>
<div class="preview-image">
<div id="preview-enlarged">
<img
src="<?php echo $productImageResult[0]["preview_source"] ; ?>" />
</div>
<div id="thumbnail-container">
<?php
foreach ($productImageResult as $key => $value) {
$focused = "";
if ($key == 0) {
$focused = "focused";
}
?>
<img class="thumbnail <?php echo $focused; ?>"
src="<?php echo $productImageResult[$key]["preview_source"] ; ?>" />
<?php } ?>
</div>
</div>
<?php } ?>
<div class="product-info">
<div class="product-title"><?php echo $productResult[0]["name"] ; ?></div>
<ul>
<?php
for ($i = 1; $i <= 5; $i ++) {
$selected = "";
if (! empty($productResult[0]["average_rating"]) && $i <= $productResult[0]["average_rating"]) {
$selected = "selected";
}
?>
<li class='<?php echo $selected; ?>'>★</li>
<?php } ?>
</ul>
<div class="product-category"><?php echo $productResult[0]["category"] ; ?>
</div>
<div><?php echo $productResult[0]["price"] ; ?> USD</div>
<div>
<a href="index.php"><button class="btn-info">View
Gallery</button></a>
<button class="btn-info">Add to Cart</button>
</div>
</div>
<?php
}
?>
</div>
jQuery Slideshow to Showcase Product Images
The thumbnail image element’s click event is handled with a jQuery function by passing the element object reference. With this reference, the image source and the enlarged image source is derived.
After forming the source of the product image, it will be applied to create and update the shopping cart product preview section markup. It will show the preview of the selected image and also highlight the one among the thumbnails.
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
$("#thumbnail-container img").click(function() {
$("#thumbnail-container img").css("border", "1px solid #ccc");
var src = $(this).attr("src");
$("#preview-enlarged img").attr("src", src);
$(this).css("border", "#fbb20f 2px solid");
});
</script>
Database Script
This section shows the database script with the create statements and the data that are required for this example.
--
-- Database: `db_product_preview`
--
--
-- Table structure for table `tbl_products`
--
CREATE TABLE `tbl_products` (
`id` int(8) NOT NULL,
`name` varchar(255) NOT NULL,
`price` double(10,2) NOT NULL,
`category` varchar(255) NOT NULL,
`average_rating` float(3,1) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `tbl_products`
--
INSERT INTO `tbl_products` (`id`, `name`, `price`, `category`, `average_rating`) VALUES
(1, 'Tiny Handbags', 100.00, 'Fashion', 5.0),
(2, 'Locket watch', 300.00, 'Generic', 4.0),
(3, 'Trendy Watch', 550.00, 'Generic', 4.0),
(4, 'Travel Bag', 820.00, 'Travel', 5.0),
(5, 'Plastic Ducklings', 200.00, 'Toys', 4.0),
(6, 'Wooden Dolls', 290.00, 'Toys', 5.0),
(7, 'Advanced Camera', 600.00, 'Gadget', 4.0),
(8, 'Jewel Box', 180.00, 'Fashion', 5.0),
(9, 'Perl Jewellery', 940.00, 'Fashion', 5.0);
--
-- Table structure for table `tbl_product_image`
--
CREATE TABLE `tbl_product_image` (
`id` int(11) NOT NULL,
`product_id` int(11) NOT NULL,
`preview_source` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `tbl_product_image`
--
INSERT INTO `tbl_product_image` (`id`, `product_id`, `preview_source`) VALUES
(1, 2, 'gallery/preview1.jpeg'),
(2, 2, 'gallery/preview2.jpeg'),
(3, 2, 'gallery/preview3.jpeg');
--
-- Indexes for table `tbl_products`
--
ALTER TABLE `tbl_products`
ADD PRIMARY KEY (`id`);
--
-- Indexes for table `tbl_product_image`
--
ALTER TABLE `tbl_product_image`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `tbl_products`
--
ALTER TABLE `tbl_products`
MODIFY `id` int(8) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=10;
--
-- AUTO_INCREMENT for table `tbl_product_image`
--
ALTER TABLE `tbl_product_image`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;
COMMIT;
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.
Hi, I'm Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I'm currently available for freelance work.