PHP

Keterlibatan Pelanggan yang Lebih Baik dengan penerapan daftar keinginan eCommerce untuk keranjang belanja

Posted on by administrator
15
Jun
0
(0)

oleh Vincy. Terakhir diubah pada 5 Januari 2021.

Tingkatkan keterlibatan pengguna dengan situs web eCommerce Anda untuk melihat lompatan penjualan Anda ke depan. Ada beberapa alat seperti peringkat, komentar, kueri, dan daftar keinginan untuk meningkatkan keterlibatan pengguna.

Keranjang belanja persisten (pada sesi pengguna yang berbeda) memungkinkan pengguna untuk menyimpan dan mengalokasikan produk untuk pembelian di masa mendatang. Daftar keinginan membantu melakukannya dengan cara yang lebih terorganisir.

Daftar keinginan adalah fitur situs web eCommerce yang membantu pengguna untuk mengelola daftar produk yang ingin dibeli pengguna nanti. Ini juga memungkinkan mempertahankan daftar item yang “belum dibeli”. Fitur ini akan meningkatkan tingkat konversi bisnis eCommerce Anda.

Penyedia aplikasi eCommerce mengikuti jenis mekanisme untuk mengimplementasikan fitur ini. Terminologi mungkin berbeda dari aplikasi ke aplikasi. Contoh: Simpan untuk masa depan, daftar keinginan, favorit, dan lainnya.

Contoh ini menggunakan cara implementasi sederhana dengan kode langsung. Ini database pengguna untuk mengelola daftar keinginan pengguna.

Anda dapat mengintegrasikan modul daftar keinginan dari contoh ini untuk perangkat lunak keranjang belanja online Anda.

Tangkapan Layar Daftar Keinginan eCommerce

Apa yang ada di dalam?

  1. Tentang contoh ini
  2. Struktur file
  3. tampilan daftar keinginan eCommerce dalam HTML
  4. jQuery AJAX untuk menambah/menghapus item daftar keinginan
  5. Kode PHP untuk membuat dan mengelola daftar keinginan eCommerce
  6. Skrip basis data
  7. Keluaran contoh daftar keinginan E-Commerce

Tentang contoh ini

Contoh kode ini dengan fitur untuk membuat daftar keinginan pengguna untuk perangkat lunak eCommerce. Ini akan memberikan kode yang bersih dan sederhana untuk menambahkan fitur daftar keinginan eCommerce.

Saya telah membuat skrip keranjang belanja php sederhana sebelumnya di tutorial sebelumnya. Contoh ini adalah versi yang disempurnakan dari keranjang belanja sederhana dengan daftar keinginan.

Kode ini akan memungkinkan pengguna untuk menambahkan produk ke daftar keinginan mereka dari galeri produk. Juga, ini memungkinkan untuk menghapus item untuk dihapus dari daftar keinginan.

Item galeri daftar keinginan bersifat dinamis dari database. Tindakan tambah/hapus akan mengubah data daftar keinginan dalam database.

Struktur File

Diagram ini menunjukkan file yang dibuat untuk contoh ini. Ini memiliki kode terstruktur yang terorganisir dari implementasi daftar keinginan eCommerce.

Ini menunjukkan file tampilan, perpustakaan, dan aset aplikasi yang dipisahkan dengan cara yang benar.

Folder gambar berisi ikon aplikasi. Juga, itu termasuk gambar untuk menampilkan produk dan galeri daftar keinginan.

Tutorial ini memiliki sumber yang dapat diunduh di bagian akhir dengan skrip database.

Struktur File Daftar Keinginan

tampilan daftar keinginan eCommerce dalam HTML

Contoh ini memiliki dua jenis galeri. Salah satunya adalah galeri produk eCommerce biasa dan yang lainnya adalah galeri daftar keinginan pengguna.

Contoh ini menggunakan id anggota hard-coded untuk mendapatkan daftar keinginan pengguna dari database. Mungkin mengadopsi modul login untuk mendapatkan id dari sesi.

Galeri produk ada di halaman arahan, di bawah tampilan daftar keranjang belanja. Halaman ini menyertakan link navigasi untuk menuju ke wishlist aplikasi eCommerce.

Galeri produk memiliki ikon garis hati di setiap ubin. Ini akan menambahkan item ke daftar keinginan pada acara kliknya. Setelah menambahkan, galeri daftar keinginan menunjukkan hati yang terisi pada ubin tertentu.

Acara klik ikon hati yang terisi akan menghapus item dari daftar keinginan.

index.php

<?php
session_start();
require_once __DIR__ . "/lib/DataSource.php";
$db_handle = new DataSource();

$query = 'SELECT * FROM tbl_whish_list JOIN tblproduct ON tblproduct.id = tbl_whish_list.product_id ORDER BY tbl_whish_list.product_id ASC';

$whish_array = $db_handle->select($query);
$whish_array_pid = array();
if (! empty($whish_array)) {
    foreach ($whish_array as $z => $value) {
        $whish_array_pid[] = $whish_array[$z]['product_id'];
    }
}
if (! empty($_GET["action"])) {
    switch ($_GET["action"]) {
        case "add":
            if (! empty($_POST["quantity"])) {
                $query = 'SELECT * FROM tblproduct WHERE code= ? ';
                $paramType="s";
                $paramValue = array(
                    $_GET["code"]
                );
                $productByCode = $db_handle->select($query, $paramType, $paramValue);

                $itemArray = array(
                    $productByCode[0]["code"] => array(
                        'name' => $productByCode[0]["name"],
                        'code' => $productByCode[0]["code"],
                        'quantity' => $_POST["quantity"],
                        'price' => $productByCode[0]["price"],
                        'image' => $productByCode[0]["image"]
                    )
                );

                if (! empty($_SESSION["cart_item"])) {
                    if (in_array($productByCode[0]["code"], array_keys($_SESSION["cart_item"]))) {
                        foreach ($_SESSION["cart_item"] as $k => $v) {
                            if ($productByCode[0]["code"] == $k) {
                                if (empty($_SESSION["cart_item"][$k]["quantity"])) {
                                    $_SESSION["cart_item"][$k]["quantity"] = 0;
                                }
                                $_SESSION["cart_item"][$k]["quantity"] += $_POST["quantity"];
                            }
                        }
                    } else {
                        $_SESSION["cart_item"] = array_merge($_SESSION["cart_item"], $itemArray);
                    }
                } else {
                    $_SESSION["cart_item"] = $itemArray;
                }
            }
            break;
        case "remove":
            if (! empty($_SESSION["cart_item"])) {
                foreach ($_SESSION["cart_item"] as $k => $v) {
                    if ($_GET["code"] == $k)
                        unset($_SESSION["cart_item"][$k]);
                    if (empty($_SESSION["cart_item"]))
                        unset($_SESSION["cart_item"]);
                }
            }
            break;
        case "empty":
            unset($_SESSION["cart_item"]);
            break;
    }
}
?>
<HTML>
<HEAD>
<TITLE>Simple PHP Shopping Cart</TITLE>
<link href="https://phppot.com/php/better-customer-engagement-with-ecommerce-wishlist-implementation-for-shopping-cart/css/style.css" type="text/css" rel="stylesheet" />
</HEAD>
<BODY>
	<div id="shopping-cart">
		<div class="txt-heading">Shopping Cart</div>

		<a id="btnEmpty" href="index.php?action=empty">Empty Cart</a>
