Cara Membuat Pertinjauan Produk untuk Shopping Cart

Hallo sahabat Dumenity berjumpa lagi dalam tutorialÂ kursuswebprogramming, pada tutorial kali ini kita akan belajar tentang Cara Membuat Pertinjauan Produk untuk Shopping Cart. Secara umum, halaman tampilan produkÂ keranjang belanja akan menampilkan gambar pratinjau dengan tampilan slide. Tampilan slide produk digunakan untuk melihat gambar produk. Jika suatu produk memiliki beberapa gambar pratinjau, maka aplikasi toko online memberikan opsi kepada pengguna untuk melihat gambar dengan tampilan slide. Dalam contoh ini, kita akan melihat cara menampilkan gambar produk dengan tampilan slide.

Saya melihat Membuat keranjang belanja dengan PHP dan fungsi zoom gambar Produk dan tampilan cepat produk, template halaman tampilan memiliki gambar produk tunggal. Saya telah menggunakan template yang sama untuk mengintegrasikan slideshow gambar produk. Dalam template ini, gambar pertama produk akan berupa tampilan yang diperbesar dan sisa gambar ditampilkan sebagai thumbnail kecil. Saat mengklik gambar kecil kecil, gambar yang diperbesar dari gambar itu akan ditampilkan. Efek tampilan slide gambar pada tampilan produk dilakukan dengan menggunakan jQuery. Tampilan produk dan tampilan slide akan responsif agar sesuai dengan berbagai ukuran viewport.

Berikut script untuk Tampilan Produk HTML dengan Slideshow Gambar

Kode ini adalah untuk membuat halaman tampilan produk keranjang belanja responsif dengan menampilkan beberapa gambar suatu produk. Awalnya, gambar pertama akan difokuskan dan tampilan yang diperbesar ditunjukkan di bagian pratinjau produk. Sisa dari pratinjau gambar ditampilkan sebagai gambar thumbnail di bawah gambar yang diperbesar. Pada mengklik elemen gambar thumbnail, skrip jQuery dipanggil untuk menampilkan pratinjau gambar yang dipilih yang diperbesar. Gambar yang saat ini dipratinjau akan disorot di antara thumbnail.

Berikut Script Koneksi databasenya

<?php
class DBController {
	private $host = "localhost:3307";
	private $user = "dumetschool";
	private $password = "dumetschool";
	private $database = "artikel_mp";
	private $conn;
	
        function __construct() {
        $this->conn = $this->connectDB();
	}	
	function connectDB() {
		$conn = mysqli_connect($this->host,$this->user,$this->password,$this->database);
		return $conn;
	}
    function runQuery($query) {
                $result = mysqli_query($this->conn,$query);
                while($row=mysqli_fetch_assoc($result)) {
                $resultset[] = $row;
                }		
                if(!empty($resultset))
                return $resultset;
	}
}
?>

<?php

class DBController {

private $host = "localhost:3307";

private $user = "dumetschool";

private $password = "dumetschool";

private $database = "artikel_mp";

private $conn;

function __construct() {

$this->conn = $this->connectDB();

}

function connectDB() {

$conn = mysqli_connect($this->host,$this->user,$this->password,$this->database);

return $conn;

}

function runQuery($query) {

$result = mysqli_query($this->conn,$query);

while($row=mysqli_fetch_assoc($result)) {

$resultset[] = $row;

}

if(!empty($resultset))

return $resultset;

}

Template HTML untuk membuat keranjang belanja.

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

<body>
<?php 

$productResult = $db_handle->runQuery("SELECT * FROM tbl_products WHERE id = 2");
if (! empty($productResult)) {
    ?>
     
        <div id="product-view">
    <?php 
    $productImageResult = $db_handle->runQuery("SELECT * FROM tbl_product_image WHERE product_id = 2");
    if(! empty($productImageResult)) {
    ?> 
            <div class="preview-image">
            <div id="preview-enlarged">
            <img src="<?php echo $productImageResult[0]["preview_source"] ; ?>" />
            </div>
            
            <div id="thumbnail-container">
            <?php foreach($productImageResult as $key=>$value) { 
                $focused = "";
                if($key == 0) {
                    $focused = "focused";
                }
                ?>
                <img class="thumbnail <?php echo $focused; ?>" src="<?php echo $productImageResult[$key]["preview_source"] ; ?>" />
            <?php } ?>
            </div>
        </div>
        <?php } ?>
<div class="product-info">
                <div class="product-title"><?php echo $productResult[0]["name"] ; ?></div>
                <ul>
  <?php
  for($i=1;$i<=5;$i++) {
  $selected = "";
  if(!empty($productResult[0]["average_rating"]) && $i<=$productResult[0]["average_rating"]) {
    $selected = "selected";
  }
  ?>
  <li class='<?php echo $selected; ?>'>â˜…</li>  
  <?php }  ?>
</ul>
                <div class="product-category"><?php echo $productResult[0]["category"] ; ?>
                
                </div>
                <div> Rp <?php echo $productResult[0]["price"] ; ?></div>
                <div><a href="index.php"><button class="btn-info">View Gallery</button></a><button class="btn-info">Add to Cart</button></div>
            </div>      
<?php
}
?>
</div>

</body>
</html>

<?php

include 'DBController.php';

$db_handle = new DBController();

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<?php

$productResult = $db_handle->runQuery("SELECT * FROM tbl_products WHERE id = 2");

if (! empty($productResult)) {

<?php

$productImageResult = $db_handle->runQuery("SELECT * FROM tbl_product_image WHERE product_id = 2");

if(! empty($productImageResult)) {

</div>

<?php foreach($productImageResult as $key=>$value) {

$focused = "";

if($key == 0) {

$focused = "focused";

}

<?php } ?>

</div>

<?php } ?>

<ul>

<?php

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

$selected = "";

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

$selected = "selected";

}

<?php } ?>

</ul>

</div>

<div><a href="index.php"><button class="btn-info">View Gallery</button></a><button class="btn-info">Add to Cart</button></div>

</div>

<?php

}

</div>

</body>

</html>

Slideshow jQuery untuk Menampilkan Gambar Produk

Event klik elemen gambar mini dilakukani dengan fungsi jQuery dengan meneruskan referensi objek elemen. Dengan referensi ini, sumber gambar awal yang akan diperbesar. Setelah membentuk sumber gambar produk, gambar tersebut akan diterapkan untuk membuat dan memperbarui markah bagian pratinjau produk keranjang belanja. Ini akan menampilkan pratinjau dari gambar yang dipilih dan juga menyorot salah satu di antara thumbnail.

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
    $("#thumbnail-container img").click(function() {
    	$("#thumbnail-container img").css("border", "1px solid #ccc");
        var src = $(this).attr("src");
        $("#preview-enlarged img").attr("src", src);
        $(this).css("border", "#fbb20f 2px solid");
        
    });
</script>

$("#thumbnail-container img").click(function() {

$("#thumbnail-container img").css("border", "1px solid #ccc");

var src = $(this).attr("src");

$("#preview-enlarged img").attr("src", src);

$(this).css("border", "#fbb20f 2px solid");

});

</script>

Contoh atau Hasil dari Pertinjauan Produk untuk Shopping Cart

Screenshot berikut menampilkan produk yang menampilkan keluaran untuk keranjang belanja PHP.

Oke itulah tadi pembahasan saya tentang Cara Membuat Pertinjauan Produk untuk Shopping Cart, semoga bermanfaat.

Cara Membuat Pertinjauan Produk untuk Shopping Cart

Facebook DUMET School

Konsultasi Gratis

Categories