Kami memiliki banyak cara untuk menambahkan produk ke keranjang belanja. Latihan yang biasa adalah mengklik tombol "Tambahkan ke Keranjang", yang akan melompat ke keranjang belanja. Di keranjang belanja, Anda dapat mengklik tombol "Periksa" untuk memeriksa. Dan hari ini saya akan memperkenalkan Anda pada solusi yang lebih ramah.
Lihat kode sumber unduhan demo
Secara default, keranjang belanja disembunyikan dan tidak terlihat. Ketika pengguna mengklik tombol Tambah ke CART, informasi produk akan ditambahkan ke keranjang. Keranjang belanja akan muncul di sudut kanan bawah halaman dalam bentuk tombol. Mengklik tombol akan memperluas keranjang belanja untuk menampilkan informasi produk di keranjang. Pada saat yang sama, Anda juga dapat menghapus atau menyelesaikan produk di kereta. Pengguna juga dapat untuk sementara waktu menutup keranjang belanja mereka dan terus berbelanja.
Struktur HTML
Struktur HTML terutama mencakup dua bagian. Bagian pertama adalah tombol "Tambahkan ke Keranjang Belanja" dalam daftar produk. Seperti yang ditunjukkan dalam kode berikut, kami menggunakan atribut data-* untuk menyatukan ID, gambar, nama, harga, dan informasi lainnya.
<a href = "#0" data-price = "3669.00" data-proid = "1" data-proname = "huawei p9" data-proimg = "img/huawei_p9.jpg"> Tambahkan ke cart </a>
Bagian kedua adalah keranjang belanja, bagian keranjang belanja mencakup keranjang belanja pemicu dan bagian statistik keranjang belanja.cd-cart-trigger dan bagian konten tubuh keranjang belanja.cd-cart.
<dv> <a href = "#0"> keranjang belanja <ul> <!-item gerobak menghitung-> <li> 0 </li> <li> 0 </li> </ul> </a> <verv> <verv> <weader> <h2> CARK </h2> <pan> </div <a href = "#0"> </h2 ini </h2 the span> dihapus <a href = "#0"> </a> </h2> <span> dihapus <a href = "#0"> </a> Bagian, dimasukkan secara dinamis oleh JavaScript-> </ul> </div> <footer> <a href = "#0"> <em> saat ini- ￥ <span> 0 </span> </em> </a> </tfooter> </div> </div> </div>
Daftar UL dalam elemen Div.Body kosong secara default. Ini digunakan untuk menampilkan informasi daftar produk dari keranjang belanja. Strukturnya yang kasar adalah sebagai berikut. Ini dimasukkan secara dinamis oleh JavaScript.
<verv> <ul> <li> <div> <a href = "#0"> <img src = "img/pro.jpg"> </a> </div> <h3> <a href = "#0"> </a> </h3> <span> ￥ 39999.99 </span> </a> </h3> <span> ￥ 39999.99 </span> <a> </h3> <span> ￥ 39999.99 </span> <a> </h3> <span> ￥ 39999.99 </span> <a = ""#0 " for="cd-product-'+ productId +'">Number of items</label> <span> <span>x<i id="cd-product-'+proid+'">1</i></span> </span> </div> </div> </div> </li> </ul> </div> </div> </div> </div> </li> </div> </div> </div> </li> </div> </div> </div> </div> </li> </div> </div>
Bagian CSS tidak ditampilkan dalam artikel ini. Anda dapat mengunduh css/style.css dalam kode sumber untuk melihatnya.
Javascript
Kode contoh ini didasarkan pada jQuery, sehingga file pustaka jQuery perlu dimuat terlebih dahulu.
Saat pengguna mengklik tombol .Add-tombol, memicu fungsi addProduct () dan masukkan informasi produk ke dalam .body> ul.
fungsi addProduct (proname, proid, price, proImg) {var kuantitas = $ ("#cd-product-"+proid) .text (); var select = '', productAdded = ''; if (kuantitas == '') {var select = '<span> x <i id = "CD-Product-'+Proid+'"> 1 </i> </span>'; var productAdded = $ ('<li> <verv> <a href = "#0"> <img src = "'+proImg+'"> </a> </div> <hv> <h3> <a href = "#0">'+proname+'</a> </h3> <span> ￥'+'</</</bentang href = "#0"> hapus </a> <verv> <label for = "cd-product-'+proid+'"> Jumlah file </label> '+SELECT+' </DIV> </SIV> </li> '); cartlist.prepend (productAdded); } else {kuantitas = parseInt (kuantitas); $ ("#CD-Product-"+Proid) .html (kuantitas+1); }}Di atas adalah implementasi efek berbasis JavaScript yang ditambahkan ke keranjang belanja dengan pengunduhan kode sumber. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!