Shopping cart di dalam web digunankan  katalog produk untuk menampilkan produk yang tersedia. Katalog ini dapat menggunakan berbagai desain UI seperti galeri. Dalam artikel Cara Membuat shopping Cart dengan tampilan Bootstrap Tooltip ini, kita akan menambahkan opsi Tampilan Cepat untuk produk dengan menggunakan Tooltip Bootstrap. Menerapkan Tooltip Bootstrap akan sangat sederhana. Dalam contoh ini, galeri produk untuk aplikasi eCommerce akan ditampilkan dilanding page. Di galeri, setiap gambar produk akan diplot dengan opsi Tampilan Cepat. Saat hover elemen, keterangan tooltip akan ditampilkan dengan informasi produk yang sesuai. Pada event mouseover, data produk akan diambil melalui AJAX dan dimuat secara dinamis ke dalam keterangan tooltip.

Opsi Tampilan Cepat Produk Keranjang Belanja

Ini adalah kode HTML untuk menampilkan galeri produk untuk aplikasi keranjang belanja dengan opsi tampilan cepat. Tampilan galeri dibuat dalam satu lingkaran dengan mengulangi hasil produk. Pada setiap iterasi. ini menciptakan ruang produk dengan elemen tombol “Tampilan Cepat”. Bagian head berisi library jQuery dan BootStrap yang diperlukan. Tooltip BootStrap membutuhkan library jQuery UI untuk bekerja . Saya telah menambahkan atribut class ke elemen tombol quick look. Ini akan digunakan sebagai referensi untuk menginisialisasi keteranganTooltip Bootstrap.

BootStrap ToolTip Inisialisasi untuk Memuat Detail Produk

Dengan menggunakan tooltip Bootstrap, kita dapat mengontrol arah di mana elemen tooltip harus menjadi popover. Saat menginisialisasi tooltip, kita dapat menentukan spesifikasi kiri, kanan, atas, bawah ke opsi penempatan tooltip.

Di skrip inisialisasi, saya telah menetapkan nama fungsi getProduct () ke opsi judul. Maka fungsi ini akan dipanggil saat hover tombol Quick Look. Dalam fungsi ini, panggilan AJAX jquery dikirim untuk kode PHP untuk mengambil detail produk. Hasil database produk diambil oleh id yang diteruskan sebagai parameter permintaan AJAX.

Kode PHP untuk Mendapatkan Detail Produk di Tooltip

Saya telah menampilkan gambar-gambar produk mouseover menggunakan echo di php. Gambar mouseover akan diambil dari database dengan menggunakan metode GET di php. Jendela tooltip akan menampilkan gambar dengan harga produk, yang diambil dari database Mysql.

 

Berikut screenshoot dari hasil codingan di atas,

Cara Membuat shopping Cart dengan tampilan Bootstrap Tooltip

Oke itulah tadi pembahasan saya tentang Cara Membuat shopping Cart dengan tampilan Bootstrap Tooltip semoga bermanfaat.