Bootstrap eCommerce Recently Viewed Products List Carousel

by Vincy. Last modified on March 21st, 2021.

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 varying number of items. If used in a right way, it is one of the best aspect that will improve the UI/UX.

eCommerce Product Carousel

View Demo

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?

  1. Bootstrap libraries to create eCommerce product carousel
  2. About this example
  3. File structure
  4. Create UI to display eCommerce product carousel
  5. Retrieve recently viewed products using PHP MySQL
  6. Database script
  7. Output – eCommerce product carousel in Bootstrap

There are popular Boostrap libraries available to create an eCommerce product carousel.

For Example, OwlCarousel library to build a multi-item carousel. And, one more alternate choice is the eCommerce carousel using Bootstrap and Material Design 2.0.

I used OwlCarousel library to create the eCommerce recently viewed product carousel using Bootstrap.

About this example

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.

eCommerce Product Carousel Files

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 */;

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.

Bootstrap eCommerce Recently Viewed Product Carousel

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.

View Demo Download

Leave a Reply

Your email address will not be published. Required fields are marked *

↑ Back to Top