How to add a search input button to my home page ?

This will be available in a widget later.

If you know how to write code you could write it yourself by following these steps.

– Add a search field that redirects to the store locator page with the search params in the url
– On the store locator page grab the search parameters with js, and set it as the search value in the store locator search field. Search for ‘javascript get url parameter’ on Google for a some examples.
– Then use https://api.jquery.com/trigger/ to submit the store search

tks bro! here is the code for somebody that may need it

// zip code search (home page)
$(function (){
$(‘#wpsl-search-button1’).click(function() {
var url = ‘/pages/location-search/?zip=’;
var inputURL = $(‘#wpsl-search-input1’).val();
window.location.href = url + inputURL;
return false;
});
});

// get parameter and post on location search
$(function (){
$.urlParam = function(name){
var results = new RegExp(‘[\?&]’ + name + ‘=([^&#]*)’).exec(window.location.href);
if (results==null) {
return null;
} else {
return results[1] || 0;
}
}

// example.com?zip=01000
$.urlParam(‘zip’); // name

// set the default value of a text input field
$(‘#wpsl-search-input’).val(decodeURIComponent($.urlParam(‘zip’)));

// delay and click button
setTimeout(function(){
$(‘#wpsl-search-btn’).click();
},2000);
});

Hi, thanks for posting your solution, but please, can you explain a little bit more?
Where exactly did you put this code? And what code did you put in homepage? Did you used a form plugin or simply html code in the wordpress text editor?
Thanks a lot!!!

Hi,

You should call the jquery in both pages — so paste it on your custom script field at wordpress and use plain html >> you just need an input and a button.

<div>
 <div class="wpsl-input"><input id="wpsl-search-input1" autocomplete="on" type="text" value=""></div>
 <div><a>Locate</a></div>
</div>

[Moderator Note: Please post code & markup between backticks or use the code button. Your posted code has now been permanently damaged by the forum’s parser.]

Nice bit of kit, leowebdev, and works great until we get an official way to do this with a shortcode!

The ONLY problem I had was that my “find a location” page where I have my shortcode triggering was always submitting NULL whenever I loaded it, and removing the “view all locations” after it submitted NULL!

I fixed it by slightly changing your last bit of code to this:

if ($.urlParam('zip')) {
            // set the default value of a text input field
            $('#wpsl-search-input').val(decodeURIComponent($.urlParam('zip')));
            // delay and click button
            setTimeout(function(){
                $('#wpsl-search-btn').click();
            },2000);
        }

This way, when you go to https://www.yourdomain.com/find-a-location/ your javascript doesn’t trigger – it will ONLY trigger when the urlParam is set.

i’ve done the instructions, but doesn’t function,

can you please guys explain little bit how to?

Hi Eddt,

I’ve encounter the problem you mentioned, but I have no idea where to put the code(solution) you stated in earlier post.

I mean ..which place should I put the code?is it in style css? if so, which part of style css(e.g after –>body ?)I should put in the code you suggested?could you advice further?

Thanks!

is there a way to search by the name of the store rather than scrolling???