Simple Gold Rates Plugin

Version 2.0.0 - Complete Refactored Edition

📁 Folder Structure

simple-gold-rates/
├── simple-gold-rates.php    # Main plugin file (OOP structure)
├── index.php                 # Security file
├── assets/
│   ├── css/
│   │   └── frontend.css      # Responsive styles with animations
│   └── js/
│       └── frontend.js       # Volatility animation system
└── README.md                 # This file

✨ Features

• Google Sheets Integration: Fetch gold prices automatically
• Real-time Volatility: Prices fluctuate randomly like trading charts
• Mobile Responsive: Works perfectly on all devices
• Smooth Animations: Modern hover effects and price updates
• Clean Code: Object-oriented, well-structured, maintainable
• Admin Dashboard: Beautiful UI to view current rates

🚀 Usage

1. Admin Settings: Go to Settings > Gold Rates
2. Configure:
   • Google Apps Script URL
   • Volatility Interval (default: 2000ms)
   • Volatility Range (default: ±2000 LKR)
3. Display: Use shortcode [gold_price_table] on any page

📊 Data Format

Expected JSON from Google Sheets:

{
  "18": { "buying": 274000, "selling": 281000, "active": 1 },
  "21": { "buying": 322000, "selling": 327000, "active": 1 },
  "22": { "buying": 336000, "selling": 342000, "active": 1 },
  "24": { "buying": 366000, "selling": 374000, "active": 1 }
}

📋 Google Apps Script Setup

Step 1: Create the Script

1. Open your Google Sheet with gold prices
2. Go to Extensions > Apps Script
3. Delete any existing code and paste this:

function doGet() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");

  var data = {
    24: {
      buying: sheet.getRange("C4").getValue(),
      selling: sheet.getRange("D4").getValue(),
      active: sheet.getRange("E4").getValue(),
    },
    22: {
      buying: sheet.getRange("C5").getValue(),
      selling: sheet.getRange("D5").getValue(),
      active: sheet.getRange("E5").getValue(),
    },
    21: {
      buying: sheet.getRange("C6").getValue(),
      selling: sheet.getRange("D6").getValue(),
      active: sheet.getRange("E6").getValue(),
    },
    18: {
      buying: sheet.getRange("C7").getValue(),
      selling: sheet.getRange("D7").getValue(),
      active: sheet.getRange("E7").getValue(),
    },
  };

  return ContentService.createTextOutput(JSON.stringify(data)).setMimeType(
    ContentService.MimeType.JSON,
  );
}

Step 2: Adjust Cell References

⚠️ IMPORTANT: Make sure your Google Sheet columns match:

• Column C: Buying prices
• Column D: Selling prices
• Column E: Active status (1 for active, 0 for inactive)
• Row 4: 24K gold data
• Row 5: 22K gold data
• Row 6: 21K gold data
• Row 7: 18K gold data

Example Sheet Layout:

|   A   |  B  |    C    |    D    | E |
|-------|-----|---------|---------|---|
| Karat |  %  | Buying  | Selling | Active |
| 24K   | 100%| 366000  | 374000  |   1   |
| 22K   | 91.7| 336000  | 342000  |   1   |
| 21K   | 87.5| 322000  | 327000  |   1   |
| 18K   | 75% | 274000  | 281000  |   1   |

If your sheet structure is different, update the cell references in the script (e.g., change C4 to match your buying price cell for 24K).

Step 3: Deploy the Script

1. Click Deploy > New deployment
2. Click the gear icon ⚙️ and select Web app
3. Settings:
   • Description: Gold Rates API
   • Execute as: Me
   • Who has access: Anyone
4. Click Deploy
5. Authorize the script (click "Authorize access" and allow permissions)
6. Copy the Web App URL (looks like: https://script.google.com/macros/s/AKfycb.../exec)

Step 4: Test the URL

1. Paste the URL in your browser
2. You should see JSON data like:

   {"24":{"buying":366000,"selling":374000,"active":1},"22":{...}}

3. ✅ If you see the data → Script is working!
4. ❌ If you see an error → Check your cell references and sheet name

Step 5: Add URL to WordPress

1. Go to WordPress Admin > Settings > Gold Rates
2. Paste the Web App URL in Google Apps Script URL field
3. Click Save Changes
4. Click 🔄 Sync Prices Now to test
5. Check if the cards display correctly on your page

🎨 Responsive Breakpoints

• Mobile: < 480px (1 column, optimized spacing)
• Tablet: 600px - 1023px (2 columns)
• Desktop: 1024px+ (4 columns)
• Large Desktop: 1440px+ (enhanced spacing)

🔄 How Volatility Works

• Random walk algorithm (like real trading charts)
• Each tick: currentPrice += random(-range, +range)
• Independent movements for buying & selling prices
• Smooth animations with pulse effects
• Example: 350,000 → 349,500 → 351,200 → 350,800...

🛠️ Development

Clean, maintainable code with:

• Object-oriented architecture
• Class-based organization
• Proper WordPress hooks
• Security best practices
• Mobile-first CSS
• ES6 JavaScript

📝 Changelog

Version 2.0.0

• Complete plugin refactor
• Improved folder structure
• Enhanced volatility system
• Better mobile responsive design
• Smooth animations
• Clean OOP code