Battre Booking — WordPress Plugin

A fully self-contained React booking page delivered as a WordPress shortcode plugin.

Features

• Live colour switching — tap a swatch, the scooter photo updates instantly
• City-based pricing — dropdown changes the ex-showroom price in real time
• 3-step wizard — Model → Colour → Details with AJAX form submission
• Responsive — mobile hamburger menu, stacked layout on small screens
• Admin panel — view all bookings at WP Admin → Battre Bookings
• Email notifications — confirmation to customer + alert to admin

Installation

1. Prerequisites

node --version   # 18+
npm --version    # 9+

2. Build the React bundle

# Clone / copy this folder into:
# wp-content/plugins/battre-booking/

cd wp-content/plugins/battre-booking/
npm install
npm run build

3. Activate the plugin

Go to WP Admin → Plugins → Activate "Battre Booking"

4. Add the shortcode

Edit any Page or Post and add:

[battre_booking]

Optional attributes:

[battre_booking model="loev" city="mumbai"]

Development

npm run start    # Watch mode — rebuilds on every file save
npm run build    # Production build (minified)
npm run lint     # Lint JSX files

File structure

battre-booking/
├── battre-booking.php      ← Plugin entry: shortcode, AJAX, admin panel
├── package.json            ← npm config
├── README.md               ← This file
│
├── src/
│   ├── index.jsx           ← Entry point: mounts React into shortcode divs
│   ├── BattreBooking.jsx   ← Main component (all sub-components live here)
│   └── style.scss          ← Global styles (compiled → build/style.css)
│
└── build/                  ← Auto-generated by npm run build (do not edit)
    ├── index.js
    └── style.css

How each feature works

Colour change

selColor(id) updates React state. ScooterImage reads COLOR_FILTERS[colorId] and applies a CSS filter to the white scooter photo. For Sparkling Green the actual green photo (image_1441) is swapped in directly.

City pricing

selectedCity.multiplier × model.basePrice is calculated on every render. Two dropdowns exist (left panel + Step 3) and share the same selectedCity state, so they stay in sync automatically.

AJAX submission

On "BOOK NOW", React POSTs to admin-ajax.php with action=battre_booking. PHP validates the nonce, sanitises inputs, saves to wp_options, and sends emails. The booking ID returned is shown in the success screen.

Admin panel

WP Admin → Battre Bookings shows a table of all submissions stored in wp_options['battre_bookings']. For high-volume production, replace the wp_options storage with a custom $wpdb table.

Deployment checklist

• [ ] npm run build completed successfully
• [ ] Plugin activated in WP Admin
• [ ] [battre_booking] shortcode added to a page
• [ ] Page published and tested on mobile + desktop
• [ ] Admin email in WP Settings → General is correct
• [ ] Test a full booking and confirm emails arrive