Amazon menyukai pohon kategori produk

Programming

oleh Vinci terakhir diubah pada 1 Oktober 2022.

Script PHP ini akan membantu Anda jika Anda ingin menampilkan pohon kategori produk yang mirip dengan Amazon. Akan berguna untuk menampilkan menu kategori dalam urutan hierarkis seperti pohon.

Fitur dari kode PHP ini adalah konstruksinya Pohon rentang bertingkat dengan kedalaman tak terbatas. Ini menggunakan metode rekursif untuk mendapatkan ini.

Dalam tutorial sebelumnya, kita akan melihat menu drop-down multi-level dengan kedalaman tetap.

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

Sekelompok pohon

basis data kategori

Script ini mencakup database batch dengan data. Kueri sisipkan membuat rekaman kategori yang dipetakan dengan tepat ke induknya.

Catatan batch disertakan orang tua = 0 Mereka dikenal sebagai kategori utama. Setiap record memiliki urutan untuk mengatur prioritas tampilan di antarmuka pengguna.

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 penginisialisasi yang memanggil parser rekursif PHP untuk mendapatkan HTML dari pohon kategori. Dalam posting PHP ZipArchive, kami menggunakan konsep rekursif yang sama untuk mengompresi konten direktori zip.

Juga, ia memiliki penangan UI untuk menyediakan 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 bagus pada pohon kategori. Karena menampilkan tingkat kategori anak yang tidak terbatas, CSS ini membantu memodifikasi 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 batch dan buat dalam format pohon

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

partikel untuk objek langsung getCategoryTreeHTML Fungsi array mem-parsing hasil batch. Secara rekursif memanggil dan mem-parsing level kategori dari induknya.

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

Setel argumen parent=0 untuk membuat item menu kategori di tingkat induk.

Pohon kategori HTML 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 pegangan digunakan di banyak tempat. Misalnya, lebih banyak Situs web keranjang belanja Miliki filter kategori atau menu untuk mengkategorikan produk showcase.

Iklan Menu Kategori Toko Amazon berharga bagi pengguna akhir untuk mempersempit rentang yang luas untuk menemukan bidang minat mereka.

juga, Situs web pendidikan Menampilkan daftar isi sebagai pohon.

Unduh

Kembali ke atas


Source link

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *