You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
578 lines
35 KiB
578 lines
35 KiB
{{> layouts/main title="Products" activeMenu="ecommerce" activePage="products"}}
|
|
|
|
{{#*inline "content"}}
|
|
<div class="dashboard-main-wrapper">
|
|
<!-- Header -->
|
|
{{> layouts/header}}
|
|
|
|
<!-- Sidebar -->
|
|
{{> layouts/sidebar activeMenu="ecommerce" activePage="products"}}
|
|
|
|
<!-- Main Content -->
|
|
<div class="dashboard-wrapper">
|
|
<div class="dashboard-ecommerce">
|
|
<div class="container-fluid dashboard-content">
|
|
<!-- Page Header -->
|
|
<div class="row">
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
|
<div class="page-header">
|
|
<h2 class="pageheader-title">Products</h2>
|
|
<p class="pageheader-text">Browse and manage your product catalog with advanced filtering and search capabilities.</p>
|
|
<div class="page-breadcrumb">
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="/" class="breadcrumb-link">Dashboard</a></li>
|
|
<li class="breadcrumb-item"><a href="#" class="breadcrumb-link">E-Commerce</a></li>
|
|
<li class="breadcrumb-item active" aria-current="page">Products</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filters and Search -->
|
|
<div class="row mb-4">
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col-xl-6 col-lg-6 col-md-12">
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" placeholder="Search products..." id="productSearch">
|
|
<button class="btn btn-primary" type="button">
|
|
<i class="fas fa-search"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-6 col-lg-6 col-md-12">
|
|
<div class="d-flex gap-2 justify-content-lg-end mt-3 mt-lg-0">
|
|
<select class="form-select" id="categoryFilter">
|
|
<option value="">All Categories</option>
|
|
<option value="electronics">Electronics</option>
|
|
<option value="fashion">Fashion</option>
|
|
<option value="home">Home & Garden</option>
|
|
<option value="sports">Sports & Outdoors</option>
|
|
<option value="books">Books</option>
|
|
</select>
|
|
<select class="form-select" id="sortBy">
|
|
<option value="featured">Featured</option>
|
|
<option value="price-low">Price: Low to High</option>
|
|
<option value="price-high">Price: High to Low</option>
|
|
<option value="newest">Newest First</option>
|
|
<option value="rating">Best Rated</option>
|
|
</select>
|
|
<button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addProductModal">
|
|
<i class="fas fa-plus me-1"></i>Add Product
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product Stats -->
|
|
<div class="row">
|
|
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="d-inline-block">
|
|
<h5 class="text-muted">Total Products</h5>
|
|
<h2 class="mb-0">2,386</h2>
|
|
</div>
|
|
<div class="float-end">
|
|
<i class="fas fa-box fa-2x text-primary"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="d-inline-block">
|
|
<h5 class="text-muted">Active Products</h5>
|
|
<h2 class="mb-0">1,953</h2>
|
|
</div>
|
|
<div class="float-end">
|
|
<i class="fas fa-check-circle fa-2x text-success"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="d-inline-block">
|
|
<h5 class="text-muted">Out of Stock</h5>
|
|
<h2 class="mb-0">147</h2>
|
|
</div>
|
|
<div class="float-end">
|
|
<i class="fas fa-exclamation-triangle fa-2x text-warning"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="d-inline-block">
|
|
<h5 class="text-muted">Categories</h5>
|
|
<h2 class="mb-0">24</h2>
|
|
</div>
|
|
<div class="float-end">
|
|
<i class="fas fa-tags fa-2x text-info"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product Grid -->
|
|
<div class="row">
|
|
<!-- Product Card 1 -->
|
|
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
|
|
<div class="card product-card h-100">
|
|
<div class="card-header p-0 position-relative">
|
|
<img src="/assets/images/eco-product-img-1.png" alt="Product" class="img-fluid">
|
|
<span class="badge bg-danger position-absolute top-0 end-0 m-2">-20%</span>
|
|
<div class="product-actions">
|
|
<button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Quick View">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Add to Wishlist">
|
|
<i class="fas fa-heart"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h5 class="card-title mb-1">
|
|
<a href="/pages/ecommerce/product-single.html" class="text-decoration-none text-dark">Apple iPhone 15 Pro</a>
|
|
</h5>
|
|
<div class="mb-2">
|
|
<i class="fas fa-star text-warning"></i>
|
|
<i class="fas fa-star text-warning"></i>
|
|
<i class="fas fa-star text-warning"></i>
|
|
<i class="fas fa-star text-warning"></i>
|
|
<i class="fas fa-star-half-alt text-warning"></i>
|
|
<small class="text-muted">(125)</small>
|
|
</div>
|
|
<p class="text-muted small mb-2">Latest flagship smartphone with advanced features</p>
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<span class="h5 mb-0 text-primary">$999</span>
|
|
<span class="text-muted text-decoration-line-through small">$1,199</span>
|
|
</div>
|
|
<span class="badge bg-success">In Stock</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer bg-light">
|
|
<button class="btn btn-primary btn-sm w-100">
|
|
<i class="fas fa-shopping-cart me-1"></i>Add to Cart
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product Card 2 -->
|
|
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
|
|
<div class="card product-card h-100">
|
|
<div class="card-header p-0 position-relative">
|
|
<img src="/assets/images/eco-product-img-2.png" alt="Product" class="img-fluid">
|
|
<span class="badge bg-success position-absolute top-0 end-0 m-2">New</span>
|
|
<div class="product-actions">
|
|
<button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Quick View">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Add to Wishlist">
|
|
<i class="fas fa-heart"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h5 class="card-title mb-1">
|
|
<a href="/pages/ecommerce/product-single.html" class="text-decoration-none text-dark">MacBook Pro 16"</a>
|
|
</h5>
|
|
<div class="mb-2">
|
|
<i class="fas fa-star text-warning"></i>
|
|
<i class="fas fa-star text-warning"></i>
|
|
<i class="fas fa-star text-warning"></i>
|
|
<i class="fas fa-star text-warning"></i>
|
|
<i class="fas fa-star text-warning"></i>
|
|
<small class="text-muted">(89)</small>
|
|
</div>
|
|
<p class="text-muted small mb-2">Professional laptop with M3 Pro chip</p>
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<span class="h5 mb-0 text-primary">$2,499</span>
|
|
</div>
|
|
<span class="badge bg-success">In Stock</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer bg-light">
|
|
<button class="btn btn-primary btn-sm w-100">
|
|
<i class="fas fa-shopping-cart me-1"></i>Add to Cart
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product Card 3 -->
|
|
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
|
|
<div class="card product-card h-100">
|
|
<div class="card-header p-0 position-relative">
|
|
<img src="/assets/images/eco-product-img-3.png" alt="Product" class="img-fluid">
|
|
<div class="product-actions">
|
|
<button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Quick View">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Add to Wishlist">
|
|
<i class="fas fa-heart"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h5 class="card-title mb-1">
|
|
<a href="/pages/ecommerce/product-single.html" class="text-decoration-none text-dark">Sony WH-1000XM5</a>
|
|
</h5>
|
|
<div class="mb-2">
|
|
<i class="fas fa-star text-warning"></i>
|
|
<i class="fas fa-star text-warning"></i>
|
|
<i class="fas fa-star text-warning"></i>
|
|
<i class="fas fa-star text-warning"></i>
|
|
<i class="fas fa-star text-warning"></i>
|
|
<small class="text-muted">(156)</small>
|
|
</div>
|
|
<p class="text-muted small mb-2">Premium noise-canceling headphones</p>
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<span class="h5 mb-0 text-primary">$399</span>
|
|
</div>
|
|
<span class="badge bg-warning text-dark">Low Stock</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer bg-light">
|
|
<button class="btn btn-primary btn-sm w-100">
|
|
<i class="fas fa-shopping-cart me-1"></i>Add to Cart
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product Card 4 -->
|
|
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
|
|
<div class="card product-card h-100">
|
|
<div class="card-header p-0 position-relative">
|
|
<img src="/assets/images/eco-product-img-4.png" alt="Product" class="img-fluid">
|
|
<span class="badge bg-danger position-absolute top-0 end-0 m-2">Hot</span>
|
|
<div class="product-actions">
|
|
<button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Quick View">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Add to Wishlist">
|
|
<i class="fas fa-heart"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h5 class="card-title mb-1">
|
|
<a href="/pages/ecommerce/product-single.html" class="text-decoration-none text-dark">Samsung Galaxy S24</a>
|
|
</h5>
|
|
<div class="mb-2">
|
|
<i class="fas fa-star text-warning"></i>
|
|
<i class="fas fa-star text-warning"></i>
|
|
<i class="fas fa-star text-warning"></i>
|
|
<i class="fas fa-star text-warning"></i>
|
|
<i class="far fa-star text-warning"></i>
|
|
<small class="text-muted">(98)</small>
|
|
</div>
|
|
<p class="text-muted small mb-2">Android flagship with AI features</p>
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<span class="h5 mb-0 text-primary">$899</span>
|
|
</div>
|
|
<span class="badge bg-danger">Out of Stock</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer bg-light">
|
|
<button class="btn btn-secondary btn-sm w-100" disabled>
|
|
<i class="fas fa-bell me-1"></i>Notify Me
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- More Product Cards... -->
|
|
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
|
|
<div class="card product-card h-100">
|
|
<div class="card-header p-0 position-relative">
|
|
<div class="placeholder-image d-flex align-items-center justify-content-center bg-light" style="height: 200px;">
|
|
<i class="fas fa-laptop fa-3x text-muted"></i>
|
|
</div>
|
|
<div class="product-actions">
|
|
<button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Quick View">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Add to Wishlist">
|
|
<i class="fas fa-heart"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h5 class="card-title mb-1">
|
|
<a href="/pages/ecommerce/product-single.html" class="text-decoration-none text-dark">Dell XPS 13</a>
|
|
</h5>
|
|
<div class="mb-2">
|
|
<i class="fas fa-star text-warning"></i>
|
|
<i class="fas fa-star text-warning"></i>
|
|
<i class="fas fa-star text-warning"></i>
|
|
<i class="fas fa-star text-warning"></i>
|
|
<i class="fas fa-star-half-alt text-warning"></i>
|
|
<small class="text-muted">(67)</small>
|
|
</div>
|
|
<p class="text-muted small mb-2">Ultra-portable laptop with stunning display</p>
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<span class="h5 mb-0 text-primary">$1,299</span>
|
|
</div>
|
|
<span class="badge bg-success">In Stock</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer bg-light">
|
|
<button class="btn btn-primary btn-sm w-100">
|
|
<i class="fas fa-shopping-cart me-1"></i>Add to Cart
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
|
|
<div class="card product-card h-100">
|
|
<div class="card-header p-0 position-relative">
|
|
<div class="placeholder-image d-flex align-items-center justify-content-center bg-light" style="height: 200px;">
|
|
<i class="fas fa-tablet-alt fa-3x text-muted"></i>
|
|
</div>
|
|
<span class="badge bg-info position-absolute top-0 end-0 m-2">Popular</span>
|
|
<div class="product-actions">
|
|
<button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Quick View">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Add to Wishlist">
|
|
<i class="fas fa-heart"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h5 class="card-title mb-1">
|
|
<a href="/pages/ecommerce/product-single.html" class="text-decoration-none text-dark">iPad Pro 12.9"</a>
|
|
</h5>
|
|
<div class="mb-2">
|
|
<i class="fas fa-star text-warning"></i>
|
|
<i class="fas fa-star text-warning"></i>
|
|
<i class="fas fa-star text-warning"></i>
|
|
<i class="fas fa-star text-warning"></i>
|
|
<i class="fas fa-star text-warning"></i>
|
|
<small class="text-muted">(203)</small>
|
|
</div>
|
|
<p class="text-muted small mb-2">Professional tablet with M2 chip</p>
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<span class="h5 mb-0 text-primary">$1,099</span>
|
|
</div>
|
|
<span class="badge bg-success">In Stock</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer bg-light">
|
|
<button class="btn btn-primary btn-sm w-100">
|
|
<i class="fas fa-shopping-cart me-1"></i>Add to Cart
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
|
|
<div class="card product-card h-100">
|
|
<div class="card-header p-0 position-relative">
|
|
<div class="placeholder-image d-flex align-items-center justify-content-center bg-light" style="height: 200px;">
|
|
<i class="fas fa-camera fa-3x text-muted"></i>
|
|
</div>
|
|
<div class="product-actions">
|
|
<button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Quick View">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Add to Wishlist">
|
|
<i class="fas fa-heart"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h5 class="card-title mb-1">
|
|
<a href="/pages/ecommerce/product-single.html" class="text-decoration-none text-dark">Canon EOS R6</a>
|
|
</h5>
|
|
<div class="mb-2">
|
|
<i class="fas fa-star text-warning"></i>
|
|
<i class="fas fa-star text-warning"></i>
|
|
<i class="fas fa-star text-warning"></i>
|
|
<i class="fas fa-star text-warning"></i>
|
|
<i class="far fa-star text-warning"></i>
|
|
<small class="text-muted">(45)</small>
|
|
</div>
|
|
<p class="text-muted small mb-2">Full-frame mirrorless camera</p>
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<span class="h5 mb-0 text-primary">$2,499</span>
|
|
</div>
|
|
<span class="badge bg-success">In Stock</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer bg-light">
|
|
<button class="btn btn-primary btn-sm w-100">
|
|
<i class="fas fa-shopping-cart me-1"></i>Add to Cart
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
|
|
<div class="card product-card h-100">
|
|
<div class="card-header p-0 position-relative">
|
|
<div class="placeholder-image d-flex align-items-center justify-content-center bg-light" style="height: 200px;">
|
|
<i class="fas fa-gamepad fa-3x text-muted"></i>
|
|
</div>
|
|
<span class="badge bg-danger position-absolute top-0 end-0 m-2">-15%</span>
|
|
<div class="product-actions">
|
|
<button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Quick View">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Add to Wishlist">
|
|
<i class="fas fa-heart"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h5 class="card-title mb-1">
|
|
<a href="/pages/ecommerce/product-single.html" class="text-decoration-none text-dark">PlayStation 5</a>
|
|
</h5>
|
|
<div class="mb-2">
|
|
<i class="fas fa-star text-warning"></i>
|
|
<i class="fas fa-star text-warning"></i>
|
|
<i class="fas fa-star text-warning"></i>
|
|
<i class="fas fa-star text-warning"></i>
|
|
<i class="fas fa-star text-warning"></i>
|
|
<small class="text-muted">(512)</small>
|
|
</div>
|
|
<p class="text-muted small mb-2">Next-gen gaming console</p>
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<span class="h5 mb-0 text-primary">$425</span>
|
|
<span class="text-muted text-decoration-line-through small">$499</span>
|
|
</div>
|
|
<span class="badge bg-warning text-dark">Low Stock</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer bg-light">
|
|
<button class="btn btn-primary btn-sm w-100">
|
|
<i class="fas fa-shopping-cart me-1"></i>Add to Cart
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div class="row">
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
|
<nav aria-label="Page navigation">
|
|
<ul class="pagination justify-content-center">
|
|
<li class="page-item disabled">
|
|
<a class="page-link" href="#" tabindex="-1">
|
|
<i class="fas fa-chevron-left"></i>
|
|
</a>
|
|
</li>
|
|
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">5</a></li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">
|
|
<i class="fas fa-chevron-right"></i>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
{{> layouts/footer}}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Product Modal -->
|
|
<div class="modal fade" id="addProductModal" tabindex="-1" aria-labelledby="addProductModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="addProductModalLabel">Add New Product</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="addProductForm">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="productName" class="form-label">Product Name</label>
|
|
<input type="text" class="form-control" id="productName" required>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="productCategory" class="form-label">Category</label>
|
|
<select class="form-select" id="productCategory" required>
|
|
<option value="">Select Category</option>
|
|
<option value="electronics">Electronics</option>
|
|
<option value="fashion">Fashion</option>
|
|
<option value="home">Home & Garden</option>
|
|
<option value="sports">Sports & Outdoors</option>
|
|
<option value="books">Books</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4 mb-3">
|
|
<label for="productPrice" class="form-label">Price</label>
|
|
<input type="number" class="form-control" id="productPrice" step="0.01" required>
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<label for="productStock" class="form-label">Stock Quantity</label>
|
|
<input type="number" class="form-control" id="productStock" required>
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<label for="productSKU" class="form-label">SKU</label>
|
|
<input type="text" class="form-control" id="productSKU" required>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="productDescription" class="form-label">Description</label>
|
|
<textarea class="form-control" id="productDescription" rows="3" required></textarea>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="productImage" class="form-label">Product Image</label>
|
|
<input type="file" class="form-control" id="productImage" accept="image/*">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="submit" form="addProductForm" class="btn btn-primary">Add Product</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Page Specific Scripts -->
|
|
<script type="module" src="/js/pages/products.js"></script>
|
|
{{/inline}}
|
|
|
|
{{> layouts/base}}
|