Amazon seperti Pohon Kategori Produk

oleh Vincy. Terakhir diubah pada 1 Oktober 2022.

Skrip PHP ini akan membantu jika Anda ingin menampilkan pohon kategori produk seperti Amazon. Ini akan berguna untuk menampilkan menu kategori dalam urutan hierarkis, seperti pohon.

Keistimewaan kode PHP ini adalah ia membangun pohon kategori multi-level dengan kedalaman tak terbatas. Ini menggunakan metode rekursi untuk mendapatkan ini.

Dalam tutorial sebelumnya, kita harus melihat menu dropdown multi-level dengan kedalaman tetap.

Mari kita lihat bagian yang akan datang untuk melihat bagaimana kode dibuat untuk menampilkan pohon kategori di halaman.

pohon kategori

Basis Data Kategori

Script ini berisi database kategori dengan data. Kueri penyisipan membuat catatan kategori yang dipetakan dengan induknya dengan tepat.

Catatan kategori yang berisi orang tua = 0 dikenal sebagai kategori utama. Setiap record memiliki urutan pengurutan untuk mengatur prioritas tampilan pada UI.

struktur.sql

CREATE TABLE `category` (
  `id` int(10) UNSIGNED NOT NULL,
  `category_name` varchar(50) COLLATE utf8mb4_unicode_ci NOT NULL,
  `parent` int(10) UNSIGNED NOT NULL DEFAULT 0,
  `sort_order` int(11) NOT NULL DEFAULT 0
);

--
-- Dumping data for table `category`
--

INSERT INTO `category` (`id`, `category_name`, `parent`, `sort_order`) VALUES
(1, 'Features', 0, 0),
(2, 'Domain', 0, 1),
(3, 'Digital', 0, 2),
(4, 'Gift cards', 1, 0),
(5, 'International', 1, 1),
(6, 'Popular', 1, 2),
(7, 'e-Gift cards', 4, 0),
(8, 'Business gift cards', 4, 1),
(9, 'In offer', 5, 0),
(10, 'Shipping', 5, 1),
(11, 'Celebrity favourites', 6, 0),
(12, 'Current year hits', 6, 1),
(13, 'Electronics', 2, 0),
(14, 'Arts', 2, 1),
(15, 'Gadgets', 2, 2),
(16, 'Camera', 13, 0),
(17, 'Car electronic accessories', 13, 1),
(18, 'GPS', 13, 2),
(19, 'Handcrafted', 14, 0),
(20, 'Gold enameled', 14, 1),
(21, 'Jewelry', 14, 2),
(22, 'Fabric', 19, 0),
(23, 'Needle work', 19, 1),
(24, 'PSP', 15, 0),
(25, 'Smart phones', 15, 1),
(26, 'Apps', 3, 0),
(27, 'Music', 3, 1),
(28, 'Movies', 3, 2),
(29, 'Dev apps', 26, 0),
(30, 'App Hardwares', 26, 1),
(31, 'Podcasts', 27, 0),
(32, 'Live', 27, 1),
(33, 'Recently viewed', 28, 0),
(34, 'You may like', 28, 1),
(35, 'Blockbusters', 28, 2);

--
-- Indexes for dumped tables
--

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

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `category`
--
ALTER TABLE `category`
  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=36;

Render menu kategori dalam HTML

Ini adalah inisiator yang memanggil parsing rekursif PHP untuk mendapatkan HTML Pohon Kategori. Dalam posting PHP ZipArchive, kami menggunakan konsep rekursi yang sama untuk mengompresi konten direktori terlampir.

Juga, ia memiliki pemegang UI untuk merender menu kategori hierarki HTML.

Kelas PHP CategoryTree dibuat untuk membaca dan mengurai larik kategori dari database.

index.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<?php
require_once __DIR__ . '/CategoryTree.php';
$categoryTree = new CategoryTree();
$categoryResult = $categoryTree->getCategoryResult();
?>
<h1>Choose category</h1>
    <div class="category-menu">
<?php
echo $categoryTree->getCategoryTreeHTML($categoryResult);
?>
</div>
</body>
</html>

