PHP

Halaman Subkategori Kategori Produk Bootstrap eCommerce dengan Filter dan Navigasi

Posted on by administrator
09
Jun
0
(0)

oleh Vincy. Terakhir diubah pada 10 Maret 2021.

Jangan meremehkan keberadaan halaman kategori di situs web eCommerce Anda. Ini akan membantu meningkatkan toko online Anda. Halaman kategori di situs web eCommerce menjelaskan klasifikasi produk toko online Anda.

Ada perpustakaan populer untuk membuat situs web eCommerce dengan menu navigasi kategori. Jika Anda sudah memiliki toko eCommerce, artikel ini akan membantu mengintegrasikan fungsi navigasi kategori.

Ini memperbesar potensi ketersediaan keranjang belanja, kepada pengguna. Ini adalah salah satu strategi pemasaran terbaik untuk memamerkan galeri kategori produk. Ini mengesankan pelanggan dan mengarah pada pertumbuhan impulsif dalam tingkat konversi.

Lihat Demo

Output Halaman Kategori Bootstrap eCommerce

Apa yang ada di dalam?

  1. Pentingnya halaman kategori dalam aplikasi eCommerce
  2. Tentang contoh ini
  3. Galeri kategori produk eCommerce Bootstrap dalam HTML
  4. skrip jQuery AJAX untuk memfilter kategori produk
  5. Kode PHP untuk menelusuri dan memfilter kategori berdasarkan kata kunci
  6. Layanan PHP menyiapkan permintaan dan mengeksekusi kueri
  7. Skrip basis data
  8. Output: subkategori produk eCommerce

Pentingnya halaman kategori di situs web eCommerce

Dalam artikel sebelumnya, kita telah melihat perlunya galeri produk di situs web eCommerce.

Dalam artikel ini, ia memberi tahu pentingnya halaman kategori produk eCommerce.

  1. Ini membantu untuk memeriksa berdasarkan produk eCommerce mana yang diklasifikasikan.
  2. Ini mengungkapkan variasi atau domain yang dicakup oleh aplikasi eCommerce.
  3. Halaman kategori dengan dukungan pencarian mempersempit hasil kategori di antara ketersediaan yang luas.
  4. Halaman kategori dengan navigasi yang tepat mengarah ke penelusuran kategori/produk yang mudah di aplikasi eCommerce.
  5. Ini akan menarik orang dengan menunjukkan klasifikasi luas produk Anda yang dijual secara online.

Tentang contoh ini

Situs web eCommerce mencakup produk rahasia. Ini memiliki berbagai kategori dan subkategori di mana klasifikasi produk dibuat.

Dalam hal memiliki basis data kategori produk yang besar, antarmuka harus membantu menelusuri kategori dengan mudah.

Contoh ini menunjukkan kategori dan subkategori produk dalam format galeri.

Ini berisi filter pencarian untuk menelusuri kategori produk. Itu juga mengambil subkategori dengan mengklik kategori utama. Kategori dan subkategori berasal dari database.

Ini menggunakan Bootstrap untuk mendesain UI untuk menampilkan galeri kategori produk. Ini menggunakan jQuery AJAX untuk mendapatkan subkategori berdasarkan kategori yang dipilih.

Gambar berikut menunjukkan struktur file yang dibuat untuk contoh subkategori situs web eCommerce ini.

Struktur File Kategori Produk eCommerce

Kode HTML ini menampilkan struktur galeri kategori dan subkategori produk situs web eCommerce menggunakan template Bootstrap.

Secara default, ini hanya menampilkan kategori induk dalam format galeri.

Saat mengklik ubin kategori induk, itu memanggil kode AJAX untuk mengambil daftar subkategori.

Subkategori ditampilkan dalam format galeri yang sama dengan kategori utama.

index.php

<html>
<head>
<title>Category-subcategory-gallery-with-search</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://phppot.com/php/bootstrap-ecommerce-product-category-subcategory-page-with-filter-and-navigation/./vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="./vendor/jquery/jquery.min.js" type="text/javascript"></script>
<script src="./vendor/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="h2 font-weight-bold mt-3">Product Category</div>
<form name="cards" id="cards" action="" method="get">
<div class="form-row mt-5 mt-4">
<div class="col-md-6 form-inline">
<label class="px-3">Name </label><input type="text"
class="form-control" name="category" id='category' value="<?php echo $keyword; ?>">
<input class="btn btn-secondary ml-2" type="submit" value="Search"
name="search">
</div>
</div>
<div>
<?php
if (! empty($categoryResult)) {
$categoryArray = array_chunk($categoryResult, 4);
$i = 1;
foreach ($categoryArray as $column) {
?><div class="form-row mb-3" id="category-row-<?php echo $i;?>">
<?php
foreach ($column as $k => $v) {
?>
<div class="col-md-3 mt-3 rounded"
id="cat-id-<?php echo $column[$k]["id"];?>"
onclick="showSubcategory('<?php echo $column[$k]["id"];?>','<?php echo $i;?>','<?php echo $column[$k]["category_name"];?>')">
<div class="text-center">
<img src="data/image-bird.jpg" class="img-thumbnail mt-4">
<div class="text-center font-weight-bold mt-3 mb-3"><?php echo $column[$k]["category_name"];?></div>
</div>
</div>
<?php
}
?>
<div class="form-row bg-light mt-3 w-100 subcategory-row d-none"></div>
</div>
<?php
$i ++;
}
}
?>
</div>
</form>
</div>
<script src="./assets/js/category.js"></script>
</body>
</html>

skrip jQuery AJAX untuk memfilter kategori produk

Kode JavaScript ini mendefinisikan tampilkanSubkategori() fungsi. Fungsi ini menerima id kategori induk yang dipilih.

Ini mengirimkan rincian kategori yang dipilih ke server. Di blok sukses, itu akan menerima HTML galeri subkategori sebagai respons dari server.

Saat memilih kategori utama, skrip jQuery akan menerapkan efek geser pada tampilan panel subkategori.

aset/kategori.js

function showSubcategory(id, row, categoryName) {
	$(".col-md-3").removeClass("border border-success");
	$(".subcategory-row").hide();
	$.ajax({
				url : "ajax/get-subcategory.php",
				type : "POST",
				data : "category-id=" + id +"&name=" + categoryName,
				success : function(response) {
					$("#cat-id-" + id).addClass("border border-success");
					$(".subcategory-row").removeClass("d-none");
					$(".subcategory-row").html("");
					var parent = $("#category-row-" + row);
				    parent.find(".subcategory-row").append(response);					
					parent.find(".subcategory-row").slideToggle();
					$("#closeWindow").on('click', function() {
						$("#cat-id-" + id).removeClass("border border-success");
								$(".subcategory-row").slideUp();
							});
				}
			});
}

Kode PHP untuk menelusuri dan memfilter kategori berdasarkan kata kunci

Di bagian ini, ini menunjukkan skrip PHP untuk memfilter kategori berdasarkan kata kunci yang dimasukkan. Skrip ini akan berada di awal halaman arahan.

index.php (Pencarian kategori berdasarkan kata kunci)

<?php
use PhppotCategory;

require_once __DIR__ . '/Model/Category.php';
$categoryModel = new Category();
$keyword = "";
if (! empty($_GET["category"])) {
    $keyword = $_GET["category"];
    $categoryResult = $categoryModel->getCategoryByName($keyword);
} else {
    $categoryResult = $categoryModel->getAllCategory();
}
?>

Ini adalah titik akhir AJAX yang dipanggil untuk memilih ubin kategori utama. Itu membangun galeri subkategori dalam format HTML.

Format ini dicetak di titik akhir ini dan dikirim sebagai respons AJAX.

ajax/get-subcategory.php

<?php
use PhppotCategory;

if (! empty($_POST["category-id"])) {
    require_once __DIR__ . '/../Model/Category.php';
    $categoryModel = new Category();
    $subcategoryResult = $categoryModel->getAllSubcategory($_POST["category-id"]);
    $html="<div class="h5 font-weight-bold w-75 px-3 p-2">" . $_POST["name"] . ' > Subcategories</div><div class="w-25 text-right px-3 p-2 close" id="closeWindow">X</div>';
    if (! empty($subcategoryResult)) {
        foreach ($subcategoryResult as $k => $v) {
            $html .= "<div class="col-md-3"><div class="text-center"><img src="" . $subcategoryResult[$k]["image_path"] . "" id='" . $subcategoryResult[$k]["id"] . "' class="rounded mt-3"><div class="text-center font-weight-bold mt-3 mb-3">" . $subcategoryResult[$k]["sub_category_name"] . "</div></div></div>";
        }
    }
    print($html);
    exit();
}

Kelas PHP menyiapkan permintaan dan menjalankan kueri

Ini Kategori model memiliki fungsi PHP untuk membaca kategori dari database.

Itu getCategoryByName() metode menambahkan kondisi dengan kata kunci pencarian yang dimasukkan. Kondisi ini opsional dan tersedia jika dan hanya jika pengguna menggunakan kotak pencarian.

Itu getSemuaSubkategori() metode menerima id kategori induk yang dipilih sebagai parameternya. Berdasarkan ini, ia mengambil data dari database subkategori.

Model/Kategori.php

<?php
namespace Phppot;

class Category
{

    private $ds;

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

    function getAllSubcategory($categoryId)
    {
        $query = "SELECT * FROM tbl_sub_category WHERE category_id = ?";
        $paramType="i";
        $paramArray = array(
            $categoryId
        );
        $result = $this->ds->select($query, $paramType, $paramArray);
        return $result;
    }

    function getAllCategory()
    {
        $query = "SELECT * FROM tbl_category";
        $result = $this->ds->select($query);
        return $result;
    }

    function getCategoryByName($search)
    {
        $query = "SELECT * FROM tbl_category WHERE category_name LIKE  '%" . $search . "%'";
        $result = $this->ds->select($query);
        return $result;
    }
}

Ini adalah DataSource rutin yang saya buat untuk banyak contoh saya menggunakan database.

Ini menggunakan MySQLi dan pernyataan yang disiapkan untuk menjalankan operasi basis data.

Ini menghubungkan pernyataan kueri yang disiapkan dan mengikat params ke dalamnya.

lib/DataSource.php

<?php
namespace Phppot;

/**
 * Generic datasource class for handling DB operations.
 * Uses MySqli and PreparedStatements.
 *
 * @version 2.3
 */
class DataSource
{

    // PHP 7.1.0 visibility modifiers are allowed for class constants.
    // when using above 7.1.0, declare the below constants as private
    const HOST = 'localhost';

    const USERNAME = 'root';

    const PASSWORD = '';

    const DATABASENAME = 'category-example';

    private $conn;

    /**
     * PHP implicitly takes care of cleanup for default connection types.
     * So no need to worry about closing the connection.
     *
     * Singletons not required in PHP as there is no
     * concept of shared memory.
     * Every object lives only for a request.
     *
     * Keeping things simple and that works!
     */
    function __construct()
    {
        $this->conn = $this->getConnection();
    }

    /**
     * If connection object is needed use this method and get access to it.
     * Otherwise, use the below methods for insert / update / etc.
     *
     * @return mysqli
     */
    public function getConnection()
    {
        $conn = new mysqli(self::HOST, self::USERNAME, self::PASSWORD, self::DATABASENAME);

        if (mysqli_connect_errno()) {
            trigger_error("Problem with connecting to database.");
        }

        $conn->set_charset("utf8");
        return $conn;
    }

    /**
     * To get database results
     *
     * @param string $query
     * @param string $paramType
     * @param array $paramArray
     * @return array
     */
    public function select($query, $paramType = "", $paramArray = array())
    {
        $stmt = $this->conn->prepare($query);
        if (! empty($paramType) && ! empty($paramArray)) {
            $this->bindQueryParams($stmt, $paramType, $paramArray);
        }

        $stmt->execute();
        $result = $stmt->get_result();

        if ($result->num_rows > 0) {
            while ($row = $result->fetch_assoc()) {
                $resultset[] = $row;
            }
        }

        if (! empty($resultset)) {
            return $resultset;
        }
    }

    /**
     * To insert
     *
     * @param string $query
     * @param string $paramType
     * @param array $paramArray
     * @return int
     */

    /**
     * To execute query
     *
     * @param string $query
     * @param string $paramType
     * @param array $paramArray
     */
    public function execute($query, $paramType = "", $paramArray = array())
    {
        $stmt = $this->conn->prepare($query);

        if (! empty($paramType) && ! empty($paramArray)) {
            $this->bindQueryParams($stmt, $paramType = "", $paramArray = array());
        }
        $stmt->execute();
    }

    /**
     * 1.
     * Prepares parameter binding
     * 2. Bind prameters to the sql statement
     *
     * @param string $stmt
     * @param string $paramType
     * @param array $paramArray
     */
    public function bindQueryParams($stmt, $paramType, $paramArray = array())
    {
        $paramValueReference[] = & $paramType;
        for ($i = 0; $i < count($paramArray); $i ++) {
            $paramValueReference[] = & $paramArray[$i];
        }
        call_user_func_array(array(
            $stmt,
            'bind_param'
        ), $paramValueReference);
    }

