Hallo sahabat Dumenity berjumpa lagi dalam tutorial kursuswebprogramming, pada tutorial kali ini kita akan belajar tentang Membuat Fungsi Zoom di Shopping Cart. Dalam banyak aplikasi perangkat lunak eCommerce, kita dapat melihat fitur untuk memperbesar gambar pratinjau produk. Fitur zooming akan membantu pengguna keranjang belanja untuk memiliki tampilan yang lebih baik dengan lebih dekat. Umumnya, fitur zooming ini akan disediakan pada halaman tampilan produk. Galeri produk keranjang belanja akan memiliki kontrol untuk melihat lebih detail dengan halaman produk. Di halaman tampilan produk, ini menunjukkan pratinjau gambar produk yang diperbesar / unggulan dengan lebih banyak detail produk. Saya telah mengaktifkan zoom pada saat melayang-layang di atas gambar produk.
Dalam contoh keranjang belanja PHP sederhana, saya cukup berlatih untuk menampilkan galeri produk dari database. Dalam contoh ini, saya telah memberikan tautan tampilan lebih banyak untuk membuka halaman tampilan produk dari galeri. Saya telah menggunakan plugin xZoom untuk menambahkan fitur zoom dengan pratinjau produk keranjang belanja. Saya telah menetapkan opsi zoom default dalam proses inisialisasi xZoom. Saya telah memanggil fungsi perpustakaan dengan referensi pemilih elemen pratinjau produk.
Galeri Produk dan Pratinjau Halaman HTML
Di bagian ini, saya telah menunjukkan kode HTML yang digunakan untuk menampilkan galeri produk dan halaman tampilan produk untuk keranjang belanja. Di galeri produk, setiap ubin produk memiliki tautan tampilan lebih banyak untuk mengalihkan pengguna ke halaman tampilan. Pada mengklik tautan ini, detail produk dengan gambar pratinjau akan ditampilkan pada jendela yang sama dengan mengganti konten galeri.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<div id="gridview"> <div class="heading">Membuat Fungsi Zoom di Shopping Cart</div> <?php $query = $db_handle->runQuery("SELECT * FROM tbl_products ORDER BY id ASC"); if (! empty($query)) { foreach ($query as $key => $value) { ?> <div class="image"> <img id="image<?php echo $key+1; ?>" src="<?php echo $query[$key]["product_image"] ; ?>" xoriginal=" <?php echo $query[$key]["product_image"] ; ?> " /> <button class="quick_look" data-id="<?php echo $query[$key]["id"] ; ?>">View More</button> </div> <?php } } ?> </div> <div id="demo-modal"></div> <script> $(".quick_look").on("click", function() { var product_id = $(this).data("id"); var options = { modal : true, height : $(window).height() - 20, width : "98%" }; $('#gridview').load('get-product-info.php?id=' + product_id); }); $(document).ready(function() { $(".image").hover(function() { $(this).children(".quick_look").show(); }, function() { $(this).children(".quick_look").hide(); }); }); </script> |
PHP Shopping Cart Product View dengan Fitur Zoom
Saat mengklik tombol Lihat Lainnya di ubin produk keranjang belanja, ID produk tertentu diteruskan ke PHP melalui AJAX. Callback AJAX akan menerima respons server untuk menampilkan konten halaman tampilan produk di browser. Di halaman tampilan produk, elemen gambar pratinjau produk ditentukan dengan sumber pratinjau dan URL sumber gambar asli. URL sumber gambar digunakan dalam tampilan diperbesar.
Untuk menjalankan fitur xZoom ini dalam aplikasi keranjang belanja Anda, unduh xZoom dan integrasikan. Di halaman tampilan produk, saya telah memuat file CSS dan JavaScript perpustakaan xZoom dan memanggil fungsi xzoom () dengan pengaturan zoom default. Saya telah mereferensikan ID elemen gambar pratinjau keranjang belanja saat melakukan inisialisasi properti xZoom. Jadi, dengan menggerakkan elemen pratinjau gambar, tampilan yang diperbesar akan ditampilkan di samping pratinjau produk kereta sebagai dikonfigurasi.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<link rel="stylesheet" href="component/payalord/xZoom/dist/xzoom.css"> <script src="component/payalord/xZoom/dist/xzoom.min.js"></script> <?php include 'DBController.php'; $db_handle = new DBController(); $query = $db_handle->runQuery("SELECT * FROM tbl_products WHERE id = " . $_GET["id"]); if (! empty($query)) { ?> <div id="product-view"> <div class="preview-image"> <img src="<?php echo $query[0]["product_image"] ; ?>" xoriginal=" <?php echo $query[0]["product_image"] ; ?> " /> </div> <div class="product-info"> <div class="product-title"> <?php echo $query[0]["name"] ; ?> </div> <ul> <?php for($i=1;$i<=5;$i++) { $selected = ""; if(!empty($query[0]["average_rating"]) && $i<=$query[0]["average_rating"]) { $selected = "selected"; } ?> <li class='<?php echo $selected; ?>'>★</li> <?php } ?> </ul> <div class="product-category"> <?php echo $query[0]["category"] ; ?> </div> <div> <?php echo $query[0]["price"] ; ?> USD </div> <div> <a href="index.php"><button class="btn-info">View Gallery</button></a> <button class="btn-info">Add to Cart</button> </div> </div> <?php } ?> </div> <script> zoom(); function zoom() { $(".preview-image img").xzoom({ // top, left, right, bottom, inside, lens, fullscreen, #ID position : 'right', // inside, fullscreen mposition : 'inside', // In the HTML structure, this option gives an ability to output xzoom element, to the end of the document body or relative to the parent element of main source image. rootOutput : true, // x/y offset /*Xoffset: 20, Yoffset: -45,*/ Xoffset : 0, Yoffset : 0, // Fade in effect, when zoom is opening. fadeIn : true, // Fade transition effect, when switching images by clicking on thumbnails. fadeTrans : true, // Fade out effect, when zoom is closing. fadeOut : false, // Smooth move effect of the big zoomed image in the zoom output window. // The higher value will make movement smoother. smoothZoomMove : 3, // Smooth move effect of lens. smoothLensMove : 1, // Smooth move effect of scale. smoothScale : 6, // From -1 to 1, that means -100% till 100% scale defaultScale : 0, // Scale on mouse scroll. scroll : true, // Tint color. Color must be provided in format like "#color". tint : false, // Tint opacity from 0 to 1. tintOpacity : 0.5, // Lens color. Color must be provided in format like "#color". lens : false, // Lens opacity from 0 to 1. lensOpacity : 0.5, // 'box', 'circle' lensShape : 'box', // Custom width of zoom window in pixels. //zoomWidth: '598', zoomWidth : '400', // Custom height of zoom window in pixels. zoomHeight : '300', // Class name for source "div" container. sourceClass : 'xzoom-sources', // Class name for loading "div" container that appear before zoom opens, when image is still loading. loadingClass : 'xzoom-loading', // Class name for lens "div". lensClass : 'xzoom-lens', // Class name for zoom window(div). zoomClass : 'xzoom-preview', // Class name that will be added to active thumbnail image. activeClass : 'xactive', // With this option you can make a selection action on thumbnail by hover mouse point on it. hover : false, // Adaptive functionality. adaptive : false, // When selected position "inside" and this option is set to true, the lens direction of moving will be reversed. lensReverse : false, // Same as lensReverse, but only available when adaptive is true. adaptiveReverse : false, // Output title/caption of the image, in the zoom output window. title : false, // Class name for caption "div" container. titleClass : 'xzoom-caption', // Zoom image output as background bg : false }); } </script> |
Zoom-In Screenshot untuk Gambar Produk di Keranjang Belanja PHP
Screenshot ini menunjukkan efek diperbesar pada gambar pratinjau produk keranjang belanja di halaman tampilan.
Oke itulah tadi pembahasan saya tentang Membuat Fungsi Zoom di Shopping Cart, semoga bermanfaat.