Kartu Bootstrap untuk Galeri eCommerce Keranjang Belanja

oleh Vincy. Terakhir diubah pada 1 Agustus 2021.

Kartu bootstrap adalah elemen desain yang memahami lebih banyak data di area kecil. Desain kartu akan sangat menghemat real estat layar dan memperkaya UI.

Bootstrap adalah salah satu kerangka kerja terbaik yang membantu membangun komponen desain UI situs web.

Berbagai macam desain kartu Bootstrap telah kita lihat di artikel sebelumnya. Kami melihat jenis komponen anak dari elemen kartu yang disediakan oleh Bootstrap.

Pada artikel ini, kita akan menggunakan kartu Bootstrap untuk mendesain galeri produk keranjang belanja. Situs web eCommerce adalah sistem yang besar dan kompleks. Dalam hal itu, menggunakan Bootstrap untuk desain akan menghemat banyak waktu dan tenaga.

Galeri produk keranjang belanja

Kami telah melihat betapa pentingnya halaman galeri di situs web eCommerce. Galeri keranjang belanja memiliki desain UI sederhana hingga kompleks berdasarkan situs web eCommerce yang Anda buat.

Merancang galeri keranjang dari awal dengan CSS dan HTML adalah pekerjaan yang memakan waktu. Selain itu, ada beberapa tantangan yang harus dihadapi. Misalnya, desain responsif, interaksi pengguna, dan lainnya.

Alih-alih itu, kerangka font-end seperti Bootstrap memberikan komponen situs web siap pakai untuk mengatasi tantangan. Contoh: Kartu bootstrap. Ini adalah komponen yang bagus dan cocok untuk mendesain galeri situs web eCommerce.

Tentang contoh kartu Bootstrap untuk galeri keranjang belanja

Contoh ini menggunakan kartu Bootstrap di galeri keranjang belanja. Setiap kartu menyertakan komponen seperti badan kartu, footer kartu, dan kartu-img-top untuk menampilkan produk.

Kartu produk dapat dibagi menjadi tiga bagian.

  1. Pratinjau foto produk.
  2. Badan kartu dengan judul produk, deskripsi dan harga
  3. Footer kartu untuk menampilkan peringkat produk keranjang belanja dengan opsi add-to-cart.

Produk galeri eCommerce dinamis dari database. Tabel database mencakup jumlah peringkat yang ditambahkan ke detail produk. Hal ini untuk tujuan pengambilan mudah untuk memfasilitasi pengembang. Anda juga dapat menautkan tabel eksternal yang berisi peringkat produk.

Klik tombol add-to-cart memanggil JavaScript dan menangani acara tersebut.

Galeri keranjang belanja HTML dengan elemen kartu Bootstrap

Kode HTML ini menunjukkan wadah kartu Bootstrap untuk menampilkan ubin produk tunggal. Itu ada dalam enklosur loop PHP untuk memuat produk dinamis ke dalam ubin yang dirender.

Di bawah HTML berisi data statis untuk menampilkan judul dan deskripsi kartu. Jika Anda hanya ingin mendapatkan HTML kartu Bootstrap, salin kode dan ganti data statis.

Ini menampilkan pratinjau gambar di atas detail produk pada setiap kartu. Ini berisi bagian footer pada setiap kartu produk.

Footer menampilkan peringkat bintang dan opsi tambahkan ke troli di galeri. Ini menggunakan Bootstrap Glyphicon untuk menampilkan peringkat bintang 5.


<div class="card mb-2">
    <img src="https://phppot.com/php/bootstrap-cards-shopping-cart/./data/camera.jpg" class="card-img-top">
    <div class="card-body">
        <h5 class="card-title">Canon EOS 1500D</h5>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur
            adipiscing exercitationem elit.</p>
        <div class="mb-2">
            <span class="font-bold"><strong>$99.00</strong></span>
        </div>
        <div class="card-footer">
            <div class="row">
                <div class="col-md-6 mb-2">
                    <span class="align-middle glyphicon glyphicon-star"
                        aria-hidden="true"></span> <span
                        class="align-middle glyphicon glyphicon-star"
                        aria-hidden="true"></span> <span
                        class="align-middle glyphicon glyphicon-star"
                        aria-hidden="true"></span> <span
                        class="align-middle glyphicon glyphicon-star"
                        aria-hidden="true"></span> <span
                        class="align-middle glyphicon glyphicon-star-empty"
                        aria-hidden="true"></span>
                </div>
                <div class="col-md-6">
                    <button type="button"
                        class="btn btn-primary btn-sm btn-block"
                        id="addToCart-1" onclick="addToCart(1)">
                        <span class="glyphicon glyphicon-shopping-cart"
                            aria-hidden="true"></span> ADD TO CART
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
   

