Wicart adalah skrip siap pakai untuk keranjang belanja yang sangat menarik untuk situs web toko online. Sangat solusi yang berguna. Kami tidak perlu membuat sendiri kode keranjang belanja untuk situs web kami: kami hanya perlu "menghubungkan" kode yang sudah ada ke kode tersebut - dan semuanya akan berfungsi: keranjang belanja yang sudah jadi akan muncul di situs web kami: pembeli akan dapat “menyeret” barang ke sana dan melakukan pembayaran di sana.

Seperti apa penampilannya:

Keuntungan.

Tanpa PHP: HTML dan Javascript saja
Skrip keranjang belanja hanya ditulis dalam bahasa Javascript(perpustakaan jOquery + teknologi AJAX). Apa artinya ini bagi rata-rata pengguna? Dan fakta bahwa keranjang belanja di situs ini bekerja sangat cepat, tidak perlu memuat ulang situs dan tidak melambat karena hal-hal sepele. Keranjang belanja di situs ini interaktif dan sekaligus sangat cepat. Ini merupakan nilai tambah yang pasti bagi pembeli.

Wicart sangat mudah untuk terhubung ke situs. Jelas bahwa skrip keranjang belanja masih perlu terhubung ke situs - Anda perlu memasukkan potongan kode yang diperlukan secara manual ke dalamnya tempat yang tepat di situs web. Tapi Anda tidak akan mendapat masalah dengan ini. Pengembang telah mengurus semuanya untuk Anda. Petunjuk penggunaan menunjukkan potongan kode untuk program ini (skrip), dan menunjukkan tempat di situs di mana mereka perlu dimasukkan. Siapa pun, bahkan webmaster paling pemula sekalipun, dapat menangani hal ini.

Webmaster tidak perlu menambahkan apa pun sendiri. Script sudah lengkap dan siap digunakan. Anda hanya perlu memasukkan potongan kode tertentu ke tempat yang tepat di situs - dan keranjang akan berfungsi.

Menghubungkan file

Pembukaan halaman HTML situs kami di editor teks, ini mungkin notepad yang disertakan dengan Windows.
Di awal file harus ada blok:

< head>

Di sinilah Anda perlu memasukkan file yang diperlukan dari arsip.

1) berkas CSS
File ini bertanggung jawab untuk penampilan keranjang kami. Dalam kasus kami, file itu sendiri ada di folder css, Anda dapat mengkonfigurasi folder lainnya.

2) JQuery
Agar keranjang belanja berfungsi, kita memerlukan perpustakaan JQuery. Anda dapat mendownloadnya dari situsnya, atau menggunakan CDN

< script src= "http://code.jquery.com/jquery-1.11.0.min.js" type= "text/javascript" >

3) Skrip keranjang

< script src= "js/wicart.js" type= "text/javascript" >

*Harap diperhatikan bahwa skrip berfungsi dalam pengkodean UTF-8; jika situs Anda memiliki pengkodean skrip yang sangat baik, Anda perlu secara eksplisit menentukan pengkodean yang kami perlukan

Konfigurasi minimumnya adalah sebagai berikut:

Daftar harga:

< script>
var Daftar Harga = (
"001" : ( "id" : "001" , "subid" : ( ) , "nama" : "IPhone 5" , "harga" : "20500" ) ,
"002" : ( "id" : "002" , "subid" : ( ) , "nama" : "iPad MINI" , "harga" : "10500" )
} ;

< script>
keranjang var;
konfigurasi var;
var wiNumInputPrefID;

$(dokumen) . siap(fungsi() (

Keranjang = WICard baru("keranjang" ) ;
keranjang. init("basketwidjet", konfigurasi) ;

} ) ;
dokumen. addEventListener("visibilitasperubahan", fungsi (e) (
keranjang. init("basketwidjet", konfigurasi) ;
) , PALSU ) ;

Variabel cart harus bersifat global; selanjutnya dapat diakses.
basketwidjet adalah wadah untuk keranjang kita.

2) Widget keranjang (blok tempat produk pergi setelah pembelian)

< div>
< span>Keranjang:
< a href= "#" onclick= "cart.clearBasket()" style= "float: right;" >Jernih
< a href= "#" id= "basketwidjet" onclick= "cart.showWinow("bcontainer", 1)" > < span style= "font: normal 11px Arial" >