Gaya ini memberikan tampilan yang menyenangkan pada pohon kategori. Karena menampilkan tingkat kategori anak yang tak terbatas, CSS ini akan membantu memperbaiki batasan UI default.

body {
    font-family: Arial;
    margin-left: 10px;
    margin-right: 20px;
}

ul.category-container li {
    list-style: none;
    padding-left: 10px;
    width: 100%;
}

.category-container a {
    text-decoration: none;
    color: #000;
}

.parent-depth-0 {
    font-size: 22px;
    font-weight: bold;
    border-bottom: #ccc 1px solid;
    padding: 15px 0px 15px 0px;
}

.parent-depth-all {
    font-size: 16px;
    padding-top: 15px;
    font-weight: normal;
}

.no-child {
    font-size: 16px;
    font-weight: normal;
    padding: 15px 0px 0px 0px;
}

.category-menu {
    width: 270px;
    overflow-y: scroll;
    max-height: 800px;
    background: #fffcf2;
    padding: 0px;
}

ul.category-container {
    padding: 10px;
}

Baca data kategori dan buat dalam format pohon

Ini adalah kelas PHP utama yang membaca kategori dinamis dari database.

Itu getCategoryTreeHTML fungsi mem-parsing array hasil kategori. Secara rekursif memanggil dan mem-parsing level kategori oleh induknya.

Di WordPress, ada kategori walker untuk mengurai istilah dan taksonomi. Kami telah membuat walker WordPress khusus untuk mengurai kategori secara efisien.

Ini menetapkan argumen parent=0 untuk membangun item menu kategori tingkat induk.

HTML pohon kategori yang dihasilkan akan menjadi daftar UL-LI bersarang untuk menampilkan menu multi-level.

KategoriPohon.php

<?php

class CategoryTree
{

    private $connection;

    function __construct()
    {
        $this->connection = mysqli_connect('localhost', 'root', '', 'db_category_tree');
    }

    function getCategoryTreeHTML($category, $parent = 0)
    {
        $html = "";
        if (isset($category['parentId'][$parent])) {
            $html .= "<ul class="category-container">n";
            foreach ($category['parentId'][$parent] as $cat_id) {
                if (! isset($category['parentId'][$cat_id])) {
                    $child = "";
                    if ($category['categoryResult'][$cat_id]['parent'] != 0) {
                        $child = "no-child";
                    }
                    $html .= "<li class="$child " . "parent-" . $category["categoryResult'][$cat_id]['parent'] . "' >n" . $category['categoryResult'][$cat_id]['category_name'] . "</li> n";
                }
                if (isset($category['parentId'][$cat_id])) {
                    $parentDepth0 = "parent-depth-all";
                    if ($category['categoryResult'][$cat_id]['parent'] == 0) {
                        $parentDepth0 = "parent-depth-0";
                    }
                    $html .= "<li class="$parentDepth0 " . "parent-' . $category['categoryResult'][$cat_id]['parent'] . "'>n " . $category['categoryResult'][$cat_id]['category_name'] . " n";
                    $html .= $this->getCategoryTreeHTML($category, $cat_id);
                    $html .= "</li> n";
                }
            }
            $html .= "</ul> n";
        }
        return $html;
    }

    function getCategoryResult()
    {
        $query = "SELECT * FROM category ORDER BY parent, sort_order";
        $result = mysqli_query($this->connection, $query);

        $category = array();

        while ($row = mysqli_fetch_assoc($result)) {
            $category['categoryResult'][$row['id']] = $row;
            $category['parentId'][$row['parent']][] = $row['id'];
        }

        return $category;
    }
}
?>

Di mana kode pohon kategori dapat digunakan?

Pohon kategori digunakan di banyak tempat. Misalnya, kebanyakan situs keranjang belanja memiliki filter kategori atau menu untuk mengklasifikasikan produk etalase.

Iklan menu kategori toko Amazon bernilai bagi pengguna akhir untuk mempersempit area yang luas untuk menemukan area minat mereka.

Juga, situs web tutorial menampilkan daftar isi dalam bentuk susunan pohon.

Unduh

Kembali ke Atas

[ad_2]
Source link