Cara Membuat Shopping Cart dengan tampilan Bootstrap Tooltip

Shopping cart di dalam web digunankanÂ katalog produk untuk menampilkan produk yang tersedia. Katalog ini dapat menggunakan berbagai desain UI seperti galeri. Dalam artikelÂ Cara Membuat shopping Cart dengan tampilan Bootstrap Tooltip ini, kita akan menambahkan opsi Tampilan Cepat untuk produk dengan menggunakan Tooltip Bootstrap. Menerapkan Tooltip Bootstrap akan sangat sederhana. Dalam contoh ini, galeri produk untuk aplikasi eCommerce akan ditampilkan dilanding page. Di galeri, setiap gambar produk akan diplot dengan opsi Tampilan Cepat. Saat hover elemen, keterangan tooltip akan ditampilkan dengan informasi produk yang sesuai. Pada event mouseover, data produk akan diambil melalui AJAX dan dimuat secara dinamis ke dalam keterangan tooltip.

Opsi Tampilan Cepat Produk Keranjang Belanja

Ini adalah kode HTML untuk menampilkan galeri produk untuk aplikasi keranjang belanja dengan opsi tampilan cepat. Tampilan galeri dibuat dalam satu lingkaran dengan mengulangi hasil produk. Pada setiap iterasi. ini menciptakan ruang produk dengan elemen tombol “Tampilan Cepat”. Bagian head berisi library jQuery dan BootStrap yang diperlukan. Tooltip BootStrap membutuhkan library jQuery UI untuk bekerja . Saya telah menambahkan atribut class ke elemen tombol quick look. Ini akan digunakan sebagai referensi untuk menginisialisasi keteranganTooltip Bootstrap.

<?php
include 'DBController.php';
$db_handle = new DBController();
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="jquery/jquery-3.2.1.min.js"></script>
<script src="jquery/ui/jquery-ui.js"></script>
<link rel="stylesheet" href="jquery/ui/jquery-ui.css">
<script src="bootstrap/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet" type="text/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="btn-quick-look"
                id="<?php echo $query[$key]["id"] ; ?>">Quick Look</button>
        </div>
<?php
    }
}
?>
    </div>
</body>
</html>

<?php

include 'DBController.php';

$db_handle = new DBController();

<!DOCTYPE html>

<html>

<head>

</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="btn-quick-look"

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

</div>

<?php

}

</div>

</body>

</html>

BootStrap ToolTip Inisialisasi untuk Memuat Detail Produk

Dengan menggunakan tooltip Bootstrap, kita dapat mengontrol arah di mana elemen tooltip harus menjadi popover. Saat menginisialisasi tooltip, kita dapat menentukan spesifikasi kiri, kanan, atas, bawah ke opsi penempatan tooltip.

Di skrip inisialisasi, saya telah menetapkan nama fungsi getProduct () ke opsi judul. Maka fungsi ini akan dipanggil saat hover tombol Quick Look. Dalam fungsi ini, panggilan AJAX jquery dikirim untuk kode PHP untuk mengambil detail produk. Hasil database produk diambil oleh id yang diteruskan sebagai parameter permintaan AJAX.

<script>
    $(document).ready(function(){
    $('.btn-quick-look').tooltip({
        placement: 'right',
    title: getProduct,
    html: true
    });
    function getProduct()
    {
        var fetch_data = '';
        var element = $(this);
        var id = element.attr("id");
        $.ajax({
            url:'get-product-info.php',
            method:"GET",
            async:false,
            data:{id:id},
            success:function(data)
            {
                fetch_data = data;
            }
        });
        return fetch_data;
    }
    });  
</script>

$(document).ready(function(){

$('.btn-quick-look').tooltip({

placement: 'right',

title: getProduct,

html: true

});

function getProduct()

{

var fetch_data = '';

var element = $(this);

var id = element.attr("id");

$.ajax({

url:'get-product-info.php',

method:"GET",

async:false,

data:{id:id},

success:function(data)

{

fetch_data = data;

}

});

return fetch_data;

}

});

</script>

Kode PHP untuk Mendapatkan Detail Produk di Tooltip

Saya telah menampilkan gambar-gambar produk mouseover menggunakan echo di php. Gambar mouseover akan diambil dari database dengan menggunakan metode GET di php. Jendela tooltip akan menampilkan gambar dengan harga produk, yang diambil dari database Mysql.

<?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>
                <div><?php echo $query[0]["price"] ; ?> USD</div>
            </div>      
<?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>

<ul>

<?php

for($i=1;$i<=5;$i++) {

$selected = "";

if(!empty($query[0]["average_rating"]) && $i<=$query[0]["average_rating"]) {

$selected = "selected";

}

<?php } ?>

</ul>

</div>

</div>

<?php

}

Berikut screenshoot dari hasil codingan di atas,

Oke itulah tadi pembahasan saya tentang Cara Membuat shopping Cart dengan tampilan Bootstrap Tooltip semoga bermanfaat.

Cara Membuat Shopping Cart dengan tampilan Bootstrap Tooltip

Facebook DUMET School

Konsultasi Gratis

Categories