3) Formulir pemesanan
< div id= "order" class = "popup" >
< a href= "#" onclick= "cart.closeWindow("order", 0)" style= "float:right" >< img src= "img/close.png" />
< h4>Masukkan detail kontak Anda
< p>< form id= "formToSend" >
< input id= "fio" type= "text" placeholder= "Nama belakang dan nama depan Anda" class = "" />
< input id= "city" type= "text" placeholder= "Kota" class = "" />
< input id= "phone" type= "text" placeholder= "Nomor telepon kontak" class = "" />
< input id= "email" type= "text" placeholder= "E-mail" class = "" />

< button onclick= "cart.sendOrder("formToSend,overflw,bsum");" href= "#" >Kirim pesanan

4) Tombol Beli

< button id= "wicartbutton_001" onclick= "cart.addToCart(this, "001", priceList["001"])" >Membeli

Kekurangan.

Skrip keranjang belanja ini masih dalam pengembangan. Dan beberapa fitur masih belum diterapkan (misalnya, pembeli belum dapat mengirimkan foto pembeliannya dan beberapa nuansa lainnya melalui email).

Secara gratis dan versi standar produk, Anda tidak memiliki akses ke bantuan pengembang dalam memasang keranjang belanja di situs web Anda. Namun, pemasangannya sama sekali tidak sulit. Dan versi pribadi (di mana bantuan pengembang tersedia) tidak mahal: hanya 1.200 rubel. Saat membeli versi pribadi, pengembang sendiri yang akan memasang keranjang belanja di situs web Anda.

Jika Anda memiliki pertanyaan, kami sarankan untuk menggunakan pertanyaan kami

Semua hal di atas berkaitan dengan situasi ketika sudah ada situs web HTML dan Anda perlu memasang keranjang belanja di dalamnya. Bagaimana jika belum ada situs webnya? Tentu saja, opsi paling pasti (dan paling mahal) adalah mengembangkan situs web siap pakai langsung di mesin, yang mencakup modul perdagangan elektronik. Namun, ini tidak selalu merupakan pendekatan optimal - pertimbangkan beberapa opsi:

Kami membutuhkan halaman arahan. Intinya, ini adalah situs satu halaman yang hanya terdiri dari tata letak dalam format Tata letak HTML. Apakah situs seperti itu memerlukan mesin yang menyediakan pembuatan dan pengelolaan konten - di lebih dari separuh kasus tidak, itu tidak diperlukan. Ini adalah investasi uang dan waktu yang tidak efektif. Jauh lebih mudah untuk hanya menggunakan metode mengimplementasikan keranjang belanja melalui widget yang sudah jadi.

Pilihan lain untuk situs HTML adalah situs yang dibuat editor visual dan diunggah ke server dalam bentuk halaman yang sudah jadi. Jika awalnya Anda berpikir untuk membuat situs dengan cara ini, dan Anda memerlukan sekeranjang barang semata-mata untuk dapat memesan satu jenis produk, sama sekali tidak perlu menerapkan sistem manajemen di situs tersebut (kecuali untuk masa mendatang) . Dan di sini sangat mungkin untuk menyelesaikan masalah dengan sekeranjang barang dalam bentuk widget yang sudah jadi.

Intinya: dimungkinkan untuk memasang keranjang belanja di situs web HTML. Ya, memang dibuat berbeda dari biasanya, tapi ini tidak akan kehilangan fungsinya. Dalam beberapa kasus, pilihan awal yang mendukung situs HTML + sekeranjang barang jadi memiliki lebih banyak pilihan pilihan terbaik. Solusi ini bukan yang terburuk - ini hanya sebuah alternatif, sekarang banyak layanan bekerja dengan prinsip yang sama sejak awal dan ini adalah norma, misalnya, konsultan di situs web, menawarkan layanan menelepon kembali, pengumpul surat untuk surat, dll. Semuanya tidak diimplementasikan menggunakan mesin dan tidak dijalankan di server, tetapi juga dibangun ke dalam situs web sebagai widget, termasuk yang murni HTML.

Dalam tutorial screencast+ mingguan ini, kita akan mempelajari cara membuat keranjang belanja khusus dengan PHP dan MySQL. Anda akan melihat bahwa semuanya tidak sesulit kelihatannya.

Mari kita mulai dengan struktur folder:

Struktur

• reset.css - Anda bisa mendapatkannya dari tautan ini
• style.css adalah milik kita berkas css Untuk gaya HTML tata letak
• connection.php - file untuk menghubungkan ke database
• index.php - templat keranjang belanja
• cart.php - file yang mengubah produk di keranjang (tambah, hapus)
• produk.php - halaman daftar produk

Mari kita mulai dengan penandaan html, lalu desainnya. Buka index.php dan salin/tempel kode:

Kartu belanja

Seperti yang Anda lihat, halaman kami memiliki dua kolom: kolom utama dan sidebar. Sekarang mari kita beralih ke CSS. Buka file style.css dan tulis kode:

