|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>WooCommerce Product Import CSV Generator</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/@preline/[email protected]/dist/preline.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.variation-item { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.variation-item:hover { |
|
|
background-color: #f3f4f6; |
|
|
} |
|
|
.progress-bar { |
|
|
height: 6px; |
|
|
background-color: #e5e7eb; |
|
|
border-radius: 3px; |
|
|
overflow: hidden; |
|
|
} |
|
|
.progress-bar-fill { |
|
|
height: 100%; |
|
|
background-color: #10b981; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
.toast { |
|
|
position: fixed; |
|
|
top: 20px; |
|
|
right: 20px; |
|
|
padding: 12px 20px; |
|
|
background-color: #10b981; |
|
|
color: white; |
|
|
border-radius: 6px; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
transform: translateX(200%); |
|
|
transition: transform 0.3s ease; |
|
|
z-index: 1000; |
|
|
} |
|
|
.toast.show { |
|
|
transform: translateX(0); |
|
|
} |
|
|
.toast.error { |
|
|
background-color: #ef4444; |
|
|
} |
|
|
.back-to-top { |
|
|
position: fixed; |
|
|
bottom: 30px; |
|
|
right: 30px; |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
border-radius: 50%; |
|
|
background-color: #3b82f6; |
|
|
color: white; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
cursor: pointer; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s ease; |
|
|
z-index: 999; |
|
|
} |
|
|
.back-to-top.visible { |
|
|
opacity: 1; |
|
|
} |
|
|
.back-to-top:hover { |
|
|
background-color: #2563eb; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100"> |
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<div> |
|
|
<h1 class="text-3xl font-bold text-gray-800">WooCommerce Product Import CSV Generator</h1> |
|
|
<p class="text-gray-600 mt-1">Create CSV files for bulk importing products to WooCommerce</p> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium"> |
|
|
<i class="fas fa-box-open mr-1"></i> |
|
|
<span id="productCount">0</span> products |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md p-6 mb-6 border border-gray-200"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-semibold text-gray-700">Product List</h2> |
|
|
<button id="addProductBtn" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 transition-colors"> |
|
|
<i class="fas fa-plus mr-2"></i>Add Product |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="productList" class="space-y-4"> |
|
|
<div class="text-center py-12 text-gray-500"> |
|
|
<i class="fas fa-box-open text-4xl mb-2"></i> |
|
|
<p>No products added yet</p> |
|
|
<button id="addFirstProductBtn" class="mt-4 px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 transition-colors"> |
|
|
<i class="fas fa-plus mr-2"></i>Add Your First Product |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-end space-x-3 pt-4"> |
|
|
<button id="resetBtn" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors"> |
|
|
<i class="fas fa-trash-alt mr-2"></i>Reset All |
|
|
</button> |
|
|
<button id="generateBtn" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 transition-colors"> |
|
|
<i class="fas fa-file-csv mr-2"></i>Generate CSV |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="backToTop" class="back-to-top"> |
|
|
<i class="fas fa-arrow-up"></i> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="productModal" class="fixed z-10 inset-0 overflow-y-auto hidden"> |
|
|
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> |
|
|
<div class="fixed inset-0 transition-opacity" aria-hidden="true"> |
|
|
<div class="absolute inset-0 bg-gray-500 opacity-75"></div> |
|
|
</div> |
|
|
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full"> |
|
|
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4" id="modalTitle">Add New Product</h3> |
|
|
<div class="mt-2"> |
|
|
<form id="productForm" class="space-y-4"> |
|
|
<input type="hidden" id="productId"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label for="productType" class="block text-sm font-medium text-gray-700">Product Type</label> |
|
|
<select id="productType" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"> |
|
|
<option value="simple">Simple</option> |
|
|
<option value="variable">Variable</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label for="sku" class="block text-sm font-medium text-gray-700">SKU</label> |
|
|
<input type="text" id="sku" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="productName" class="block text-sm font-medium text-gray-700">Product Name*</label> |
|
|
<input type="text" id="productName" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="shortDescription" class="block text-sm font-medium text-gray-700">Short Description</label> |
|
|
<textarea id="shortDescription" rows="2" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"></textarea> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="description" class="block text-sm font-medium text-gray-700">Description</label> |
|
|
<textarea id="description" rows="4" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
|
<div> |
|
|
<label for="regularPrice" class="block text-sm font-medium text-gray-700">Regular Price</label> |
|
|
<input type="number" step="0.01" id="regularPrice" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="salePrice" class="block text-sm font-medium text-gray-700">Sale Price</label> |
|
|
<input type="number" step="0.01" id="salePrice" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="stock" class="block text-sm font-medium text-gray-700">Stock Quantity</label> |
|
|
<input type="number" id="stock" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label for="weight" class="block text-sm font-medium text-gray-700">Weight (kg)</label> |
|
|
<input type="number" step="0.01" id="weight" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="category" class="block text-sm font-medium text-gray-700">Category Slug</label> |
|
|
<input type="text" id="category" placeholder="e.g. electronics" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"> |
|
|
<p class="text-xs text-gray-500 mt-1">Enter the category slug (e.g. electronics, clothing)</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="tags" class="block text-sm font-medium text-gray-700">Tags (comma separated)</label> |
|
|
<input type="text" id="tags" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="imageUrl" class="block text-sm font-medium text-gray-700">Image URL</label> |
|
|
<input type="text" id="imageUrl" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"> |
|
|
</div> |
|
|
|
|
|
<div id="variationsSection" class="hidden"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<label class="block text-sm font-medium text-gray-700">Weight Variations*</label> |
|
|
<button type="button" id="addVariationBtn" class="px-2 py-1 text-xs bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"> |
|
|
<i class="fas fa-plus mr-1"></i>Add Variation |
|
|
</button> |
|
|
</div> |
|
|
<div id="variationsContainer" class="space-y-2"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> |
|
|
<button type="button" id="saveProductBtn" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm transition-colors"> |
|
|
Save Product |
|
|
</button> |
|
|
<button type="button" id="cancelProductBtn" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm transition-colors"> |
|
|
Cancel |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="csvModal" class="fixed z-10 inset-0 overflow-y-auto hidden"> |
|
|
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> |
|
|
<div class="fixed inset-0 transition-opacity" aria-hidden="true"> |
|
|
<div class="absolute inset-0 bg-gray-500 opacity-75"></div> |
|
|
</div> |
|
|
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> |
|
|
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> |
|
|
<div class="sm:flex sm:items-start"> |
|
|
<div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-green-100 sm:mx-0 sm:h-10 sm:w-10"> |
|
|
<i class="fas fa-file-csv text-green-600"></i> |
|
|
</div> |
|
|
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900" id="csvModalTitle">CSV Generated Successfully</h3> |
|
|
<div class="mt-2"> |
|
|
<p class="text-sm text-gray-500">Your WooCommerce compatible CSV file is ready to download.</p> |
|
|
<div class="mt-4"> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-bar-fill" style="width: 100%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> |
|
|
<button type="button" id="downloadCsvBtn" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm transition-colors"> |
|
|
<i class="fas fa-download mr-2"></i>Download CSV |
|
|
</button> |
|
|
<button type="button" id="closeCsvModalBtn" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm transition-colors"> |
|
|
Close |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="toast" class="toast"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2"></i> |
|
|
<span id="toastMessage">Operation completed successfully</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
let products = []; |
|
|
let currentProductId = 0; |
|
|
let editingProductId = null; |
|
|
let csvData = null; |
|
|
|
|
|
|
|
|
const addProductBtn = document.getElementById('addProductBtn'); |
|
|
const addFirstProductBtn = document.getElementById('addFirstProductBtn'); |
|
|
const productList = document.getElementById('productList'); |
|
|
const productModal = document.getElementById('productModal'); |
|
|
const productForm = document.getElementById('productForm'); |
|
|
const saveProductBtn = document.getElementById('saveProductBtn'); |
|
|
const cancelProductBtn = document.getElementById('cancelProductBtn'); |
|
|
const resetBtn = document.getElementById('resetBtn'); |
|
|
const generateBtn = document.getElementById('generateBtn'); |
|
|
const productTypeSelect = document.getElementById('productType'); |
|
|
const variationsSection = document.getElementById('variationsSection'); |
|
|
const variationsContainer = document.getElementById('variationsContainer'); |
|
|
const addVariationBtn = document.getElementById('addVariationBtn'); |
|
|
const csvModal = document.getElementById('csvModal'); |
|
|
const downloadCsvBtn = document.getElementById('downloadCsvBtn'); |
|
|
const closeCsvModalBtn = document.getElementById('closeCsvModalBtn'); |
|
|
const toast = document.getElementById('toast'); |
|
|
const productCount = document.getElementById('productCount'); |
|
|
const backToTop = document.getElementById('backToTop'); |
|
|
|
|
|
|
|
|
addProductBtn.addEventListener('click', openAddProductModal); |
|
|
addFirstProductBtn.addEventListener('click', openAddProductModal); |
|
|
saveProductBtn.addEventListener('click', saveProduct); |
|
|
cancelProductBtn.addEventListener('click', closeModal); |
|
|
resetBtn.addEventListener('click', resetAll); |
|
|
generateBtn.addEventListener('click', generateCSV); |
|
|
productTypeSelect.addEventListener('change', toggleVariationsSection); |
|
|
addVariationBtn.addEventListener('click', addVariation); |
|
|
downloadCsvBtn.addEventListener('click', downloadCSV); |
|
|
closeCsvModalBtn.addEventListener('click', closeCsvModal); |
|
|
|
|
|
|
|
|
window.addEventListener('scroll', function() { |
|
|
if (window.pageYOffset > 300) { |
|
|
backToTop.classList.add('visible'); |
|
|
} else { |
|
|
backToTop.classList.remove('visible'); |
|
|
} |
|
|
}); |
|
|
|
|
|
backToTop.addEventListener('click', function() { |
|
|
window.scrollTo({ |
|
|
top: 0, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function openAddProductModal() { |
|
|
editingProductId = null; |
|
|
document.getElementById('modalTitle').textContent = 'Add New Product'; |
|
|
productForm.reset(); |
|
|
variationsContainer.innerHTML = ''; |
|
|
document.getElementById('productId').value = ''; |
|
|
productModal.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function openEditProductModal(productId) { |
|
|
const product = products.find(p => p.id === productId); |
|
|
if (!product) return; |
|
|
|
|
|
editingProductId = productId; |
|
|
document.getElementById('modalTitle').textContent = 'Edit Product'; |
|
|
document.getElementById('productId').value = product.id; |
|
|
document.getElementById('productType').value = product.type; |
|
|
document.getElementById('sku').value = product.sku || ''; |
|
|
document.getElementById('productName').value = product.name; |
|
|
document.getElementById('shortDescription').value = product.shortDescription || ''; |
|
|
document.getElementById('description').value = product.description || ''; |
|
|
document.getElementById('regularPrice').value = product.regularPrice || ''; |
|
|
document.getElementById('salePrice').value = product.salePrice || ''; |
|
|
document.getElementById('stock').value = product.stock || ''; |
|
|
document.getElementById('weight').value = product.weight || ''; |
|
|
document.getElementById('category').value = product.category || ''; |
|
|
document.getElementById('tags').value = product.tags || ''; |
|
|
document.getElementById('imageUrl').value = product.imageUrl || ''; |
|
|
|
|
|
|
|
|
variationsContainer.innerHTML = ''; |
|
|
if (product.type === 'variable' && product.variations && product.variations.length > 0) { |
|
|
product.variations.forEach(variation => { |
|
|
addVariation(variation.weight, variation.price); |
|
|
}); |
|
|
} |
|
|
|
|
|
toggleVariationsSection(); |
|
|
productModal.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function closeModal() { |
|
|
productModal.classList.add('hidden'); |
|
|
} |
|
|
|
|
|
function closeCsvModal() { |
|
|
csvModal.classList.add('hidden'); |
|
|
} |
|
|
|
|
|
function toggleVariationsSection() { |
|
|
if (productTypeSelect.value === 'variable') { |
|
|
variationsSection.classList.remove('hidden'); |
|
|
} else { |
|
|
variationsSection.classList.add('hidden'); |
|
|
} |
|
|
} |
|
|
|
|
|
function addVariation(weight = '', price = '') { |
|
|
const variationId = Date.now(); |
|
|
const variationItem = document.createElement('div'); |
|
|
variationItem.className = 'variation-item p-3 border rounded-md'; |
|
|
variationItem.dataset.id = variationId; |
|
|
variationItem.innerHTML = ` |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-3"> |
|
|
<div> |
|
|
<label class="block text-xs font-medium text-gray-500">Weight (kg)*</label> |
|
|
<input type="number" step="0.01" class="variation-weight w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" value="${weight}" required> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-xs font-medium text-gray-500">Price*</label> |
|
|
<input type="number" step="0.01" class="variation-price w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" value="${price}" required> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-2 flex justify-end"> |
|
|
<button type="button" class="remove-variation text-xs text-red-500 hover:text-red-700 transition-colors"> |
|
|
<i class="fas fa-trash mr-1"></i>Remove |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
variationsContainer.appendChild(variationItem); |
|
|
|
|
|
|
|
|
variationItem.querySelector('.remove-variation').addEventListener('click', function() { |
|
|
variationsContainer.removeChild(variationItem); |
|
|
}); |
|
|
} |
|
|
|
|
|
function saveProduct() { |
|
|
const productId = document.getElementById('productId').value; |
|
|
const productType = document.getElementById('productType').value; |
|
|
const sku = document.getElementById('sku').value; |
|
|
const productName = document.getElementById('productName').value; |
|
|
const shortDescription = document.getElementById('shortDescription').value; |
|
|
const description = document.getElementById('description').value; |
|
|
const regularPrice = document.getElementById('regularPrice').value; |
|
|
const salePrice = document.getElementById('salePrice').value; |
|
|
const stock = document.getElementById('stock').value; |
|
|
const weight = document.getElementById('weight').value; |
|
|
const category = document.getElementById('category').value; |
|
|
const tags = document.getElementById('tags').value; |
|
|
const imageUrl = document.getElementById('imageUrl').value; |
|
|
|
|
|
|
|
|
let variations = []; |
|
|
if (productType === 'variable') { |
|
|
const variationItems = variationsContainer.querySelectorAll('.variation-item'); |
|
|
variationItems.forEach(item => { |
|
|
const weight = item.querySelector('.variation-weight').value; |
|
|
const price = item.querySelector('.variation-price').value; |
|
|
if (weight && price) { |
|
|
variations.push({ |
|
|
weight: weight, |
|
|
price: price |
|
|
}); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
if (!productName) { |
|
|
showToast('Product name is required', true); |
|
|
return; |
|
|
} |
|
|
|
|
|
if (productType === 'variable' && variations.length === 0) { |
|
|
showToast('Please add at least one weight variation for variable products', true); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
const productData = { |
|
|
id: productId || ++currentProductId, |
|
|
type: productType, |
|
|
sku: sku, |
|
|
name: productName, |
|
|
shortDescription: shortDescription, |
|
|
description: description, |
|
|
regularPrice: regularPrice, |
|
|
salePrice: salePrice, |
|
|
stock: stock, |
|
|
weight: weight, |
|
|
category: category, |
|
|
tags: tags, |
|
|
imageUrl: imageUrl, |
|
|
variations: variations |
|
|
}; |
|
|
|
|
|
if (editingProductId !== null) { |
|
|
|
|
|
const index = products.findIndex(p => p.id === editingProductId); |
|
|
if (index !== -1) { |
|
|
products[index] = productData; |
|
|
showToast('Product updated successfully'); |
|
|
} |
|
|
} else { |
|
|
|
|
|
products.push(productData); |
|
|
showToast('Product added successfully'); |
|
|
} |
|
|
|
|
|
renderProductList(); |
|
|
closeModal(); |
|
|
} |
|
|
|
|
|
function renderProductList() { |
|
|
productList.innerHTML = ''; |
|
|
|
|
|
if (products.length === 0) { |
|
|
productList.innerHTML = ` |
|
|
<div class="text-center py-12 text-gray-500"> |
|
|
<i class="fas fa-box-open text-4xl mb-2"></i> |
|
|
<p>No products added yet</p> |
|
|
<button id="addFirstProductBtn" class="mt-4 px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 transition-colors"> |
|
|
<i class="fas fa-plus mr-2"></i>Add Your First Product |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
|
|
|
document.getElementById('addFirstProductBtn').addEventListener('click', openAddProductModal); |
|
|
|
|
|
productCount.textContent = '0'; |
|
|
return; |
|
|
} |
|
|
|
|
|
productCount.textContent = products.length; |
|
|
|
|
|
products.forEach(product => { |
|
|
const productCard = document.createElement('div'); |
|
|
productCard.className = 'bg-white border rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow border-gray-200'; |
|
|
productCard.innerHTML = ` |
|
|
<div class="p-4"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h3 class="font-medium text-gray-900">${product.name}</h3> |
|
|
<p class="text-sm text-gray-500 mt-1"> |
|
|
${product.type === 'simple' ? 'Simple Product' : 'Variable Product'} |
|
|
${product.sku ? `• SKU: ${product.sku}` : ''} |
|
|
</p> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="edit-product p-1 text-blue-500 hover:text-blue-700 transition-colors" data-id="${product.id}" title="Edit"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button class="duplicate-product p-1 text-purple-500 hover:text-purple-700 transition-colors" data-id="${product.id}" title="Duplicate"> |
|
|
<i class="fas fa-copy"></i> |
|
|
</button> |
|
|
<button class="delete-product p-1 text-red-500 hover:text-red-700 transition-colors" data-id="${product.id}" title="Delete"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
${product.type === 'variable' ? ` |
|
|
<div class="mt-3"> |
|
|
<p class="text-xs font-medium text-gray-500">Weight Variations:</p> |
|
|
<div class="flex flex-wrap gap-1 mt-1"> |
|
|
${product.variations.map(v => ` |
|
|
<span class="text-xs bg-gray-100 px-2 py-1 rounded">${v.weight}kg (${v.price}৳)</span> |
|
|
`).join('')} |
|
|
</div> |
|
|
</div> |
|
|
` : ''} |
|
|
${product.regularPrice ? ` |
|
|
<div class="mt-2"> |
|
|
<span class="text-sm font-medium">Price: ${product.regularPrice}৳</span> |
|
|
${product.salePrice ? `<span class="text-sm text-gray-500 ml-2 line-through">${product.salePrice}৳</span>` : ''} |
|
|
</div> |
|
|
` : ''} |
|
|
${product.category ? ` |
|
|
<div class="mt-2"> |
|
|
<span class="text-xs bg-gray-100 px-2 py-1 rounded">Category: ${product.category}</span> |
|
|
</div> |
|
|
` : ''} |
|
|
</div> |
|
|
`; |
|
|
productList.appendChild(productCard); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.edit-product').forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
openEditProductModal(parseInt(this.dataset.id)); |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('.duplicate-product').forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
duplicateProduct(parseInt(this.dataset.id)); |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('.delete-product').forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
deleteProduct(parseInt(this.dataset.id)); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
|
|
|
function duplicateProduct(productId) { |
|
|
const product = products.find(p => p.id === productId); |
|
|
if (!product) return; |
|
|
|
|
|
|
|
|
const productCopy = JSON.parse(JSON.stringify(product)); |
|
|
productCopy.id = ++currentProductId; |
|
|
productCopy.name = `${productCopy.name} (Copy)`; |
|
|
|
|
|
|
|
|
products.push(productCopy); |
|
|
renderProductList(); |
|
|
showToast('Product duplicated successfully'); |
|
|
} |
|
|
|
|
|
function deleteProduct(productId) { |
|
|
if (confirm('Are you sure you want to delete this product?')) { |
|
|
products = products.filter(p => p.id !== productId); |
|
|
renderProductList(); |
|
|
showToast('Product deleted successfully'); |
|
|
} |
|
|
} |
|
|
|
|
|
function resetAll() { |
|
|
if (products.length === 0 || confirm('Are you sure you want to reset all products? This cannot be undone.')) { |
|
|
products = []; |
|
|
currentProductId = 0; |
|
|
renderProductList(); |
|
|
showToast('All products have been reset'); |
|
|
} |
|
|
} |
|
|
|
|
|
function generateCSV() { |
|
|
if (products.length === 0) { |
|
|
showToast('No products to generate CSV', true); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
const csvRows = []; |
|
|
|
|
|
|
|
|
const headers = [ |
|
|
'ID', 'Type', 'SKU', 'Name', 'Published', 'Is featured?', 'Visibility in catalog', |
|
|
'Short description', 'Description', 'Date sale price starts', 'Date sale price ends', |
|
|
'Tax status', 'Tax class', 'In stock?', 'Stock', 'Backorders', 'Sold individually?', |
|
|
'Weight (kg)', 'Length (cm)', 'Width (cm)', 'Height (cm)', 'Allow customer reviews?', |
|
|
'Purchase note', 'Sale price', 'Regular price', 'Categories', 'Tags', 'Shipping class', |
|
|
'Images', 'Download limit', 'Download expiry days', 'Parent', 'Grouped products', |
|
|
'Upsells', 'Cross-sells', 'External URL', 'Button text', 'Position', 'Attribute 1 name', |
|
|
'Attribute 1 value(s)', 'Attribute 1 visible', 'Attribute 1 global', 'Attribute 2 name', |
|
|
'Attribute 2 value(s)', 'Attribute 2 visible', 'Attribute 2 global', 'Meta: _wpcom_is_markdown', |
|
|
'Download 1 name', 'Download 1 URL', 'Download 2 name', 'Download 2 URL' |
|
|
]; |
|
|
|
|
|
csvRows.push(headers); |
|
|
|
|
|
|
|
|
products.forEach(product => { |
|
|
if (product.type === 'simple') { |
|
|
|
|
|
const row = [ |
|
|
'', |
|
|
'simple', |
|
|
product.sku || '', |
|
|
product.name, |
|
|
'1', |
|
|
'0', |
|
|
'visible', |
|
|
product.shortDescription || '', |
|
|
product.description || '', |
|
|
'', |
|
|
'', |
|
|
'taxable', |
|
|
'', |
|
|
product.stock ? '1' : '0', |
|
|
product.stock || '', |
|
|
'0', |
|
|
'0', |
|
|
product.weight || '', |
|
|
'', |
|
|
'', |
|
|
'', |
|
|
'1', |
|
|
'', |
|
|
product.salePrice || '', |
|
|
product.regularPrice || '', |
|
|
product.category ? `${product.category}:${product.category}` : '', |
|
|
product.tags || '', |
|
|
'', |
|
|
product.imageUrl || '', |
|
|
'', |
|
|
'', |
|
|
'', |
|
|
'', |
|
|
'', |
|
|
'', |
|
|
'', |
|
|
'', |
|
|
'0', |
|
|
'', |
|
|
'', |
|
|
'0', |
|
|
'0', |
|
|
'', |
|
|
'', |
|
|
'0', |
|
|
'0', |
|
|
'0', |
|
|
'', |
|
|
'', |
|
|
'', |
|
|
'', |
|
|
]; |
|
|
|
|
|
csvRows.push(row); |
|
|
} else if (product.type === 'variable') { |
|
|
|
|
|
const parentRow = [ |
|
|
'', |
|
|
'variable', |
|
|
product.sku || '', |
|
|
product.name, |
|
|
'1', |
|
|
'0', |
|
|
'visible', |
|
|
product.shortDescription || '', |
|
|
product.description || '', |
|
|
'', |
|
|
'', |
|
|
'taxable', |
|
|
'', |
|
|
'1', |
|
|
'', |
|
|
'0', |
|
|
'0', |
|
|
'', |
|
|
'', |
|
|
'', |
|
|
'', |
|
|
'1', |
|
|
'', |
|
|
'', |
|
|
'', |
|
|
product.category ? `${product.category}:${product.category}` : '', |
|
|
product.tags || '', |
|
|
'', |
|
|
product.imageUrl || '', |
|
|
'', |
|
|
'', |
|
|
'', |
|
|
'', |
|
|
'', |
|
|
'', |
|
|
'', |
|
|
'', |
|
|
'0', |
|
|
'Weight', |
|
|
product.variations.map(v => v.weight).join('|'), |
|
|
'1', |
|
|
'1', |
|
|
'', |
|
|
'', |
|
|
'0', |
|
|
'0', |
|
|
'0', |
|
|
'', |
|
|
'', |
|
|
'', |
|
|
'', |
|
|
]; |
|
|
|
|
|
csvRows.push(parentRow); |
|
|
|
|
|
|
|
|
product.variations.forEach((variation, index) => { |
|
|
const variationRow = [ |
|
|
'', |
|
|
'variation', |
|
|
product.sku ? `${product.sku}-${index + 1}` : '', |
|
|
`${product.name} (${variation.weight}kg)`, |
|
|
'1', |
|
|
'0', |
|
|
'visible', |
|
|
'', |
|
|
'', |
|
|
'', |
|
|
'', |
|
|
'taxable', |
|
|
'', |
|
|
'1', |
|
|
'', |
|
|
'0', |
|
|
'0', |
|
|
variation.weight, |
|
|
'', |
|
|
'', |
|
|
'', |
|
|
'1', |
|
|
'', |
|
|
'', |
|
|
variation.price, |
|
|
'', |
|
|
'', |
|
|
'', |
|
|
'', |
|
|
'', |
|
|
'', |
|
|
product.name, |
|
|
'', |
|
|
'', |
|
|
'', |
|
|
'', |
|
|
'', |
|
|
'0', |
|
|
'Weight', |
|
|
variation.weight, |
|
|
'1', |
|
|
'1', |
|
|
'', |
|
|
'', |
|
|
'0', |
|
|
'0', |
|
|
'0', |
|
|
'', |
|
|
'', |
|
|
'', |
|
|
'', |
|
|
]; |
|
|
|
|
|
csvRows.push(variationRow); |
|
|
}); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
csvData = Papa.unparse(csvRows); |
|
|
|
|
|
|
|
|
csvModal.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function downloadCSV() { |
|
|
if (!csvData) return; |
|
|
|
|
|
const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' }); |
|
|
const url = URL.createObjectURL(blob); |
|
|
const link = document.createElement('a'); |
|
|
link.setAttribute('href', url); |
|
|
link.setAttribute('download', 'woocommerce_products_import.csv'); |
|
|
link.style.visibility = 'hidden'; |
|
|
document.body.appendChild(link); |
|
|
link.click(); |
|
|
document.body.removeChild(link); |
|
|
|
|
|
showToast('CSV downloaded successfully'); |
|
|
closeCsvModal(); |
|
|
} |
|
|
|
|
|
function showToast(message, isError = false) { |
|
|
const toastMessage = document.getElementById('toastMessage'); |
|
|
toastMessage.textContent = message; |
|
|
|
|
|
if (isError) { |
|
|
toast.classList.add('error'); |
|
|
} else { |
|
|
toast.classList.remove('error'); |
|
|
} |
|
|
|
|
|
toast.classList.add('show'); |
|
|
|
|
|
setTimeout(() => { |
|
|
toast.classList.remove('show'); |
|
|
}, 3000); |
|
|
} |
|
|
|
|
|
|
|
|
renderProductList(); |
|
|
}); |
|
|
</script> |
|
|
<footer class="text-center text-gray-500 text-sm mt-8"> |
|
|
<p>WC Product CSV Generator App | Created by <a href="https://github.com/almahmudbd/" target="_blank" class="text-blue-500 hover:text-blue-700">almahmud</a></p> |
|
|
</footer> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=almahmud/wc-product-cvs-generator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
