[banog5595]

I am trying to build a site (Batley Removals) with an equid store and I just want the equid search widget to have "Search" as a placeholder. Im not new to wordpress, I have my custom.js properly enqueued in my child theme's function.php and my other scripts n snips are working fine.

It feels like this should be really simple. . . This is the html I want to affect:

<input type="search" class="ecwid-SearchPanel-field" maxlength="100" kl_vkbd_parsed="true">
The jQuery I am using is standard:

$('.ecwid-SearchPanel-field').attr('placeholder', 'Search');
But it's not getting through. One thing I have noticed is that Chrome's inspector shows this input like regular html but the actual page source is showing a script instead. . .

I have a custom2.js which is code I got from the ecwid forums and it KINDA works. . . sorta. . . It's from 2010 and is straight JavaScript. Right now I have it completely commented out to avoid conflicting with what I am trying to do in jQuery

The site is http://katherinesheetz.com/ the Ecwid search widget is in the sidebar under the custom menu.

Any help with this would be greatly appreciated. Thanks in advance!

Edited to add details:

I'm sharing this because custom2.js actually affects the input element even though it loads at the same time as custom.js which uses jQuery and for some reason does nothing. . .

custom2.js:

function inputPlaceholder (input, placeholder, color) {
if (!input) return null;
var placeholder_color = color || '#AAA';
var default_color = input.style.color;
if (input.value === '' || input.value == placeholder) {
input.value = placeholder;
input.style.color = placeholder_color;
}
var add_event = /*@cc_on'attachEvent'||@*/ 'addEventListener';
input[add_event](/*@cc_on'on'+@*/'focus', function(){
input.style.color = default_color;
if (input.value == placeholder) {
input.value = '';
}
}, false);
input[add_event](/*@cc_on'on'+@*/'blur', function(){
if (input.value === '') {
input.value = placeholder;
input.style.color = placeholder_color;
} else {
input.style.color = default_color;
}
}, false);
input.form && input.form[add_event](/*@cc_on'on'+@*/'submit', function(){
if (input.value == placeholder) {
input.value = '';
}
}, false);

return input;
}
function getElementsByClassName(classname, node) {
if(!node) node = document.getElementsByTagName("body")[0];
var a = [];
var re = new RegExp('\\b' + classname + '\\b');
var els = node.getElementsByTagName("*");
for(var i=0,j=els.length; i<j; i++)
if(re.test(els[i].className))a.push(els[i]);
return a;
}
function ecwid_set_placeholder() {
var search_box = getElementsByClassName('ecwid-SearchPanel-field')[0];
if (search_box) {
inputPlaceholder(search_box,'Search');
clearInterval(ecwid_set_placeholder_interval);
}
}
var ecwid_set_placeholder_interval;
ecwid_set_placeholder_interval = setInterval('ecwid_set_placeholder();',100);
custom.js is basically just this:

(function($){
$(document).ready(function() {
//some other scripts for adding style to sidebar and then the relevant part. . .
$$('.ecwid-SearchPanel-field').attr('placeholder', 'Search');
});
})( jQuery );

[Tonya M.]

Hi there,

This is Tonya from Ecwid Customer Care team here!

If you want simply to add a product search to your WordPress website you can either integrate it with your website search or add a separate store search box.
To learn how to do that, please refer to the instructions here: https://support.ecwid.com/hc/en-us/a...ore-search-0-4

If you need to implement something different and it needs more advanced knowledge, I'd like to invite you to our Developer Community on Slack where experienced developers might help you out! To join Ecwid Community on Slack click here: https://ecwid-community.herokuapp.com/

Hope this helps!