Simple SPA Integration

📘
This guide describes how to integrate Findify with a single-page application (SPA) using the Merchant JS API .
This example uses React.js, but the main principle of shadow DOM should be working with Vue.js, Angular, Svelte and any other popular JavaScript framework.
You can have a look at the Findify Component example we've built on codesandbox

Import library

Add a script with store specific code as mentioned in the instruction of our "Getting started guide" to the <head> section of your application.

<script src="//assets.findify.io/your-shop-domain.com.min.js" async defer></script>

Wait for the library to be loaded

This function will return a promise which will be resolved right after Findify's JavaScript is completely loaded.

export const waitForFindify = () => new Promise(resolve => {
  (window.findifyCallbacks = window.findifyCallbacks || []).push((findify) => resolve(findify));
})

Render

Once the node is ready you need to make sure Findify is ready and renders a widget into the node.

const type = 'search'; // Type of widget
const widgetKey = 'UNIQ_ID';
const disableAutoRequest = true; // Needs to be "true" to avoid an initial request
const findify = await waitForFindify();
findify.widgets.attach(container.current, type, { ...options, widgetKey, disableAutoRequest });

const widget = findify.widgets.get(widgetKey); // Widget instance

widget.agent
  .defaults({ ...request }) // Default request values
  .once('change:items', () => { // or 'change:suggestions' if it's for the autocomplete
    // callback when items have been received
  })

// For the autocomplete data will be fetched automatically, but for Search Widget you need to make an initial request manually. 
if (['search', 'smart-collection'].includes(type)) {
  const query = findify.utils.getQuery(); // Parse URL query
  widget.agent.applyState(query) // Request data
}

Check out our Merchant JS API for further information on how to use Findify!

Unmount

To void memory leaks detach the Findify instance after the node has unmounted.

findify.widgets.detach(widgetKey)

History Navigation

There is no generic solution to use custom History instance in Findify Widgets, so you need to rise your one in global scope and make changes to Findify components via Chrome using our DevTools.