311 lines
9.6 KiB
Markdown
311 lines
9.6 KiB
Markdown
# Quick Fix Guide - v1.1.5 to v1.2.0
|
|
|
|
**Time Required:** 30 minutes
|
|
**Difficulty:** Easy
|
|
**Impact:** Critical bugs fixed
|
|
|
|
---
|
|
|
|
## 🎯 Two Bugs to Fix
|
|
|
|
### Bug #1: Div Display Pagination (CRITICAL)
|
|
**File:** `/assets/public.js`
|
|
**Lines:** 137-179
|
|
**Time:** 15 minutes
|
|
|
|
### Bug #2: Card Display Colors (MINOR)
|
|
**File:** `/assets/public.js`
|
|
**Lines:** 307-308
|
|
**Time:** 5 minutes
|
|
|
|
---
|
|
|
|
## 🔧 Bug #1 Fix: Div Display Pagination
|
|
|
|
### Current Code (BROKEN)
|
|
```javascript
|
|
}else if(res.settings.display == 'div') {
|
|
$.each(res.rows, function(index, item) {
|
|
resultData = item;
|
|
var header_color = res.settings.header;
|
|
var value_color = res.settings.value;
|
|
$.each(item, function(q,r){
|
|
var id = q.replace(' ', '_').replace('.', '_').toLowerCase();
|
|
|
|
var prefix = '';
|
|
var type = '';
|
|
var button_text = '';
|
|
var hidden = 'no';
|
|
$.each(res.output, function(o,p){
|
|
if(q == p.key){
|
|
prefix = p.prefix;
|
|
type = p.type;
|
|
button_text = p.button_text;
|
|
if('hide' in p){
|
|
hidden = p.hide;
|
|
}
|
|
}
|
|
});
|
|
if(hidden == 'yes'){
|
|
return;
|
|
}
|
|
if(type == 'link_button'){
|
|
r = '<a href="'+r+'" class="button dw-checker-value-button">'+button_text+'</a>';
|
|
}else if(type == 'whatsapp_button'){
|
|
r = '<a href="https://wa.me/'+r+'" class="button dw-checker-value-button">'+button_text+'</a>';
|
|
}
|
|
// BUG: Container created per field (WRONG!)
|
|
if(index == 0){
|
|
resultDiv += '<div class="dw-checker-result-container" data-pagination="'+index+'">';
|
|
}else{
|
|
resultDiv += '<table class="dw-checker-result-container" data-pagination="'+index+'" style="display: none;">';
|
|
}
|
|
|
|
resultDiv += '<div class="dw-checker-result-div" style="border-bottom-color: '+res.settings.divider+'; border-bottom-width: '+res.settings.divider_width+'px;">';
|
|
resultDiv += '<div class="result-header"><span class="dw-checker-result-header" style="color:'+header_color+';">'+q+'</span></div>';
|
|
resultDiv += '<div class="result-value"><span class="dw-checker-result-value" style="color:'+value_color+';">'+prefix+r+'</span></div>';
|
|
resultDiv += '</div></div>';
|
|
});
|
|
});
|
|
this_checker.find('.dw-checker-result').find('.dw-checker-results').html(resultDiv);
|
|
}
|
|
```
|
|
|
|
### Fixed Code (CORRECT)
|
|
```javascript
|
|
}else if(res.settings.display == 'div') {
|
|
$.each(res.rows, function(index, item) {
|
|
resultData = item;
|
|
var header_color = res.settings.header;
|
|
var value_color = res.settings.value;
|
|
|
|
// Create container div for this row (CORRECT!)
|
|
if(index == 0){
|
|
resultDiv += '<div class="dw-checker-result-container" data-pagination="'+index+'">';
|
|
}else{
|
|
resultDiv += '<div class="dw-checker-result-container" data-pagination="'+index+'" style="display: none;">';
|
|
}
|
|
|
|
// Loop through each field in the row
|
|
$.each(item, function(q,r){
|
|
var id = q.replace(' ', '_').replace('.', '_').toLowerCase();
|
|
|
|
var prefix = '';
|
|
var type = '';
|
|
var button_text = '';
|
|
var hidden = 'no';
|
|
$.each(res.output, function(o,p){
|
|
if(q == p.key){
|
|
prefix = p.prefix;
|
|
type = p.type;
|
|
button_text = p.button_text;
|
|
if('hide' in p){
|
|
hidden = p.hide;
|
|
}
|
|
}
|
|
});
|
|
if(hidden == 'yes'){
|
|
return;
|
|
}
|
|
if(type == 'link_button'){
|
|
r = '<a href="'+r+'" class="button dw-checker-value-button">'+button_text+'</a>';
|
|
}else if(type == 'whatsapp_button'){
|
|
r = '<a href="https://wa.me/'+r+'" class="button dw-checker-value-button">'+button_text+'</a>';
|
|
}
|
|
|
|
resultDiv += '<div class="dw-checker-result-div" style="border-bottom-color: '+res.settings.divider+'; border-bottom-width: '+res.settings.divider_width+'px;">';
|
|
resultDiv += '<div class="result-header"><span class="dw-checker-result-header" style="color:'+header_color+';">'+q+'</span></div>';
|
|
resultDiv += '<div class="result-value"><span class="dw-checker-result-value" style="color:'+value_color+';">'+prefix+r+'</span></div>';
|
|
resultDiv += '</div>';
|
|
});
|
|
|
|
// Close container div for this row (CORRECT!)
|
|
resultDiv += '</div>';
|
|
});
|
|
this_checker.find('.dw-checker-result').find('.dw-checker-results').html(resultDiv);
|
|
}
|
|
```
|
|
|
|
### What Changed?
|
|
1. ✅ Moved container creation **outside** field loop
|
|
2. ✅ Changed `<table>` to `<div>` for consistency
|
|
3. ✅ Proper closing of container div
|
|
4. ✅ One container per row (not per field)
|
|
|
|
---
|
|
|
|
## 🔧 Bug #2 Fix: Card Display Colors
|
|
|
|
### Current Code (BROKEN)
|
|
```javascript
|
|
resultDiv += `<div class="dw-checker-single-card" style="background-color: `+bg_color+`; color: `+text_color+`; border-color: `+res.settings.divider+`; border-width: `+res.settings.divider_width+`px;">
|
|
<span class="dw-checker-card-header" style="color:`+value_color+`">`+q+`</span>
|
|
<span class="dw-checker-card-value" style="color:`+value_color+`">`+prefix+r+`</span>
|
|
</div>`;
|
|
```
|
|
|
|
### Fixed Code (CORRECT)
|
|
```javascript
|
|
resultDiv += `<div class="dw-checker-single-card" style="background-color: `+bg_color+`; color: `+text_color+`; border-color: `+res.settings.divider+`; border-width: `+res.settings.divider_width+`px;">
|
|
<span class="dw-checker-card-header" style="color:`+text_color+`">`+q+`</span>
|
|
<span class="dw-checker-card-value" style="color:`+text_color+`">`+prefix+r+`</span>
|
|
</div>`;
|
|
```
|
|
|
|
### What Changed?
|
|
1. ✅ Changed `value_color` to `text_color` (line 307)
|
|
2. ✅ Changed `value_color` to `text_color` (line 308)
|
|
|
|
**Why?** Each card should use its own `text_color` from output settings, not the global `value_color`.
|
|
|
|
---
|
|
|
|
## 📋 Step-by-Step Instructions
|
|
|
|
### Step 1: Backup Current File
|
|
```bash
|
|
cd /Users/dwindown/Local Sites/sejoli/app/public/wp-content/plugins/dw-sheet-data-checker-pro/extracted_latest/dw-sheet-data-checker-pro
|
|
cp assets/public.js assets/public.js.backup
|
|
```
|
|
|
|
### Step 2: Open File in Editor
|
|
```bash
|
|
# Open in your preferred editor
|
|
code assets/public.js
|
|
# or
|
|
nano assets/public.js
|
|
```
|
|
|
|
### Step 3: Fix Bug #1 (Lines 137-179)
|
|
1. Find line 137: `}else if(res.settings.display == 'div') {`
|
|
2. Replace the entire block with the fixed code above
|
|
3. Save file
|
|
|
|
### Step 4: Fix Bug #2 (Lines 307-308)
|
|
1. Find line 307: `<span class="dw-checker-card-header" style="color:`+value_color+`">`
|
|
2. Replace `value_color` with `text_color`
|
|
3. Find line 308: `<span class="dw-checker-card-value" style="color:`+value_color+`">`
|
|
4. Replace `value_color` with `text_color`
|
|
5. Save file
|
|
|
|
### Step 5: Test Changes
|
|
1. Create a test checker with div display
|
|
2. Add multiple matching records
|
|
3. Test pagination works
|
|
4. Create a test checker with card display
|
|
5. Set different text colors per card
|
|
6. Verify colors apply correctly
|
|
|
|
---
|
|
|
|
## ✅ Testing Checklist
|
|
|
|
### Div Display Test
|
|
- [ ] Create checker with div display
|
|
- [ ] Search returns 2+ results
|
|
- [ ] Pagination buttons appear
|
|
- [ ] Clicking pagination switches results
|
|
- [ ] Only one result visible at a time
|
|
- [ ] No console errors
|
|
- [ ] HTML structure is valid (no mixed div/table)
|
|
|
|
### Card Display Test
|
|
- [ ] Create checker with card display
|
|
- [ ] Set different text colors for different cards
|
|
- [ ] Search returns results
|
|
- [ ] Each card shows its configured text color
|
|
- [ ] Background colors work
|
|
- [ ] No console errors
|
|
|
|
### All Display Types Test
|
|
- [ ] Vertical table works
|
|
- [ ] Standard table works
|
|
- [ ] Div display works (after fix)
|
|
- [ ] Card display works (after fix)
|
|
- [ ] Link buttons work
|
|
- [ ] WhatsApp buttons work
|
|
- [ ] Hide/show works
|
|
- [ ] Prefix works
|
|
|
|
---
|
|
|
|
## 🚀 After Fixing
|
|
|
|
### Update Version
|
|
Edit `dw-sheet-data-checker-pro.php`:
|
|
```php
|
|
// Line 5
|
|
* Version: 1.2.0
|
|
|
|
// Line 28
|
|
define( 'SHEET_CHECKER_PRO_VERSION', '1.2.0' );
|
|
```
|
|
|
|
### Create Changelog
|
|
Create `CHANGELOG.md`:
|
|
```markdown
|
|
# Changelog
|
|
|
|
## [1.2.0] - 2024-11-15
|
|
|
|
### Fixed
|
|
- Fixed div display pagination structure
|
|
- Fixed card display text color not using per-card settings
|
|
- Improved HTML structure for div display
|
|
|
|
### Changed
|
|
- Updated version to 1.2.0
|
|
|
|
## [1.1.5] - 2024
|
|
- Added WhatsApp button type
|
|
- Added TSV format support
|
|
- Added responsive card grid
|
|
- Refactored to modular template system
|
|
- Integrated Handlebars.js
|
|
```
|
|
|
|
### Deploy
|
|
1. Test thoroughly on staging
|
|
2. Clear browser cache
|
|
3. Deploy to production
|
|
4. Monitor for errors
|
|
5. Notify users
|
|
|
|
---
|
|
|
|
## 🎯 Expected Results
|
|
|
|
### Before Fix
|
|
- ❌ Div display pagination broken
|
|
- ❌ Card colors don't work per-card
|
|
- ❌ Multiple results fail in div display
|
|
- ❌ Invalid HTML structure
|
|
|
|
### After Fix
|
|
- ✅ Div display pagination works perfectly
|
|
- ✅ Card colors work per-card
|
|
- ✅ Multiple results display correctly
|
|
- ✅ Valid HTML structure
|
|
- ✅ All 4 display types fully functional
|
|
|
|
---
|
|
|
|
## 📞 Need Help?
|
|
|
|
If you encounter issues:
|
|
|
|
1. **Check Console:** Look for JavaScript errors
|
|
2. **Inspect HTML:** Verify structure is correct
|
|
3. **Test Individually:** Test each display type separately
|
|
4. **Revert if Needed:** Use backup file
|
|
5. **Contact Support:** @dwindown on Telegram
|
|
|
|
---
|
|
|
|
**Time to Fix:** 30 minutes
|
|
**Difficulty:** Easy
|
|
**Impact:** High
|
|
**Risk:** Low (easy to revert)
|
|
|
|
**Ready to fix? Let's do this! 🚀**
|