Interactive Customer Service Knowledge Base
Find answers to common questions and support issues.
Categories
Articles
Welcome to the Knowledge Base
Select an article from the left to view its content here.
Category:
All Articles
| Title | Category | Actions |
|---|
Add New Article
Our standard shipping option typically takes 5-7 business days for delivery within the continental USA. The cost is a flat rate of $5.99.
Expedited Shipping
We offer expedited shipping for $12.99, with an estimated delivery time of 2-3 business days.
Free Shipping
Orders totaling over $75.00 (before tax) qualify for free standard shipping.
' }, { id: 2, category: 'Shipping', title: 'How can I track my order?', content: 'Tracking Information
Once your order has shipped, you will receive a shipping confirmation email that includes a tracking number. You can use this number on the carrier\'s website (e.g., UPS, FedEx) to track the progress of your delivery.
You can also find the tracking number in your order history by logging into your account on our website.
' }, { id: 3, category: 'Returns', title: 'What is your return policy?', content: '30-Day Returns
We accept returns for most items within 30 days of the delivery date. To be eligible for a return, your item must be:
- Unused and in the same condition that you received it.
- In the original packaging.
Some items, such as final sale products, are not eligible for returns.
' }, { id: 4, category: 'Returns', title: 'How do I start a return?', content: 'Starting a Return
To initiate a return, please visit our online Returns Portal. You will need your order number (e.g., US12345) and the email address used to place the order.
Follow the on-screen instructions to select the items you wish to return and print your prepaid return label.
' }, { id: 5, category: 'Account', title: 'How do I reset my password?', content: 'Password Reset
If you have forgotten your password, click the "Forgot Password?" link on the login page. Enter your account email address, and we will send you a link to reset your password.
If you do not receive the email within 15 minutes, please check your spam or junk folder.
' }, { id: 6, category: 'Product', title: 'Are your products covered by a warranty?', content: 'Manufacturer\'s Warranty
Most of our electronic products are covered by a one-year limited manufacturer\'s warranty. This warranty covers defects in materials and workmanship under normal use.
For specific warranty details, please refer to the product page or the documentation included with your product.
' }, ]; // --- ELEMENT SELECTIONS --- const tabButtons = { kb: document.getElementById('tab-btn-kb'), manage: document.getElementById('tab-btn-manage') }; const tabContents = { kb: document.getElementById('tab-content-kb'), manage: document.getElementById('tab-content-manage') }; const prevBtn = document.getElementById('prev-btn'); const nextBtn = document.getElementById('next-btn'); // KB View const searchInput = document.getElementById('search-input'); const categoriesContainer = document.getElementById('categories-container'); const articlesList = document.getElementById('articles-list'); const initialMessage = document.getElementById('initial-message'); const articleContentWrapper = document.getElementById('article-content-wrapper'); const articleTitle = document.getElementById('article-title'); const articleCategory = document.getElementById('article-category'); const articleContent = document.getElementById('article-content'); const downloadPdfBtn = document.getElementById('download-pdf-btn'); // Manage View const manageTableBody = document.getElementById('manage-table-body'); const formHeader = document.getElementById('form-title-header'); const formTitle = document.getElementById('form-article-title'); const formCategory = document.getElementById('form-article-category'); const formContent = document.getElementById('form-article-content'); const saveBtn = document.getElementById('save-article-btn'); const cancelBtn = document.getElementById('cancel-edit-btn'); let currentTab = 'kb'; let activeArticleId = null; let editingArticleId = null; // --- TAB & NAVIGATION --- const showTab = (tabName) => { currentTab = tabName; Object.keys(tabContents).forEach(key => tabContents[key].classList.toggle('hidden', key !== tabName)); Object.keys(tabButtons).forEach(key => tabButtons[key].classList.toggle('active', key !== tabName)); prevBtn.disabled = (tabName === 'kb'); nextBtn.disabled = (tabName === 'manage'); }; // --- RENDER FUNCTIONS --- const renderAll = () => { renderCategories(); filterAndRenderArticles(); renderManagementTable(); } const renderManagementTable = () => { manageTableBody.innerHTML = KB_ARTICLES.map(article => `No articles found.
`; return; } articlesList.innerHTML = articlesToRender.map(article => `${article.title}` ).join(''); }; const displayArticle = (articleId) => { const article = KB_ARTICLES.find(a => a.id === articleId); if (!article) { initialMessage.classList.remove('hidden'); articleContentWrapper.classList.add('hidden'); activeArticleId = null; return; } activeArticleId = articleId; document.querySelectorAll('.article-link').forEach(link => link.classList.remove('active')); const activeLink = document.querySelector(`.article-link[data-id='${articleId}']`); if(activeLink) activeLink.classList.add('active'); initialMessage.classList.add('hidden'); articleContentWrapper.classList.remove('hidden'); articleTitle.textContent = article.title; articleCategory.textContent = article.category; articleContent.innerHTML = article.content; }; const filterAndRenderArticles = () => { const searchTerm = searchInput.value.toLowerCase(); const activeCategoryBtn = categoriesContainer.querySelector('.category-btn.active'); const activeCategory = activeCategoryBtn ? activeCategoryBtn.dataset.category : 'All'; let filteredArticles = KB_ARTICLES; if (activeCategory !== 'All') filteredArticles = filteredArticles.filter(a => a.category === activeCategory); if (searchTerm) filteredArticles = filteredArticles.filter(a => a.title.toLowerCase().includes(searchTerm) || a.content.toLowerCase().includes(searchTerm)); renderArticles(filteredArticles); }; // --- CRUD & FORM LOGIC --- const resetForm = () => { editingArticleId = null; formHeader.textContent = "Add New Article"; formTitle.value = ''; formCategory.value = ''; formContent.value = ''; cancelBtn.classList.add('hidden'); }; const populateFormForEdit = (articleId) => { const article = KB_ARTICLES.find(a => a.id === articleId); if (article) { editingArticleId = article.id; formHeader.textContent = "Edit Article"; formTitle.value = article.title; formCategory.value = article.category; formContent.value = article.content; cancelBtn.classList.remove('hidden'); } }; const handleSave = () => { const title = formTitle.value.trim(); const category = formCategory.value.trim(); const content = formContent.value.trim(); if (!title || !category || !content) { alert('Please fill all fields.'); return; } if (editingArticleId) { // Update const index = KB_ARTICLES.findIndex(a => a.id === editingArticleId); if (index > -1) { KB_ARTICLES[index] = { ...KB_ARTICLES[index], title, category, content }; } } else { // Create const newId = KB_ARTICLES.length > 0 ? Math.max(...KB_ARTICLES.map(a => a.id)) + 1 : 1; KB_ARTICLES.push({ id: newId, title, category, content }); } resetForm(); renderAll(); // If the updated article was being viewed, refresh its content if(activeArticleId && activeArticleId === editingArticleId) displayArticle(activeArticleId); }; const handleDelete = (articleId) => { if (confirm('Are you sure you want to delete this article?')) { KB_ARTICLES = KB_ARTICLES.filter(a => a.id !== articleId); if (activeArticleId === articleId) { displayArticle(null); // Clear view if deleted article was active } renderAll(); } }; // --- EVENT HANDLERS --- const handleCategoryClick = (e) => { if (e.target.classList.contains('category-btn')) { categoriesContainer.querySelectorAll('.category-btn').forEach(btn => btn.classList.remove('active')); e.target.classList.add('active'); filterAndRenderArticles(); } }; const handleArticleClick = (e) => { e.preventDefault(); const link = e.target.closest('.article-link'); if (link) displayArticle(parseInt(link.dataset.id)); }; const handleManageTableClick = (e) => { const target = e.target; const id = parseInt(target.closest('tr')?.querySelector('.edit-btn, .delete-btn')?.dataset.id); if (target.classList.contains('edit-btn')) populateFormForEdit(id); if (target.classList.contains('delete-btn')) handleDelete(id); }; const generatePDF = () => { if (!activeArticleId) return; const { jsPDF } = window.jspdf; const pdfContent = document.getElementById('pdf-content'); pdfContent.querySelector('#pdf-button-container')?.classList.add('hidden'); html2canvas(pdfContent, { scale: 2, useCORS: true }).then(canvas => { const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const imgWidth = pdfWidth - 20; const imgHeight = (canvas.height * imgWidth) / canvas.width; pdf.addImage(imgData, 'PNG', 10, 10, imgWidth, imgHeight); const safeTitle = articleTitle.textContent.replace(/[^a-z0-9]/gi, '_').toLowerCase(); pdf.save(`kb-${safeTitle}.pdf`); pdfContent.querySelector('#pdf-button-container')?.classList.remove('hidden'); }); }; // --- ATTACH LISTENERS --- // Nav prevBtn.addEventListener('click', () => showTab('kb')); nextBtn.addEventListener('click', () => showTab('manage')); tabButtons.kb.addEventListener('click', () => showTab('kb')); tabButtons.manage.addEventListener('click', () => showTab('manage')); // KB View searchInput.addEventListener('input', filterAndRenderArticles); categoriesContainer.addEventListener('click', handleCategoryClick); articlesList.addEventListener('click', handleArticleClick); downloadPdfBtn.addEventListener('click', generatePDF); // Manage View manageTableBody.addEventListener('click', handleManageTableClick); saveBtn.addEventListener('click', handleSave); cancelBtn.addEventListener('click', resetForm); // --- INITIALIZATION --- renderAll(); });