Rich-text Reply

Issue editing site search form's input placeholder text

adamlcasey 07-31-15
Accepted Solution

Issue editing site search form's input placeholder text

I'm just trying to setup a new test targeting our ecommerce stores site search bar, to make it more visible and also to update the placeholder text.

 

My test can be viewed here:

http://galt.limebuild.net/?test=1234

 

The problem is when the page loads I see the old text first ('search')

Also when I click inside the search bar the text does not disappear like the old text used to

Also when I click into the form the text I'm testing shows up in grey. But when I click back out it changes back to the original search?

 

How can I get rid of the original "search" placeholder text and make sure when a visitor clicks to perform a search the words disappear?

 

JMarchant 07-31-15
 

Re: Issue editing site search form's input placeholder text

Hi Adam,

 

For your first issue, I would suggest hiding all of the elements that you are modifying/removing first and then showing it after you've modified them. To do this you can add the following to the top of your variation code (this can be found in the 'Edit Code' window) which will add some CSS to the page:

/* _optimizely_evaluate=force */
function addCss(css) {
	head = document.getElementsByTagName('head')[0],
	style = document.createElement('style');

	style.type = 'text/css';
	if (style.styleSheet) {
		style.styleSheet.cssText = css;
	} else {
		style.appendChild(document.createTextNode(css));
	}
	head.appendChild(style);
}

addCss('#search_mini_form,.secondary-links{display:none}');
/* _optimizely_evaluate=safe */

Then, at the end of your code, add the following to reshow the content:

$('#search_mini_form,.secondary-links').css('display','block');

For your second issue, it looks like the search input field has a placeholder attached to it. Placeholders will still be displayed even if you're focused within the field until you start typing. To change this, locate the following in your code:

$("input").attr("placeholder", "Search Toys, Puzzles, Arts & Crafts and much more").val("").focus().blur();

and replace it with this code:

$("#search").val("Search Toys, Puzzles, Arts & Crafts and much more").focus().blur();

This mimics the control in how it displays the text in the field and should disappear when you click into it.

 

Let me know if that solves your issue

James Marchant
Senior Developer at Conversion.com

 
adamlcasey 07-31-15
 

Re: Issue editing site search form's input placeholder text

Hi James,

 

Thanks for coming back to me. I've implemented your suggestions but the final piece does not work. i.e when I click into the search bar the template text is not disappearing. Now it stays there and needs deleting?

 

http://galt.limebuild.net/?test=1234

JMarchant 08-01-15
 

Re: Issue editing site search form's input placeholder text

Hi Adam,

 

I've just had another look at it and I can see that the new search field still has the old event listeners. What we can do is simply replace it to remove these event listeners. In your code, replace the line

$("#search").val("Search Toys, Puzzles, Arts & Crafts and much more").focus().blur();

with the following:

$('#search').replaceWith('<input id="search" type="text" name="q" class="input-text" maxlength="128" autocomplete="off" style="font-size: 2.1rem !important; font-family: vagroundedregular; border-color: rgb(35, 124, 178);" value="Search Toys, Puzzles, Arts & Crafts and much more">');
$('#search').focus(function(){ if ($(this).val() === 'Search Toys, Puzzles, Arts & Crafts and much more') { $(this).val(''); } });
$('#search').blur(function(){ if ($(this).val() === '') { $(this).val('Search Toys, Puzzles, Arts & Crafts and much more'); } });

This should then fix the issue.

 

Let me know if you need anymore help on this.

James Marchant
Senior Developer at Conversion.com

 
adamlcasey 08-01-15
 

Re: Issue editing site search form's input placeholder text

[ Edited ]

Hi James,

 

Thanks again for coming back to me, that has solved the problem of the text not disappearing when clicking into the field, but now the whole search feature no longer works?

 

http://galt.limebuild.net/?test=1234

 

When you start typing into the search field, it should start to show you suggested matches, but it's not showing anything, plus the search button does nothing when clicked?

 

JMarchant 08-01-15
 

Re: Issue editing site search form's input placeholder text

