نمایش سریع محصولات همانند آمازون با php و ajax

در فروشگاه های آنلاینی مانند آمازون و یا ژاکت , معمولا در صفحات اصلی محصولات را با اطلاعات محدودی مثل قیمت و عنوان و .. نشان می دهند. اگر قصد دارید که یک نمایش سریع برای اطلاعات بیشتر در مورد محصولات را ببینیم, پس در یک پنجره مودال (modal) بدون ریدایرکت صفحه نشان می دهیم.

در این آموزش PHP قصد داریم به شما نحوه نمایش سریع محصولات همانند آمازون را در پنجره مودال با کلیک روی دکمه “نمایش سریع” “Quick Look” را در سبد خرید PHP را نمایش بدیم.

یک اپلیکیشن تحت وب برای نمایش ریسپانسیو گالری محصولات سبد خرید را ساختیم . این گالری تصاویر را در حالت نمایشی کارت مانند نشان میدهد. هنگامی که روی المان کارت ماوس را نگه می داریم (رویداد hover) , دکمه “Quick look” را با حالت روح در بالای تصویر محصول نمایش می دهیم.

با کلیک روی این دکمه, تابع AJAX جی کوئری برای دریافت اطلاعات محصول فراخوانی و در یک پنجره مودال نمایش می دهد. این مودال شامل نام محصول, تصویر پیشنمایش بزرگ شده , قیمت و اطلاعات دیگر خواهد بود.

کد HTML برای نمایش گالری محصول با کنترل نمایش سریع

ما گالری تصویر را با استفاده از اطلاعات کش رفته از نتایج دیتابیس ایجاد کردیم. نتیجه دیتابیس با تکرار در حلقه, تصاویر گالری محصول را با دکمه کنترل Quick Look نمایش می دهد. این دکمه با افکت نمایش/مخفی کردن با هاور شدن روی المنت کارت مانند گالری اضافه می شود.

رویداد کلیک این دکمه ها شامل تابعی برای نمایش “پنحره مودال به همراه اطلاعات بیشتر محصول” است.

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

<?php

include 'DBController.php';

$db_handle = new DBController();

<!DOCTYPE html>

<html>

<head>

href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

</head>

<body>

<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) {

<button class="quick_look"

data-id="<?php echo $query[$key]["id"] ; ?>">Quick Look</button>

</div>

<?php

}

</div>

</body>

</html>

تابع اجکس جی کویری برا نمایش مودال

کد jQuery زیر تابع Ajax را برای ارسال درخواست به صفحه PHP به منظور دریافت اطلاعات محصول نشان می دهد. که با پاس دادن id محصول به عنوان پارامتر با درخوست AJAX انجام می شود.

این پارامتر در بخش PHP دریافت و در کوئری MySQL برای بیرون کشیدن اطلاعات محصول استفاده می شود. در صفحه PHP , نتیجه اطلاعات محصول برای ایجاد کد HTML و نمایش آن در پنجره مودال, استفاده می شود. این HTML به عنوان پاسخ به درخواست AJAX برگشت داده می شود.

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

$(".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
}
?>