Replace characters in search URL

Grant Menzies

Posted on 03/03/2014 08:50:37

Hi!

Something that I've been trying to change for some time now but just can't seem to figure it out:

Using instant search works for the most part, but if there are certain characters in the name of the product then on clicking search it returns an empty page.

E.g. If i search for say "Brevpapper A4" and press search, then I come to a page with this/these products listed.

However, if I search for "T-shirt" I come to a blank page. On removing the "-" from the URL and replacing with "%20" then I get a result.

So basically my question is how to rewrite the URL when it contains certain characters when searching?

In my InstantSearch.js I have the following code and it is here I am assuming the changes should be made. I've just not managed to figure it out ...

Dynamicweb.Frontend.InstantSearch._queryParam = function (name) {
/// <private />
/// <summary>Returns a query-string parameter value.</summary>
/// <param name="name">Parameter name.</param>

var ret = '';
var rx = null;
var results = null;

if (name) {
//name = name.replace("-","%20");
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]").replace("-", "pooo");
rx = new RegExp("[\\?&]" + name + "=([^&#]*)");
//rx = rx.replace("-","%20");

results = rx.exec(window.location.href);
if (results != null)
ret = decodeURIComponent(results[1].replace(/\+/g, " "));
}

return ret;
}

Thanks!!

Replies

Mikkel Ricky

Posted on 04/03/2014 10:00:55

It shouldn't be necessary to change anything in _queryParam for the instant search to work. Can you share a public url where we can see this issue in action?

Best regards,
Mikkel

Grant Menzies

Posted on 04/03/2014 10:11:05

Sure thing!

Try a search here: http://trygghansashop.prendo.se/

Anything with commas, dashes etc. returns no products. Otherwise it works.

Mikkel Ricky

Posted on 04/03/2014 13:35:43

Ok, so it has nothing to do with instant search, right?

The issue seems to be that http://trygghansashop.prendo.se/sv-SE/Produkter-1.aspx?FreeTextSearch=stativ+hem returns 1 product, but http://trygghansashop.prendo.se/sv-SE/Produkter-1.aspx?FreeTextSearch=stativ+hem, (note comma at end) returns no products. Am I right?

Grant Menzies

Posted on 04/03/2014 13:40:42

Well yes. It's some characters (the comma in this case) in the URL that cause the search to return no products. So somewhere along the way I'd like to strip the URL of these characters.

Mikkel Ricky

Posted on 04/03/2014 13:47:42

This post has been marked as an answer

This seems to be an issue with the "Free Text Search" filter you're using (FreeTextSearch). You could strip away all non-alphanumeric characters when submitting the search form (using a submit JavaScript handler), or use eComQuery as we do in our Solution Set (see http://solutionset.dynamicweb.dk/en-US/ProductList.aspx?eComQuery=hem,http://solutionset.dynamicweb.dk/en-US/ProductList.aspx?eComQuery=hem,).

Update: I forget the sample JavaScript submit handler to strip away unwanted characters, but here it is:

document.querySelector('form.search-form').addEventListener('submit', function() {
 this.querySelector('[name=FreeTextSearch]').value
   = this.querySelector('[name=FreeTextSearch]').value.replace(/[,-.]/g, ''); 
})

This needs to be adapted to remove all unwanted characters (or only allow some characters), but the general idea is there.

Votes for this answer: 1

Grant Menzies

Posted on 04/03/2014 13:59:20

Ok, so by using a submit Javascript handler I strip unwanted characters.

I am assuming that I do this from my master template file where I have my search box. The code for the search box looks like this:

<!--search-form-->
                    <form class="search-form" action="/<!--@Global:Area.LongLang-->/Produkter-2.aspx" method="get" name="EcomSearch">
                        <fieldset>
                            <legend>search</legend>
                            <div class="text">
                                <label class="search-img" for="masterSearch">
                                    <img alt="image description" src="images/img-search.gif" width="22" height="22" />
                                    <span class="label-virtual">search</span>
                                </label>
                                <input tabindex="2" id="masterSearch" title="search" type="text" name="FreeTextSearch" autocomplete="off" />
                                <div id="masterDivSuggestions" class="dw-search-suggestions" style="display: none">
                                  <a class="dw-suggestion-item"></a>
                                    <div class="dw-no-suggestions">
                                        <!--@Translate(Ecom:InstantSearch.NoSuggestions, "Inga förslag")-->
                                    </div>
                                </div>
                            </div>
                            <input tabindex="3" class="btn-submit" type="submit" value="S&ouml;k" />
                        </fieldset>
                    </form>

An eventhandler skulle då kunna börjar se ut så här:

$('.search-form').submit(function(ev) {
    ev.preventDefault(); // to stop the form from submitting
    /* Strip characters here */
    this.submit();
});

Hur hämtar jag in den URL som ska rensas?

Mikkel Ricky

Posted on 04/03/2014 14:03:51

You don't have to clean to url, but the value that is submitted. See my example above.

Best regards,
Mikkel

Grant Menzies

Posted on 04/03/2014 14:50:04

Ok, I appreciate the help alot. Thanks!

Silly question maybe, but where exactly should the script be placed. I tried directly before and after the form code, but it doesn't appear to do anything. Or I'm being daft and missed something? ...

UPDATE: I was most likely being daft as I didn't test your replace function. It didn't seem to work. I changed it a little with a space for the replacement character

        document.querySelector('form.search-form').addEventListener('submit', function() {
 this.querySelector('[name=FreeTextSearch]').value
   = this.querySelector('[name=FreeTextSearch]').value.replace(/[,-.]/g, ' '); 
})

This did the trick. Thanks for your help!

You must be logged in to post in the forum

Developer forum

Replace characters in search URL

Replies