Ah, it looks like by completely replacing the search field we've also removed the autocomplete functionality. To add this back in, just add this custom function at the top of your code within the force parameters:

/* _optimizely_evaluate=force */
function addCss(css) {
	head = document.getElementsByTagName('head')[0],
	style = document.createElement('style');

	style.type = 'text/css';
	if (style.styleSheet) {
		style.styleSheet.cssText = css;
	} else {
		style.appendChild(document.createTextNode(css));
	}
	head.appendChild(style);
}

addCss('#search_mini_form,.secondary-links{display:none}');

// Custom function
$.fn.addAutoComplete = function() {
    var searchForm = new Varien.searchForm('search_mini_form', 'search', 'Search Toys, Puzzles, Arts & Crafts and much more');
    searchForm.initAutocomplete('http://galt.limebuild.net/catalogsearch/ajax/suggest/', 'search_autocomplete');
};
/* _optimizely_evaluate=safe */

This function re-attaches the autocomplete functionality that we had removed by overwriting the search input HTML. Then you'll just need to add the following at the bottom of your code to call it:

$('#search').addAutoComplete();

I hope that fixes it for you!

James Marchant
Senior Developer at Conversion.com

 
adamlcasey 08-01-15
 

Re: Issue editing site search form's input placeholder text

Hi James, thanks a lot for your help with that, it's working great now.
adamlcasey 08-03-15
 

Re: Issue editing site search form's input placeholder text

[ Edited ]

 

adamlcasey wrote:
Hi James, thanks a lot for your help with that, it's working great now.

Hmm weird, this was working when i tested it originally.

 

However now that I've moved it over to my production project and set it live, I've noticed that it has stopped working?

 

i.e. the Autocomplete function no longer works and neither does the search button when clicked.

 

Note: I'm testing on Google Chrome

JMarchant 08-03-15
 

Re: Issue editing site search form's input placeholder text

Hi Adam,

 

What's the URL of the live site? I believe that you may have to update the URL in the code I last sent you:

// Custom function
$.fn.addAutoComplete = function() {
    var searchForm = new Varien.searchForm('search_mini_form', 'search', 'Search Toys, Puzzles, Arts & Crafts and much more');
    searchForm.initAutocomplete('http://galt.limebuild.net/catalogsearch/ajax/suggest/', 'search_autocomplete');
};

with the following:

// Custom function
$.fn.addAutoComplete = function() {
    var searchForm = new Varien.searchForm('search_mini_form', 'search', 'Search Toys, Puzzles, Arts & Crafts and much more');
    searchForm.initAutocomplete('http://[LIVE SITE URL]/catalogsearch/ajax/suggest/', 'search_autocomplete');
};

Let me know if that fixes it.

James Marchant
Senior Developer at Conversion.com

 
adamlcasey 08-03-15
 

Re: Issue editing site search form's input placeholder text

Hi James,

 

Sorry i should have spotted that, just to be sure I'm got this all right.

Here is my complete code now:

 

/* _optimizely_evaluate=force */
function addCss(css) {
	head = document.getElementsByTagName('head')[0],
	style = document.createElement('style');

	style.type = 'text/css';
	if (style.styleSheet) {
		style.styleSheet.cssText = css;
	} else {
		style.appendChild(document.createTextNode(css));
	}
	head.appendChild(style);
}

addCss('#search_mini_form,.secondary-links{display:none}');

// Custom function
$.fn.addAutoComplete = function() {
    var searchForm = new Varien.searchForm('search_mini_form', 'search', 'Search Toys, Puzzles, Arts & Crafts and much more');
    searchForm.initAutocomplete('http://www.galttoys.com/catalogsearch/ajax/suggest/', 'search_autocomplete');
};
/* _optimizely_evaluate=safe */



