dw-sheet-data-checker/QUICK_FIX_GUIDE.md

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)

}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)

}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)

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)

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

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

# 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:

// Line 5
* Version:           1.2.0

// Line 28
define( 'SHEET_CHECKER_PRO_VERSION', '1.2.0' );

Create Changelog

Create CHANGELOG.md:

# 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! 🚀