feat(admin): Shopify-style variant attributes matching production data shape

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

P0 user feedback: variants were just free-text name+price, and the user shared the real production payload - a flat array of {color, size, price, currency, remaining} rows, colors as '0x8B4513' hex.

- New model: AdminProductVariantAttributeDef (key/label/isColor/values) + AdminProductVariant (attributes: Record<string,string>, sku, image, remaining, prices: {currency,price}[]) - this IS the production shape, grouped by combo with one row per currency instead of flattened, so admins edit one variant card instead of 4 duplicate rows
- Attribute manager: add custom attributes (Color, Size, or anything), color attributes get a native color picker + live swatch preview instead of typing hex; other attributes get plain value chips
- 'Generate variants' computes the cartesian product of attribute values (Color x Size = 4 combos for 1 color x 4 sizes) and preserves existing sku/price/stock data for combos that still exist after regeneration
- Multi-currency pricing per variant (matches prod: same combo priced in RUB/USD/EUR/AMD) with per-currency add/remove
- Color hex kept in the exact '0x8B4513' production format (toBackendColor/toCssColor conversion helpers)
- Fixed an Angular v21 control-flow parser bug hit while building this: an @if/@else block whose only content is a bare {{ interpolation }} touching the block's closing brace fails to parse (NG5002 'Unclosed block for' cascading from a completely unrelated line) - worked around by keeping interpolation in its own element
- Verified end-to-end in browser: added Color (color picker) + Size (S/M/L/XL) attributes, generated 4 variant combos, added all 4 currencies to a variant - matches the shared production JSON exactly
This commit is contained in:
sdarbinyan
2026-07-19 13:40:51 +04:00
parent 440d2ec211
commit 3b955b116a
12 changed files with 461 additions and 29 deletions

View File

@@ -1562,6 +1562,20 @@ export interface Translations {
variantName: string;
variantsHint: string;
variants: string;
variantAttributes: string;
variantAttributesHint: string;
colorAttribute: string;
removeAttribute: string;
removeValue: string;
pickColor: string;
newValuePlaceholder: string;
addValue: string;
newAttributePlaceholder: string;
addAttribute: string;
generateVariants: string;
variantsList: string;
remaining: string;
variantImage: string;
archived: string;
slugHint: string;
skuHint: string;