WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. leowebdev
    Member
    Posted 2 months 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 2 months 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 2 months 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 2 months 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 2 months 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.]

  6. eddt
    Member
    Posted 2 weeks ago #

    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 http://www.yourdomain.com/find-a-location/ your javascript doesn't trigger - it will ONLY trigger when the urlParam is set.

Reply

You must log in to post.

About this Plugin

About this Topic