Woocommerce Js elements are not loading - javascript

I really hope someone can help me with this, it is driving me mad and frustrating me. I have installed WooCommerce on an off-line test site on a default theme (TwentyThirteen) and it works and looks great.
When applying it to a theme I have developed however,it works fine. All the woocommerce style has loaded but the woocommerce javascript file is not loaded. I had used some other woocommerce plugin and its js file also not loaded. But when I used TwentyThirteen theme all works fine and all the woocommerce styles and javascript files are loaded but when applying to my theme only style file is loaded
I've tried all the instructions on the WooCommerce website to integrate it to my theme (both methods of either using a catch all page, or adding hooks), and all of this still results.

I had solved the problem. Because of deregister the wordpress jquery and registering the jquery by another handle I think it doesn't load the woocommerce js script. Like
function theme_script(){
wp_deregister_script( 'jquery' );
wp_register_script('jqueryreal',get_stylesheet_directory_uri().'/jquery.js',array(),'4.2');
wp_enqueue_script('jqueryreal');
}
add_action('wp_enqueue_scripts','theme_script');
When I remove the above function from the functions.php ,then problem is solved. All the js element are loaded and works fine as I want .

Related

Adding external HTML CSS and Javascript in Wordpress

I created a cookie banner with some HTML, CSS and Javascript.
My question is how can I add these files within Wordpress to make the banner works on the whole site?
I know I could just use a Wordpress plugin to generate a cookie banner, but I was wondering if it was possible to integrate my code.
Thanks
These are the following methods:
You may use the plugin "Header and Footer" (This plugin have different TABS like html, CSS, JavaScript) and add your whole in this plugin. So Your code work in whole WordPress website.
First, you need to install and activate the SyntaxHighlighter Evolved plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Upon activation, you can go ahead and edit the blog post where you want to display the code.

Uncaught ReferenceError: d3 is not defined in WordPress Visual Composer

I want to edit some images which can only be done in WPBakery Page Builder. So, when I try to edit the page with it, the frontend editor (page builder) doesn't loads. Console shows the following error:
Although, the library script tag is added before the tag which is using this library:
I don't know if any of this makes sense, but, yeah, I have tried these solutions because they were mentioned on different forums:
Adding charset="utf-8" to external script tag.
Moving the script tag inside Raw HTML element.
Using $(document).ready(function(){}) to enclose the whole of second
script. So, that it loads after everything is loaded.
Unfortunately, none of these worked for me.
The page builder works fine on pages where I don't use the d3.js library. And, the visualization works fine WHEN NOT IN PAGE BUILDER - the library loads up and the visualization is displayed. You can check it out here:
https://conductscience.com/age-when-charles-darwin/
Also, please note that I don't have access to any of the theme files. So, I can't make any changes to functions.php or any other file.
Your question is related to the WPBakery, not Visual Composer plugin. You need to have the latest version 5.7 in order to fix this issue. More information, contact support.wpbakery.com if you have a valid license.

Wordpress Script and styles plugin include script option

I am trying to include script to in individual wordpress individual page, but include script is disabled and can't write into the richtextbox don't know why, check the snapshot attached !
This screen shot is not part of WordPress by default. It's probably part of your theme. The WP way to add js is wp_enqueue_script and for css wp_enqueue_style.
For theme specifics I recommend asking the theme author/support.

Activating wordpress plugins breaks jquery effects

I'm currently working on converting an HTML5 template called Rekreato into a wordpress theme. I've managed to set up a bare-bones theme, but whenever I activate any plugins with jQuery scripts, a few of my jQuery effects are broken. Specifically, in Firefox debugger I get --
TypeError: jQuery.easing[jQuery.easing.def] is not a function #
jquery.easing.1.3.js:46
Here is the page in question. You can see about halfway down there is an image slider that is not functional. I have left one plugin active, called WP eMember.
I've tried a number of things like configuring my theme as a child theme, wrapping jquery.easing.1.3 in a document ready function, and moving the script call around in the code, but to no avail. I'm not even sure that the easing script is at fault. The answer is probably staring me in the face, but I can't seem to figure it out. Many thanks in advance.
EDIT: Excellent suggestion from markratledge. I put the scripts in functions.php with wp_register_script() and wp_enqueue_script(). At first I was very confused that even more things were broken. Reading further, I saw that since Wordpress uses a noConflict wrapper around its built-in jQuery library, the $ shortcut is unavailable. So, I went through all of my scripts that were showing errors in the inspector and swapped '$' with 'jQuery'. Voila! Everything jives. Thanks again!
Check out Function Reference/wp enqueue script « WordPress Codex on how to load JS in WordPress themes and avoid jQuery errors, with examples shown.
You're loading a bunch of jQuery by direct link, but then wp_head comes in and loads more jQuery for the plugins, and collisions occur. I.e., the two different main jQuery libraries; check in the Firefox console to get a list of all the JS that is loading.
From that doc:
wp_enqueue_script links a script file to the generated page at the right time according
to the script dependencies, if the script has not been already
included and if all the dependencies have been registered. You could
either link a script with a handle previously registered using the
wp_register_script() function, or provide this function with all the
parameters necessary to link a script.
This is the recommended method of linking JavaScript to a WordPress
generated page.

JS not working when making a Wordpress theme from an HTML template

Here is my issue: I have an HTML template that has CSS, JS and some IMAGES attached to it. I converted it to a wordpress theme by following the very basic and simple instructions here: http://thethemefoundry.com/blog/html-wordpress/ . In order for the images to show, I have to upload them to the WP library and then change the links in the index.php and other files so they point not to /img/picture.jpg, but to www.sitename.com/wp-uploads/2012/11/picture.jpg.
When I do that, the pictures show just fine. However, I then try to upload the JS files to the library as well. That goes OK. Then I go and replace the links to them in the header.php file with the links that now point to the site. Just like above. However, the JS isn't responsing at all.
Can you give me any tips on what I migth be doing wrong? I already went through all the files to see if I haven't missed a link, but everything seems fine.
Thank you very much in advance
Your JavaScript and CSS files should not go in the Media Uploader, they should be included in your theme. From there, you can enqueue them to be included in your header using wp_enqueue_script - http://codex.wordpress.org/Function_Reference/wp_enqueue_script - and wp_enqueue_style - http://codex.wordpress.org/Function_Reference/wp_enqueue_style.
The proper way to determine the page is to use the get_template_directory_uri() function.
For example if you want to register /wp-content/themes/YOUR_THEME/js/script.js and it relies on jQuery you would use this in your theme's functions.php:
wp_enqueue_script('script_name', get_template_directory_uri()."/js/script.js" ,'jquery',false,true);

Categories