@bobhrds looks like the mobile search box isn't properly connected to our search, can you try changing the search box selector to
input[name="s"]
in the Wordpress Plugin Configuration? What's currently displayed on mobile are your native wordpress search results.
@JVankat Do you mean here, in the Configuration Editor?
{
"siteId": "al-anon.org",
"showErrors": false,
"searchBox": {
"selector": "#ss360-trigger",
"placeholder": "Search",
"searchButtonLabel": "Search"
},
"layout": {
"mobile": {
"showImages": false,
"showDataPoints": false,
"showUrl": true,
"type": "grid"
},
"desktop": {
"type": "grid",
"showImages": false,
"showDataPoints": false,
"showUrl": true,
"gridColsLg": 1
}
},
@bobhrds what happens for me on your site (I had to reload using ctrl+f5 to clear the cache, btw), is the native search form is submitted, so on mobile our search results pop up for a short while and then you get redirected to the native wp search, the following line of code under Custom Callbacks > Init Callback should do it:
window.sxQuery('.fusion-search-form').on('submit', function(e) {e.preventDefault(); e.stopPropagation();});
@JVankat I didn't realise xpaths could accept multiple inputs! Handy to know. Its working now.
I had another question about popular searches/full layout. On our current search (attached), we essentially mimic your fullscreen mode with an overlay that contains a search inbot/button. However, on ours, by default we should popular searches and some promo blocks. I was wondering the feasability of doing something with SS360?
I see that you have suggestions that pick up popular searches, but any way of getting them into the fullscreen mode? Or perhaps even just a static custom HTML panel that disappears once someone starts searching?
@jmshey90 I see what you mean, that's definitely something we'll focus on in the future, but currently the only solution I can think of would be using the init callback to inject the content to the search layer (=static HTML).
E.g. ss360Config.callbacks.init = function(){sxQuery('#ss360-layer').html('<span>My Banner</span>');}
(this might be slightly different for layover/fullscreen).
Would this work for you?