Buat keranjang belanja JavaScript dengan kode yang ditambahkan ke keranjang belanja

Terakhir diubah pada 21 Juni 2022.

Apakah Anda ingin membuat keranjang belanja sepenuhnya dalam JavaScript? Dengan sesi / penyimpanan semuanya! Tidak ada PHP atau kode sisi server, lalu baca dan lanjutkan.

Saya dulu menulis banyak kode keranjang belanja PHP menggunakan sesi sisi server. Sekarang mari kita lihat konsep serupa di sisi pelanggan dalam membuat keranjang belanja JavaScript.

partikel untuk objek langsung Window.sessionStorage Solusi sempurna untuk membuat keranjang belanja berbasis sesi. Tidak seperti contoh e-commerce sebelumnya, kode ini tidak memiliki PHP atau kode sisi server lainnya.

Apa itu sessionStorage?

sessionStorage adalah konsep JavaScript standar di WebStorage API. Ini adalah objek sesi sisi klien yang cenderung menyesuaikan, menerima, dan menghapus data yang sesuai. Persistensi objek ini didasarkan pada ketersediaan sesi browser.

Bagaimana cara membuat keranjang belanja JavaScript menggunakan sessionStorage?

Menerapkan keranjang belanja JavaScript dengan sessionStorage dimungkinkan sebagai berikut. Tabel di bawah ini menunjukkan diagram sessionStorage dengan fitur keranjang belanja.

  • setItem() – Tambahkan ke troli dengan mengacu pada ID produk dari galeri yang dibeli. Ini juga digunakan untuk mengedit keranjang belanja dengan mengganti larik nilai.
  • dapatkanItem() Baca dan tampilkan item keranjang belanja dengan mengulangi array objek sessionStorage.
  • hapusBarang() – Dengan menentukan daftar produk, keluarkan produk dari keranjang.
  • Jernih () – Kosongkan keranjang belanja dengan membatalkan pengaturan sampel sessionStorage.

Keranjang Belanja – Pembayaran – Pembayaran

Bagian ini menunjukkan eksekusi kode keranjang belanja JavaScript. Ini termasuk “Tambahkan ke Keranjang” untuk peninjauan dan langkah pembayaran.

  • Langkah 1: Dalam tindakan “Tambahkan ke Keranjang”, objek sessionStorage membuat larik item yang dibeli.
  • Langkah 2: Kemudian, pembeli akan menerima detail pembayaran dalam formulir pembayaran.
  • Langkah 3: Dapat menyediakan opsi pembayaran seperti PayPal dengan larik parameter permintaan. Array ini berisi item yang dibeli dan detail pembayaran pembeli.
  • Langkah 4: Ganti langkah 3, yaitu pembayaran email. Ini cocok untuk keranjang belanja yang tidak menangani pembayaran langsung dalam prosesnya.

Dalam tutorial ini, kita akan melihat langkah 1 dan 2 dari keranjang belanja JavaScript. Anda dapat mengintegrasikan opsi pembayaran berkode dengan artikel yang berbeda. Contoh: Integrasikan pembayaran PayPal ke situs web e-niaga.

Contoh keranjang belanja JavaScript

Contoh ini menyediakan fitur minimum keranjang belanja JavaScript. Mendukung fungsi “Tambahkan ke Keranjang” dan “Hapus Keranjang” melalui JavaScript.

Kode ini juga membangun dan memasok galeri produk HTML dari JavaScript.

Ini adalah implementasi sisi klien berbasis jQuery menggunakan JavaScript sessionStorage.

Kode HTML untuk menampilkan antarmuka keranjang belanja

Kode HTML ini memiliki variabel untuk memuat UI untuk item berikut dari JavaScript.

Saat dokumen ini siap, ia menyiapkan kode JavaScript HTML untuk jaringan produk.

Nilai produk mencakup input untuk memilih nilai dan mengirim ke operasi “tambahkan ke troli”.

partikel untuk objek langsung keranjang.js Mengontrol kode sisi pelanggan untuk melakukan operasi keranjang belanja. Akan disertakan dalam template ini.