Isi ( font-family: Verdana; ukuran font: 12px; warna: #444; ) #container ( lebar: 700px; margin: 150px otomatis; warna latar: #eee; overflow: tersembunyi; /* Setel overflow: tersembunyi ke bersihkan float pada #main dan #sidebar */ padding: 15px; ) #main ( lebar: 490px; float: left; ) #sidebar ( lebar: 200px; float: left; )

Seperti inilah tampilan halaman produk kami sekarang:

Sebelum kita beralih ke bagian PHP/MySQL, kita perlu membuat database. Buka phpMyadmin dan jalankan langkah berikutnya:

Untuk menghemat waktu, saya mengekspor tabel saya sehingga Anda cukup menjalankan kueri berikut:

BUAT TABEL JIKA TIDAK ADA `produk` (`id_product` int(11) BUKAN NULL AUTO_INCREMENT, `nama` varchar(100) BUKAN NULL, `deskripsi` varchar(250) BUKAN NULL, `harga` desimal(6,2) BUKAN NULL, KUNCI UTAMA (`id_product`)) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ; MASUKKAN KE `produk` (`id_produk`, `nama`, `deskripsi`, `harga`) NILAI (1, "Produk 1", "Beberapa deskripsi acak", "15.00"), (2, "Produk 2", "Beberapa deskripsi acak", "20.00"), (3, "Produk 3", "Beberapa deskripsi acak", "50.00"), (4, "Produk 4", "Beberapa deskripsi acak", "55.00"), ( 5, "Produk 5", "Beberapa deskripsi acak", "54.00"), (6, "Produk 6", "Beberapa deskripsi acak", "34.00");

Sebelum mengambil data dari database, saya akan membuat template index.php untuk daftar produk dan keranjang. Jadi tambahkan kode berikut ke bagian atas halaman index.php :

Untuk melakukan ini kita perlu menyertakan file; tambahkan baris ini ke index.php antara div dengan id "main":

Kami sekarang memiliki index.php lengkap:

Keranjang Belanja

Mari buat koneksi ke MySQL. Buka connection.php dan tulis yang berikut ini:

Mari tulis markup untuk halaman produk. Buka dan masukkan yang berikut ini:

Daftar Produk

Mari kita lihat halamannya:

Seperti yang Anda lihat, itu sangat jelek. Mari tambahkan CSS ini.

A (warna: #48577D; dekorasi teks: tidak ada;) a:hover (dekorasi teks: garis bawah;) h1, h2 (margin-bawah: 15 piksel) h1 (ukuran font: 18 piksel;) h2 (ukuran font: 16px) #tabel utama ( lebar: 480px; ) #tabel utama th ( padding: 10px; warna latar: #48577D; warna: #fff; perataan teks: kiri; ) #tabel utama td ( padding: 5px; ) # tabel utama tr ( warna latar: #d3dcf2; )

Oke: hal lain:

Terlihat jauh lebih baik, bukan? Di bawah ini ditunjukkan kode lengkap gaya.css:

Isi ( font-family: Verdana; ukuran font: 12 piksel; warna: #444; ) a (warna: #48577D; dekorasi teks: tidak ada;) a:hover (dekorasi teks: garis bawah;) h1, h2 (margin -bawah: 15px) h1 (ukuran font: 18px;) h2 (ukuran font: 16px) #container ( lebar: 700px; margin: 150px otomatis; warna latar: #eee; padding:15px; overflow: tersembunyi; ) #main ( lebar: 490px; float: kiri; ) #tabel utama ( lebar: 480px; ) #tabel utama th ( padding: 10px; warna latar: #48577D; warna: #fff; perataan teks: kiri; ) # tabel utama td ( padding: 5px; ) #tabel utama tr ( warna latar: #d3dcf2; ) #sidebar ( lebar: 200px; float: kiri; )

Sebelum kita mengambil produk dari database, mari kita hapus dua baris terakhir dari tabel kita (hanya ada di sana untuk melihat seperti apa tampilannya). Hapus ini:

Produk 1 Beberapa deskripsi acak 15 $ Tambahkan ke troli Produk 2 Beberapa deskripsi acak 25 $ Tambahkan ke troli

Besar! Sekarang, di tempat baris tabel berada, masukkan kode PHP berikut:

$

X

Lihatlah gambar di bawah ini:

Karena index.php adalah template untuk semua file, sidebar juga akan terlihat di cart.php . Bukankah ini keren?!

Terakhir, buka cart.php dan masukkan kode:

Lihat keranjang Kembali ke halaman produk