WooCommerce Integration

Add SearchX to your WooCommerce store using a custom WordPress plugin with shortcodes.

Overview

This guide walks you through integrating SearchX into your WooCommerce store by creating a lightweight WordPress plugin. The plugin loads the SDK, initializes it, and provides shortcodes you can place anywhere in your store.

Step 1: Create the Integration Plugin

Create a new folder searchx-integration inside wp-content/plugins/ and add the following file.

<?php
/*
Plugin Name: SearchX SDK Integration
Description: Adds SearchX SDK and shortcodes to WooCommerce.
Version: 1.0
*/

// 1. Load the SDK in the footer
add_action('wp_footer', function() {
    ?>
    <style>
      #search-bar, #search-page {
        width: 100% !important;
        max-width: 100% !important;
        clear: both;
        display: block;
      }
      .entry-content {
        max-width: 100% !important;
      }
    </style>

    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://helloworld-pc.github.io/searchx-components/searchx-sdk.umd.js"></script>

    <script>
      window.addEventListener('load', function() {
        if (window.SearchXSDK) {
          window.SearchXSDK.init({
            app_id: "YOUR_APP_ID",
            api_key: "YOUR_API_KEY",
            settings: {
              wishlistEnabled: true,
              showIcon: false,
              platform: 'custom',
              compactPagination: true,
              showBothFacets: true,
              primaryFacetAttribute: 'categories',
              searchPageURL: '/searchx',
              mobileViewPort: '900px',
            },
            components: {
              SearchBar: { root: "search-bar" },
              SearchPage: { root: "search-page" },
            }
          });
        }
      });

      // Action handler for add-to-cart events
      window.addEventListener('SearchX:addToCart', function(event) {
        var product = event.detail.product;
        console.log('SearchX: Added to cart', product);
        // Implement your WooCommerce cart logic here
      });
    </script>
    <?php
});

// 2. Define shortcodes
add_shortcode('searchx_bar', function() {
    return '<div id="search-bar"></div>';
});
add_shortcode('searchx_page', function() {
    return '<div id="search-page"></div>';
});

Replace YOUR_APP_ID and YOUR_API_KEY with your credentials from the Applications page in the SearchX dashboard.

Step 2: Use Shortcodes

Once the plugin is activated, place the search bar and results page anywhere in your store using WordPress shortcodes:

• Search Bar — [searchx_bar]
• Results Page — [searchx_page]

You can add these in the WordPress block editor, a widget area, or directly in your theme templates.

Step 3: Local Development (Optional)

If you're using wp-env for local development, map your plugin directory in .wp-env.json:

{
  "core": null,
  "plugins": [
    "https://downloads.wordpress.org/plugin/woocommerce.latest-stable.zip",
    "./plugins/searchx-integration"
  ],
  "themes": ["https://downloads.wordpress.org/theme/storefront.latest-stable.zip"]
}

Step 4: Deploy to Production

1. Zip the searchx-integration folder
2. Log in to your WordPress admin
3. Go to Plugins > Add New > Upload Plugin
4. Upload the zip file and click Activate

Configuration Options

The settings object in the init call supports the following options:

For the full list of configuration options, see the SDK Reference.

Cart Integration

The plugin listens for SearchX:addToCart events. Implement your cart logic in the event handler based on your WooCommerce setup:

window.addEventListener('SearchX:addToCart', function (event) {
  var product = event.detail.product;

  // Example: Add to WooCommerce cart via AJAX
  fetch('/?wc-ajax=add_to_cart', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: 'product_id=' + product.id + '&quantity=1',
  })
    .then(function (res) {
      return res.json();
    })
    .then(function (data) {
      console.log('Added to cart:', data);
    });
});

For more details on event handling, see Event Handling.

Customization

• Custom CSS — Add a customCSSUrl option pointing to your theme's CSS file. See Widget Styling.
• Localization — Add customLocaleUrl and defaultLanguage options. See Localization.