# Tech Repair Service - Available Shortcodes

This document provides a comprehensive list of all available shortcodes in the Tech Repair Service plugin.

## Quick Order Form Shortcode

### Basic Usage

```
[tech_repair_form text="Order Repair Now" class="primary-button"]
```

### Parameters

| Parameter | Description | Default | Required |
|-----------|-------------|---------|----------|
| `text` | Button text | "Quick Repair Order" | No |
| `class` | Additional CSS classes for the button | "" | No |

### Description

The `tech_repair_form` shortcode displays a button that, when clicked, opens a modal popup with a quick order form. This form allows customers to quickly submit repair requests without navigating to a separate page.

The form includes fields for:
- Customer name
- Email address
- Phone number
- Device selection (loaded dynamically)
- Issue selection (loaded dynamically based on selected device)
- Additional notes

When submitted, the form creates a new WooCommerce order with a special repair product and marks it as a repair order in the system.

### Example

```
[tech_repair_form text="Fix My Device" class="large-button accent-color"]
```

## Alternative Usage

In addition to using the shortcode, you can also trigger the quick order form from any HTML element by adding specific CSS classes:

```html
<button class="open-repair-form">Order Repair</button>
```

You can customize the form behavior using data attributes:

```html
<a href="#" 
   class="open-repair-form" 
   data-form-title="iPhone Repair" 
   data-form-subtitle="Fill out the form to request a repair" 
   data-submit-text="Submit Request" 
   data-device-id="123">
   Fix My iPhone
</a>
```

Available data attributes:
- `data-form-title` - Custom form title
- `data-form-subtitle` - Custom form subtitle
- `data-submit-text` - Custom submit button text
- `data-device-id` - Pre-select a specific device

## Integration with Elementor

You can easily add the quick order form button to your Elementor pages:

1. Add a Button widget
2. Set the button text (e.g., "Order Repair")
3. In the CSS Classes field, add `open-repair-form`
4. In the Advanced tab, add custom attributes:
   - `data-form-title` = "Your form title"
   - `data-device-id` = ID of the device you want to pre-select

## Theme Integration

You can add the quick order form button to any template in your theme:

```php
<div class="header-repair-button">
    <a href="#" class="open-repair-form" data-form-title="<?php echo esc_attr__('Quick Repair', 'your-theme'); ?>">
        <?php echo esc_html__('Order Repair', 'your-theme'); ?>
    </a>
</div>
```
