Probo Configurator Integration
User stories
• As a customer, I want to be able to configure products on my website using the Connect Configurator.
• As a webshop owner, I want to be able to get the payload of the product so it can be used in the Order Payload.
Important notes
• The web component is adjustable via CSS and JSON overwrites.
• To prevent CROS issues, we need to implement a proxy for the API. It is not possible to directly access the API.
Sub tasks
Add new WooCommerce product type ‘Probo Configurable Product’
• There should be a new WooCommerce product type named ‘Probo Configurable Product’.
• In the Probo Connect tab should be the following changeable settings:
◦ Api code
◦ Surcharge margin
◦ Advanced JSON overwrite for the configurator.
Proof of concept:
Render product configurator in the frontend
• There should be a template part which gets shown in the frontend of a ‘Probo Configurable Product’ that shows the configurator.
• More information about the configurator can be found here: https://github.com/ProboConnect/product-configurator
—
### ✅ 1. Add new WooCommerce product type: `Probo Configurable Product`
**Step 1: Register new product type**
In your theme or custom plugin:
add_filter('product_type_selector', 'add_probo_configurable_product_type');
function add_probo_configurable_product_type($types){
$types['probo_configurable'] = __('Probo Configurable Product');
return $types;
}**Step 2: Add class to handle product type**
class WC_Product_Probo_Configurable extends WC_Product {
public function get_type() {
return 'probo_configurable';
}
}**Step 3: Include product data panel**
add_action('woocommerce_product_data_tabs', 'probo_product_data_tab');
function probo_product_data_tab($tabs) {
$tabs['probo_connect'] = array(
'label' => __('Probo Connect'),
'target' => 'probo_connect_product_data',
'class' => array('show_if_probo_configurable'),
);
return $tabs;
}**Step 4: Add custom fields for API code, surcharge margin, JSON overwrite**
add_action('woocommerce_product_data_panels', 'probo_product_data_fields');
function probo_product_data_fields() {
?>
<div id='probo_connect_product_data' class='panel woocommerce_options_panel'>
<?php
woocommerce_wp_text_input([
'id' => '_probo_api_code',
'label' => 'API Code',
]);
woocommerce_wp_text_input([
'id' => '_probo_surcharge_margin',
'label' => 'Surcharge Margin (%)',
'type' => 'number',
]);
woocommerce_wp_textarea_input([
'id' => '_probo_json_overwrite',
'label' => 'Advanced JSON Overwrite',
]);
?>
</div>
<?php
}**Step 5: Save fields**
add_action('woocommerce_process_product_meta', 'save_probo_product_fields');
function save_probo_product_fields($post_id) {
update_post_meta($post_id, '_probo_api_code', sanitize_text_field($_POST['_probo_api_code']));
update_post_meta($post_id, '_probo_surcharge_margin', floatval($_POST['_probo_surcharge_margin']));
update_post_meta($post_id, '_probo_json_overwrite', wp_kses_post($_POST['_probo_json_overwrite']));
}—
### ✅ 2. Render product configurator in the frontend
**Step 1: Use template override for product type**
In your theme:
`woocommerce/single-product/product-probo-configurable.php`
Load it conditionally in `single-product.php`:
$product = wc_get_product(get_the_ID());
if ($product->get_type() === 'probo_configurable') {
wc_get_template_part('single-product/product', 'probo-configurable');
} else {
wc_get_template_part('single-product/product', 'standard');
}**Step 2: Render the Probo Configurator**
Use [Probo’s GitHub docs](https://github.com/ProboConnect/product-configurator) and embed the web component:
<div id="probo-configurator" data-api-code="<?php echo esc_attr(get_post_meta(get_the_ID(), '_probo_api_code', true)); ?>"></div>
<script src="https://cdn.jsdelivr.net/npm/@proboconnect/product-configurator@latest/dist/loader.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const el = document.querySelector('#probo-configurator');
const apiCode = el.dataset.apiCode;
fetch(`/wp-json/probo-proxy/configurator?apiCode=${apiCode}`) // Use your local proxy
.then(response => response.json())
.then(config => {
ProboConfigurator.init({
element: el,
config: config,
overwrite: <?php echo get_post_meta(get_the_ID(), '_probo_json_overwrite', true) ?: '{}'; ?>
});
});
});
</script>—
### ✅ 3. Create proxy endpoint to prevent CORS issues
Use WordPress REST API for proxying:
add_action('rest_api_init', function () {
register_rest_route('probo-proxy', '/configurator', [
'methods' => 'GET',
'callback' => 'probo_configurator_proxy',
'permission_callback' => '__return_true',
]);
});
function probo_configurator_proxy(WP_REST_Request $request) {
$apiCode = sanitize_text_field($request->get_param('apiCode'));
$response = wp_remote_get("https://configurator-api.proboconnect.nl/configurator/$apiCode");
if (is_wp_error($response)) {
return new WP_Error('api_error', 'Failed to fetch configuration', ['status' => 500]);
}
return json_decode(wp_remote_retrieve_body($response), true);
}—
### ✅ Future (Order Payload Integration)
When an order is created:
– Hook into `woocommerce_checkout_create_order_line_item`
– Grab the Probo configuration payload (store it in hidden input or session)
– Attach it to the line item meta
Let me know if you'd like that implemented next.
—
Would you like the complete plugin code bundled together as well?