Snippet in all pages
-
Hi there,
I have a chat installed on a website (here) – not working on chrome and firefox. It supposed to be visible on every page, but it shows up only in home.
This is how I added the script in theme’s functions:
function add_chat ( ) { ?> <script type="text/javascript"> SERVICE_PATTERN_CHAT_CONFIG = { appId: ### clientId: ### apiUrl: ### tenantUrl: ### width: 300, chatPath: '' }; </script> <script type="text/javascript" src="/js/snippet.js"></script> <?php } add_action ('wp_footer', 'add_chat' );
I also tried the wp_enqueue down there, but I had no luck.
function add_chat_scripts() {
`wp_register_script( ‘chat’, get_stylesheet_directory_uri() . ‘/js/chat.js’ , array(), true );
wp_register_script( ‘chat-snippet’, get_stylesheet_directory_uri() . ‘/js/snippet.js’, array(‘chat’) );
wp_enqueue_script (‘chat’);
wp_enqueue_script(‘chat-snippet’);
}
add_action( ‘wp_enqueue_scripts’, ‘add_chat_scripts’ );`
`Any help?
Thank you
-
In the dependency array is adequate. It does no harm to enqueue separately, but it’s not necessary. What is harmful is re-registering.
Next go to one of the problem pages and view the source HTML. Locate where each of your scripts are referenced and confirm the paths are correct and scripts dependent on others load after their dependencies.
Check again for any errors in the console. If that all checks out, the chat should work.
Ok, so. I checked the code and I noticed that in homepage, in the header there are some script that are missing in non-working pages.
While the header of homepage contains:
<script src="js/chat-api-session.js" async=""></script> <script src="js/jQuery.XDomainRequest.min.js" async=""></script> <script src="js/jquery-ui-1.11.1.min.js" async=""></script> <script src="//www.google-analytics.com/analytics.js" async=""></script> <script src="js/json2.min.js" async=""></script> <script src="js/jquery-1.11.0.min.js" async=""></script>
While in non-working pages “Cht-api”, “jQuery.Xdomain” and “jquery-ui” are missing. Is it possible this is the cause of the problem? Is there a way to fix it?
Tnx
“jquery-ui” I believe is pre-registered, so just add “jquery-ui-core” to your dependencies array. The other two are more scripts to register. Once registered you can add them as well to your dependencies array.
I’m unsure how these ended up on the home page only. Once you register these scripts and get them added to the link tags, be sure none of these are loaded twice on the home page. It actually shouldn’t stop anything from working, it’s just inefficient and wasteful.
Ok, super thanks!
I registered and add everything as dependencies. Result: I now have the right scripts in the right place BUT I still get the “not found https://becloudsolutions.com/resources/js/jquery-1.11.0.min.js” error (also for json) even though they’re now charged. AND I can’t see the chat in non-home page.
It keeps looking for them in the wrong place.
I’m losing my hope ??
Don’t give up yet! It’s no doubt frustrating, but you are getting closer each time.
I see the chat.js right after the
<![endif]-->
comment, at least on the resources page. There is also a jQuery library loaded, it is the native 1.12.4 version. So yes, 1.11.0 is not found, but it shouldn’t be necessary. It appears the json2 for WP is only used for IE8 browsers, it’s otherwise commented out.To load the non WP json.js, register the file with some other tag, like “chat-json”, then specify that in the dependencies instead of “json2”.
If you really must use jQuery 1.11.0, you must first deregister the native, pre-registered version, then register the 1.11.0 version as “jquery”. Hopefully the other jQuery scripts are OK with this version. Be sure to register 1.11.0 with the correct path. Function Reference/wp deregister script
Nothing seems to work out :/
I tried what you suggest but had no luck. This is the code I used:
function add_chat_scripts() { wp_register_script ('chat-api', get_template_directory_uri() . '/js/chat-api-session.js'); wp_enqueue_script ('chat-api'); wp_register_script ('jqueryx', get_template_directory_uri() . '/js/jQuery.XDomainRequest.min.js'); wp_enqueue_script ('jqueryx'); wp_enqueue_script ('jquery-ui-core'); wp_register_script ('chat-json', get_template_directory_uri() . '/js/json2.min.js'); wp_enqueue_script ('chat-json'); wp_register_script( 'chat', get_template_directory_uri() . '/js/chat.js' , array(), true ); wp_enqueue_script ('chat'); wp_register_script( 'chat-snippet', get_template_directory_uri() . '/js/snippet.js', array('chat')); wp_enqueue_script('chat-snippet'); } add_action( 'wp_enqueue_scripts', 'add_chat_scripts' );
It does charge everything, but it still tries to charge files from the page itself and I can’t see the chat. In homepage instead, it charges every script twice, one with the template path and one with just e.g. “js/snippet.js”.
So, I went through the chat files, and find out this: there’s a .html file placed in the root that, in the header calls all the scripts I’m already calling in functions.php like this:
<!DOCTYPE html> <html> <head> <title>Chat</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link href="css/wrong.css" rel="stylesheet" type="text/css"> <link href="css/override.css" rel="stylesheet" type="text/css"> <!--link href="js/perfect-scrollbar/perfect-scrollbar.min.css" rel="stylesheet" type="text/css"--> <script type="text/javascript" src="js/json2.min.js"></script> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="js/datetime.min.js"></script> <script type="text/javascript" src="js/perfect-scrollbar/perfect-scrollbar.min.js"></script> <script type="text/javascript" src="js/jQuery.XDomainRequest.min.js"></script> <script type="text/javascript" src="js/chat-api-session.js"></script> <script type="text/javascript" src="js/jquery-ui-1.11.1.min.js"></script> <script type="text/javascript" src="js/client-chat-ui.js"></script> <script type="text/javascript" src="js/autosize.min.js"></script> <script type="text/javascript"> (function(){ var cp = {};....
So, what I tried to do was to place all chat’s files in the root, call the scripts with
get_bloginfo
instead ofget_template_uri
. But I had no success.Would it be possible that this .html file create some sort of conflict? Would it explain the double scripts in homepage?
Nothing seems to work out :/
I tried what you suggest but had no luck. This is the code I used:
function add_chat_scripts() { wp_register_script ('chat-api', get_template_directory_uri() . '/js/chat-api-session.js'); wp_enqueue_script ('chat-api'); wp_register_script ('jqueryx', get_template_directory_uri() . '/js/jQuery.XDomainRequest.min.js'); wp_enqueue_script ('jqueryx'); wp_enqueue_script ('jquery-ui-core'); wp_register_script ('chat-json', get_template_directory_uri() . '/js/json2.min.js'); wp_enqueue_script ('chat-json'); wp_register_script( 'chat', get_template_directory_uri() . '/js/chat.js' , array(), true ); wp_enqueue_script ('chat'); wp_register_script( 'chat-snippet', get_template_directory_uri() . '/js/snippet.js', array('chat')); wp_enqueue_script('chat-snippet'); } add_action( 'wp_enqueue_scripts', 'add_chat_scripts' );
It does charge everything, but it still tries to charge files from the page itself and I can’t see the chat. In homepage instead, it charges every script twice, one with the template path and one with just e.g. “js/snippet.js”.
So, I went through the chat files, and find out this: there’s a .html file placed in the root that, in the header calls all the scripts I’m already calling in functions.php like this:
<!DOCTYPE html> <html> <head> <title>Chat</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link href="css/wrong.css" rel="stylesheet" type="text/css"> <link href="css/override.css" rel="stylesheet" type="text/css"> <!--link href="js/perfect-scrollbar/perfect-scrollbar.min.css" rel="stylesheet" type="text/css"--> <script type="text/javascript" src="js/json2.min.js"></script> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="js/datetime.min.js"></script> <script type="text/javascript" src="js/perfect-scrollbar/perfect-scrollbar.min.js"></script> <script type="text/javascript" src="js/jQuery.XDomainRequest.min.js"></script> <script type="text/javascript" src="js/chat-api-session.js"></script> <script type="text/javascript" src="js/jquery-ui-1.11.1.min.js"></script> <script type="text/javascript" src="js/client-chat-ui.js"></script> <script type="text/javascript" src="js/autosize.min.js"></script> <script type="text/javascript"> (function(){ var cp = {};....
So, what I tried to do was to place all chat’s files in the root, call the scripts with
get_bloginfo
instead ofget_template_uri
. But I had no success.Would it be possible that this .html file create some sort of conflict? Would it explain the double scripts in homepage?
Directly referencing scripts like that would be a problem in WP, but loading scripts through an external .html file would be difficult. It would at least need to be a .php file to be workable. I’m not seeing any content like that on the live pages.
Any script links that reference somewhere in WP besides your theme or original core code are there through other means than your enqueued code and need to be suppressed. If they are there through an action callback (not necessarily wp_enqueue_scripts), they can be removed if you can determine how they were added. Ideally, find the add_action() call in chat code to get the needed information. The information can also be found by examining the content of global $wp_filters. Code can also be added by referencing external .php files with
include
orrequire
or their *_once variants.The main problem I see with your latest enqueuing code is the main jQuery is not dealt with at all. The pre-registered version of “jquery” needs to be deregistered with
wp_deregister('jquery');
, then the 1.11.0 version needs to be registered with the same “jquery” tag and included in the dependency array of other scripts as they are registered.Your add_action() call should have a third parameter, 100 should be fine.
add_action( 'wp_enqueue_scripts', 'add_chat_scripts', 100 );
This ensures your callback is most likely called last. You cannot deregister something if it hasn’t yet been registered, and there is no error generated on failure.Thank you for your patience @bcworkz ??
But I’m not sure I understood what you say, this is going waaay too far from my knowledge of WP, php, etc. (for now, at least).
I looked inside chat files, and apparently (not sure) json and jquery are called in the snippet.js, this way:
if (SP.tenantUrl && SP.appId) { loadScripts(['js/json2.min.js', 'js/jquery-1.11.0.min.js'], function() { loadScripts(['js/jQuery.XDomainRequest.min.js', 'js/jquery-ui-1.11.1.min.js'], function() { $ = jQuery.noConflict(true); SP.$ = $; $.support.cors = true; loadScripts(['js/chat-api-session.js'], function() { SP.cp = { url: SP.apiUrl, crossDomain: true, tenantUrl: SP.tenantUrl, appId: SP.appId, clientId: 'WebChat', phoneNumber: SP.phoneNumber, parameters: SP.parameters, onFormShow: SP.onFormShow, onAddStream: SP.onAddStream, onAddLocalStream: SP.onAddLocalStream }; onInitialize(); }); });
But I guess it’s normal, no?
I also tried to deregister jquery and register it again. Aaaand…this is the result from the console:
Well, it’s normal for missing script files due to a bad paths. That jQuery code you found would cause errors outside the home page. Do the scripts you’ve enqueued include something that defines the same array values for url:, crossDomain:, etc.? If so, you could try making the entire block of code a comment with /* */.
The other choice would be to not enqueue any scripts loaded here and hardcode the correct, absolute paths to the files, https:// and everything. Generally a very poor practice but sometimes it’s the lesser of evils. You would still need to deregister jquery and register the 1.11.0 version, but do not enqueue it or use it as a dependency. Whatever scripts you do enqueue, specify they be loaded in the footer. This will help ensure things are loaded in the right order, but there is no guarantee.
Unless this round produces some improvement, you may be right, there’s little hope. The chat setup is not really compatible with WP. It’s sort of a fluke it works on the home page. That may be as good as it gets.
I thinks there’s something like that, but to be really honest, I wouldn’t know how to find it out.
I tried the hardcoding already in local and changing all the paths on every .js file called in scripts. And eventually the damn chat showed up everywhere just…It worked only in homepage and in non-homepage was behaving strange. I fix one thing, I break another! That it’s working on homepage it’s a total fluke, for sure…ahahaahah That’s it, I give up.
Once again, thanks a lot for your help! ??
No problem! If nothing else it challenged my remote debugging skills, always a good thing ??
- The topic ‘Snippet in all pages’ is closed to new replies.