Sparq is a developer friendly app, which allows external developers to hook into filter data and also the UI rendered by Sparq. 

Getting Started

To use Sparq's data hook system, you need to create a javascript file in your theme and include that in your theme.liquid file. 

The javascript file should initialise a global object window.sq and attach to any of the available hooks via it.

A sample javascript looks the following file

window.sq = windoq.sq || {};

window.sq.onData = function(data){
   
    // logic to modify data
    return data;
}

window.sq.onItemComplete = function(el, item, variant){
    // make changes to the DOM element
}

On Search Init

.onSearchInit(query)

Whenever a new search is about to be sent to the Sparq servers, this hook is called with the raw query string and filter data.

The query object after modifying should be returned back from the hook function, else it will corrupt the search functionality

The event receives the following data,

  • query - The search query to be sent to Sparq servers

The query object contains the following attributes

  • query - The text search query.
  • filter - A filter string which will be sent to the backend server.

You can modify any of the query or filter data to modify the search behavior and change as per your requirements.

On Search Complete

.onData(data)
Whenever a search or a filter request is completed this hook is triggered and the search/filter data is sent to this. 

The data object after modifying should be returned back from the hook function, else it will corrupt the search functionality

The event receives the following data, 

  • data - The search data which was received after processing the filter/search request. 

The data object contains the following attributes 

  • query - The original search query along with data for filters which was used
  • results - The resulting array returned from Sparq's server with search result data

Sample Code

// initialise the global sparq object
window.sq = windoq.sq || {};

window.sq.onData = function(data){
    // logic to modify data
    return data;
}

On Item UI Complete 

.onItemComplete(el:Element, item: any, variant: any)
Whenever an item is completely rendered by Sparq on the DOM, this event is triggered. You can listen to this event to modify the layout for the individual item as required. 

The event receives the following parameters

  • el - The DOM element for the rendered product
  • item - The Shopify JSON data object for the current product
  • variant - The Shopify variant data object which might be selected for the current layout. This may be undefined if there is no variant for a given product. 

Sample Code

window.sq = windoq.sq || {};

window.sq.onItemComplete = function(el, item, variant){
    // make changes to the DOM element
}

Did this answer your question?