@tower_74/cms-plugin-commerce 0.2.4 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@tower_74/cms-plugin-commerce",
-    "version": "0.2.4",
+    "version": "0.3.0",
     "description": "Front-end of the Base CMS commerce plugin (ADR-0026): storefront, cart, checkout + product/order admin pages. Ships source; exports a CmsPlugin.",
     "type": "module",
     "license": "proprietary",

package/ui/components/commerce/VariantsEditor.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button, Input, Select } from '@tower_74/cms-ui';
+import { Button, Input, MediaPicker, type MediaItem, type MediaSelection, Select } from '@tower_74/cms-ui';
 
 interface Option {
     name: string;
@@ -10,17 +10,19 @@ interface Variant {
     price: string;
     stock: number | string;
     options: Record<string, string>;
+    image_media_id?: number | null;
+    image?: MediaSelection | null;
 }
 
-const props = defineProps<{ modelValue: Variant[]; options: Option[]; currencySymbol: string }>();
-const emit = defineEmits<{ 'update:modelValue': [value: Variant[]] }>();
+const props = defineProps<{ modelValue: Variant[]; options: Option[]; currencySymbol: string; mediaItems: MediaItem[] }>();
+const emit = defineEmits<{ 'update:modelValue': [value: Variant[]]; upload: [file: File] }>();
 
 const commit = (variants: Variant[]) => emit('update:modelValue', variants);
 
 const add = () => {
     const options: Record<string, string> = {};
     props.options.forEach((o) => (options[o.name] = o.values[0] ?? ''));
-    commit([...props.modelValue, { sku: '', price: '', stock: 0, options }]);
+    commit([...props.modelValue, { sku: '', price: '', stock: 0, options, image_media_id: null, image: null }]);
 };
 const remove = (i: number) => {
     const variants = [...props.modelValue];
@@ -37,6 +39,12 @@ const setOption = (i: number, name: string, value: string) => {
     variants[i] = { ...variants[i], options: { ...variants[i].options, [name]: value } };
     commit(variants);
 };
+const setImage = (i: number, value: MediaSelection | MediaSelection[] | null) => {
+    const selection = (value as MediaSelection | null) ?? null;
+    const variants = [...props.modelValue];
+    variants[i] = { ...variants[i], image: selection, image_media_id: selection?.id ?? null };
+    commit(variants);
+};
 const optionsFor = (option: Option) => option.values.map((v) => ({ label: v, value: v }));
 </script>
 
@@ -63,6 +71,16 @@ const optionsFor = (option: Option) => option.values.map((v) => ({ label: v, val
                 <label class="mb-1 block text-xs font-medium text-muted">Stock</label>
                 <Input :model-value="String(variant.stock)" type="number" @update:model-value="setField(i, 'stock', $event)" />
             </div>
+            <div class="w-40">
+                <label class="mb-1 block text-xs font-medium text-muted">Image</label>
+                <MediaPicker
+                    :model-value="variant.image ?? null"
+                    :items="mediaItems"
+                    @update:model-value="setImage(i, $event)"
+                    @upload="emit('upload', $event)"
+                />
+                <p class="mt-1 text-xs text-muted">Falls back to the product image.</p>
+            </div>
             <Button type="button" variant="danger" size="sm" @click="remove(i)">✕</Button>
         </div>
 

package/ui/pages/Admin/Commerce/Products/Edit.vue

@@ -17,6 +17,8 @@ interface Variant {
     price: string;
     stock: number | string;
     options: Record<string, string>;
+    image_media_id?: number | null;
+    image?: MediaSelection | null;
 }
 interface Block {
     type: string;
@@ -148,7 +150,7 @@ const submit = () => {
             <div class="mt-8">
                 <h3 class="mb-3 text-base font-semibold">Variants</h3>
                 <p v-if="form.errors.variants" class="mb-2 text-sm text-danger">{{ form.errors.variants }}</p>
-                <VariantsEditor v-model="variantsModel" :options="form.options" :currency-symbol="currencySymbol" />
+                <VariantsEditor v-model="variantsModel" :options="form.options" :currency-symbol="currencySymbol" :media-items="mediaItems" @upload="onUpload" />
             </div>
 
             <div class="mt-8">

package/ui/pages/Public/Shop/Show.vue

@@ -11,7 +11,7 @@ interface ProductData {
     image: { src: string; alt?: string } | null;
     blocks: Block[];
     options: Array<{ name: string; values: string[] }>;
-    variants: Array<{ id: number; options: Record<string, string>; price: string; available: boolean }>;
+    variants: Array<{ id: number; options: Record<string, string>; price: string; available: boolean; image: { src: string; alt?: string } | null }>;
 }
 
 defineProps<{