Bootstrap eCommerce Recently Viewed Products List Carousel
by Vincy. Last modified on September 27th, 2022.
In an eCommerce website, showcasing the products is an integral part of positioning the shop to the customers.
Carousel is a revolving UI component that helps to showcase a varying number of items. If used in the right way, it is one of the best aspects that will improve the UI/UX.
The Bootstrap is an incomparable front-end component to design an application UI. There are many Bootstrap libraries providing eCommerce UI templates and UI building blocks. It will help you to build and launch your eCommerce website quickly.
The recently-viewed products section is also one of the eCommerce building blocks. This article describes how to create a Bootstrap eCommerce template for showing recently viewed products in an online shop.
What is inside?
- Bootstrap libraries to create eCommerce product carousel
- About this example
- File structure
- Create UI to display eCommerce product carousel
- Retrieve recently viewed products using PHP MySQL
- Database script
- Output – eCommerce product carousel in Bootstrap
Bootstrap libraries to create eCommerce product carousel
There are popular Boostrap libraries available to create an eCommerce product carousel.
For Example, OwlCarousel library to build a multi-item carousel.
I used this library to create the eCommerce recently viewed product carousel using Bootstrap.
About this example
Carousel is an amazing UI component that may elevate your application look and feel. It comes with the core of many front-end frameworks like Bootstrap.
This example has the code to create a recently viewed product section in an eCommerce software application.
The recently viewed items are dynamic and are from the database. The database has the mapping table that maps the recently viewed product id with the members.
I used MySQLi with prepared statements to perform the database operations.
A landing page shows the product carousel with previous-next navigation icons.
It uses a jQuery-based Bootstrap library to display the product carousel in the UI. It helps to move back and forth and loop through the product data.
In a previous tutorial, we have seen how to create a Bootstrap eCommerce category- subcategory template.
File structure
The below image shows the hierarchical structure of the files created for this example.
It displays the node_modules that have the dependencies of this example code.
The data folder has the sample product images used to display in the product tiles. This image path is added to the product rows in the database.
The database.sql file has the database script to create the product and the mapping tables.
Create UI to display eCommerce product carousel
This section displays the HTML portion of the landing file index.php.
This HTML has the eCommerce application UI component to display the product tiles in a carousel view.
It loads the dynamic product results into this HTML template. These results are from the database.
The landing page invokes the application model class to fetch the results before loading this template.
This code imports the dependent library assets from the node_modules. It helps to initiate the Bootstrap library handler to render the product carousel.
index.php(HTML template)
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="node_modules/owl.carousel/dist/assets/owl.carousel.min.css" />
<link rel="stylesheet"
href="node_modules/owl.carousel/docs/assets/css/docs.theme.min.css" />
<link rel="stylesheet" href="assets/css/style.css" />
<title>eCommerce Product Carousel</title>
</head>
<body>
<div class="container">
<h3 class="viewed_title">Recently Viewed Products</h3>
<div class="owl-carousel owl-theme">
<?php
if (! empty($result)) {
foreach ($result as $k => $v) {
?>
<div>
<div class="text-center">
<img class="cart-image"
src="<?php echo $result[$k]["image_path"];?>">
</div>
<div class="text-center price-text">
<strong><?php echo $result[$k]["product_price"];?></strong>
</div>
<div class="text-center"><?php echo $result[$k]["product_name"];?></div>
</div>
<?php
}
}
?>
Initiate Bootstrap library to display carousel
The recently viewed product carousel is a container that is identified with a class attribute. With the class name reference, the below script initiates the carousel library.
It sets the properties during the initiation to define the behavior of the product carousel animation.
Based on the definition, the carousel items are loop through the dynamic results. It enables the previous, next navigation.
Also, the recently-viewed product carousel is responsive for various window sizes.
index.php (PHP code to fetch database results)
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/owl.carousel/dist/owl.carousel.min.js"></script>
<script>
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
nav:true,
dots:false,
responsive:
{
0:{items:1},
575:{items:2},
768:{items:3}
}
});
$(".owl-prev").attr("title","Previous");
$(".owl-next").attr("title","Next");
});
</script>
Retrieve recently viewed products using PHP MySQL
This is part of the landing page code which retrieves data from the database.
It instantiates the product model and invokes the getMostViewedProduct() function. This function returns the recently viewed products with respect to a corresponding member id.
The member id is hardcoded in this PHP code as below. This is the place to plugin the application authentication module to get the logged-in member id. If you want a code for a login script with PHP session, the linked article has one.
index.php (PHP code to fetch database results)
<?php
use Phppot\Product;
$memberId = "1"; // MemberId hardcoded
require_once __DIR__ . "/Model/Product.php";
$productModel = new Product();
$result = $productModel->getMostViewedProduct($memberId);
?>
This PHP model class is created for preparing queries to fetch the recently viewed eCommerce products from the database.
It uses the member id and based on it this class handler retrieves the recent items.
Model/Product.php
<?php
namespace Phppot;
class Product
{
private $ds;
function __construct()
{
require_once __DIR__ . './../lib/DataSource.php';
$this->ds = new DataSource();
}
function getMostViewedProduct($memberId)
{
$query = "SELECT * FROM tbl_most_viewed_product JOIN tbl_product ON tbl_most_viewed_product.product_id = tbl_product.id WHERE tbl_most_viewed_product.member_id=?";
$paramType = 'i';
$paramArray = array(
$memberId
);
$result = $this->ds->select($query, $paramType, $paramArray);
return $result;
}
}
Database script
This script is to set up the database environment before running this example.
It has the CREATE statement for the tbl_product and the tbl_most_viewed_product tables. Also, it includes the sample products and recently viewed item mapping with respect to the member id.
sql/database.sql
-- phpMyAdmin SQL Dump
-- version 5.0.3
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Mar 10, 2021 at 11:50 AM
-- Server version: 10.4.14-MariaDB
-- PHP Version: 7.2.34
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
--
-- Database: `carousel-example`
--
-- --------------------------------------------------------
--
-- Table structure for table `tbl_most_viewed_product`
--
CREATE TABLE `tbl_most_viewed_product` (
`id` int(11) NOT NULL,
`member_id` int(11) NOT NULL,
`product_id` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
--
-- Dumping data for table `tbl_most_viewed_product`
--
INSERT INTO `tbl_most_viewed_product` (`id`, `member_id`, `product_id`) VALUES
(1, 1, 1),
(2, 1, 2),
(3, 1, 3),
(4, 1, 5),
(5, 1, 7),
(6, 2, 9),
(7, 2, 11);
-- --------------------------------------------------------
--
-- Table structure for table `tbl_product`
--
CREATE TABLE `tbl_product` (
`id` int(11) NOT NULL,
`product_name` varchar(255) NOT NULL,
`product_price` decimal(10,2) NOT NULL,
`image_path` varchar(255) NOT NULL,
`create_at` datetime NOT NULL DEFAULT current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
--
-- Dumping data for table `tbl_product`
--
INSERT INTO `tbl_product` (`id`, `product_name`, `product_price`, `image_path`, `create_at`) VALUES
(1, 'Digital Camera', '55.99', 'data/camera.jpg', '2021-03-10 09:24:51'),
(2, 'Sony Mobile', '33.99', 'data/sony.jpg', '2021-03-10 09:27:10'),
(3, 'Wireless Mouse', '29.99', 'data/mouse.jpg', '2021-03-10 09:27:10'),
(4, 'Wireless Headphones', '25.99', 'data/headphone.jpg', '2021-03-10 09:32:32'),
(5, 'Samsung mobile', '19.99', 'data/samsung.jpg', '2021-03-10 09:32:32'),
(6, 'Hp Laptop', '100.99', 'data/laptop.jpg', '2021-03-10 09:32:32'),
(7, 'Dell Desktop', '65.99', 'data/desktop.jpg', '2021-03-10 09:32:32'),
(8, 'Titan Watch', '15.99', 'data/watch.jpg', '2021-03-10 09:32:32'),
(9, 'Vivo Mobile', '35.99', 'data/vivo.jpg', '2021-03-10 09:32:32'),
(10, 'Power Bank', '35.99', 'data/power-bank.jpg', '2021-03-10 09:32:32'),
(11, 'Oppo Mobile', '23.99', 'data/oppo.jpg', '2021-03-10 09:32:32');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `tbl_most_viewed_product`
--
ALTER TABLE `tbl_most_viewed_product`
ADD PRIMARY KEY (`id`);
--
-- Indexes for table `tbl_product`
--
ALTER TABLE `tbl_product`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `tbl_most_viewed_product`
--
ALTER TABLE `tbl_most_viewed_product`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=8;
--
-- AUTO_INCREMENT for table `tbl_product`
--
ALTER TABLE `tbl_product`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=12;
COMMIT;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
Output – eCommerce product carousel in Bootstrap
The below output screenshot shows the Bootstrap eCommerce product carousel. It shows the previous-next navigation controls at the top right corner of the carousel view.
This eCommerce UI block is responsive based on the viewport size. It is limiting the number of items that can be viewed at a time for the narrow viewports.
Conclusion
Thus, we have created a responsive Bootstrap eCommerce carousel with recently viewed products. I hope it gives a minimal dependable output at least to get started.
We have seen how to load dynamic content into the carousel UI block.
This example had provided a simple and clean code to cover the backend logic to read the recently viewed products and more.
You may also replicate this carousel view for various purposes like displaying available categories, best sellers and more.
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.