$(".secondary-links > li:eq(1) > a:eq(0)").css({"display":"none", "visibility":""});
$(".secondary-links > li:eq(3)").css({"display":"none", "visibility":""});
$('head').append('<style>.search-button::before{color:#237CB2 !important}</style>');
$(".search-button").before(function() {$(this).css("color","#237CB2");});
$("#search_mini_form").detach().insertAfter(".secondary-links");
$(".secondary-links > li:eq(0)").css({"border-color":"", "border-width":"0","position":"relative", "left":115, "top":-1});
$("#search_mini_form").css({"left":"0px", "position":"relative", "top":"0px"});
$("#search_mini_form").css({"width":690, "height":65, "left":97, "top":-5});
$('#search').replaceWith('<input id="search" type="text" name="q" class="input-text" maxlength="128" autocomplete="off" style="font-size: 2.1rem !important; font-family: vagroundedregular; border-color: rgb(35, 124, 178);" value="Search Toys, Puzzles, Arts & Crafts and much more">');
$('#search').focus(function(){ if ($(this).val() === 'Search Toys, Puzzles, Arts & Crafts and much more') { $(this).val(''); } });
$('#search').blur(function(){ if ($(this).val() === '') { $(this).val('Search Toys, Puzzles, Arts & Crafts and much more'); } });
$("input").css({'cssText':'font-size:2.1rem !important', "font-family":"vagroundedregular"});
$(".search-button").html("<span><span>QUICK SEARCH</span></span>").css({"left":532, "top":10, "width":"85px"});
$(".search-button > span > span:eq(0)").css({"font-family":"vagroundedregular","font-size":"18px","position":"relative", "left":7, "top":0});
$("#search").css({"border-color":"#237CB2"});
$('#search_mini_form,.secondary-links').css('display','block');
$('#search').addAutoComplete();

 

 

JMarchant 08-03-15
 

Re: Issue editing site search form's input placeholder text

Hi Adam,

 

That looks correct to me!

James Marchant
Senior Developer at Conversion.com

 
adamlcasey 08-03-15
 

Re: Issue editing site search form's input placeholder text

Nearly there now.

 

Just the button isn't working now

http://galt.limebuild.net/

 

JMarchant 08-03-15
 

Re: Issue editing site search form's input placeholder text

OK, add this to the end of your code to fix the button:

$('#search_mini_form button').click(function(){ $('#search_mini_form').submit() });

Tell me if that fixes it for you.

James Marchant
Senior Developer at Conversion.com

 
adamlcasey 08-03-15
 

Re: Issue editing site search form's input placeholder text

Hi James,

 

Thanks again for your persistance. Now the button works but for some reason the search results pages loads the new search bar in but changes the magnifying glass back to it's original blue colour and the text search goes missing?

 

Try searching for playnest

http://galt.limebuild.net/

 

 

JMarchant 08-03-15
 

Re: Issue editing site search form's input placeholder text

Hi Adam,

 

It looks like the button on the results page is missing the class 'search-button' and so the styling that you've added isn't getting applied. I would replace all instances of

$(".search-button")

in your code with

$('#search_mini_form button')

That should then work on both pages.

James Marchant
Senior Developer at Conversion.com

 
adamlcasey 08-03-15
 

Re: Issue editing site search form's input placeholder text

In fact the whole search bar breaks once the page loads the search results. i.e. The button issues above, but also if i click into the bar again to search it doesn't always clear the placeholder text?
adamlcasey 08-03-15
 

Re: Issue editing site search form's input placeholder text

Nearly worked the magnifying class is now showing the right colour and the word 'Search' has come back in the right colour. Just not the right font. Arrgh I thought this was a simple bit of engineering.
JMarchant 08-03-15
 

Re: Issue editing site search form's input placeholder text

Hi Adam,

 

Try replacing this line

$("#search_mini_form button").html("<span><span>SEARCH</span></span>").css({"left":700, "top":10, "width":"85px"});

with this line

$("#search_mini_form button").html("<span><span>SEARCH</span></span>").css({"left":700, "top":10, "width":"85px", "font-family": "Trebuchet MS", "font-size": "18px !important"});
James Marchant
Senior Developer at Conversion.com

 
adamlcasey 08-03-15
 

Re: Issue editing site search form's input placeholder text

[ Edited ]

Thanks James that looks like its the final piece of the jisaw.

I really appreciate all your help. Smiley Very Happy