Shopping Cart Product Quick Look like Amazon

by Vincy. Last modified on September 27th, 2022.

In the Amazon-like online store, the product gallery shows the product images with limited details as price or any. If we want to see a quick look for more detail about the product then it will be displayed with a modal window without page redirect.

Let us see how to show product modal window on clicking the Quick Look button in the PHP shopping cart product gallery.

I have created shown a responsive product gallery for a shopping cart application. The gallery shows the product images in a card view. While hovering the card element I have shown the Quick Look ghost button on top of the product image.

On clicking this button, I have called jQuery AJAX function to get the product information and show with a modal window. The modal window will contain the Product name, enlarged preview image, price and more details.

shopping-cart-quick-look-product-modal-output

HTML Code to Show Product Gallery with Quick Look Control

I have created this product gallery HTML by fetching the product result from the database. The database result is iterated to display the product gallery images with the Quick Look button control. This control is added with the jQuery show hide effect on hover the gallery card element. This buttons click event is mapped with a jQuery function to show Product modal window with more detail.

<?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">

<link rel="stylesheet"
    href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>

<body>

    <div id="gridview">
        <div class="heading">Product Gallery for Shopping Cart</div>
<?php
$query = $db_handle->runQuery("SELECT * FROM tbl_products ORDER BY id ASC");
if (! empty($query)) {
    foreach ($query as $key => $value) {
        ?>  
            <div class="image">
            <img src="<?php echo $query[$key]["product_image"] ; ?>" />
            <button class="quick_look"
                data-id="<?php echo $query[$key]["id"] ; ?>">Quick Look</button>
        </div>
<?php
    }
}
?>
    </div>
    <div id="demo-modal"></div>
</body>
</html>

jQuery AJAX function to Display Product Modal

This jQuery code shows the AJAX function requesting PHP page to get the product details. It passes the product id as the parameter with the AJAX call by specifying the request method.

This parameter is received in PHP and used in the MySQL query statement to fetch the product information. In PHP page, the resultant product information is used to form the HTML to display the modal window.

This HTML will be sent as the response to the AJAX call which will trigger jQuery modal on the success callback.

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script>
    $(".quick_look").on("click", function() {
        var product_id = $(this).data("id");
        	var options = {
        			modal: true,
        			height: 'auto',
        			width:'70%'
        		};
        	$('#demo-modal').load('get-product-info.php?id='+product_id).dialog(options).dialog('open');
    });

    $(document).ready(function() {
        	$(".image").hover(function() {
                $(this).children(".quick_look").show();
            },function() {
            	   $(this).children(".quick_look").hide();
            });
    });
    </script>

get-product-info.php

<?php
include 'DBController.php';
$db_handle = new DBController();

$query = $db_handle->runQuery("SELECT * FROM tbl_products WHERE id = " . $_GET["id"]);
if (! empty($query)) {
        ?>  
            <div class="preview-image">
            <img src="<?php echo $query[0]["product_image"] ; ?>" />
        </div>
<div class="product-info">
                <div class="product-title"><?php echo $query[0]["name"] ; ?></div>
                <ul>
  <?php
  for($i=1;$i<=5;$i++) {
  $selected = "";
  if(!empty($query[0]["average_rating"]) && $i<=$query[0]["average_rating"]) {
    $selected = "selected";
  }
  ?>
  <li class='<?php echo $selected; ?>'>&#9733;</li>  
  <?php }  ?>
</ul>
                <div class="product-category"><?php echo $query[0]["category"] ; ?>
                
                </div>
                <div><?php echo $query[0]["price"] ; ?> USD</div>
                <div><button class="btn-info">View More</button><button class="btn-info">Add to Cart</button></div>
            </div>      
<?php
}
?>

Shopping Cart Product Quick Look – Output

Below screenshot shows the output of the product view modal by handling the quick look request. The figure shows that the modal disables the background screen by popping the modal window onto the top.

Download

Vincy
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.

Comments to “Shopping Cart Product Quick Look like Amazon”

Leave a Reply

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

↑ Back to Top

Share this page