So I have this page
https://publisherbucks.com/test/
If you check the NonFiction expandable menu, it works perfectly.
However, the other 5 top tier categories on the page do not, they show the top tier category as an expandable option below its top tier.
They are all included in the same SQL table with a data setup like this:
Quote:
ID | Code | Category | Comment |
1 | ANT000000 | Antiques & Collectibles > General |
2 | ANT056000 | Antiques & Collectibles > Advertising |
1326 | FIC000000 | Fiction > General |
1327 | FIC064000 |Fiction > Absurdist | See also Absurd
1328 | FIC002000 | Fiction > Action & Adventure |
|
The code I've been putting together, that I have also ran through AI this morning (does not find any problems apparently, although it was nice enough to add comments for each of the sections of code lol) is as follows:
Quote:
<?php
// Database connection settings
$host = "localhost"; // Change this to your database host (e.g., localhost)
$username = "Username"; // Your database username
$password = "Password"; // Your database password
$dbname = "DB"; // Your database name
// Create connection
$conn = new mysqli($host, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Fetch categories from the BISAC table, ordered alphabetically
$sql = "SELECT ID, Code, Category, Comments FROM BISAC ORDER BY Category";
$result = $conn->query($sql);
$categories = [];
while ($row = $result->fetch_assoc()) {
$categories[] = $row;
}
// Close connection
$conn->close();
// Define the six main sections
$mainSections = [
"Fiction",
"NonFiction",
"Juvenile Fiction",
"Juvenile NonFiction",
"Young Adult Fiction",
"Young Adult NonFiction"
];
// Function to determine the section (Fiction, NonFiction, etc.)
function getMainSection($category) {
global $mainSections;
foreach ($mainSections as $section) {
if (stripos($category, $section . " >") === 0) {
return $section;
}
}
return "NonFiction"; // Default to NonFiction if not categorized
}
// Function to build category tree
function buildCategoryTree($categories) {
global $mainSections;
$trees = array_fill_keys($mainSections, []);
foreach ($categories as $item) {
$mainSection = getMainSection($item['Category']);
$categoryPath = explode(' > ', $item['Category']);
// First level category (Top-Level Category)
$firstCategory = array_shift($categoryPath);
// Ensure only top-level categories are stored correctly
if (!isset($trees[$mainSection][$firstCategory])) {
$trees[$mainSection][$firstCategory] = [
'subcategories' => [],
'id' => md5($mainSection . ' > ' . $firstCategory)
];
}
// Process only immediate subcategories and prevent recursion
if (!empty($categoryPath)) {
$subCategory = array_shift($categoryPath);
// Prevent adding the main category inside itself
if ($subCategory !== $mainSection && $subCategory !== $firstCategory) {
if (!isset($trees[$mainSection][$firstCategory]['subcategories'][$subCategory])) {
$trees[$mainSection][$firstCategory]['subcategories'][$subCategory] = [
'subcategories' => [],
'id' => md5($mainSection . ' > ' . $firstCategory . ' > ' . $subCategory)
];
}
}
}
}
return $trees;
}
// Generate categorized trees
$categoryTree = buildCategoryTree($categories);
// Function to render categories
function renderCategories($tree) {
if (!empty($tree)) {
echo '<ul>';
foreach ($tree as $category => $data) {
$hasSubcategories = !empty($data['subcategories']);
$uniqueId = $data['id']; // Unique ID for toggling
echo '<li>';
if ($hasSubcategories) {
echo '<input type="checkbox" id="toggle-' . $uniqueId . '" class="toggle">';
echo '<label for="toggle-' . $uniqueId . '" class="category-label">
' . $category . ' <span class="expand-icon"></span>
</label>';
echo '<ul class="subcategories">';
foreach ($data['subcategories'] as $sub => $subData) {
echo '<li>';
echo $sub;
echo '</li>';
}
echo '</ul>';
} else {
echo $category;
}
echo '</li>';
}
echo '</ul>';
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<base href="https://gfy.com/" /><!--[if IE]></base><![endif]-->
<base href="https://gfy.com/" /><!--[if IE]></base><![endif]-->
<base href="https://gfy.com/" /><!--[if IE]></base><![endif]-->
<base href="https://gfy.com/" /><!--[if IE]></base><![endif]-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Categorized BISAC Dropdown</title>
<style>
.dropdown-container {
width: 400px;
border: 1px solid #ccc;
padding: 10px;
max-height: 500px;
overflow-y: auto;
}
ul {
list-style: none;
padding-left: 0;
}
li {
margin: 5px 0;
position: relative;
}
.category-label {
font-weight: bold;
cursor: pointer;
display: flex;
justify-content: space-between;
width: 100%;
}
.expand-icon {
font-weight: bold;
cursor: pointer;
margin-left: 10px;
}
.toggle {
display: none;
}
.toggle + .category-label + .subcategories {
display: none;
}
.toggle:checked + .category-label + .subcategories {
display: block;
}
/* Change (+) to (-) when expanded */
.toggle + .category-label .expand-icon::before {
content: " (+)";
}
.toggle:checked + .category-label .expand-icon::before {
content: " (-)";
}
</style>
</head>
<body>
<div class="dropdown-container">
<ul>
<?php foreach ($mainSections as $mainSection): ?>
<li>
<input type="checkbox" id="toggle-<?php echo md5($mainSection); ?>" class="toggle">
<label for="toggle-<?php echo md5($mainSection); ?>" class="category-label">
<?php echo $mainSection; ?> <span class="expand-icon"></span>
</label>
<?php if (!empty($categoryTree[$mainSection])): ?>
<ul class="subcategories">
<?php renderCategories($categoryTree[$mainSection]); ?>
</ul>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
</div>
</body>
</html>
|
Can anyone see whats causing only the NonFiction top level to work, while not the others?
This is confusing the fuck out me.
To clarify, I have checked the SQL data structure and it is standardized throughout, so its *not* a data structure issue in SQL.