<div class="container">
		<!--  Shopping cart table wrapper  -->
		<div id="shopping-cart">
			<div class="txt-heading">
				<h1>Shopping cart</h1>
			</div>
			<a onClick="emptyCart()" id="btnEmpty">Empty Cart</a>
			<table class="tbl-cart" cellpadding="10" cellspacing="1">
				<thead>
					<tr>
						<th>Name</th>
						<th class="text-right" width="10%">Unit Price</th>
						<th class="text-right" width="5%">Quantity</th>
						<th class="text-right" width="10%">Sub Total</th>
					</tr>
				</thead>
				<!--  Cart table to load data on "add to cart" action -->
				<tbody id="cartTableBody">
				</tbody>
				<tfoot>
					<tr>
						<td class="text-right">Total:</td>
						<td id="itemCount" class="text-right" colspan="2"></td>
						<td id="totalAmount" class="text-right"></td>
					</tr>
				</tfoot>
			</table>
		</div>
		<!-- Product gallery shell to load HTML from JavaScript code -->
		<div id="product-grid">
			<div class="txt-heading">
				<h1>Products</h1>
			</div>
			<div id="product-item-container"></div>
		</div>
	</div>

Kode sisi pelanggan untuk melakukan tindakan keranjang belanja JavaScript

Skrip ini melakukan hal berikut:

  1. Unduh galeri produk dari data JSON.
  2. Tindakan “Tambahkan ke troli” untuk memindahkan produk ke tabel troli.
  3. Ubah dan ubah status keranjang belanja di setiap tindakan keranjang.
  4. Perbarui semua item keranjang belanja dan harga total di setiap perubahan.
  5. Kosongkan troli dengan menghapus sesi.

Unduh galeri produk dari data JSON

partikel untuk objek langsung productItem Berisi data JSON produk. Ini berisi deretan data produk dengan nama, harga dan rute foto.

partikel untuk objek langsung showProductGallery Metode ini mengulangi ini productItem JSON dan HTML membangun galeri produk.

Di galeri ini, setiap ubin produk memiliki opsi “Tambahkan ke troli”. Klik tombol “Tambahkan ke Keranjang” untuk mentransfer produk yang dipilih ke sesi keranjang.

Menggunakan kode JavaScript untuk setiap loop untuk menduplikasinyaproductItem JSON.

$(document).ready(function() {
	var productItem = [{
			productName: "FinePix Pro2 3D Camera",
			price: "1800.00",
			photo: "camera.jpg"
		},
		{
			productName: "EXP Portable Hard Drive",
			price: "800.00",
			photo: "external-hard-drive.jpg"
		},
		{
			productName: "Luxury Ultra thin Wrist Watch",
			price: "500.00",
			photo: "laptop.jpg"
		},
		{
			productName: "XP 1155 Intel Core Laptop",
			price: "1000.00",
			photo: "watch.jpg"
		}];
	showProductGallery(productItem);
});

function showProductGallery(product) {
	//Iterate javascript shopping cart array
	var productHTML = "";
	product.forEach(function(item) {
		productHTML += '<div class="product-item">'+
					'<img src="https://phppot.com/javascript/javascript-shopping-cart/product-images/" + item.photo + '">'+
					'<div class="productname">' + item.productName + '</div>'+
					'<div class="price">$<span>' + item.price + '</span></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="add-to-cart" onClick="addToCart(this)" />'+
					'</div>'+
				'</div>';
				"<tr>";
		
	});
	$('#product-item-container').html(productHTML);
}


Tindakan “Tambahkan ke troli” untuk memindahkan produk ke tabel troli

Pengontrol JavaScript “Tambahkan ke Keranjang” ini adalah salah satu fungsi utama dari contoh. Kode ini meluncurkan kode objek JavaScript sessionStorage.

Fungsi ini dipanggil dengan mengklik tombol “Tambahkan ke Keranjang” pada ubin produk.

Membaca detail produk dari jaringan produk, di mana “Tambahkan ke Keranjang” diklik. Misalnya, ia menerima nama produk, jumlah, dan detail lainnya.

Dengan menggunakan detail ini, kode sampel JSON ini menyiapkan baris item keranjang belanja. Kemudian menambahkan item baru ke objek keranjang belanja sessionStorage yang ada.

function addToCart(element) {
	var productParent = $(element).closest('div.product-item');

	var price = $(productParent).find('.price span').text();
	var productName = $(productParent).find('.productname').text();
	var quantity = $(productParent).find('.product-quantity').val();

	var cartItem = {
		productName: productName,
		price: price,
		quantity: quantity
	};
	var cartItemJSON = JSON.stringify(cartItem);

	var cartArray = new Array();
	// If javascript shopping cart session is not empty
	if (sessionStorage.getItem('shopping-cart')) {
		cartArray = JSON.parse(sessionStorage.getItem('shopping-cart'));
	}
	cartArray.push(cartItemJSON);

	var cartJSON = JSON.stringify(cartArray);
	sessionStorage.setItem('shopping-cart', cartJSON);
	showCartTable();
}

