Skip to content

Commit

Permalink
Add FAQ page with troubleshooting guides
Browse files Browse the repository at this point in the history
  • Loading branch information
@hppanpaliya
hppanpaliya committed Jan 6, 2025
1 parent 3021d0a commit 22a2914
Show file tree
Hide file tree
Showing 9 changed files with 730 additions and 213 deletions.
3 changes: 3 additions & 0 deletions .github/workflows/release.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,15 @@ jobs:
# Copy files to maintain structure
cp -r _locales temp/Walmart-Invoice-Exporter/
cp -r images temp/Walmart-Invoice-Exporter/
cp -r faq temp/Walmart-Invoice-Exporter/
cp background.js temp/Walmart-Invoice-Exporter/
cp content.js temp/Walmart-Invoice-Exporter/
cp exceljs.bare.min.js temp/Walmart-Invoice-Exporter/
cp manifest.json temp/Walmart-Invoice-Exporter/
cp popup.html temp/Walmart-Invoice-Exporter/
cp popup.js temp/Walmart-Invoice-Exporter/
cp popup.css temp/Walmart-Invoice-Exporter/
# Create ZIP from the temp directory
cd temp
Expand Down
9 changes: 9 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,14 @@
# Changelog

## [2.4] - January 5, 2025

- **Enhancement:**
Feature: Added comprehensive FAQ page with troubleshooting guides
- Step-by-step instructions for single and batch downloads
- Chrome settings configuration guide for bulk downloads
- Common issues and solutions
- Guide for merging multiple Excel files

## [2.3] - December 19, 2024

- **Fixed:** Resolved an issue with failed invoice downloads for new in-store orders.
Expand Down
172 changes: 172 additions & 0 deletions faq/faq.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
:root {
--primary: #0071dc;
--danger: #e41e31;
--success: #2ecc71;
--background: #f8f9fa;
--border: #e5e7eb;
--text: #1a1a1a;
--text-secondary: #666;
}

body {
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
color: var(--text);
background: white;
line-height: 1.6;
}

.header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border);
}

.header h1 {
font-size: 24px;
font-weight: 600;
color: var(--text);
margin: 0;
}

.faq-section {
margin-bottom: 32px;
}

.faq-item {
background: var(--background);
border: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 16px;
overflow: hidden;
}

.faq-question {
padding: 16px;
font-weight: 500;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
user-select: none;
}

.faq-question:hover {
background: rgba(0, 0, 0, 0.02);
}

