AccelaSearch's search layer is a JavaScript library, so it is possible to modify its behavior using external routines.
The functions exposed by the library are listed here Layer JS API.
Below we will show some examples
Let's show how to hide the discount
field when its value is less than 5
document.body.addEventListener('as-loaded-layer',()=>{
var websiteSearchBar= document.getElementById('accelasearch-bar-container-container');
websiteSearchBar.addEventListener('as-search-event',()=>{
var fields=document.querySelectorAll('#accelasearch-bar-container .product-card .discount')
Array.from(fields).forEach((field,index)=>{
if(parseInt(field.innerHTML)>=-5){
field.remove()
}
})
})
})
Let's intercept the layer loading event so that we can define the search event once the library is loaded.
The field selector .discount
has the name as shown in the AccelaSearch console.
To ensure that the placeholder is shown when the dynamic price is active, you must make sure to return the price with value 0 from the dynamic price webHook. Returning an empty vector from the webHook is not a solution as it causes the price loader to appear. If you want to hide the price just change the placeholder value from the console and leave it empty.