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 usedresults- 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 productitem- The Shopify JSON data object for the current productvariant- The Shopify variant data object which might be selected for the current layout. This may beundefinedif 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
}