<?php
if (isset($_SESSION["cart_item"])) {
    $total_quantity = 0;
    $total_price = 0;
    ?>
<table class="tbl-cart" cellpadding="10" cellspacing="1">
			<tbody>
				<tr>
					<th class="text-left">Name</th>
					<th class="text-left">Code</th>
					<th class="text-right">Quantity</th>
					<th class="text-right">Unit Price</th>
					<th class="text-right">Price</th>
					<th class="text-center">Remove</th>
				</tr>
<?php
    foreach ($_SESSION["cart_item"] as $item) {
        $item_price = $item["quantity"] * $item["price"];
        ?>
				<tr>
					<td><img src="<?php echo $item["image"]; ?>"
						class="cart-item-image" /><?php echo $item["name"]; ?></td>
					<td><?php echo $item["code"]; ?></td>
					<td class="text-right"><?php echo $item["quantity"]; ?></td>
					<td class="text-right"><?php echo "$ ".$item["price"]; ?></td>
					<td class="text-right"><?php echo "$ ". number_format($item_price,2); ?></td>
					<td class="text-center"><a
						href="index.php?action=remove&code=<?php echo $item["code"]; ?>"
						class="btnRemoveAction"><img src="images/icon-delete.png"
							alt="Remove Item" /></a></td>
				</tr>
				<?php
        $total_quantity += $item["quantity"];
        $total_price += ($item["price"] * $item["quantity"]);
    }
    ?>

<tr>
					<td colspan="2" align="right">Total:</td>
					<td align="right"><?php echo $total_quantity; ?></td>
					<td align="right" colspan="2"><strong><?php echo "$ ".number_format($total_price, 2); ?></strong></td>
					<td></td>
				</tr>
			</tbody>
		</table>
  <?php
} else {
    ?>
<div class="no-records">Your Cart is Empty</div>
<?php
}
?>
</div>

	<div id="product-grid">
		<div class="txt-heading">Products</div>
	<?php
$query = 'SELECT * FROM tblproduct ORDER BY id ASC';
$product_array = $db_handle->select($query);
if (! empty($product_array)) {
    foreach ($product_array as $key => $value) {
        ?>
		<div class="product-item">
			<form method="post"
				action="index.php?action=add&code=<?php echo $product_array[$key]["code"]; ?>">
				<div class="product-image">
					<img src="<?php echo $product_array[$key]["image"]; ?>">
				</div>
				<div class="product-tile-footer">
					<div class="product-title"><?php echo $product_array[$key]["name"]; ?>
                    <?php if (in_array($product_array[$key]["id"], $whish_array_pid)) { ?>
                    <span
							data-pid="<?php echo $product_array[$key]["id"]; ?>"
							class="heart" onclick="removeFromWishlist(this)" title="Remove from wishlist">
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
								viewBox="0 0 24 24" fill="none" stroke-width="2"
								stroke-linecap="round" stroke-line join="round"
								stroke="currentColor"
								class="feather feather-heart color-filled">
									<path
									d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><img
							src="images/loading.gif" id="loader">
						</span>
                        <?php } else { ?>
                        <span
                            data-pid="<?php echo $product_array[$key]["id"]; ?>"
                            class="heart" onclick="addToWishlist(this)" title="Add to wishlist">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                viewBox="0 0 24 24" fill="none" stroke-width="2"
                                stroke-linecap="round" stroke-line join="round"
                                stroke="currentColor"
                                class="feather feather-heart">
                                    <path
                                    d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><img
                            src="images/loading.gif" id="loader">
                        </span>
                        <?php } ?>
					</div>
					<div class="product-price"><?php echo "
quot;.$product_array[$key]["price"]; ?></div>
					<div class="cart-action">
						<input type="text" class="product-quantity" name="quantity"
							value="1" size="2" /><input type="submit" value="Add to Cart"
							class="btnAddAction" />
					</div>
				</div>
			</form>
		</div>
	<?php
    }
}
?>
	</div>
	<div id="shopping-cart">
		<a id="whishlist" href="wishlist.php">Show My Wishlist</a>
	</div>
	<script type="text/javascript" src="vendor/jquery-3.4.1.min.js"></script>
	<script type="text/javascript" src="js/wishlist.js"></script>
</BODY>
</HTML>

wishlist.php

<?php
require_once __DIR__ . "/lib/DataSource.php";
$db = new DataSource();
?>
<HTML>
<HEAD>
<TITLE>Simple PHP Shopping Cart</TITLE>
<link href="https://phppot.com/php/better-customer-engagement-with-ecommerce-wishlist-implementation-for-shopping-cart/css/style.css" type="text/css" rel="stylesheet" />
</HEAD>
<BODY>
	<div id="shopping-cart">
		<div class="whishlist-cntr">
			<div class="txt-heading">Wishlist</div>
			<div id="whishlist-grid">

	<?php
	$query = 'SELECT * FROM tbl_whish_list JOIN tblproduct ON tblproduct.id = tbl_whish_list.product_id';
	$whish_array = $db->select($query);
    if (! empty($whish_array)) {
    foreach ($whish_array as $key => $value) {
        ?>
		<div class="product-item">
					<form method="post"
						action="index.php?action=add&code=<?php echo $whish_array[$key]["code"]; ?>">
						<div class="product-image">
							<img src="<?php echo $whish_array[$key]["image"]; ?>">
						</div>
						<div class="product-tile-footer">
							<div class="product-title"><?php echo $whish_array[$key]["name"]; ?> <span
									data-pid="<?php echo $whish_array[$key]["product_id"]; ?>"
									class="heart" onclick="removeFromWishlist(this)"
									title="Add to wish list"> <svg
										xmlns="http://www.w3.org/2000/svg" width="24" height="24"
										viewBox="0 0 24 24" fill="none" stroke-width="2"
										stroke-linecap="round" stroke-line join="round"
										stroke="currentColor"
										class="feather feather-heart color-filled">
									<path
											d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
									<img src="images/loading.gif" id="loader">
								</span>
							</div>
							<div class="product-price"><?php echo "
quot;.$whish_array[$key]["price"]; ?></div>
							<div class="cart-action">
								<input type="text" class="product-quantity" name="quantity"
									value="1" size="2" /><input type="submit" value="Add to Cart"
									class="btnAddAction" />
							</div>
						</div>
					</form>
				</div>
	<?php
    }
}
?>
</div>
		</div>
	</div>
	<script type="text/javascript" src="vendor/jquery-3.4.1.min.js"></script>
	<script type="text/javascript" src="js/wishlist.js"></script>
</BODY>
</HTML>

jQuery AJAX untuk menambah / menghapus item daftar keinginan

File JavaScript ini berisi fungsi untuk memproses permintaan AJAX untuk menambah/menghapus item daftar keinginan.

Itu Tambahkan ke Daftar Keinginan b Indonesia() function mendapatkan id produk dari atribut data HTML. Id ini adalah param permintaan untuk melakukan tindakan tambah di server.

Demikian pula, hapusDariDaftar Keinginan() fungsi memanggil URL server untuk mengeksekusi kueri penghapusan pada database daftar keinginan.

Kedua fungsi AJAX memanipulasi elemen UI untuk memberikan pengalaman pengguna yang mulus dan sangat baik pada tindakan ini.

js/daftar keinginan.js

function addToWishlist(obj) {
	var p_id = $(obj).data("pid");
	$(obj).find("svg").hide();
	$(obj).find("img").show();
	$.ajax({
		url : "ajax-endpoint/add-to-wishlist.php",
		type : "POST",
		data : 'p_id=' + p_id,
		success : function(data) {
			$(obj).find("svg").show();
			$(obj).find("img").hide();
			if (data > 0) {
				markedAsChecked($(obj));
				
			}
		}
	});
}

function removeFromWishlist(obj) {
	var p_id = $(obj).data("pid");
	$(obj).find("svg").hide();
	$(obj).find("img").show();
	$.ajax({
		url : "ajax-endpoint/remove-from-wishlist.php",
		type : "POST",
		data : 'p_id=' + p_id,
		success : function(data) {
			if (data > 0) {
				$(obj).find("svg").show();
				$(obj).find("img").hide();
				markedAsUnchecked($(obj));
			}
		}
	});
}

function markedAsChecked(obj) {
	$(obj).find("svg").addClass("color-filled");
	$(obj).find("svg").parent().attr("onClick", "removeFromWishlist(this)");
	$(obj).find("svg").parent().attr("title", "Remove from wishlist")
}

function markedAsUnchecked(obj) {
	$(obj).find("svg").removeClass("color-filled");
	$(obj).find("svg").parent().attr("onClick", "addToWishlist(this)");
	$(obj).find("svg").parent().attr("title", "Add to wishlist")
}

Kode PHP untuk membuat dan mengelola daftar keinginan

Bagian ini menunjukkan kode untuk memindahkan produk ke atau dari daftar keinginan eCommerce.

Saat mengklik ikon hati di galeri produk, AJAX akan memanggil PHP ini. File ini memasukkan item yang dipilih ke daftar keinginan eCommerce pengguna.

ajax-endpoint/add-to-wishlist.php