Kosongkan troli dengan menyelesaikan sesi

Kode keranjang belanja JavaScript ini berisi opsi untuk mengosongkan tabel keranjang belanja.

Ini secara eksplisit menghapus instance sessionStorage yang dibuat untuk memiliki item keranjang belanja.

Di akhir fungsi “Tambahkan ke Keranjang” dan “Hapus Keranjang”, antarmuka tabel keranjang belanja dipulihkan dengan data sesi terbaru.

partikel untuk objek langsung showCartTable Fungsi ini dipanggil untuk memperbarui antarmuka pengguna tabel keranjang dan jumlah totalnya.

function emptyCart() {
	if (sessionStorage.getItem('shopping-cart')) {
		// Clear JavaScript sessionStorage by index
		sessionStorage.removeItem('shopping-cart');
		showCartTable();
	}
}

Unduh baris keranjang belanja, jumlah item, jumlah total dari objek sessionStorage

Kode ini menunjukkan logika showCartTable() Untuk membangun kembali Keranjang Belanja HTML dan memperbarui UI.

Memulai variabel untuk menyimpan data berikut. Ini digunakan dalam kode keranjang belanja JavaScript.

  • Tabel Keranjang Belanja HTML.
  • Jumlah total barang yang ditambahkan ke troli
  • Jumlah item keranjang belanja yang dibeli.

SessionStorage memindai keranjang belanja dan mengulangi array jika ada. Selama iterasi, tabel keranjang belanja adalah HTML dan menghitung jumlah total dan harga.

Data keranjang belanja SessionStorage ditransfer ke antarmuka pengguna melalui fungsi JavaScript ini. Mencerminkan status keranjang belanja terbaru kepada pengguna akhir.

function showCartTable() {
	var cartRowHTML = "";
	var itemCount = 0;
	var grandTotal = 0;

	var price = 0;
	var quantity = 0;
	var subTotal = 0;

	if (sessionStorage.getItem('shopping-cart')) {
		var shoppingCart = JSON.parse(sessionStorage.getItem('shopping-cart'));
		itemCount = shoppingCart.length;

		//Iterate javascript shopping cart array
		shoppingCart.forEach(function(item) {
			var cartItem = JSON.parse(item);
			price = parseFloat(cartItem.price);
			quantity = parseInt(cartItem.quantity);
			subTotal = price * quantity

			cartRowHTML += "<tr>" +
				"<td>" + cartItem.productName + "</td>" +
				"<td class="text-right">$" + price.toFixed(2) + "</td>" +
				"<td class="text-right">" + quantity + "</td>" +
				"<td class="text-right">$" + subTotal.toFixed(2) + "</td>" +
				"</tr>";

			grandTotal += subTotal;
		});
	}

	$('#cartTableBody').html(cartRowHTML);
	$('#itemCount').text(itemCount);
	$('#totalAmount').text("$" + grandTotal.toFixed(2));
}

Tangkapan layar keluaran keranjang belanja JavaScript

Outputnya akan akrab bagi mereka yang telah melihat kode keranjang belanja lama saya yang dibuat dalam PHP.

Ini dirancang sebagai solusi keranjang belanja satu halaman. Menampilkan galeri dan keranjang di satu halaman.

Keluaran keranjang belanja JavaScript

Keranjang belanja JavaScript permanen dengan instance localStorage

SesionStorage WebStorage API kedaluwarsa saat browser ditutup. API ini menyediakan objek penyimpanan lain yang bersifat lokal.

Objek localStorage mirip dengan sessionStorage. Satu-satunya perbedaan adalah bahwa LocalStorage menyimpan data secara eksplisit sampai selesai.

Oleh karena itu, konsep ini membantu untuk memiliki keranjang belanja yang stabil. Ini berarti menjaga item keranjang belanja pelanggan meskipun browser ditutup.

Kode sumber menggunakan sessionStorage untuk kode keranjang belanja JavaScript ini. Jika Anda ingin menggunakan objek localStorage, masukkan file berikut sebagai ganti cart.js.

cart-local-storage.js

