updateweb
This commit is contained in:
Local Server
@@ -12,6 +12,11 @@
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
||||
/>
|
||||
<!-- Quill Editor CSS -->
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="/admin/css/admin-style.css" />
|
||||
</head>
|
||||
<body>
|
||||
@@ -73,7 +78,7 @@
|
||||
<p class="mb-0 text-muted">Manage your product catalog</p>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn-logout" onclick="logout()">
|
||||
<button class="btn-logout" id="btnLogout">
|
||||
<i class="bi bi-box-arrow-right"></i> Logout
|
||||
</button>
|
||||
</div>
|
||||
@@ -81,7 +86,7 @@
|
||||
|
||||
<!-- Actions Bar -->
|
||||
<div class="actions-bar">
|
||||
<button class="btn btn-primary" onclick="showCreateProduct()">
|
||||
<button class="btn btn-primary" id="btnAddProduct">
|
||||
<i class="bi bi-plus-circle"></i> Add New Product
|
||||
</button>
|
||||
<div class="search-box">
|
||||
@@ -90,7 +95,6 @@
|
||||
type="text"
|
||||
placeholder="Search products..."
|
||||
id="searchInput"
|
||||
oninput="filterProducts()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -140,6 +144,7 @@
|
||||
<form id="productForm">
|
||||
<input type="hidden" id="productId" />
|
||||
|
||||
<!-- Product Name -->
|
||||
<div class="mb-3">
|
||||
<label for="productName" class="form-label"
|
||||
>Product Name *</label
|
||||
@@ -152,57 +157,175 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Short Description -->
|
||||
<div class="mb-3">
|
||||
<label for="productDescription" class="form-label"
|
||||
>Description</label
|
||||
<label for="productShortDescription" class="form-label"
|
||||
>Short Description</label
|
||||
>
|
||||
<textarea
|
||||
class="form-control"
|
||||
id="productDescription"
|
||||
rows="4"
|
||||
id="productShortDescription"
|
||||
rows="2"
|
||||
placeholder="Brief description for product listings (max 500 characters)"
|
||||
maxlength="500"
|
||||
></textarea>
|
||||
<small class="text-muted"
|
||||
>This will be shown in product listings</small
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Full Description with Rich Text Editor -->
|
||||
<div class="mb-3">
|
||||
<label for="productDescription" class="form-label"
|
||||
>Full Description *</label
|
||||
>
|
||||
<div id="productDescriptionEditor" style="height: 200px"></div>
|
||||
<textarea
|
||||
id="productDescription"
|
||||
style="display: none"
|
||||
></textarea>
|
||||
<small class="text-muted"
|
||||
>Use the editor to format your product description</small
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Pricing and Stock -->
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="col-md-4 mb-3">
|
||||
<label for="productPrice" class="form-label">Price *</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
class="form-control"
|
||||
id="productPrice"
|
||||
required
|
||||
/>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">$</span>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
class="form-control"
|
||||
id="productPrice"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="col-md-4 mb-3">
|
||||
<label for="productStock" class="form-label"
|
||||
>Stock Quantity</label
|
||||
>
|
||||
<input type="number" class="form-control" id="productStock" />
|
||||
<input
|
||||
type="number"
|
||||
class="form-control"
|
||||
id="productStock"
|
||||
value="0"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<label for="productSKU" class="form-label">SKU</label>
|
||||
<input type="text" class="form-control" id="productSKU" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="productCategory" class="form-label">Category</label>
|
||||
<input type="text" class="form-control" id="productCategory" />
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="productImages" class="form-label"
|
||||
>Product Images</label
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
class="form-control"
|
||||
id="productImages"
|
||||
multiple
|
||||
accept="image/*"
|
||||
/>
|
||||
<small class="text-muted">You can upload multiple images</small>
|
||||
</div>
|
||||
|
||||
<!-- Category and Details -->
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="productCategory" class="form-label"
|
||||
>Category</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="productCategory"
|
||||
placeholder="e.g., Canvas Art, Prints"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="productMaterial" class="form-label"
|
||||
>Material</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="productMaterial"
|
||||
placeholder="e.g., Canvas, Acrylic"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dimensions and Weight -->
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="productDimensions" class="form-label"
|
||||
>Dimensions</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="productDimensions"
|
||||
placeholder="e.g., 24x36 inches"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="productWeight" class="form-label"
|
||||
>Weight (lbs)</label
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
step="0.1"
|
||||
class="form-control"
|
||||
id="productWeight"
|
||||
placeholder="e.g., 2.5"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product Images Gallery -->
|
||||
<div class="mb-4">
|
||||
<label class="form-label"
|
||||
><i class="bi bi-image"></i> Product Images</label
|
||||
>
|
||||
<p class="text-muted small">
|
||||
Upload or select images for this product. These images will be
|
||||
available to assign to color variants below.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-primary mb-3"
|
||||
onclick="openMediaLibrary('productImage')"
|
||||
>
|
||||
<i class="bi bi-cloud-upload"></i> Select from Media Library
|
||||
</button>
|
||||
<div
|
||||
id="productImagesGallery"
|
||||
class="d-flex flex-wrap gap-2 border rounded p-3"
|
||||
style="min-height: 100px"
|
||||
>
|
||||
<!-- Product images will be displayed here -->
|
||||
<div class="text-muted small">
|
||||
No images added yet. Click above to add images.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product Images with Color Variants -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label"
|
||||
><i class="bi bi-images"></i> Product Images with Color
|
||||
Variants</label
|
||||
>
|
||||
<div id="imageVariantsContainer" class="border rounded p-3">
|
||||
<!-- Image variants will be added here -->
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-primary mt-2"
|
||||
id="btnAddImageVariant"
|
||||
>
|
||||
<i class="bi bi-plus-circle"></i> Add Image with Color Variant
|
||||
</button>
|
||||
<small class="text-muted d-block mt-2"
|
||||
>Add multiple images and assign color variants to each</small
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Status Checkboxes -->
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="form-check form-switch">
|
||||
<input
|
||||
class="form-check-input"
|
||||
@@ -211,11 +334,23 @@
|
||||
checked
|
||||
/>
|
||||
<label class="form-check-label" for="productActive">
|
||||
Active (Visible on website)
|
||||
<i class="bi bi-eye"></i> Active (Visible on website)
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="form-check form-switch">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
id="productFeatured"
|
||||
/>
|
||||
<label class="form-check-label" for="productFeatured">
|
||||
<i class="bi bi-star"></i> Featured
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="form-check form-switch">
|
||||
<input
|
||||
class="form-check-input"
|
||||
@@ -223,7 +358,7 @@
|
||||
id="productBestSeller"
|
||||
/>
|
||||
<label class="form-check-label" for="productBestSeller">
|
||||
Mark as Best Seller
|
||||
<i class="bi bi-award"></i> Best Seller
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -238,11 +373,7 @@
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
onclick="saveProduct()"
|
||||
>
|
||||
<button type="button" class="btn btn-primary" id="btnSaveProduct">
|
||||
<i class="bi bi-save"></i> Save & Publish
|
||||
</button>
|
||||
</div>
|
||||
@@ -251,6 +382,8 @@
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- Quill Editor JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.js"></script>
|
||||
<script src="/admin/js/auth.js"></script>
|
||||
<script src="/admin/js/products.js"></script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user