Documentation Index
Fetch the complete documentation index at: https://mintlify.com/aluxey/E-Commerce/llms.txt
Use this file to discover all available pages before exploring further.
Categories and colors help organize and describe your product catalog.
Category Management
Hierarchical Structure
Categories support two levels:
- Parent Categories - Top-level organization
- Subcategories - Nested under parents
Fields:
name - Category display nameicon - Emoji icon for visual identificationparent_id - Reference to parent category (null for top-level)
Creating Categories
Open Create Modal
Click ”+ New Category” button
Select Icon
Choose from preset emoji icons:🧺 🎁 ⭐ 🌸 🍂 ❄️ 🐰 🏠 👜 ✨Located: CategoryManager.jsx:16
Enter Name
Type the category nameValidation: Name is required, whitespace trimmed
Set Parent (Optional)
Select parent category from dropdown to create subcategoryLeave blank for top-level category
Save
Click “Create” to save the category
Category Cards
Parent categories display as cards showing:
- Icon and name
- Product count (including subcategories)
- Edit and delete buttons
- List of subcategories with individual counts
Implementation: CategoryManager.jsx:161
Adding Subcategories
Click ”+ Add Subcategory” on a parent category card:
// CategoryManager.jsx:185
<button className="cat-add-sub" onClick={() => openModal(null, cat.id)}>
+ {t("admin.categories.addSub")}
</button>
parent_id with the parent category.
Editing Categories
Click the ✏️ edit button to modify:
- Category name
- Icon selection
Parent category cannot be changed after creation. To move a category, delete and recreate it.
Deleting Categories
Categories can only be deleted if they have no subcategories and no products assigned.
// CategoryManager.jsx:106
const [{ count: subs }, { count: prods }] = await Promise.all([
hasSubcategories(cat.id),
hasProductsInCategory(cat.id),
]);
if (subs > 0) return pushToast({ message: t("admin.categories.error.hasSubcategories") });
if (prods > 0) return pushToast({ message: t("admin.categories.error.hasProducts") });
Product Counts
The getProductCount function aggregates products:
// CategoryManager.jsx:49
const getProductCount = (id) => {
let count = productCounts[id] || 0;
getSubcats(id).forEach(sub => { count += productCounts[sub.id] || 0; });
return count;
};
Color Management
Manage the color palette available for product variants.
Color Structure
Fields:
name - Display name (e.g., “Bleu Glacé”)code - Internal slug (e.g., “bleu_glace”)hex_code - Hex color value (e.g., “#1E90FF”)
Database Table: colors
Creating Colors
Open Color Modal
Click ”+ New Color” button
Select from Presets (Optional)
Choose from 16 preset colors:Blanc, Noir, Rouge, Bleu, Vert, Jaune, Rose, Violet, Orange, Gris, Beige, Marron, Turquoise, Corail, Lavande, MentheLocated: ColorManager.jsx:13
Enter Color Name
Type the display nameAuto-generates code: Converts to lowercase slug
Set Hex Code
Use color picker or enter hex value manuallyFormat: #RRGGBB (uppercase)
Customize Code (Optional)
Edit the auto-generated code slugPattern: [a-z0-9_-]+
Color Preview
The modal shows a large preview swatch with contrast-aware text:
// ColorManager.jsx:49
const getContrastColor = hex => {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
return luminance > 0.5 ? "#000000" : "#FFFFFF";
};
Code Normalization
Color codes are normalized automatically:
// ColorManager.jsx:40
const normalizeCode = value => {
const base = (value || "").trim().toLowerCase();
return base
.replace(/\s+/g, "_")
.replace(/[^a-z0-9_-]/g, "")
.replace(/_+/g, "_")
.replace(/-+/g, "-");
};
Hex Code Validation
Hex codes must match pattern: #([0-9A-F]{6})
// ColorManager.jsx:187
if (!/^#([0-9A-F]{6})$/i.test(payload.hex_code)) {
pushToast({
message: t("admin.colors.error.hexInvalid"),
variant: "error"
});
return;
}
Color Palette Grid
Colors display as cards with:
- Large color swatch with hex label
- Color name
- Code slug in monospace font
- Product usage count badge
- Edit and delete actions
Implementation: ColorManager.jsx:318
Usage Tracking
Colors track how many products use them:
// ColorManager.jsx:84
const [colorsResult, usagesResult] = await Promise.all([
listColors(),
countAllColorUsages()
]);
Colors in use by products cannot be deleted. Remove the color from all products first.
Deleting Colors
Deletion checks usage count:
// ColorManager.jsx:241
const { count, error: usageError } = await countColorUsage(color.id);
if (count && count > 0) {
pushToast({
message: t("admin.colors.error.inUse", `Used by ${count} product(s).`),
variant: "error"
});
return;
}
Draft Persistence
Color forms auto-save to localStorage:
// ColorManager.jsx:122
useEffect(() => {
if (!isDirty) return;
localStorage.setItem(DRAFT_KEY, JSON.stringify(form));
}, [form, isDirty]);
"admin-color-draft"
Search Functionality
Filter colors by name or code:
// ColorManager.jsx:72
const filteredColors = useMemo(() => {
if (!searchTerm) return colors;
const term = searchTerm.toLowerCase();
return colors.filter(
c => c.name.toLowerCase().includes(term) || c.code.toLowerCase().includes(term)
);
}, [colors, searchTerm]);
Empty States
Categories Empty State
Shows folder icon and “Create your first category” message when no categories exist.
Colors Empty State
Shows palette icon and “Create your first color” message when color list is empty.
Implementation: ColorManager.jsx:305