$(document).ready(function() {
	var productItem = [{
			productName: "FinePix Pro2 3D Camera",
			price: "1800.00",
			photo: "camera.jpg"
		},
		{
			productName: "EXP Portable Hard Drive",
			price: "800.00",
			photo: "external-hard-drive.jpg"
		},
		{
			productName: "Luxury Ultra thin Wrist Watch",
			price: "500.00",
			photo: "laptop.jpg"
		},
		{
			productName: "XP 1155 Intel Core Laptop",
			price: "1000.00",
			photo: "watch.jpg"
		}];
	showProductGallery(productItem);
	showCartTable();
});

function addToCart(element) {
	var productParent = $(element).closest('div.product-item');

	var price = $(productParent).find('.price span').text();
	var productName = $(productParent).find('.productname').text();
	var quantity = $(productParent).find('.product-quantity').val();

	var cartItem = {
		productName: productName,
		price: price,
		quantity: quantity
	};
	var cartItemJSON = JSON.stringify(cartItem);

	var cartArray = new Array();
	// If javascript shopping cart session is not empty
	if (localStorage.getItem('shopping-cart')) {
		cartArray = JSON.parse(localStorage.getItem('shopping-cart'));
	}
	cartArray.push(cartItemJSON);

	var cartJSON = JSON.stringify(cartArray);
	localStorage.setItem('shopping-cart', cartJSON);
	showCartTable();
}

function emptyCart() {
	if (localStorage.getItem('shopping-cart')) {
		// Clear JavaScript localStorage by index
		localStorage.removeItem('shopping-cart');
		showCartTable();
	}
}

function removeCartItem(index) {
	if (localStorage.getItem('shopping-cart')) {
		var shoppingCart = JSON.parse(localStorage.getItem('shopping-cart'));
		localStorage.removeItem(shoppingCart[index]);
		showCartTable();
	}
}

function showCartTable() {
	var cartRowHTML = "";
	var itemCount = 0;
	var grandTotal = 0;

	var price = 0;
	var quantity = 0;
	var subTotal = 0;

	if (localStorage.getItem('shopping-cart')) {
		var shoppingCart = JSON.parse(localStorage.getItem('shopping-cart'));
		itemCount = shoppingCart.length;

		//Iterate javascript shopping cart array
		shoppingCart.forEach(function(item) {
			var cartItem = JSON.parse(item);
			price = parseFloat(cartItem.price);
			quantity = parseInt(cartItem.quantity);
			subTotal = price * quantity

			cartRowHTML += "<tr>" +
				"<td>" + cartItem.productName + "</td>" +
				"<td class="text-right">$" + price.toFixed(2) + "</td>" +
				"<td class="text-right">" + quantity + "</td>" +
				"<td class="text-right">$" + subTotal.toFixed(2) + "</td>" +
				"</tr>";

			grandTotal += subTotal;
		});
	}

	$('#cartTableBody').html(cartRowHTML);
	$('#itemCount').text(itemCount);
	$('#totalAmount').text("$" + grandTotal.toFixed(2));
}


function showProductGallery(product) {
	//Iterate javascript shopping cart array
	var productHTML = "";
	product.forEach(function(item) {
		productHTML += '<div class="product-item">'+
					'<img src="https://phppot.com/javascript/javascript-shopping-cart/product-images/" + item.photo + '">'+
					'<div class="productname">' + item.productName + '</div>'+
					'<div class="price">$<span>' + item.price + '</span></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="add-to-cart" onClick="addToCart(this)" />'+
					'</div>'+
				'</div>';
				"<tr>";
		
	});
	$('#product-item-container').html(productHTML);
}


Perhatian keamanan

Sampai pada titik “tambahkan ke troli”, manajemen sisi pelanggan baik. Saat melanjutkan pembayaran, sebaiknya gunakan middleware sisi server.

Alamat lubang keamanan untuk tujuan keselamatan. Ini membersihkan, memvalidasi data, dan selanjutnya memverifikasi proses.

Hasil

Jadi, kami telah membuat kode keranjang belanja JavaScript menggunakan objek sessionStorage. Selain itu, kami melihat opsi lain untuk menambahkan daya tahan keranjang belanja dengan objek localStorage.

Menerapkan keranjang belanja di sisi pelanggan bukanlah solusi yang lengkap. Tapi, ia memiliki kelebihan minimalis. Ini cocok untuk keranjang belanja statis tipis yang tersedia secara online.

Ini cocok untuk toko yang memiliki integrasi sisi pelanggan yang terkait dengan layanan hosting.
Unduh

Kembali ke atas


Source link

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.