source code giỏ hàng giống amazon

    Rating: ★★★★☆
    View: 213
    Download: 298

    1. Danh sách sản phẩm:

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

    2. Hiển thị nhanh sản phẩm

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

    3. file xử lý 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
    }
    ?>

     

    loading Đang tải...

    api được ưa chuộng