.faq-answer {
padding: 0 16px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

.faq-answer.active {
padding: 16px;
max-height: 900px;
border-top: 1px solid var(--border);
}

.faq-answer img {
max-width: 100%;
border: 1px solid var(--border);
border-radius: 4px;
margin: 8px 0;
}

.arrow {
transition: transform 0.3s ease;
}

.arrow.active {
transform: rotate(180deg);
}

.step {
margin: 12px 0;
padding-left: 24px;
position: relative;
}



.note {
background: #fff3cd;
border: 1px solid #ffeeba;
color: #856404;
padding: 12px;
border-radius: 4px;
margin: 12px 0;
}

/* Add to your existing CSS */
.copy-link-container {
display: flex;
align-items: center;
gap: 8px;
background: #f5f5f5;
padding: 8px;
border-radius: 4px;
margin: 8px 0;
}

.copy-link {
flex: 1;
user-select: all;
font-family: monospace;
font-size: 13px;
overflow-x: auto;
white-space: nowrap;
padding: 4px;
}

.copy-button {
background: transparent;
border: none;
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
transition: color 0.2s;
}

.copy-button:hover {
color: var(--primary);
}

.toast {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: #333;
color: white;
padding: 12px 24px;
border-radius: 4px;
font-size: 14px;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
z-index: 1000;
display: flex;
align-items: center;
gap: 8px;
}

.toast.show {
opacity: 1;
visibility: visible;
}

.toast svg {
stroke: #4caf50;
}
192 changes: 192 additions & 0 deletions faq/faq.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,192 @@
<!DOCTYPE html>
<html>
<head>
<title>FAQ - Walmart Invoice Exporter</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="./faq.css">
</head>
<body>
<div class="header">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"/>
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
<line x1="12" y1="17" x2="12.01" y2="17"/>
</svg>
<h1>Frequently Asked Questions</h1>
</div>

<div class="faq-section">
<div class="faq-item">
<div class="faq-question">
How to Use the Extension
<svg class="arrow" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</div>
<div class="faq-answer">
<p><strong>Single Order Download:</strong></p>
<ol>
<li>Navigate to a specific Walmart order page</li>
<li>Click the extension icon</li>
<li>Click "Download Invoice"</li>
</ol>

<p style="margin-top: 20px;"><strong>Batch Download:</strong></p>
<ol>
<li>Go to your Walmart order history page (walmart.com/orders)</li>
<li>Click the extension icon</li>
<li>Set the number of pages to crawl (0 = unlimited)</li>
<li>Click "Start Collection"</li>
<li>Wait for the order numbers to load</li>
<li>Select the orders you want to download</li>
<li>Click "Download Selected Orders"</li>
<li>Wait for the download to complete</li>
</ol>

<div class="note">
<strong>Note:</strong>
<ol style="margin: 5px 0 5px 20px;">
<li>Before downloading multiple orders, make sure you've configured the Chrome settings as described in "Required Chrome Settings for Bulk Downloads" section below.</li>
<li>Batch download may take a few minutes depending on the number of orders selected.</li>
<li>Do not close the popup or change the window while using the extension. This will stop the process and you'll have to restart from the beginning.</li>
</ol>
</div>
</div>
</div>

<div class="faq-item">
<div class="faq-question">
Required Chrome Settings for Bulk Downloads
<svg class="arrow" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</div>
<div class="faq-answer">
<p style="margin-bottom: 15px;"><strong>1. Configure Download Settings:</strong></p>
<ol>
<li>Open Chrome Settings (three dots menu → Settings)</li>
<li>Click on "Downloads" in the left sidebar</li>
<li>Turn OFF "Ask where to save each file before downloading"</li>
<li>Turn OFF "Show downloads when they're done"</li>
</ol>

<p style="margin: 20px 0 15px;"><strong>2. Enable Automatic Downloads:</strong></p>
<ol>
<li>
<div class="copy-link-container">
<code class="copy-link" data-link="chrome://settings/content/siteDetails?site=https%3A%2F%2Fwww.walmart.com#:~:text=Automatic%20downloads">chrome://settings/content/siteDetails?site=https%3A%2F%2Fwww.walmart.com</code>
<button class="copy-button">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
</svg>
</button>
</div>
</li>
<li>Open a new Chrome tab and paste the copied link</li>
<li>Find "Automatic downloads" option</li>
<li>Set it to "Allow" (instead of Ask or Block)</li>
</ol>

<p style="margin: 20px 0 15px;"><strong>Alternative Method:</strong> (if above link doesn't work)</p>
<ol>
<li>
<div class="copy-link-container">
<code class="copy-link" data-link="chrome://settings/content/automaticDownloads#:~:text=Allowed%20to%20automatically%20download%20multiple%20files">chrome://settings/content/automaticDownloads</code>
<button class="copy-button">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
</svg>
</button>
</div>
</li>
<li>Open a new Chrome tab and paste the copied link</li>
<li>Under "Allowed to automatically download multiple files", click Add</li>
<li>Enter "[*.]walmart.com" and click Add</li>
</ol>

<div class="note" style="margin-top: 20px;">
<strong>Important:</strong> All these settings are required for bulk downloads to work properly. Make sure to add walmart.com under "Allowed to automatically download multiple files" and NOT under "Not allowed to automatically download multiple files"
</div>

<div class="tip">
<strong>Note:</strong> Chrome doesn't allow direct clicking of these links. Please copy and paste them manually into a new tab.
</div>
</div>
</div>

<div class="faq-item">
<div class="faq-question">
Download Issues & Tips
<svg class="arrow" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</div>
<div class="faq-answer">
<p>Before downloading multiple orders, make sure you've configured the Chrome settings as described in "Required Chrome Settings for Bulk Downloads" section above.</p>

<div class="note" style="margin: 15px 0;">
<strong>Important:</strong> Do not close the popup or change the window while using the extension. This will stop the process and you'll have to restart from the beginning.
</div>

<p style="margin-top: 15px;">If you're experiencing download issues, it could be due to:</p>

<ul>
<li>Slow internet connection - try downloading fewer orders at once</li>
<li>Order age - very old orders might take longer to load</li>
<li>Browser resources - try closing other tabs and windows</li>
</ul>

<div class="tip">
<strong>Recommendation:</strong> For better reliability, try downloading 5-10 orders at a time instead of selecting all orders at once.
</div>

<div class="note" style="margin-top: 15px;">
<strong>Important:</strong> Most download issues are solved by correctly configuring Chrome settings. Please double-check the "Required Chrome Settings for Bulk Downloads" section if you're having problems.
</div>
</div>
</div>

<div class="faq-item">
<div class="faq-question">
How to Merge Multiple Excel Files?
<svg class="arrow" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</div>
<div class="faq-answer">
<p>To merge multiple Excel files exported from this extension:</p>

<ol>
<li>Visit <a href="https://hppanpaliya.github.io/excel-merger/" target="_blank" style="color: var(--primary); text-decoration: none;">https://hppanpaliya.github.io/excel-merger/</a></li>
<li>Upload your exported Excel files</li>
<li>Download the merged file</li>
</ol>

<div class="tip">
<strong>Note:</strong> This tool is specifically designed to work with Excel files exported from this extension.
</div>
</div>
</div>

<div class="faq-item">
<div class="faq-question">
Need Help?
<svg class="arrow" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</div>
<div class="faq-answer">
<p>If you're still experiencing issues or have questions, feel free to reach out for support:</p>

<div class="tip" style="text-align: center;">
<strong>Contact:</strong> <a href="mailto:[email protected]" style="color: var(--primary); text-decoration: none;">[email protected]</a>
</div>
</div>
</div>
</div>

<script src="./faq.js"></script>
</body>
</html>
Loading

0 comments on commit 22a2914

Please sign in to comment.