Skip to main content

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

  1. Create a simple WordPress plugin
  2. Add a “Configure Pattern” button to product pages
  3. When clicked, show a modal where customers upload an image
  4. Call the PixCraft API from your server to generate the pattern
  5. 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);
}

Step 3: Add the frontend button

// 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