WP Manifestindependent plugin directory
manifest / ecommerce / window-builder-calculator

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

0stars
0forks

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.zip

Window 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

  1. Download/Create Plugin Files

    • Create a folder named window-builder-calculator in your WordPress plugins directory (wp-content/plugins/)
  2. 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
  3. Upload Files

    • Upload all files maintaining the directory structure above
  4. 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

  1. Select Frame Style: Choose from StyleLine, Trinsic, or Tuscany series
  2. Choose Window Type: Select type (Arch Top, Awning, Casement, etc.)
  3. Pick Configuration: Choose opening system based on window type
  4. Select Size: Pick from available standard sizes or enter custom dimensions
  5. Customize Options:
    • Frame colors (interior/exterior)
    • Grid patterns
    • Glass type and upgrades
    • Additional options
  6. Calculate Price: Real-time pricing based on all selections
  7. Save: Add to cart or save quote

Price Calculation

The plugin uses AJAX requests to calculate prices dynamically:

  1. User makes a selection
  2. JavaScript captures the change
  3. AJAX request sent to WordPress backend
  4. PHP calculates price based on pricing data
  5. Response returned with list price and discounted price
  6. Frontend updated instantly

Adding New Frame Series

To add Trinsic or Tuscany series pricing:

  1. Edit includes/class-wbc-pricing-data.php

  2. 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;
}
  1. 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

  1. Place window configuration images in assets/images/
  2. Update updateWindowImage() function in assets/js/wbc-calculator.js
  3. Map configuration codes to image filenames

Custom Fields

To add custom fields:

  1. Update HTML in includes/class-wbc-shortcode.php
  2. Capture values in JavaScript (assets/js/wbc-calculator.js)
  3. Process in backend (includes/class-wbc-ajax-handler.php)
  4. 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 type
  • wbc_get_available_sizes - Get available sizes for a configuration
  • wbc_calculate_price - Calculate price based on selections
  • wbc_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:

  1. Check the code comments for detailed explanations
  2. Review the pricing data structure in class-wbc-pricing-data.php
  3. 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