Thread Tools Display Modes
  #1  
Old 12-21-2019, 10:58 AM
 banog5595's Avatar
 banog5595 is offline
Junior Member
 
Join Date: Dec 2019
Posts: 1
Talking

Trying to add placeholder attribute to search field for plugin in wordpress using jQuery


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 );
  #2  
Old 12-23-2019, 09:46 AM
Tonya M.'s Avatar
Tonya M. Tonya M. is offline
Ecwid Team
 
Join Date: Mar 2019
Posts: 6
Default

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!
__________________
Warmly,
Tonya M.
Ecwid Customer Care team
 

Tags
wordpress

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 08:56 AM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.