WordPress.org

Ready to get started?Download WordPress

Forums

WP Store Locator
[resolved] How to add a search input+button to my home page ? (5 posts)

  1. leowebdev
    Member
    Posted 1 month ago #

    Hi,

    I'm using your excellent plugin and I would like to add a custom search to my home page --- just a simple input and a button with "Locate your nearest store" that post the zipcode to location search page.

    There is any way to do it? further that, can I get the zipcode posted at url and use it to search the results?

    Thanks!

    https://wordpress.org/plugins/wp-store-locator/

  2. Tijmen Smit
    Member
    Plugin Author

    Posted 1 month ago #

    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 http://api.jquery.com/trigger/ to submit the store search

  3. leowebdev
    Member
    Posted 1 month ago #

    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);
    });

  4. uomopalese
    Member
    Posted 1 month ago #

    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!!!

  5. leowebdev
    Member
    Posted 1 month ago #

    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.]

Reply

You must log in to post.

About this Plugin

About this Topic