<?php
require_once __DIR__ . "/../lib/DataSource.php";
$db_handle = new DataSource();
if (! empty($_POST["p_id"])) {
    $memberId = 1;
        $sql = "INSERT INTO tbl_whish_list (product_id, member_id) VALUES (?, ?)";
        $paramType="ii";
        $paramValue = array(
            $_POST["p_id"],
            $memberId
        );
        $whishlist_id = $db_handle->insert($sql, $paramType, $paramValue);
        echo $whishlist_id;
    exit();
}
?>

Saat mengklik ikon hati yang terisi, itu memanggil file PHP berikut. Ia menerima id produk dari larik param permintaan.

Berdasarkan product_id, ia menyiapkan kueri penghapusan untuk menghapus item dari daftar keinginan pengguna.

ajax-endpoint/remove-from-wishlist.php

<?php
require_once __DIR__ . "/../lib/DataSource.php";
$db_handle = new DataSource();
if (! empty($_POST["p_id"])) {
    $memberId = 1;
    $query = "DELETE FROM tbl_whish_list WHERE product_id = ? AND member_id = ?";
    $paramType="ii";
    $paramValue = array(
        $_POST["p_id"],
        $memberId
    );
    $affectedRows = $db_handle->delete($query, $paramType, $paramValue);
    echo $affectedRows;
}
exit();

Skrip basis data

Impor skrip database ini untuk menjalankan contoh ini di server Anda. Ini memiliki tabel untuk mengelola produk keranjang belanja, daftar keinginan di database.

--
-- Database: `ecommerce-wishlist`
--

-- --------------------------------------------------------

CREATE TABLE IF NOT EXISTS `tblproduct` (
`id` int(8) NOT NULL,
  `name` varchar(255) NOT NULL,
  `code` varchar(255) NOT NULL,
  `image` text NOT NULL,
  `price` double(10,2) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;

INSERT INTO `tblproduct` (`id`, `name`, `code`, `image`, `price`) VALUES
(1, 'FinePix Pro2 3D Camera', '3DcAM01', 'images/camera.jpg', 1500.00),
(2, 'EXP Portable Hard Drive', 'USB02', 'images/external-hard-drive.jpg', 800.00),
(3, 'Luxury Ultra thin Wrist Watch', 'wristWear03', 'images/watch.jpg', 300.00),
(4, 'XP 1155 Intel Core Laptop', 'LPN45', 'images/laptop.jpg', 800.00);

-- --------------------------------------------------------

CREATE TABLE IF NOT EXISTS `tbl_whish_list` (
`id` int(11) NOT NULL,
  `member_id` int(11) NOT NULL,
  `product_id` int(11) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=111 DEFAULT CHARSET=latin1;


INSERT INTO `tbl_whish_list` (`id`, `member_id`, `product_id`) VALUES
(110, 0, 1);


ALTER TABLE `tblproduct`
 ADD PRIMARY KEY (`id`), ADD UNIQUE KEY `product_code` (`code`);


ALTER TABLE `tbl_whish_list`
 ADD PRIMARY KEY (`id`);

ALTER TABLE `tblproduct`
MODIFY `id` int(8) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=5;

ALTER TABLE `tbl_whish_list`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=111;

Keluaran contoh daftar keinginan keranjang belanja E-Commerce

Tangkapan layar ini menunjukkan galeri produk eCommerce di bawah keranjang belanja.

Setiap item di galeri ini berisi ikon hati yang dapat diklik untuk memindahkan item ke/dari daftar keinginan.

Item dengan hati yang terisi menunjukkan bahwa mereka ada di daftar keinginan pengguna.

eCommerce dengan galeri daftar keinginan

Kesimpulan

Jadi, kita telah melihat contoh sederhana untuk membuat daftar keinginan eCommerce untuk pelanggan.

Saya harap, ini membantu Anda membangun modul untuk mendukung keranjang belanja Anda untuk memiliki fitur ini untuk meningkatkan tingkat konversi.

Dengan PHP langsung, kode MySQL dengan AJAX, kami telah melihat implementasi yang cukup baik untuk memulai.

Karena dengan inti PHP tanpa pustaka apa pun, ia mudah beradaptasi dengan kerangka kerja eCommerce apa pun.

Unduh

Kembali ke Atas


Source link

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

administrator