feat: make Product fully independent from MarketplaceProduct
- Add is_digital and product_type columns to Product model - Remove is_digital/product_type properties that derived from MarketplaceProduct - Update Create form with translation tabs, GTIN type, sale price, VAT rate, image - Update Edit form to allow editing is_digital (remove disabled state) - Add Availability field to Edit form - Fix Detail page for directly created products (no marketplace source) - Update vendor_product_service to handle new fields in create/update - Add VendorProductCreate/Update schema fields for translations and is_digital - Add unit tests for is_digital column and direct product creation - Add integration tests for create/update API with new fields - Create product-architecture.md documenting the independent copy pattern - Add migration y3d4e5f6g7h8 for is_digital and product_type columns 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
49
app/api/v1/vendor/products.py
vendored
49
app/api/v1/vendor/products.py
vendored
@@ -15,6 +15,7 @@ from app.api.deps import get_current_vendor_api
|
||||
from app.core.database import get_db
|
||||
from app.services.product_service import product_service
|
||||
from app.services.subscription_service import subscription_service
|
||||
from app.services.vendor_product_service import vendor_product_service
|
||||
from models.database.user import User
|
||||
from models.schema.product import (
|
||||
ProductCreate,
|
||||
@@ -25,6 +26,10 @@ from models.schema.product import (
|
||||
ProductToggleResponse,
|
||||
ProductUpdate,
|
||||
)
|
||||
from models.schema.vendor_product import (
|
||||
VendorDirectProductCreate,
|
||||
VendorProductCreateResponse,
|
||||
)
|
||||
|
||||
router = APIRouter(prefix="/products")
|
||||
logger = logging.getLogger(__name__)
|
||||
@@ -106,6 +111,50 @@ def add_product_to_catalog(
|
||||
return ProductResponse.model_validate(product)
|
||||
|
||||
|
||||
@router.post("/create", response_model=VendorProductCreateResponse)
|
||||
def create_product_direct(
|
||||
product_data: VendorDirectProductCreate,
|
||||
current_user: User = Depends(get_current_vendor_api),
|
||||
db: Session = Depends(get_db),
|
||||
):
|
||||
"""
|
||||
Create a new product directly without marketplace product.
|
||||
|
||||
This creates a Product and ProductTranslation without requiring
|
||||
an existing MarketplaceProduct.
|
||||
"""
|
||||
# Check product limit before creating
|
||||
subscription_service.check_product_limit(db, current_user.token_vendor_id)
|
||||
|
||||
# Build data dict with vendor_id from token
|
||||
data = {
|
||||
"vendor_id": current_user.token_vendor_id,
|
||||
"title": product_data.title,
|
||||
"brand": product_data.brand,
|
||||
"vendor_sku": product_data.vendor_sku,
|
||||
"gtin": product_data.gtin,
|
||||
"price": product_data.price,
|
||||
"currency": product_data.currency,
|
||||
"availability": product_data.availability,
|
||||
"is_active": product_data.is_active,
|
||||
"is_featured": product_data.is_featured,
|
||||
"description": product_data.description,
|
||||
}
|
||||
|
||||
product = vendor_product_service.create_product(db=db, data=data)
|
||||
db.commit()
|
||||
|
||||
logger.info(
|
||||
f"Product {product.id} created by user {current_user.username} "
|
||||
f"for vendor {current_user.token_vendor_code}"
|
||||
)
|
||||
|
||||
return VendorProductCreateResponse(
|
||||
id=product.id,
|
||||
message="Product created successfully",
|
||||
)
|
||||
|
||||
|
||||
@router.put("/{product_id}", response_model=ProductResponse)
|
||||
def update_product(
|
||||
product_id: int,
|
||||
|
||||
@@ -280,6 +280,25 @@ async def vendor_products_page(
|
||||
)
|
||||
|
||||
|
||||
@router.get(
|
||||
"/{vendor_code}/products/create", response_class=HTMLResponse, include_in_schema=False
|
||||
)
|
||||
async def vendor_product_create_page(
|
||||
request: Request,
|
||||
vendor_code: str = Path(..., description="Vendor code"),
|
||||
current_user: User = Depends(get_current_vendor_from_cookie_or_header),
|
||||
db: Session = Depends(get_db),
|
||||
):
|
||||
"""
|
||||
Render product creation page.
|
||||
JavaScript handles form submission via API.
|
||||
"""
|
||||
return templates.TemplateResponse(
|
||||
"vendor/product-create.html",
|
||||
get_vendor_context(request, db, current_user, vendor_code),
|
||||
)
|
||||
|
||||
|
||||
# ============================================================================
|
||||
# ORDER MANAGEMENT
|
||||
# ============================================================================
|
||||
|
||||
@@ -47,6 +47,7 @@ class VendorProductService:
|
||||
.options(
|
||||
joinedload(Product.vendor),
|
||||
joinedload(Product.marketplace_product),
|
||||
joinedload(Product.translations),
|
||||
)
|
||||
)
|
||||
|
||||
@@ -246,26 +247,67 @@ class VendorProductService:
|
||||
|
||||
Args:
|
||||
db: Database session
|
||||
data: Product data dict
|
||||
data: Product data dict (includes translations dict for multiple languages)
|
||||
|
||||
Returns:
|
||||
Created Product instance
|
||||
"""
|
||||
from models.database.product_translation import ProductTranslation
|
||||
|
||||
# Determine product_type from is_digital flag
|
||||
is_digital = data.get("is_digital", False)
|
||||
product_type = "digital" if is_digital else data.get("product_type", "physical")
|
||||
|
||||
product = Product(
|
||||
vendor_id=data["vendor_id"],
|
||||
vendor_sku=data.get("vendor_sku"),
|
||||
brand=data.get("brand"),
|
||||
gtin=data.get("gtin"),
|
||||
price=data.get("price"),
|
||||
gtin_type=data.get("gtin_type"),
|
||||
currency=data.get("currency", "EUR"),
|
||||
tax_rate_percent=data.get("tax_rate_percent", 17),
|
||||
availability=data.get("availability"),
|
||||
primary_image_url=data.get("primary_image_url"),
|
||||
is_active=data.get("is_active", True),
|
||||
is_featured=data.get("is_featured", False),
|
||||
is_digital=data.get("is_digital", False),
|
||||
description=data.get("description"),
|
||||
is_digital=is_digital,
|
||||
product_type=product_type,
|
||||
)
|
||||
|
||||
# Handle price fields via setters (convert to cents)
|
||||
if data.get("price") is not None:
|
||||
product.price = data["price"]
|
||||
if data.get("sale_price") is not None:
|
||||
product.sale_price = data["sale_price"]
|
||||
|
||||
db.add(product)
|
||||
db.flush() # Get the product ID
|
||||
|
||||
# Handle translations dict (new format with multiple languages)
|
||||
translations = data.get("translations")
|
||||
if translations:
|
||||
for lang, trans_data in translations.items():
|
||||
if trans_data and (trans_data.get("title") or trans_data.get("description")):
|
||||
translation = ProductTranslation(
|
||||
product_id=product.id,
|
||||
language=lang,
|
||||
title=trans_data.get("title"),
|
||||
description=trans_data.get("description"),
|
||||
)
|
||||
db.add(translation)
|
||||
else:
|
||||
# Fallback for old format with single title/description
|
||||
title = data.get("title")
|
||||
description = data.get("description")
|
||||
if title or description:
|
||||
translation = ProductTranslation(
|
||||
product_id=product.id,
|
||||
language="en",
|
||||
title=title,
|
||||
description=description,
|
||||
)
|
||||
db.add(translation)
|
||||
|
||||
db.flush()
|
||||
|
||||
logger.info(f"Created vendor product {product.id} for vendor {data['vendor_id']}")
|
||||
@@ -327,7 +369,6 @@ class VendorProductService:
|
||||
product.cost = data["cost"] # Uses property setter
|
||||
|
||||
# Update other allowed fields
|
||||
# Note: is_digital is derived from marketplace_product, not directly updatable
|
||||
updatable_fields = [
|
||||
"vendor_sku",
|
||||
"brand",
|
||||
@@ -335,6 +376,8 @@ class VendorProductService:
|
||||
"gtin_type",
|
||||
"currency",
|
||||
"tax_rate_percent",
|
||||
"availability",
|
||||
"is_digital",
|
||||
"is_active",
|
||||
"is_featured",
|
||||
"primary_image_url",
|
||||
@@ -370,9 +413,22 @@ class VendorProductService:
|
||||
"""Build a product list item dict."""
|
||||
mp = product.marketplace_product
|
||||
|
||||
# Get title from marketplace product translations
|
||||
# Get title: prefer vendor translations, fallback to marketplace translations
|
||||
title = None
|
||||
if mp:
|
||||
# First try vendor's own translations
|
||||
if product.translations:
|
||||
for trans in product.translations:
|
||||
if trans.language == language and trans.title:
|
||||
title = trans.title
|
||||
break
|
||||
# Fallback to English if requested language not found
|
||||
if not title:
|
||||
for trans in product.translations:
|
||||
if trans.language == "en" and trans.title:
|
||||
title = trans.title
|
||||
break
|
||||
# Fallback to marketplace translations
|
||||
if not title and mp:
|
||||
title = mp.get_title(language)
|
||||
|
||||
return {
|
||||
|
||||
@@ -61,28 +61,88 @@
|
||||
Vendor
|
||||
</h3>
|
||||
<div class="max-w-md">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Select Vendor *</label>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Select Vendor <span class="text-red-500">*</span></label>
|
||||
<select id="vendor-select" x-ref="vendorSelect" placeholder="Search vendor...">
|
||||
</select>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">The vendor whose catalog this product will be added to</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Basic Information -->
|
||||
<!-- Product Information (Translations) -->
|
||||
<div class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||
Basic Information
|
||||
Product Information <span class="text-red-500">*</span>
|
||||
</h3>
|
||||
<div class="grid gap-4 md:grid-cols-2">
|
||||
|
||||
<!-- Language Tabs -->
|
||||
<div class="border-b border-gray-200 dark:border-gray-700 mb-4">
|
||||
<nav class="flex space-x-4">
|
||||
<template x-for="lang in ['en', 'fr', 'de', 'lu']" :key="lang">
|
||||
<button
|
||||
type="button"
|
||||
@click="activeLanguage = lang"
|
||||
:class="activeLanguage === lang ? 'border-purple-500 text-purple-600 dark:text-purple-400' : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400'"
|
||||
class="py-2 px-1 border-b-2 font-medium text-sm uppercase"
|
||||
x-text="lang"
|
||||
></button>
|
||||
</template>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Translation Fields -->
|
||||
<template x-for="lang in ['en', 'fr', 'de', 'lu']" :key="lang">
|
||||
<div x-show="activeLanguage === lang" class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
|
||||
Title (<span x-text="lang.toUpperCase()"></span>) <span x-show="lang === 'en'" class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
x-model="form.translations[lang].title"
|
||||
:required="lang === 'en'"
|
||||
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
||||
placeholder="Product title"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
|
||||
Description (<span x-text="lang.toUpperCase()"></span>)
|
||||
</label>
|
||||
<textarea
|
||||
x-model="form.translations[lang].description"
|
||||
rows="5"
|
||||
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
||||
placeholder="Product description (HTML supported)"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Product Identifiers -->
|
||||
<div class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||
Product Identifiers
|
||||
</h3>
|
||||
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Title *</label>
|
||||
<input
|
||||
type="text"
|
||||
x-model="form.title"
|
||||
required
|
||||
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
||||
placeholder="Product title"
|
||||
/>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Vendor SKU</label>
|
||||
<div class="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
x-model="form.vendor_sku"
|
||||
class="flex-1 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300 font-mono"
|
||||
placeholder="XXXX_XXXX_XXXX"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
@click="generateSku()"
|
||||
class="px-3 py-2 text-xs font-medium text-purple-600 dark:text-purple-400 border border-purple-300 dark:border-purple-600 rounded-lg hover:bg-purple-50 dark:hover:bg-purple-900/20"
|
||||
title="Auto-generate SKU"
|
||||
>
|
||||
<span x-html="$icon('refresh', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Brand</label>
|
||||
@@ -93,24 +153,28 @@
|
||||
placeholder="Brand name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Vendor SKU</label>
|
||||
<input
|
||||
type="text"
|
||||
x-model="form.vendor_sku"
|
||||
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
||||
placeholder="SKU"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">GTIN/EAN</label>
|
||||
<input
|
||||
type="text"
|
||||
x-model="form.gtin"
|
||||
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
||||
placeholder="GTIN/EAN"
|
||||
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300 font-mono"
|
||||
placeholder="4007817144145"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">GTIN Type</label>
|
||||
<select
|
||||
x-model="form.gtin_type"
|
||||
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
||||
>
|
||||
<option value="">Not specified</option>
|
||||
<option value="ean13">EAN-13</option>
|
||||
<option value="ean8">EAN-8</option>
|
||||
<option value="upc">UPC</option>
|
||||
<option value="isbn">ISBN</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -119,17 +183,35 @@
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||
Pricing
|
||||
</h3>
|
||||
<div class="grid gap-4 md:grid-cols-3">
|
||||
{# noqa: FE-008 - Using raw number input for price field #}
|
||||
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-5">
|
||||
{# noqa: FE-008 - Using raw number input for price with EUR prefix #}
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Price</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
x-model="form.price"
|
||||
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
||||
placeholder="0.00"
|
||||
/>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Price (incl. VAT)</label>
|
||||
<div class="relative">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500 dark:text-gray-400">EUR</span>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0"
|
||||
x-model.number="form.price"
|
||||
class="w-full pl-12 pr-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
||||
placeholder="0.00"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Sale Price</label>
|
||||
<div class="relative">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500 dark:text-gray-400">EUR</span>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0"
|
||||
x-model.number="form.sale_price"
|
||||
class="w-full pl-12 pr-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
||||
placeholder="0.00"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Currency</label>
|
||||
@@ -142,6 +224,18 @@
|
||||
<option value="GBP">GBP</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">VAT Rate</label>
|
||||
<select
|
||||
x-model.number="form.tax_rate_percent"
|
||||
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
||||
>
|
||||
<option value="17">17% (Standard)</option>
|
||||
<option value="14">14% (Intermediate)</option>
|
||||
<option value="8">8% (Reduced)</option>
|
||||
<option value="3">3% (Super-reduced)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Availability</label>
|
||||
<select
|
||||
@@ -158,12 +252,51 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status -->
|
||||
<!-- Image -->
|
||||
<div class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||
Status
|
||||
Primary Image
|
||||
</h3>
|
||||
<div class="grid gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Image URL</label>
|
||||
<input
|
||||
type="url"
|
||||
x-model="form.primary_image_url"
|
||||
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
||||
placeholder="https://..."
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Preview</label>
|
||||
<div class="w-24 h-24 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600">
|
||||
<template x-if="form.primary_image_url">
|
||||
<img :src="form.primary_image_url" class="w-full h-full object-cover" />
|
||||
</template>
|
||||
<template x-if="!form.primary_image_url">
|
||||
<div class="w-full h-full flex items-center justify-center">
|
||||
<span x-html="$icon('photograph', 'w-8 h-8 text-gray-400')"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product Type & Status -->
|
||||
<div class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||
Product Type & Status
|
||||
</h3>
|
||||
<div class="flex flex-wrap gap-6">
|
||||
<label class="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
x-model="form.is_digital"
|
||||
class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
|
||||
/>
|
||||
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Digital Product</span>
|
||||
</label>
|
||||
<label class="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
@@ -180,30 +313,9 @@
|
||||
/>
|
||||
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Featured</span>
|
||||
</label>
|
||||
<label class="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
x-model="form.is_digital"
|
||||
class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
|
||||
/>
|
||||
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Digital Product</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||
Description
|
||||
</h3>
|
||||
<textarea
|
||||
x-model="form.description"
|
||||
rows="6"
|
||||
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
||||
placeholder="Product description (HTML supported)"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex items-center justify-between px-4 py-4 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
||||
<a
|
||||
@@ -214,7 +326,7 @@
|
||||
</a>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="saving || !form.vendor_id"
|
||||
:disabled="saving || !form.vendor_id || !form.translations.en.title"
|
||||
class="flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
|
||||
>
|
||||
<span x-show="saving" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
|
||||
|
||||
@@ -21,17 +21,33 @@
|
||||
|
||||
<!-- Product Details -->
|
||||
<div x-show="!loading && product">
|
||||
<!-- Override Info Banner -->
|
||||
<div class="px-4 py-3 mb-6 bg-purple-50 dark:bg-purple-900/20 rounded-lg shadow-md">
|
||||
<!-- Info Banner - adapts based on whether product has marketplace source -->
|
||||
<div class="px-4 py-3 mb-6 rounded-lg shadow-md"
|
||||
:class="product?.marketplace_product_id ? 'bg-purple-50 dark:bg-purple-900/20' : 'bg-blue-50 dark:bg-blue-900/20'">
|
||||
<div class="flex items-start">
|
||||
<span x-html="$icon('information-circle', 'w-5 h-5 text-purple-500 mr-3 mt-0.5 flex-shrink-0')"></span>
|
||||
<span x-html="$icon('information-circle', product?.marketplace_product_id ? 'w-5 h-5 text-purple-500 mr-3 mt-0.5 flex-shrink-0' : 'w-5 h-5 text-blue-500 mr-3 mt-0.5 flex-shrink-0')"></span>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-purple-700 dark:text-purple-300">Vendor Product Catalog Entry</p>
|
||||
<p class="text-xs text-purple-600 dark:text-purple-400 mt-1">
|
||||
This is a vendor-specific copy of a marketplace product. Fields marked with
|
||||
<span class="inline-flex items-center px-1.5 py-0.5 mx-1 text-xs font-medium text-purple-700 bg-purple-100 dark:bg-purple-800 dark:text-purple-300 rounded">Override</span>
|
||||
have been customized for this vendor.
|
||||
</p>
|
||||
<!-- Marketplace-sourced product -->
|
||||
<template x-if="product?.marketplace_product_id">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-purple-700 dark:text-purple-300">Vendor Product Catalog Entry</p>
|
||||
<p class="text-xs text-purple-600 dark:text-purple-400 mt-1">
|
||||
This is a vendor-specific copy of a marketplace product. Fields marked with
|
||||
<span class="inline-flex items-center px-1.5 py-0.5 mx-1 text-xs font-medium text-purple-700 bg-purple-100 dark:bg-purple-800 dark:text-purple-300 rounded">Override</span>
|
||||
have been customized for this vendor.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<!-- Directly created product -->
|
||||
<template x-if="!product?.marketplace_product_id">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-blue-700 dark:text-blue-300">Directly Created Product</p>
|
||||
<p class="text-xs text-blue-600 dark:text-blue-400 mt-1">
|
||||
This product was created directly for this vendor without a marketplace source.
|
||||
All product information is managed independently.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -42,18 +58,20 @@
|
||||
Quick Actions
|
||||
</h3>
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<!-- View Source Product - only for marketplace-sourced products -->
|
||||
<a
|
||||
x-show="product?.marketplace_product_id"
|
||||
:href="'/admin/marketplace-products/' + product?.marketplace_product_id"
|
||||
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
|
||||
<span x-html="$icon('database', 'w-4 h-4 mr-2')"></span>
|
||||
View Source Product
|
||||
</a>
|
||||
<button
|
||||
@click="openEditModal()"
|
||||
<a
|
||||
:href="'/admin/vendor-products/' + productId + '/edit'"
|
||||
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 dark:text-gray-300 transition-colors duration-150 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||
<span x-html="$icon('pencil', 'w-4 h-4 mr-2')"></span>
|
||||
Edit Overrides
|
||||
</button>
|
||||
<span x-text="product?.marketplace_product_id ? 'Edit Overrides' : 'Edit Product'"></span>
|
||||
</a>
|
||||
<button
|
||||
@click="toggleActive()"
|
||||
:class="product?.is_active
|
||||
@@ -194,7 +212,7 @@
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||
Product Identifiers
|
||||
</h3>
|
||||
<div class="grid gap-4 md:grid-cols-4">
|
||||
<div class="grid gap-4" :class="product?.marketplace_product_id ? 'md:grid-cols-4' : 'md:grid-cols-3'">
|
||||
<div>
|
||||
<p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Product ID</p>
|
||||
<p class="text-sm font-mono text-gray-700 dark:text-gray-300" x-text="product?.id || '-'">-</p>
|
||||
@@ -207,41 +225,62 @@
|
||||
<p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Vendor SKU</p>
|
||||
<p class="text-sm font-mono text-gray-700 dark:text-gray-300" x-text="product?.vendor_sku || '-'">-</p>
|
||||
</div>
|
||||
<div>
|
||||
<!-- Source SKU - only for marketplace-sourced products -->
|
||||
<div x-show="product?.marketplace_product_id">
|
||||
<p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Source SKU</p>
|
||||
<p class="text-sm font-mono text-gray-700 dark:text-gray-300" x-text="product?.source_sku || '-'">-</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Source Information Card -->
|
||||
<div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||
Source Information
|
||||
<!-- Source Information Card - only for marketplace-sourced products -->
|
||||
<template x-if="product?.marketplace_product_id">
|
||||
<div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||
Source Information
|
||||
</h3>
|
||||
<a
|
||||
:href="'/admin/marketplace-products/' + product?.marketplace_product_id"
|
||||
class="flex items-center text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400">
|
||||
<span>View Source</span>
|
||||
<span x-html="$icon('arrow-right', 'w-4 h-4 ml-1')"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="grid gap-4 md:grid-cols-3">
|
||||
<div>
|
||||
<p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Marketplace</p>
|
||||
<p class="text-sm text-gray-700 dark:text-gray-300" x-text="product?.source_marketplace || '-'">-</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Source Vendor</p>
|
||||
<p class="text-sm text-gray-700 dark:text-gray-300" x-text="product?.source_vendor || '-'">-</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Marketplace Product ID</p>
|
||||
<p class="text-sm font-mono text-gray-700 dark:text-gray-300" x-text="product?.marketplace_product_id || '-'">-</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Product Origin Card - for directly created products -->
|
||||
<template x-if="!product?.marketplace_product_id">
|
||||
<div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||
Product Origin
|
||||
</h3>
|
||||
<a
|
||||
:href="'/admin/marketplace-products/' + product?.marketplace_product_id"
|
||||
class="flex items-center text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400">
|
||||
<span>View Source</span>
|
||||
<span x-html="$icon('arrow-right', 'w-4 h-4 ml-1')"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="grid gap-4 md:grid-cols-3">
|
||||
<div>
|
||||
<p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Marketplace</p>
|
||||
<p class="text-sm text-gray-700 dark:text-gray-300" x-text="product?.source_marketplace || 'Unknown'">-</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Source Vendor</p>
|
||||
<p class="text-sm text-gray-700 dark:text-gray-300" x-text="product?.source_vendor || 'Unknown'">-</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Marketplace Product ID</p>
|
||||
<p class="text-sm font-mono text-gray-700 dark:text-gray-300" x-text="product?.marketplace_product_id || '-'">-</p>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900/30">
|
||||
<span x-html="$icon('plus-circle', 'w-5 h-5 text-blue-600 dark:text-blue-400')"></span>
|
||||
</span>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-700 dark:text-gray-300">Direct Creation</p>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">This product was created directly in the vendor's catalog</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Description Card -->
|
||||
<div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800" x-show="product?.title || product?.description">
|
||||
|
||||
@@ -146,7 +146,7 @@
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||
Pricing
|
||||
</h3>
|
||||
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-5">
|
||||
{# noqa: FE-008 - Using raw number input for price with EUR prefix #}
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
|
||||
@@ -210,6 +210,21 @@
|
||||
<option value="3">3% (Super-reduced)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
|
||||
Availability
|
||||
</label>
|
||||
<select
|
||||
x-model="form.availability"
|
||||
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
||||
>
|
||||
<option value="">Not specified</option>
|
||||
<option value="in_stock">In Stock</option>
|
||||
<option value="out_of_stock">Out of Stock</option>
|
||||
<option value="preorder">Preorder</option>
|
||||
<option value="backorder">Backorder</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -253,14 +268,13 @@
|
||||
Product Type & Status
|
||||
</h3>
|
||||
<div class="flex flex-wrap gap-6">
|
||||
<label class="flex items-center opacity-60 cursor-not-allowed" title="Derived from marketplace product">
|
||||
<label class="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
x-model="form.is_digital"
|
||||
disabled
|
||||
class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500 cursor-not-allowed"
|
||||
class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
|
||||
/>
|
||||
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Digital Product <span class="text-xs text-gray-500">(from source)</span></span>
|
||||
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Digital Product</span>
|
||||
</label>
|
||||
<label class="flex items-center">
|
||||
<input
|
||||
|
||||
22
app/templates/vendor/media.html
vendored
22
app/templates/vendor/media.html
vendored
@@ -44,7 +44,7 @@
|
||||
<!-- Images -->
|
||||
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-3 mr-4 text-green-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-green-500">
|
||||
<span x-html="$icon('image', 'w-5 h-5')"></span>
|
||||
<span x-html="$icon('photograph', 'w-5 h-5')"></span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Images</p>
|
||||
@@ -55,7 +55,7 @@
|
||||
<!-- Videos -->
|
||||
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
|
||||
<span x-html="$icon('video', 'w-5 h-5')"></span>
|
||||
<span x-html="$icon('play', 'w-5 h-5')"></span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Videos</p>
|
||||
@@ -66,7 +66,7 @@
|
||||
<!-- Documents -->
|
||||
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-3 mr-4 text-orange-500 bg-orange-100 rounded-full dark:text-orange-100 dark:bg-orange-500">
|
||||
<span x-html="$icon('file-text', 'w-5 h-5')"></span>
|
||||
<span x-html="$icon('document-text', 'w-5 h-5')"></span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Documents</p>
|
||||
@@ -128,7 +128,7 @@
|
||||
<!-- Empty State -->
|
||||
<div x-show="media.length === 0" class="bg-white rounded-lg shadow-md dark:bg-gray-800 p-12 text-center">
|
||||
<div class="text-gray-400 mb-4">
|
||||
<span x-html="$icon('image', 'w-16 h-16 mx-auto')"></span>
|
||||
<span x-html="$icon('photograph', 'w-16 h-16 mx-auto')"></span>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-2">No Media Files Yet</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">Upload your first file to get started</p>
|
||||
@@ -163,14 +163,14 @@
|
||||
<!-- Video icon -->
|
||||
<template x-if="item.media_type === 'video'">
|
||||
<div class="w-full h-full flex items-center justify-center text-gray-400">
|
||||
<span x-html="$icon('video', 'w-12 h-12')"></span>
|
||||
<span x-html="$icon('play', 'w-12 h-12')"></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Document icon -->
|
||||
<template x-if="item.media_type === 'document'">
|
||||
<div class="w-full h-full flex items-center justify-center text-gray-400">
|
||||
<span x-html="$icon('file-text', 'w-12 h-12')"></span>
|
||||
<span x-html="$icon('document-text', 'w-12 h-12')"></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -251,7 +251,7 @@
|
||||
>
|
||||
|
||||
<div class="text-gray-400 mb-4">
|
||||
<span x-html="$icon('upload-cloud', 'w-12 h-12 mx-auto')"></span>
|
||||
<span x-html="$icon('cloud-upload', 'w-12 h-12 mx-auto')"></span>
|
||||
</div>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-2">Drag and drop files here, or</p>
|
||||
<button
|
||||
@@ -270,7 +270,7 @@
|
||||
<template x-for="file in uploadingFiles" :key="file.name">
|
||||
<div class="flex items-center gap-3 p-2 bg-gray-50 dark:bg-gray-700 rounded">
|
||||
<div class="flex-shrink-0">
|
||||
<span x-html="$icon(file.status === 'success' ? 'check-circle' : file.status === 'error' ? 'x-circle' : 'loader', 'w-5 h-5')"
|
||||
<span x-html="$icon(file.status === 'success' ? 'check-circle' : file.status === 'error' ? 'x-circle' : 'spinner', 'w-5 h-5')"
|
||||
:class="{
|
||||
'text-green-500': file.status === 'success',
|
||||
'text-red-500': file.status === 'error',
|
||||
@@ -325,7 +325,7 @@
|
||||
</template>
|
||||
<template x-if="selectedMedia?.media_type !== 'image'">
|
||||
<div class="aspect-square flex items-center justify-center text-gray-400">
|
||||
<span x-html="$icon(selectedMedia?.media_type === 'video' ? 'video' : 'file-text', 'w-16 h-16')"></span>
|
||||
<span x-html="$icon(selectedMedia?.media_type === 'video' ? 'play' : 'document-text', 'w-16 h-16')"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
@@ -401,7 +401,7 @@
|
||||
class="px-3 py-2 text-sm border rounded-lg hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-700"
|
||||
title="Copy URL"
|
||||
>
|
||||
<span x-html="$icon('copy', 'w-4 h-4')"></span>
|
||||
<span x-html="$icon('clipboard-copy', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -416,7 +416,7 @@
|
||||
class="px-4 py-2 text-sm font-medium text-red-600 border border-red-600 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20"
|
||||
:disabled="saving"
|
||||
>
|
||||
<span x-html="$icon('trash-2', 'w-4 h-4 inline mr-1')"></span>
|
||||
<span x-html="$icon('trash', 'w-4 h-4 inline mr-1')"></span>
|
||||
Delete
|
||||
</button>
|
||||
<div class="flex gap-3">
|
||||
|
||||
174
app/templates/vendor/product-create.html
vendored
Normal file
174
app/templates/vendor/product-create.html
vendored
Normal file
@@ -0,0 +1,174 @@
|
||||
{# app/templates/vendor/product-create.html #}
|
||||
{% extends "vendor/base.html" %}
|
||||
{% from 'shared/macros/headers.html' import detail_page_header %}
|
||||
|
||||
{% block title %}Create Product{% endblock %}
|
||||
|
||||
{% block alpine_data %}vendorProductCreate(){% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{% call detail_page_header("'Create Product'", backUrl) %}
|
||||
<span>Add a new product to your catalog</span>
|
||||
{% endcall %}
|
||||
|
||||
<!-- Create Form -->
|
||||
<form @submit.prevent="createProduct()">
|
||||
<!-- Basic Information -->
|
||||
<div class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||
Basic Information
|
||||
</h3>
|
||||
<div class="grid gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Title *</label>
|
||||
<input
|
||||
type="text"
|
||||
x-model="form.title"
|
||||
required
|
||||
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
||||
placeholder="Product title"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Brand</label>
|
||||
<input
|
||||
type="text"
|
||||
x-model="form.brand"
|
||||
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
||||
placeholder="Brand name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">SKU</label>
|
||||
<input
|
||||
type="text"
|
||||
x-model="form.vendor_sku"
|
||||
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
||||
placeholder="SKU"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">GTIN/EAN</label>
|
||||
<input
|
||||
type="text"
|
||||
x-model="form.gtin"
|
||||
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
||||
placeholder="GTIN/EAN"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pricing -->
|
||||
<div class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||
Pricing
|
||||
</h3>
|
||||
<div class="grid gap-4 md:grid-cols-3">
|
||||
{# noqa: FE-008 - Using raw number input for price field #}
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Price *</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
x-model="form.price"
|
||||
required
|
||||
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
||||
placeholder="0.00"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Currency</label>
|
||||
<select
|
||||
x-model="form.currency"
|
||||
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
||||
>
|
||||
<option value="EUR">EUR</option>
|
||||
<option value="USD">USD</option>
|
||||
<option value="GBP">GBP</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Availability</label>
|
||||
<select
|
||||
x-model="form.availability"
|
||||
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
||||
>
|
||||
<option value="in_stock">In Stock</option>
|
||||
<option value="out_of_stock">Out of Stock</option>
|
||||
<option value="preorder">Preorder</option>
|
||||
<option value="backorder">Backorder</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status -->
|
||||
<div class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||
Status
|
||||
</h3>
|
||||
<div class="flex flex-wrap gap-6">
|
||||
<label class="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
x-model="form.is_active"
|
||||
class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
|
||||
/>
|
||||
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Active</span>
|
||||
</label>
|
||||
<label class="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
x-model="form.is_featured"
|
||||
class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
|
||||
/>
|
||||
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Featured</span>
|
||||
</label>
|
||||
<label class="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
x-model="form.is_digital"
|
||||
class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
|
||||
/>
|
||||
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Digital Product</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||
Description
|
||||
</h3>
|
||||
<textarea
|
||||
x-model="form.description"
|
||||
rows="6"
|
||||
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
||||
placeholder="Product description"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex items-center justify-between px-4 py-4 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
||||
<a
|
||||
:href="backUrl"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</a>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="saving || !form.title"
|
||||
class="flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
|
||||
>
|
||||
<span x-show="saving" x-html="$icon('spinner', 'w-4 h-4 mr-2 animate-spin')"></span>
|
||||
<span x-text="saving ? 'Creating...' : 'Create Product'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script src="{{ url_for('static', path='vendor/js/product-create.js') }}"></script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user