Kartu dengan pegangan add-to-cart

HTML di atas menyertakan tombol add-to-cart interaktif di ubin produk. Saat mengklik tombol ini, UI akan memberi tahu pengguna bahwa produk telah ditambahkan ke keranjang. Juga, ini menonaktifkan tombol yang diklik untuk mencegah beberapa pengiriman ke troli.

JavaScript di bawah ini cukup melakukan ini di tingkat UI untuk memberi tahu pengguna akhir. Ini adalah tempat di mana kita dapat menyematkan AJAX untuk menambahkan item ke sesi keranjang.

assets/js/card.js


function addToCart(id) {
	var addToCartButton = document.getElementById("addToCart-" + id);
	document.getElementById("addToCart-" + id).innerHTML = "";
	document.getElementById("addToCart-" + id).innerHTML = "Added";
	document.getElementById("addToCart-" + id).disabled = true;
}
   

Muat kartu dengan produk dinamis menggunakan PHP MySQL

Bagian ini sebagian besar memiliki bagian dinamis dari contoh keranjang belanja ini. Ini termasuk potongan .sql, Model dan PHP yang digunakan untuk memuat produk ke UI kartu Bootstrap.

Skrip basis data

Impor skrip ini ke dalam database untuk menampilkan produk dinamis. Konfigurasikan detail database di lib/DataSource.php sebelum menjalankan contoh keranjang belanja ini.

Ini berisi dump data dengan judul produk, harga, gambar dan lain-lain.


--
-- Table structure for table `tbl_product`
--