    /**
     * To get database results
     *
     * @param string $query
     * @param string $paramType
     * @param array $paramArray
     * @return array
     */
    public function numRows($query, $paramType = "", $paramArray = array())
    {
        $stmt = $this->conn->prepare($query);

        if (! empty($paramType) && ! empty($paramArray)) {
            $this->bindQueryParams($stmt, $paramType, $paramArray);
        }

        $stmt->execute();
        $stmt->store_result();
        $recordCount = $stmt->num_rows;
        return $recordCount;
    }
}

Skrip basis data

Diagram EOD ini menunjukkan hubungan antara tabel tbl_category dan tbl_sub_category.

EOD basis data

Impor skrip database ini sebelum menjalankan contoh ini di server Anda.

Skrip ini menyertakan kueri INSERT untuk memuat data sampel untuk menjalankan contoh ini.

--
-- Database: `category-example`
--

-- --------------------------------------------------------

--
-- Table structure for table `tbl_category`
--

CREATE TABLE `tbl_category` (
  `id` int(11) NOT NULL,
  `category_name` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tbl_category`
--

INSERT INTO `tbl_category` (`id`, `category_name`) VALUES
(1, 'Category1'),
(2, 'Category2'),
(3, 'Category3'),
(4, 'Category4'),
(5, 'Category5'),
(6, 'Category6'),
(7, 'Category10');

-- --------------------------------------------------------

--
-- Table structure for table `tbl_sub_category`
--

CREATE TABLE `tbl_sub_category` (
  `id` int(11) NOT NULL,
  `category_id` int(11) NOT NULL,
  `sub_category_name` varchar(255) NOT NULL,
  `image_path` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tbl_sub_category`
--

INSERT INTO `tbl_sub_category` (`id`, `category_id`, `sub_category_name`, `image_path`) VALUES
(1, 1, 'Flat', 'data/images1.jpg'),
(2, 1, 'Round', 'data/images2.jpg'),
(3, 1, 'Square', 'data/images3.jpg'),
(4, 1, 'Oval', 'data/images4.jpg'),
(6, 2, 'Checker Plate', 'data/images1.jpg'),
(7, 2, 'Satin Sheets', 'data/images2.jpg'),
(8, 2, 'Hot & Cold Sheet', 'data/images3.jpg'),
(9, 3, 'Rectangular', 'data/images4.jpg'),
(10, 3, 'Square Tubing', 'data/images5.jpg'),
(11, 3, 'Round Tubing', 'data/images1.jpg'),
(12, 3, 'Black Pipe', 'data/images2.jpg'),
(13, 4, 'Sample1', 'data/images3.jpg'),
(14, 4, 'Sample2', 'data/images4.jpgrn'),
(15, 5, 'Sample3', 'data/images1.jpg');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbl_category`
--
ALTER TABLE `tbl_category`
  ADD PRIMARY KEY (`id`);

--
-- Indexes for table `tbl_sub_category`
--
ALTER TABLE `tbl_sub_category`
  ADD PRIMARY KEY (`id`),
  ADD KEY `category_id_rel` (`category_id`) USING BTREE;

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_category`
--
ALTER TABLE `tbl_category`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=9;

--
-- AUTO_INCREMENT for table `tbl_sub_category`
--
ALTER TABLE `tbl_sub_category`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=16;

--
-- Constraints for dumped tables
--

--
-- Constraints for table `tbl_sub_category`
--
ALTER TABLE `tbl_sub_category`
  ADD CONSTRAINT `tbl_sub_category_ibfk_1` FOREIGN KEY (`category_id`) REFERENCES `tbl_category` (`id`);

Output: subkategori produk eCommerce

Tangkapan layar ini menunjukkan hasil pencarian kategori produk eCommerce dengan kata kunci.

Angka tersebut menunjukkan mengisi kata kunci yang dimasukkan dalam formulir pencarian.

Hasil Pencarian Kategori Produk eCommerce

Kesimpulan

Kami telah melihat cara membuat galeri subkategori kategori situs web eCommerce dengan opsi pencarian.

Artikel ini menjelaskan pentingnya halaman kategori di situs web eCommerce.

Contoh ini menunjukkan kategori produk dengan pratinjau gambar. Ini menambahkan lebih banyak keindahan ke halaman kategori dibandingkan dengan kartu kategori berbasis teks.

Jadi, contoh sederhana membantu Anda membuat navigasi kategori dengan mencari situs web eCommerce Anda.

Unduh

Kembali ke Atas


Source link

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

administrator