Window Builder Calculator
Custom WordPress Plugin where user can create customized window features and place the order.
by Mughees Arshad · github.com/mughees001/window-builder-calculator · website
Install
No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:
wp plugin install https://github.com/mughees001/window-builder-calculator/archive/refs/heads/main.zipWindow Builder Calculator Plugin
A comprehensive WordPress plugin for building and pricing Milgard windows with dynamic configuration options and real-time price calculations.
Features
- Dynamic Window Configuration: Select from multiple window types, opening systems, and sizes
- Real-Time Pricing: AJAX-based price calculations as users make selections
- Multiple Frame Series: Currently supports StyleLine series, with structure ready for Trinsic and Tuscany
- Customizable Options: Frame colors, grid options, glass types, upgrades, and more
- Responsive Design: Works seamlessly on desktop and mobile devices
- Easy Integration: Simple shortcode implementation
Installation
Manual Installation
-
Download/Create Plugin Files
- Create a folder named
window-builder-calculatorin your WordPress plugins directory (wp-content/plugins/)
- Create a folder named
-
Plugin Structure
window-builder-calculator/ ├── window-builder-calculator.php (Main plugin file) ├── includes/ │ ├── class-wbc-pricing-data.php │ ├── class-wbc-ajax-handler.php │ └── class-wbc-shortcode.php ├── assets/ │ ├── css/ │ │ └── wbc-styles.css │ ├── js/ │ │ └── wbc-calculator.js │ └── images/ │ └── (window configuration images) └── README.md -
Upload Files
- Upload all files maintaining the directory structure above
-
Activate Plugin
- Go to WordPress Admin → Plugins
- Find "Window Builder Calculator"
- Click "Activate"
Usage
Basic Shortcode
Add the calculator to any page or post using:
[window_calculator]
Shortcode with Attributes
Customize delivery information:
[window_calculator delivery_zip="90210" delivery_city="Beverly Hills, CA" ships_from="Milgard Factory, CA"]
Shortcode Attributes
delivery_zip- Delivery zip code (default: "12345")delivery_city- Delivery city name (default: "Your City")ships_from- Shipping origin location (default: "Factory Location")
How It Works
User Flow
- Select Frame Style: Choose from StyleLine, Trinsic, or Tuscany series
- Choose Window Type: Select type (Arch Top, Awning, Casement, etc.)
- Pick Configuration: Choose opening system based on window type
- Select Size: Pick from available standard sizes or enter custom dimensions
- Customize Options:
- Frame colors (interior/exterior)
- Grid patterns
- Glass type and upgrades
- Additional options
- Calculate Price: Real-time pricing based on all selections
- Save: Add to cart or save quote
Price Calculation
The plugin uses AJAX requests to calculate prices dynamically:
- User makes a selection
- JavaScript captures the change
- AJAX request sent to WordPress backend
- PHP calculates price based on pricing data
- Response returned with list price and discounted price
- Frontend updated instantly
Adding New Frame Series
To add Trinsic or Tuscany series pricing:
-
Edit
includes/class-wbc-pricing-data.php -
Add new pricing method (example for Trinsic):
public static function get_trinsic_prices() {
$trinsic_prices = array();
// Add pricing data following the same structure as StyleLine
$trinsic_prices['Window Type']['Opening System']['Size'] = array(
'available' => true,
'gridOptions' => array(0.00, 25.00, 25.00),
'glass' => array(
'Clear' => 500.00,
// ... more glass types
),
'glassUpgrades' => array(
'Argon' => 10.00,
// ... more upgrades
),
'others' => array(
'Breather tubes' => 0.00,
// ... more options
)
);
return $trinsic_prices;
}
- Update calculate_price method to handle different frame styles:
public static function calculate_price($params) {
$frame_style = $params['frame'] ?? 'STYLELINE';
// Get appropriate pricing data
if ($frame_style === 'VINYL_STD') {
$prices = self::get_trinsic_prices();
} elseif ($frame_style === 'TUSCANY') {
$prices = self::get_tuscany_prices();
} else {
$prices = self::get_styleline_prices();
}
// ... rest of calculation logic
}
Customization
Styling
Edit assets/css/wbc-styles.css to customize appearance:
- Colors: Modify
.wbc-orange,.wbc-btn-*classes - Layout: Adjust
.wbc-row,.wbc-col-*classes - Typography: Change font families and sizes in
.wbc-container
Adding Window Images
- Place window configuration images in
assets/images/ - Update
updateWindowImage()function inassets/js/wbc-calculator.js - Map configuration codes to image filenames
Custom Fields
To add custom fields:
- Update HTML in
includes/class-wbc-shortcode.php - Capture values in JavaScript (
assets/js/wbc-calculator.js) - Process in backend (
includes/class-wbc-ajax-handler.php) - Include in calculations (
includes/class-wbc-pricing-data.php)
AJAX Endpoints
The plugin provides these AJAX actions:
wbc_get_opening_systems- Get configurations for a window typewbc_get_available_sizes- Get available sizes for a configurationwbc_calculate_price- Calculate price based on selectionswbc_get_config_data- Get colors, glass types, etc.
Security
- All AJAX requests use WordPress nonces for security
- Input sanitization on all user inputs
- Escaping on all output
Browser Compatibility
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)
Requirements
- WordPress 5.0 or higher
- PHP 7.0 or higher
- jQuery (included with WordPress)
Support
For issues or questions:
- Check the code comments for detailed explanations
- Review the pricing data structure in
class-wbc-pricing-data.php - Test AJAX calls using browser developer tools
Roadmap
Planned Features
- Shopping cart integration
- Quote saving and retrieval
- Email quote functionality
- PDF quote generation
- User account integration
- Price history tracking
- Bulk discount calculations
Future Enhancements
- Visual window designer
- 3D preview
- Energy efficiency calculator
- Installation cost estimator
- Comparison tool for multiple windows
License
GPL v2 or later
Credits
Developed for Milgard Windows & Doors pricing calculator