---
title: Bridge Pattern
description: Integrating third-party plugins with WooNooW
date: 2024-01-31
---

# Addon Bridge Pattern

## Philosophy

**WooNooW Core = Zero Addon Dependencies**

We don't integrate specific plugins into WooNooW core. Instead, we provide:
1. **Hook system** for addons to extend functionality
2. **Bridge snippets** for compatibility with existing plugins
3. **Addon development guide** for building proper WooNooW addons

---

## The Problem

Example: **Rajaongkir** (Indonesian Shipping Plugin).
It removes standard fields and adds custom dropdowns, storing data in WooCommerce sessions.
It doesn't work with WooNooW OrderForm out of the box because the OrderForm uses standard fields and API-based validation.

---

## Solution: Bridge Snippet

### Option A: Standalone Bridge Plugin

Create a tiny bridge plugin that makes the third-party plugin work with WooNooW.

```php
/**
 * Plugin Name: WooNooW Rajaongkir Bridge
 * Description: Makes Rajaongkir plugin work with WooNooW OrderForm
 * Version: 1.0.0
 */

// Hook into WooNooW's shipping calculation
add_filter('woonoow_before_shipping_calculate', function($shipping_data) {
    if ($shipping_data['country'] === 'ID' && !empty($shipping_data['city'])) {
        // Search API and set session data
        $api = Cekongkir_API::get_instance();
        $results = $api->search_destination_api($shipping_data['city']);
        
        if (!empty($results[0])) {
            WC()->session->set('selected_destination_id', $results[0]['id']);
        }
    }
    return $shipping_data;
});
```

### Option B: Frontend Injection

Inject script to handle UI changes.

```typescript
import { addonLoader, addFilter } from '@woonoow/hooks';

addonLoader.register({
  id: 'rajaongkir-bridge',
  init: () => {
    addFilter('woonoow_order_form_after_shipping', (content, formData, setFormData) => {
      if (formData.shipping?.country !== 'ID') return content;
      return (
        <>
          {content}
          <div className="custom-field">
             {/* Custom Destination Select */}
          </div>
        </>
      );
    });
  }
});
```