PHP
Bootstrap eCommerce Daftar Produk yang Baru Dilihat Carousel
Jun
oleh Vincy. Terakhir diubah pada 30 Mei 2021.
Di situs web eCommerce, menampilkan produk merupakan bagian integral dari memposisikan toko kepada pelanggan.
Carousel adalah komponen UI berputar yang membantu menampilkan sejumlah item yang bervariasi. Jika digunakan dengan cara yang benar, ini adalah salah satu aspek terbaik yang akan meningkatkan UI/UX.
Bootstrap adalah komponen front-end yang tak tertandingi untuk mendesain UI aplikasi. Ada banyak perpustakaan Bootstrap yang menyediakan template UI eCommerce dan blok bangunan UI. Ini akan membantu Anda membangun dan meluncurkan situs web eCommerce Anda dengan cepat.
Bagian produk yang baru-baru ini dilihat juga merupakan salah satu blok bangunan eCommerce. Artikel ini menjelaskan cara membuat template eCommerce Bootstrap untuk menampilkan produk yang baru dilihat di toko online.
Lihat Demo
Apa yang ada di dalam?
- Pustaka bootstrap untuk membuat carousel produk eCommerce
- Tentang contoh ini
- Struktur file
- Buat UI untuk menampilkan carousel produk eCommerce
- Ambil produk yang baru dilihat menggunakan PHP MySQL
- Skrip basis data
- Output – carousel produk eCommerce di Bootstrap
Pustaka bootstrap untuk membuat carousel produk eCommerce
Ada perpustakaan Boostrap populer yang tersedia untuk membuat carousel produk eCommerce.
Misalnya, perpustakaan OwlCarousel untuk membangun korsel multi-item.
Saya menggunakan perpustakaan ini untuk membuat carousel produk eCommerce yang baru-baru ini dilihat menggunakan Bootstrap.
Tentang contoh ini
Carousel adalah komponen UI luar biasa yang dapat meningkatkan tampilan dan nuansa aplikasi Anda. Muncul dengan inti dari banyak kerangka kerja front-end seperti Bootstrap.
Contoh ini memiliki kode untuk membuat bagian produk yang baru dilihat di aplikasi perangkat lunak eCommerce.
Item yang baru dilihat bersifat dinamis dan berasal dari database. Basis data memiliki tabel pemetaan yang memetakan id produk yang baru saja dilihat dengan anggota.
Saya menggunakan MySQLi dengan pernyataan yang disiapkan untuk melakukan operasi database.
Laman landas menampilkan carousel produk dengan ikon navigasi sebelumnya-berikutnya.
Ini menggunakan perpustakaan Bootstrap berbasis jQuery untuk menampilkan carousel produk di UI. Ini membantu untuk bergerak maju mundur dan mengulang data produk.
Dalam tutorial sebelumnya, kita telah melihat cara membuat template kategori- subkategori Bootstrap eCommerce.
Struktur file
Gambar di bawah ini menunjukkan struktur hierarki file yang dibuat untuk contoh ini.
Ini menampilkan node_modules yang memiliki dependensi dari kode contoh ini.
Itu data folder memiliki contoh gambar produk yang digunakan untuk ditampilkan di ubin produk. Jalur gambar ini ditambahkan ke baris produk dalam database.
Itu database.sql file memiliki skrip database untuk membuat produk dan tabel pemetaan.
Buat UI untuk menampilkan carousel produk eCommerce
Bagian ini menampilkan bagian HTML dari file arahan index.php.
HTML ini memiliki komponen UI aplikasi eCommerce untuk menampilkan ubin produk dalam tampilan carousel.
Ini memuat hasil produk dinamis ke dalam template HTML ini. Hasil ini berasal dari database.
Laman landas memanggil kelas model aplikasi untuk mengambil hasil sebelum memuat template ini.
Kode ini mengimpor aset perpustakaan dependen dari simpul_modul. Ini membantu untuk memulai penangan pustaka Bootstrap untuk membuat korsel produk.
index.php(template HTML)
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="https://phppot.com/php/bootstrap-ecommerce-recently-viewed-products-list-carousel/node_modules/owl.carousel/dist/assets/owl.carousel.min.css" />
<link rel="stylesheet"
href="node_modules/owl.carousel/docs/assets/css/docs.theme.min.css" />
<link rel="stylesheet" href="assets/css/style.css" />
<title>eCommerce Product Carousel</title>
</head>
<body>
<div class="container">
<h3 class="viewed_title">Recently Viewed Products</h3>
<div class="owl-carousel owl-theme">
<?php
if (! empty($result)) {
foreach ($result as $k => $v) {
?>
<div>
<div class="text-center">
<img class="cart-image"
src="<?php echo $result[$k]["image_path"];?>">
</div>
<div class="text-center price-text">
<strong><?php echo $result[$k]["product_price"];?></strong>
</div>
<div class="text-center"><?php echo $result[$k]["product_name"];?></div>
</div>
<?php
}
}
?>
Mulai perpustakaan Bootstrap untuk menampilkan korsel
Korsel produk yang baru dilihat adalah wadah yang diidentifikasi dengan atribut kelas. Dengan referensi nama kelas, skrip di bawah ini memulai pustaka carousel.
Ini menetapkan properti selama inisiasi untuk menentukan perilaku animasi carousel produk.
Berdasarkan definisi, item carousel adalah loop melalui hasil dinamis. Ini memungkinkan navigasi sebelumnya dan berikutnya.
Selain itu, carousel produk yang baru-baru ini dilihat responsif untuk berbagai ukuran jendela.
index.php (kode PHP untuk mengambil hasil database)
<script src="https://phppot.com/php/bootstrap-ecommerce-recently-viewed-products-list-carousel/node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/owl.carousel/dist/owl.carousel.min.js"></script>
<script>
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
nav:true,
dots:false,
responsive:
{
0:{items:1},
575:{items:2},
768:{items:3}
}
});
$(".owl-prev").attr("title","Previous");
$(".owl-next").attr("title","Next");
});
</script>
Ambil produk yang baru dilihat menggunakan PHP MySQL
Ini adalah bagian dari kode halaman arahan yang mengambil data dari database.
Ini membuat model produk dan memanggil product getMostViewedProduct() fungsi. Fungsi ini mengembalikan produk yang baru dilihat sehubungan dengan id anggota yang sesuai.
ID anggota di-hardcode dalam kode PHP ini seperti di bawah ini. Ini adalah tempat untuk memasang modul otentikasi aplikasi untuk mendapatkan id anggota yang masuk. Jika Anda menginginkan kode untuk skrip login dengan sesi PHP, artikel tertaut memilikinya.
index.php (kode PHP untuk mengambil hasil database)
<?php use PhppotProduct; $memberId = "1"; // MemberId hardcoded require_once __DIR__ . "/Model/Product.php"; $productModel = new Product(); $result = $productModel->getMostViewedProduct($memberId); ?>
Kelas model PHP ini dibuat untuk menyiapkan kueri untuk mengambil produk eCommerce yang baru dilihat dari database.
Ia menggunakan id anggota dan berdasarkan itu penangan kelas ini mengambil item terbaru.
Model/Produk.php
<?php
namespace Phppot;
class Product
{
private $ds;
function __construct()
{
require_once __DIR__ . './../lib/DataSource.php';
$this->ds = new DataSource();
}
function getMostViewedProduct($memberId)
{
$query = "SELECT * FROM tbl_most_viewed_product JOIN tbl_product ON tbl_most_viewed_product.product_id = tbl_product.id WHERE tbl_most_viewed_product.member_id=?";
$paramType="i";
$paramArray = array(
$memberId
);
$result = $this->ds->select($query, $paramType, $paramArray);
return $result;
}
}
Skrip basis data
Script ini untuk mengatur lingkungan database sebelum menjalankan contoh ini.
Ini memiliki pernyataan CREATE untuk tabel tbl_product dan tbl_most_viewed_product. Juga, itu termasuk produk sampel dan pemetaan item yang baru dilihat sehubungan dengan id anggota.
sql/database.sql
-- phpMyAdmin SQL Dump -- version 5.0.3 -- https://www.phpmyadmin.net/ -- -- Host: 127.0.0.1 -- Generation Time: Mar 10, 2021 at 11:50 AM -- Server version: 10.4.14-MariaDB -- PHP Version: 7.2.34 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; START TRANSACTION; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Database: `carousel-example` -- -- -------------------------------------------------------- -- -- Table structure for table `tbl_most_viewed_product` -- CREATE TABLE `tbl_most_viewed_product` ( `id` int(11) NOT NULL, `member_id` int(11) NOT NULL, `product_id` int(11) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; -- -- Dumping data for table `tbl_most_viewed_product` -- INSERT INTO `tbl_most_viewed_product` (`id`, `member_id`, `product_id`) VALUES (1, 1, 1), (2, 1, 2), (3, 1, 3), (4, 1, 5), (5, 1, 7), (6, 2, 9), (7, 2, 11); -- -------------------------------------------------------- -- -- Table structure for table `tbl_product` -- CREATE TABLE `tbl_product` ( `id` int(11) NOT NULL, `product_name` varchar(255) NOT NULL, `product_price` decimal(10,2) NOT NULL, `image_path` varchar(255) NOT NULL, `create_at` datetime NOT NULL DEFAULT current_timestamp() ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; -- -- Dumping data for table `tbl_product` -- INSERT INTO `tbl_product` (`id`, `product_name`, `product_price`, `image_path`, `create_at`) VALUES (1, 'Digital Camera', '55.99', 'data/camera.jpg', '2021-03-10 09:24:51'), (2, 'Sony Mobile', '33.99', 'data/sony.jpg', '2021-03-10 09:27:10'), (3, 'Wireless Mouse', '29.99', 'data/mouse.jpg', '2021-03-10 09:27:10'), (4, 'Wireless Headphones', '25.99', 'data/headphone.jpg', '2021-03-10 09:32:32'), (5, 'Samsung mobile', '19.99', 'data/samsung.jpg', '2021-03-10 09:32:32'), (6, 'Hp Laptop', '100.99', 'data/laptop.jpg', '2021-03-10 09:32:32'), (7, 'Dell Desktop', '65.99', 'data/desktop.jpg', '2021-03-10 09:32:32'), (8, 'Titan Watch', '15.99', 'data/watch.jpg', '2021-03-10 09:32:32'), (9, 'Vivo Mobile', '35.99', 'data/vivo.jpg', '2021-03-10 09:32:32'), (10, 'Power Bank', '35.99', 'data/power-bank.jpg', '2021-03-10 09:32:32'), (11, 'Oppo Mobile', '23.99', 'data/oppo.jpg', '2021-03-10 09:32:32'); -- -- Indexes for dumped tables -- -- -- Indexes for table `tbl_most_viewed_product` -- ALTER TABLE `tbl_most_viewed_product` ADD PRIMARY KEY (`id`); -- -- Indexes for table `tbl_product` -- ALTER TABLE `tbl_product` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `tbl_most_viewed_product` -- ALTER TABLE `tbl_most_viewed_product` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=8; -- -- AUTO_INCREMENT for table `tbl_product` -- ALTER TABLE `tbl_product` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=12; COMMIT; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
Output – carousel produk eCommerce di Bootstrap
Tangkapan layar keluaran di bawah ini menunjukkan carousel produk Bootstrap eCommerce. Ini menunjukkan kontrol navigasi sebelumnya-berikutnya di sudut kanan atas tampilan carousel.
Blok UI eCommerce ini responsif berdasarkan ukuran viewport. Ini membatasi jumlah item yang dapat dilihat pada satu waktu untuk area pandang yang sempit.
Kesimpulan
Jadi, kami telah membuat carousel eCommerce Bootstrap responsif dengan produk yang baru dilihat. Saya harap ini memberikan hasil minimal yang dapat diandalkan setidaknya untuk memulai.
Kami telah melihat cara memuat konten dinamis ke dalam blok UI carousel.
Contoh ini telah menyediakan kode sederhana dan bersih untuk menutupi logika backend untuk membaca produk yang baru dilihat dan banyak lagi.
Anda juga dapat mereplikasi tampilan carousel ini untuk berbagai tujuan seperti menampilkan kategori yang tersedia, best seller, dan lainnya.
Lihat Demo Unduh Demo
Kembali ke Atas
Source link
