Documentation Index
Fetch the complete documentation index at: https://docs.pixcraft.es/llms.txt
Use this file to discover all available pages before exploring further.
WooCommerce Integration
This guide walks you through adding a pattern configurator to WooCommerce product pages using the PixCraft API.
Overview
- Create a simple WordPress plugin
- Add a “Configure Pattern” button to product pages
- When clicked, show a modal where customers upload an image
- Call the PixCraft API from your server to generate the pattern
- Display the result and optionally generate a PDF
Step 1: Create the plugin
Create a file at wp-content/plugins/pixcraft-configurator/pixcraft-configurator.php:
<?php
/**
* Plugin Name: PixCraft Pattern Configurator
* Description: Adds pattern generation to WooCommerce product pages
* Version: 1.0.0
*/
defined('ABSPATH') || exit;
// Register settings
add_action('admin_init', function() {
register_setting('pixcraft_settings', 'pixcraft_api_key');
});
add_action('admin_menu', function() {
add_options_page('PixCraft API', 'PixCraft', 'manage_options', 'pixcraft', function() {
?>
<div class="wrap">
<h1>PixCraft API Settings</h1>
<form method="post" action="options.php">
<?php settings_fields('pixcraft_settings'); ?>
<table class="form-table">
<tr>
<th>API Key</th>
<td><input type="text" name="pixcraft_api_key" value="<?php echo esc_attr(get_option('pixcraft_api_key')); ?>" class="regular-text"></td>
</tr>
</table>
<?php submit_button(); ?>
</form>
</div>
<?php
});
});
Step 2: Add the AJAX endpoint
Add to the same plugin file:
// AJAX handler for pattern generation
add_action('wp_ajax_pixcraft_generate', 'pixcraft_generate_handler');
add_action('wp_ajax_nopriv_pixcraft_generate', 'pixcraft_generate_handler');
function pixcraft_generate_handler() {
$api_key = get_option('pixcraft_api_key');
if (!$api_key) {
wp_send_json_error('API key not configured');
}
$image_url = sanitize_url($_POST['image_url'] ?? '');
$niche = sanitize_text_field($_POST['niche'] ?? 'mosaics');
$width = intval($_POST['width_cm'] ?? 100);
$height = intval($_POST['height_cm'] ?? 100);
$response = wp_remote_post('https://www.pixcraft.es/api/v1/generate', [
'headers' => [
'Authorization' => 'Bearer ' . $api_key,
'Content-Type' => 'application/json',
],
'body' => json_encode([
'image_url' => $image_url,
'niche' => $niche,
'width_cm' => $width,
'height_cm' => $height,
]),
'timeout' => 30,
]);
if (is_wp_error($response)) {
wp_send_json_error($response->get_error_message());
}
$body = json_decode(wp_remote_retrieve_body($response), true);
wp_send_json_success($body);
}
// Add configurator button to product pages
add_action('woocommerce_after_add_to_cart_button', function() {
?>
<button type="button" id="pixcraft-configure" class="button alt">
Configure Pattern
</button>
<div id="pixcraft-modal" style="display:none;">
<div class="pixcraft-overlay">
<div class="pixcraft-dialog">
<h3>Generate Your Pattern</h3>
<input type="file" id="pixcraft-image" accept="image/*">
<select id="pixcraft-niche">
<option value="curtains">Curtains</option>
<option value="mosaics">Mosaics</option>
<option value="lego">LEGO</option>
</select>
<input type="number" id="pixcraft-width" placeholder="Width (cm)" value="100">
<input type="number" id="pixcraft-height" placeholder="Height (cm)" value="100">
<button id="pixcraft-submit">Generate</button>
<div id="pixcraft-result"></div>
</div>
</div>
</div>
<?php
});
// Enqueue scripts
add_action('wp_enqueue_scripts', function() {
if (is_product()) {
wp_enqueue_script('pixcraft-configurator', plugin_dir_url(__FILE__) . 'configurator.js', ['jquery'], '1.0', true);
wp_localize_script('pixcraft-configurator', 'pixcraftAjax', [
'url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('pixcraft_nonce'),
]);
}
});
Step 4: JavaScript configurator
Create configurator.js:
jQuery(document).ready(function($) {
$('#pixcraft-configure').on('click', function() {
$('#pixcraft-modal').show();
});
$('#pixcraft-submit').on('click', async function() {
const fileInput = document.getElementById('pixcraft-image');
const file = fileInput.files[0];
if (!file) return alert('Please select an image');
// Upload image and get URL (you'd implement this with WP media)
// For simplicity, using FormData with a custom upload endpoint
const formData = new FormData();
formData.append('action', 'pixcraft_generate');
formData.append('image_url', 'URL_OF_UPLOADED_IMAGE');
formData.append('niche', $('#pixcraft-niche').val());
formData.append('width_cm', $('#pixcraft-width').val());
formData.append('height_cm', $('#pixcraft-height').val());
const response = await $.ajax({
url: pixcraftAjax.url,
method: 'POST',
data: formData,
processData: false,
contentType: false,
});
if (response.success) {
const data = response.data;
$('#pixcraft-result').html(`
<h4>Pattern Generated!</h4>
<p>${data.dimensions.total_units} units in ${data.materials.length} colors</p>
<ul>
${data.materials.map(m => `<li>${m.color_name}: ${m.quantity} (${m.percentage}%)</li>`).join('')}
</ul>
`);
}
});
});
Next steps
- Add CSS styling to match your theme
- Implement image upload to WordPress media library
- Add PDF download button using the
/generate/pdf endpoint
- Store generated patterns as order metadata