File Manager
Editing: addproduct.php
<!DOCTYPE html> <html lang="en"> <head> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-Z6RR2PMZW4"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Z6RR2PMZW4'); </script> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Add Product</title> <meta name="description" content="Add your products to Eizon's marketplace. Upload details, images, and contact information to reach potential buyers in your region quickly and easily."> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"> <link rel="stylesheet" href="e-commerce.css"> <link rel="icon" href="/favicon.ico" type="image/x-icon"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/site.webmanifest"> <link rel="manifest" href="/manifest.json"> <style> #preview img { width: 100px; margin: 5px; border: 1px solid #ccc; border-radius: 5px; overflow-x: scroll; } #preview { display: flex; /* Arrange images in a row */ gap: 10px; /* Space between images */ max-height: 500px; /* Maximum height before vertical cropping */ overflow-x: auto; /* Enable horizontal scrolling */ overflow-y: hidden; /* Hide vertical overflow (cropping) */ scrollbar-width: none; /* Hide scrollbar in Firefox */ -ms-overflow-style: none; /* Hide scrollbar in IE/Edge */ } /* Hide scrollbar in Chrome/Safari */ #preview::-webkit-scrollbar { display: none; } /* Modal Style */ .modal { display: none; /* Hidden by default */ position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* Transparent background */ justify-content: center; align-items: center; } /* Modal Content */ .modal-content { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); text-align: center; } /* Progress Bar */ #progressBarContainer { width: 100%; background: #f3f3f3; height: 20px; margin-top: 20px; } #progressBar { width: 0; background: green; height: 100%; text-align: center; color: white; line-height: 20px; } .phone-input { display: flex; align-items: center; gap: 8px; } .phone-input select, .phone-input input { padding: 8px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; } .phone-input select { width: 150px; } .phone-input input { flex: 1; } </style> </head> <body> <?php include 'header.php'; ?> <br><br><br> <form class="sellform" action="/processproduct" method="POST" enctype="multipart/form-data"> <h2>Sell on Eizon</h2> <label for="images">Product Images (3) Images:</label> <input type="file" id="images" name="images[]" accept="image/*" multiple required style="background-color:white;padding:5px;color:black;"> <div id="preview"></div> <label for="name">Product Name:</label> <input type="text" id="name" name="name" placeholder="Eg: SAA YA MKONONI" required> <label for="description">Short Description:</label> <textarea id="description" name="description" rows="4" placeholder="Eg: BRAND: LOREX, saa kali sana" required></textarea> <label for="state">Condition:</label> <select id="state" name="state" required> <option class="option" value="" disabled selected>Condition</option> <option class="option" value="NEW">NEW</option> <option class="option" value="REFURBISHED">REFURBISHED</option> <option class="option" value="USED">USED</option> </select> <label for="region">Location:</label> <input type="text" id="region" name="region" placeholder="Eg: ARUSHA" required> <label for="price">Price (TZS):</label> <input type="number" id="price" name="price" min="0" placeholder="Eg: 15000" required> <label for="contact">WhatsApp number:</label> <div class="phone-input"> <select id="country-code" name="country_code" required style="width:40%;"> <option value="+255" selected>Tz (+255)</option> <option value="+254">Keny (+254)</option> <option value="+256">Uga (+256)</option> <option value="+250">Rwnd (+250)</option> <option value="+1">USA (+1)</option> <option value="+44">UK (+44)</option> </select> <input type="tel" id="contact" name="contacts" placeholder="711***675" required pattern="[0-9]{6,15}" style="width:40%;"> </div><br> <label for="category">Category:</label> <select id="category" name="category" required> <option class="option" value="" disabled selected>Select a category</option> <option class="option" value="Electronics">Electronics</option> <option class="option" value="Fashion and Beauty">Fashion & Beauty</option> <option class="option" value="Home Accessories">Home Accessories</option> <option class="option" value="Decorations">Decorations</option> <option class="option" value="Food and Nutrition">Food & Nutrition</option> <option class="option" value="transport">Transport</option> <option class="option" value="Services">Services</option> <option class="option" value="Other">Other</option> </select> <button type="submit">Add Product</button> </form> <!-- Modal with Progress Bar --> <div id="addProductModal" class="modal"> <div class="modal-content"> <p>Adding your product, please wait...</p> <!-- Progress Bar --> <div id="progressBarContainer" style="width: 100%; background: #ddd; height: 20px; margin-top: 10px;"> <div id="progressBar" style="height: 100%; width: 0; background: green;"></div> </div> <p>Create Account to share your products on WhatsApp!</p> </div> </div> <br><br> <?php include 'footer.php'; ?> <script src="e-commerce.js"></script> <script src="https://cdn.jsdelivr.net/npm/compressorjs@latest/dist/compressor.min.js"></script> <script> const input = document.getElementById('images'); // Image input const preview = document.getElementById('preview'); // Image preview container let processedFiles = []; // To store compressed and converted files input.addEventListener('change', function (event) { const files = Array.from(event.target.files); // Get selected files processedFiles = []; // Reset processed files preview.innerHTML = ""; // Clear previous previews // Check if more than 3 images are selected if (files.length < 3) { alert("Please upload 3 images of your product."); input.value = ""; // Clear input return; } if (files.length > 3) { alert("Please upload only 3 images of your product."); input.value = ""; // Clear input return; } files.forEach((file, index) => { // Compress and convert each file new Compressor(file, { quality: 0.6, // Adjust compression quality (0 to 1) convertTypes: ['image/jpeg'], // Convert to JPEG convertSize: 0, // Convert regardless of the original file size success(compressedFile) { processedFiles.push(compressedFile); // Create and display thumbnail preview const img = document.createElement('img'); img.src = URL.createObjectURL(compressedFile); img.alt = `Image ${index + 1}`; img.style.maxWidth = "100px"; img.style.margin = "5px"; preview.appendChild(img); // Replace the original file input with processed files once all are done if (processedFiles.length === files.length) { const dataTransfer = new DataTransfer(); processedFiles.forEach(file => dataTransfer.items.add(file)); input.files = dataTransfer.files; } }, error(err) { console.error("Compression or conversion failed:", err.message); }, }); }); }); </script> <script> // Handle phone number validation document.querySelector("form").addEventListener("submit", function (e) { const countryCode = document.getElementById("country-code").value; const phoneNumber = document.getElementById("contact").value.trim(); const contactError = document.getElementById("contact-error"); // Regular expression to allow only digits with a length between 6 and 15 const phoneRegex = /^[0-9]{6,15}$/; if (!phoneRegex.test(phoneNumber)) { contactError.style.display = "block"; contactError.textContent = "Please enter a valid phone number (digits only, 6-15 characters)."; e.preventDefault(); // Prevent form submission if invalid return; } else { contactError.style.display = "none"; // Hide error if validation passes } // Create a hidden input for the full phone number const fullNumber = `${countryCode}${phoneNumber}`; const hiddenInput = document.createElement("input"); hiddenInput.type = "hidden"; hiddenInput.name = "full_contact"; hiddenInput.value = fullNumber; this.appendChild(hiddenInput); }); // Handle form submission with progress bar and AJAX const addProductForm = document.querySelector('.sellform'); const addProductModal = document.getElementById('addProductModal'); const progressBar = document.getElementById('progressBar'); const progressBarContainer = document.getElementById('progressBarContainer'); addProductForm.addEventListener('submit', function (event) { event.preventDefault(); // Prevent normal form submission // Show modal with progress bar addProductModal.style.display = 'flex'; progressBar.style.width = '0%'; progressBar.textContent = '0%'; let progress = 0; const simulateProgressInterval = setInterval(() => { progress += 5; // Simulated progress progressBar.style.width = `${progress}%`; progressBar.textContent = `${progress}%`; if (progress >= 99) { clearInterval(simulateProgressInterval); // Stop simulation when done } }, 500); // Prepare form data for AJAX const formData = new FormData(addProductForm); // Perform AJAX request const xhr = new XMLHttpRequest(); xhr.open('POST', addProductForm.action, true); // Update progress bar during upload xhr.upload.addEventListener('progress', (e) => { if (e.lengthComputable) { const percentage = (e.loaded / e.total) * 100; progressBar.style.width = `${percentage}%`; progressBar.textContent = `${Math.round(percentage)}%`; } }); // Handle AJAX response xhr.onload = function () { if (xhr.status === 200) { // Success response setTimeout(() => { addProductModal.style.display = 'none'; // Hide modal alert('Product added successfully!\n It is much easier with an ACCOUNT!'); window.location.href = '/home'; // Redirect to all products page }, 500); // Short delay before redirect } else { // Error handling alert('Error adding product. Please try again.'); addProductModal.style.display = 'none'; } }; // Send form data xhr.send(formData); }); </script> </body> </html>
💾 Save
⬅ Back