CREATE TABLE `tbl_product` (
  `id` int(11) NOT NULL,
  `title` varchar(255) NOT NULL,
  `description` varchar(255) NOT NULL,
  `currency_symbol` varchar(25) NOT NULL,
  `price` decimal(10,2) NOT NULL,
  `image_path` varchar(255) NOT NULL,
  `rating` double NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Dumping data for table `tbl_product`
--

INSERT INTO `tbl_product` (`id`, `title`, `description`, `currency_symbol`, `price`, `image_path`, `rating`) VALUES
(1, 'Canon EOS 1500D 24.1', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', '$', '99.00', "https://phppot.com/php/bootstrap-cards-shopping-cart/./data/camera.jpg", 5),
(2, 'iPhone 12 Pro Max', 'Duis aute irure dolor in reprehenderit fugiat nulla pariatur.', '$', '159.00', './data/mobile.jpg', 4),
(3, 'MLA22HN/A Wireless Keyboard', 'Sed do eiusmod tempor incididunt et dolore magna aliqua.', '$', '79.00', './data/keyboard.jpg', 4),
(4, '21.5‑inch iMac', 'Sunt in culpa qui officia deserunt mollit anim id est laborum.', '$', '199.00', './data/computer.jpg', 3),
(5, 'Pro Audio X240', 'Excepteur sint occaecat perspiciatis unde cupidatat non proident.', '$', '19.00', './data/headset.jpg', 2),
(6, 'Micro USB 55', 'Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.', '$', '9.00', './data/usb-cable.jpg', 3);



Skrip PHP untuk mengambil produk

Kode PHP ini mengimpor model yang diperlukan dan mengambil produk dinamis ke dalam array. PHP untuk setiap loop mengulangi array untuk menampilkan produk dalam kartu Bootstrap.

index.php


<?php
require_once __DIR__ . '/lib/Product.php';
$productModel = new Product();
$productResult = $productModel->getAllProduct();
?>
<?php
if (! empty($productResult)) {
    $productArray = array_chunk($productResult, 3);
    $i = 1;
    foreach ($productArray as $column) {
        ?>
<div class="row mb-5">
        <?php
        foreach ($column as $k => $v) {
            ?>
            <!--  Display product tile in a Bootstrap card -->
            <?php
        }
        ?>
        </div>
<?php
        $i ++;
    }
}
?>
   

PHP Peringkat bintang 5 dengan bintang terisi

Loop PHP menampilkan peringkat bintang 5 dinamis di footer kartu Bootstrap. Hitungan peringkat awal disimpan dalam database produk.


<?php
for ($a = 1; $a <= 5; $a ++) {
    $ratingClass = "glyphicon-star-empty";
    if ($column[$k]["rating"] >= $a) {
        $ratingClass = "glyphicon-star";
    }
    ?>
<span class="align-middle glyphicon <?php echo $ratingClass;?>"
	aria-hidden="true"></span>
<?php
}
?>

File perpustakaan aplikasi untuk menanyakan database

NS Produk model menghubungkan database pada saat instantiasi. Ini mengatur objek koneksi di konstruktornya.

Objek koleksi memiliki visibilitas di seluruh kelas. NS dapatkanSemuaProduk() fungsi menyiapkan kueri langsung untuk mengambil produk.

lib/Product.php


<?php
use PhppotDataSource;

class Product
{

    private $ds;

    function __construct()
    {
        require_once __DIR__ . '/DataSource.php';
        $this->ds = new DataSource();
    }

    function getAllProduct()
    {
        $sql = "SELECT * FROM tbl_product";
        $result = $this->ds->select($sql);
        return $result;
    }
}
   

Cara menggunakan kartu Bootstrap di situs web eCommerce

Ada berbagai template yang tersedia secara online untuk membuat galeri keranjang belanja. Template tersebut menunjukkan kartu produk dalam banyak cara.

  • Produk dengan gambar.
  • Barang digital tanpa pratinjau atau foto.
  • Kartu teks dengan informasi minimal.
  • Thumbnail yang dapat diklik menampilkan konten saat diarahkan.
  • Opsi tambahkan ke troli di galeri.

Semua persyaratan desain di atas dapat dipenuhi dengan kartu Bootstrap. Selain itu, ini menyederhanakan upaya desain untuk membangun situs web eCommerce.

Lihat kode yang menyediakan blok desain untuk UI situs web keranjang belanja.

Jenis konten kartu bootstrap dan antarmuka galeri keranjang belanja

Beberapa tipe konten kartu Bootstrap yang populer ditunjukkan di bawah ini. Ini menjelaskan bagaimana menggunakannya dalam membangun antarmuka galeri keranjang belanja.

kartu-header, kartu-footer

Komponen kartu Bootstrap ini membantu menandai data di ubin produk keranjang belanja. Misalnya, header akan menandai produk sebagai ‘*Penjualan terbaik’. Dan footer akan memberikan data penjual dari mana pengguna dapat mengetahui nilai merek.

kelompok kartu

Untuk menampilkan kartu yang terhubung dalam penggeser horizontal. Ini akan membantu untuk menampilkan daftar keinginan keranjang belanja atau item populer di antara database.

kartu-overlay

Komponen overlay kartu Bootstrap akan menampilkan konten di atas tampilan. Ini membantu melihat tampilan cepat produk dalam dialog. Ini menghemat waktu pengguna dari menavigasi ke halaman berikutnya menampilkan tampilan produk.

Lebih banyak navigasi dan pengalihan akan membuat putus sekolah. Menampilkan overlay dapat mengurangi gesekan selama alur pembelian.

kartu-img-atas, kartu-img, kartu-img-bawah

Ini menampilkan pratinjau gambar produk di ubin galeri. Galeri produk dengan gambar akan meningkatkan desain halaman lebih tinggi.

Kesimpulan

Jadi kita telah melihat cara menggunakan komponen kartu Bootstrap di galeri keranjang belanja.

Kode contoh memberikan template sederhana untuk galeri situs web eCommerce. Opsi add-to-cart interaktif menangani tindakan pengguna dalam JavaScript.

Kode PHP dinamis mengambil produk database untuk galeri keranjang. Anda dapat menggunakan kode ini di aplikasi Anda dengan menautkan database produk Anda.
Unduh

Kembali ke Atas