rumah > Peramban > Menyiapkan halaman keranjang di WooCommerce. Keranjang untuk toko online di bagian depan atau Menulis javascript modular Mempersiapkan data dan markup untuk katalog


Menyiapkan halaman keranjang di WooCommerce. Keranjang untuk toko online di bagian depan atau Menulis javascript modular Mempersiapkan data dan markup untuk katalog




Pengunjung situs yang terhormat yang menanyakan pertanyaan seperti “Bagaimana cara melampirkan keranjang belanja Anda ke situs?” dan seterusnya. Saya tidak membuat solusi yang sudah jadi, saya menjelaskan logika implementasinya, untuk setiap situs Anda perlu menambahkan hal-hal tertentu, jadi jika Anda benar-benar perlu memasang atau memasang sesuatu, saya menyediakan layanan konsultasi berbayar dan gratis dan pengembangan situs web. Tulis ke formulir umpan balik di bagian atas halaman, saya akan menjawab semuanya.


Toko online. Keranjang belanja AJAX. Bagian 1: Fungsi PHP.

Belum lama ini saya memutuskan untuk sedikit mengupdate rangkaian artikel saya tentang cara membuat keranjang belanja untuk toko online. Secara umum ada beberapa kekurangan, ketidakakuratan dan tempat yang ingin saya ubah, namun yang utama adalah membuat tombol “Tambahkan ke Keranjang” berfungsi tanpa memuat ulang halaman. Untuk apa? Tidak ada batasan untuk kesempurnaan... menurut saya, ini nyaman. Pertama kita perlu memahami apa yang kita perlukan untuk membuat keranjang toko online menggunakan AJAX:

  • Satu set fungsi PHP untuk bekerja dengan keranjang itu sendiri: menambah, menghapus, memperbarui kuantitas, dll.
  • Seperangkat fungsi JavaScript yang akan bertanggung jawab atas tombol tambah, hapus, dan edit (saya biasanya merasa takut ketika mendengar kata JavaScript, tetapi tidak akan ada yang rumit di sini)
  • file backend yang akan bertanggung jawab atas pengoperasian keranjang belanja tanpa memuat ulang halaman
  • Jika belum, tabel di database berisi produk toko.
  • perpustakaan jQuery. Saya akan menggunakannya (mungkin suatu hari nanti saya akan menjelaskan cara melakukan hal yang sama menggunakan JsHttpRequest), karena lebih sederhana dan intuitif untuk bekerja dengan teknologi AJAX
  • Agar lebih jelas, saya buatkan contoh filenya, bisa anda download

    • Langkah pertama adalah mengembangkan fungsi PHP untuk keranjang belanja. Jadi:

  • Tambahkan item ke keranjang. Pengidentifikasi produk dikirim ke sana. Saya akan mengubah struktur array itu sendiri, yang berisi item yang ditambahkan ke keranjang di sesi tersebut, sekarang akan menjadi sebagai berikut:

    $_SESSION["products"] – array yang bertanggung jawab atas produk di keranjang, strukturnya adalah sebagai berikut:

    $_SESSION["products"]=array("product_identifier_1"=>array("biaya"=>"product_1_price", "count"=>"product_1_quantity_in_cart"), "product_identifier_2"=>array("cost"=>"product_price_1 ", "count"=>"quantity_of_product_2_in_cart"), // dll. Variabel $_SESSION["products_incart"] akan bertanggung jawab atas jumlah produk dalam keranjang, dan variabel $_SESSION["cart_cost"] akan bertanggung jawab untuk biaya gerobak. Pengorganisasian susunan barang di keranjang lebih mudah dilakukan, yaitu menghapus, mengubah, dan menghitung jumlah barang. Jadi, kita menulis fungsi itu sendiri: /** * parameter: * $product_id – pengenal produk * $count – jumlah produk yang akan ditambahkan, default 1, */ function add_to_cart($product_id, $count=1)) ( / /periksa apakah produk sudah ditambahkan ke keranjang sebelumnya: if (!empty($_SESSION["products"][$product_id]) ( //tambah kuantitas sebanyak satu jika produk sudah ditambahkan: $_SESSION[" produk"][$product_id][ "count"]++; ) else ( //buat array kosong, untuk berjaga-jaga, Anda dapat melakukannya tanpanya. $_SESSION["products"][$product_id]=array() ; //mengambil harga produk dari database: $q=”PILIH harga FROM product_table WHERE id="$product_id"”; //memisahkan hasil query ke dalam array: $add_product=mysql_fetch_assoc(mysql_query($q) ); //tambahkan produk ke keranjang: $_SESSION["products" ][$product_id]["cost"]=$add_product["price"]; $_SESSION["products"][$product_id]["count "]=$count; ) /* call berfungsi untuk menghitung biaya keranjang dan jumlah barang. Disini saya akan melakukan perubahan lagi, kita tidak akan menghitung jumlah barang yang ada di keranjang, melainkan jumlah barang itu sendiri, yaitu jika di keranjang ada 5 unit barang 1, dan 2 unit barang 2, maka yang ada di keranjang ada 2 unit, bukan 7. Dan satu lagi, sebaiknya gabungkan perhitungan jumlah keranjang dan jumlahnya item di dalamnya menjadi satu fungsi: update_cart() */ update_cart(); ) Fungsi untuk menambahkan item ke troli sudah siap.

  • Fungsi update_cart() akan menghitung biaya keranjang dan jumlah produk di dalamnya: function update_cart() ( //kita menghitung jumlah produk dalam keranjang sebagai jumlah elemen dalam //$_SESSION["products "] array menggunakan fungsi standar PHP count(): $ _SESSION["products_incart"]=count($_SESSION["products"]); //reset biaya terlebih dahulu: $_SESSION["cart_cost"]=0; // biaya keranjang (kalikan harga dengan kuantitas dan tambahkan): foreach ($ _SESSION["products"] sebagai $key=>$value) ( ​​​​$_SESSION["cart_cost"]+=$_SESSION["products"][$key ]["biaya"]* $_SESSION["produk"][$ kunci]["hitungan"]; ) )
  • Fungsi yang akan mengubah jumlah barang di keranjang: /** * mengambil parameter yang sama dengan fungsi add_to_cart() */ function update_product_count($product_id, $count) ( $_SESSION["products"][$product_id] [" count"]=$count; //panggil update_cart() untuk menghitung ulang biaya. update_cart(); )
  • Nah, hal terakhir yang kita perlukan adalah menghapus produk dari keranjang: function delete_from_cart($product_id) ( unset($_SESSION["products"][$product_id]); update_cart(); )

    • Itu saja, fungsi untuk bekerja dengan troli sudah siap, yang tersisa hanyalah menampilkan daftar produk di halaman dan membuat tombol “Tambahkan ke troli”. Yang terbaik adalah menempatkan fungsi yang disajikan dalam satu file, misalnya cart.php, dan menghubungkannya dengan pernyataan include. Perlu disebutkan bahwa saya memperkenalkan variabel $count tambahan dalam fungsi add_to_cart() jika Anda ingin pengguna menentukan jumlah item saat mengklik tombol tambahkan ke keranjang, dan bukan di antarmuka keranjang. Selanjutnya, saya tidak akan meneruskan nilai variabel ini, tetapi akan menggunakan nilai default, yaitu 1. Pada artikel berikutnya kita akan membuat hal utama - fungsi JavaScript untuk bekerja dengan troli.

    Dari penulis: jika Anda perlu meningkatkan rata-rata cek di toko online, maka salah satu solusi paling sederhana dan logis yang terlintas dalam pikiran adalah dengan membuat keranjang belanja online untuk pembeli. Dengan bantuannya, seseorang tidak hanya dapat membeli satu produk, tetapi beberapa produk sekaligus. Solusinya terkesan sepele, namun masih banyak pengusaha yang belum mengambil keputusan. Baca artikel ini jika Anda ingin mempelajari cara membuat keranjang belanja di website toko online dengan cepat dan benar.

    Di toko biasa yang kurang lebih besar, pengunjung di pintu masuk ditawari wadah khusus tempat ia dapat menaruh pembeliannya. Kembali ke abad kedua puluh. Solusi ini diperkenalkan kepada pelanggan tidak hanya untuk memudahkan transfer barang, tetapi juga untuk mendorong mereka melakukan pembelian sebanyak mungkin. Apakah Anda setuju bahwa pergi ke toko, mengambil keranjang dan membawa sebungkus kecil keripik di dalamnya adalah hal yang bodoh? Pastikan untuk menambahkan sesuatu untuk mencucinya, dengan satu atau lain cara.

    Keranjang belanja di toko online bekerja dengan cara yang hampir sama. Ini sangat menyederhanakan proses pembelian beberapa item produk dan meningkatkan tagihan rata-rata. Tentu saja, faktor “tekanan” terhadap pembeli jauh lebih rendah dibandingkan dengan titik offline karena tidak adanya kebutuhan fisik untuk membawa barang dan berjalan dengan kontainer kosong di depan orang lain, namun hal tersebut tetap ada.

    Apakah Anda baru mulai membuat proyek online? Maka lebih baik memulainya. Sudah kurang lebih sudah tahu banyak tentang topik ini? Kemudian kita langsung melanjutkan pembuatan keranjang belanja web untuk situs tersebut.

    Petunjuk langkah demi langkah untuk membuat keranjang belanja

    Ada versi keranjang belanja yang berbeda, namun kami akan mempertimbangkan pengembangan modul klasik untuk toko online, yang dibuat berdasarkan PHP. Biasanya, itu ditempatkan di tempat yang menonjol - di header situs di sudut kanan atas. Keranjang kecil adalah semacam indikator yang menunjukkan berapa banyak barang yang akan Anda beli dan berapa jumlahnya.

    Jadi, petunjuk langkah demi langkah tentang cara membuat keranjang belanja untuk toko online:

    1. Buka file bernama header.php. Itu terletak di folder root situs Anda. Selanjutnya, masukkan nilai dasar keranjang masa depan kita ke dalam tata letak:

    Item dalam keranjang: pcs.
    Periksa

    < div class = "smalcart" >

    < strong >Item dalam keranjang:< / strong >komputer.

    < br / > < a href = "" >Periksa< / a >

    < / div >

    Dalam hal ini, isi array $smal_cart digunakan. Ini akan tersedia di template toko online utama nanti. Untuk melakukan ini, Anda perlu melakukan sejumlah tindakan tertentu.

    2. Untuk membuat keranjang memiliki tampilan yang sederhana dan harmonis, tambahkan gaya berikut ke file style.css:

    #header .smalcart ( float: kanan; tinggi: 55px; padding: 10px; padding-kiri: 15px; margin: 10px; batas: 1px abu-abu solid; radius-batas: 10px; -moz-border-radius: 10px; -webkit -radius batas: 10 piksel; latar belakang: #E6DEEA; )

    #header .smalcart (

    mengapung: benar;

    tinggi: 55 piksel;

    bantalan: 10 piksel;

    bantalan - kiri : 15 piksel;

    margin: 10 piksel;

    batas : 1px abu-abu solid;

    batas - radius : 10 piksel;

    Moz - batas - radius : 10 piksel;

    Webkit - batas - radius : 10 piksel;

    latar belakang : #E6DEEA;

    Setelah ini, Anda sudah bisa melihat perubahan visual pada tampilan toko online tersebut.

    3. Sekarang kita perlu mempelajari lebih dalam struktur sistem keranjang. Karena modul cart bukan halaman terpisah, tidak perlu membuat pengontrol tambahan untuknya. Tampilannya sudah ditampilkan di template, jadi kami tidak mengembangkan tampilan. Mari kita batasi diri kita hanya dengan mengerjakan parameter model.

    Untuk melakukan ini, buka folder aplikasi, lalu ke model. Setelah itu, buat file bernama cart.php. Tambahkan konten berikut ke dalamnya:

    kelas Application_Models_Cart ( fungsi addToCard($id, $count=1) ( $_SESSION['cart'][$id]=$_SESSION["cart"][$id]+$count;return true; ) fungsi delFromCart($ id, $count=1)() fungsi clearCart()() )

    kelas Aplikasi_Model_Keranjang

    fungsi addToCard($id, $hitung=1)

    $_SESSION['keranjang'][$id] = $_SESSION["keranjang"][$id] + $hitung; kembali benar;

    fungsi delFromCart($id, $hitung=1) ()

    fungsi clearCart() ( )

    Model ini memungkinkan Anda memperbarui data yang terdapat dalam konten modul cart. Untuk saat ini, fungsi penambahan produk saja sudah cukup, namun kedepannya perlu dikembangkan antarmuka khusus sehingga memungkinkan untuk menghapus produk tertentu atau mengosongkan seluruh keranjang.

    Informasi tentang item di keranjang akan dimuat dalam array $_SESSION. Ini adalah array asosiatif yang kuncinya adalah ID produk dan nilainya adalah jumlah produk yang ditambahkan ke keranjang. Strategi minimalis akan menyederhanakan proses transfer informasi ke cookie.

    Jadi, kami menerima database Application_Models_Cart yang sudah jadi. Sekarang Anda perlu mengaktifkannya.

    4. Sebelum itu, mari kita lakukan perubahan juga pada atribut href agar modul berfungsi lebih baik: