Buat keranjang belanja JavaScript dengan kode yang ditambahkan ke keranjang belanja

Programming

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.


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.

 

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.


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.


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.


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


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.