Skip to main content

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.

Product variants represent different versions of a product with unique attributes like size, color, price, and stock levels.

​
Variant Structure

Each variant contains:
  • item_id - Parent product reference
  • size - Size identifier (e.g., “S”, “M”, “L”, “38cm”)
  • price - Variant-specific price (decimal)
  • stock - Available inventory count (integer)
  • sku - Stock Keeping Unit identifier
Database Table: item_variants

​
Creating Variants

Variants can be created in two ways:
1

Select Sizes

Click preset size chips to select multiple sizesPreset sizes: XS, S, M, L, XL, XXLLocated: VariantsStep.jsx:41
2

Set Base Price

Enter the price to apply to all generated variantsField: basePrice (supports decimals)
3

Set Base Stock

Enter initial stock quantity for all variantsField: baseStock (integer, minimum 0)
4

Generate

Click “Generate” button to create variants automaticallyButton shows selected count: “Generate variants”

​
2. Manual Creation

Click “Add Manually” to create individual variants with custom sizes. Use Cases:
  • Non-standard sizes
  • Product-specific measurements
  • Custom variant attributes

​
Variant Editor

Each variant displays as a card with fields:

​
Size Field

// VariantsStep.jsx:117
<input
  value={variant.size}
  onChange={e => updateVariantField(index, 'size', e.target.value)}
  placeholder={t('admin.products.wizard.variants.sizePlaceholder')}
  required
/>
Validation: Must be non-empty string

​
Price Field

<input
  type="number"
  step="0.01"
  value={variant.price}
  onChange={e => updateVariantField(index, 'price', e.target.value)}
  required
/>
Price must be a positive decimal number. Negative prices are rejected during validation.

​
Stock Field

<input
  type="number"
  min={0}
  value={variant.stock}
  onChange={e => updateVariantField(index, 'stock', e.target.value)}
/>
Constraints: Non-negative integer

​
SKU Display

SKUs are auto-generated during product save: 
// ProductManager.jsx:189
sku: variant.sku || buildSku(itemId, variant)
SKUs are automatically generated when creating new variants. Existing SKUs are preserved when editing.

​
Variant Management Page

Access standalone variant management at /admin/variants

​
Features

Search: Filter by size, SKU, or product name Product Filter: Dropdown to filter variants by product Variant Cards Display:
  • Product name
  • Size
  • Price (formatted with 2 decimals)
  • Stock count (with out-of-stock indicator)
  • SKU code

​
Creating Standalone Variants

1

Click New Variant

Opens modal form with product selector
2

Select Product

Choose parent product from dropdownField: item_id (required)
3

Enter Details

Fill in size, price, and stock fields
4

Auto-Generate SKU

SKU is generated automatically on save:Format: SKU-{ITEM_ID}-{SIZE}Located: VariantManager.jsx:85

​
Editing Variants

Click the pencil icon to edit existing variants. Editable Fields:
  • Size
  • Price
  • Stock quantity
Read-Only: SKU (displayed but disabled)

​
Deleting Variants

Deleting a variant is permanent. Ensure no active orders reference this variant.
Click trash icon → Confirm deletion Implementation: VariantManager.jsx:117

​
Price Calculation

The parent product’s display price is the minimum of all variant prices: 
// ProductManager.jsx:155
const minPrice = Math.min(...validVariants.map(v => v.price));
This ensures customers see the starting price for products with multiple price points.

​
Stock Indicators

Variants with zero stock display an out-of-stock class: 
// VariantManager.jsx:333
<span className={`variant-stock ${variant.stock === 0 ? 'out-of-stock' : ''}`}>
  Stock: {variant.stock}
</span>

​
Form Validation

Variant validation checks:
  1. Required fields: item_id, size, price
  2. Price validation: Must be numeric and non-negative
  3. Stock validation: Must be non-negative integer
  4. Code format: SKU must match pattern [a-z0-9_-]+
Validation Function: VariantManager.jsx:59

​
Empty States

When no variants exist or filters return no results: 
// VariantsStep.jsx:160
<div className="empty-state-inline">
  <p>{t('admin.products.wizard.variants.noVariants')}</p>
</div>
Shows different messages for empty list vs. filtered results.

Build docs developers (and LLMs) love

Get started for freeTalk to us