WooCommerce:
I have some jQuery that loads on document.ready that effects the quantity input box. Works great.
My issue is that when I update the cart/delete item, the jQuery needs to run again because the AJAX call kills it (refreshes it). Is there some hook/filter I can add that will re-run my script again after a cart update? Ive searched and can't find anything (or maybe I'm not aware of what I am looking for).
Thank you!!!!
The WooCommerce scripts have several custom events built in. Your own script can listen to these events and run your own code when they are triggered. The most obvious one for your case might be updated_cart_totals but updated_wc_div might also be helpful, I'm not sure without testing. Tested and works.
$( document.body ).on( 'updated_cart_totals', function(){
//re-do your jquery
});
I also needed to run a function after user removes item from cart, and the above events updated_cart_totals or updated_wc_div didn't work for me.
After digging into the Woocommerce frontend code
[/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart.min.js]
I found these events:
$(document.body).on('added_to_cart removed_from_cart', do_magic);
These worked like a charm!
In my case I have to add the following:
jQuery(document.body).on('removed_from_cart updated_cart_totals', function () {
location.reload();
});
Because I have a huge customization with js cart submit
Related
I am developing a site for a client using Wordpress and Woocommerce and have an issue where I can not click on any of the anchors on the search results page.
The search results page is here: http://79.170.44.83/newcityused.com/?s=chair
I can see nothing in the CSS that would make this happen.
I have deactivated all of the plugins with no joy.
I'm lost.
Has anyone else experienced this or know of a solution?
You have a class .search inside your 'body' tag and then you have a js that is something like this:
jQuery(function(){
jQuery('.search').on('click', function(e) {
jQuery('.search-form').toggleClass("expand");
e.preventDefault();
});
})
I think that you are preventing the default clicks in here... so remove the e.preventDefault it made work, let me know...
I've spent a few hours on this but I'm not getting anywhere. I'm just starting on Wordpress, and I'd like a simple page where I click on something (a list item) and a textual description appears in a div somewhere else on the same page.
This would be trivial if I was writing plain HTML and JS, but I can't get my head around how to integrate this into WordPress. As far as I can make out, I have to write a plugin, but I can't find any handlers for mouse events in the hooks API. Or should I just hardcode an onclick into the HTML, and find somewhere to put some JavaScript code to handle it? Any advice appreciated...
Wordpress doesn't have mouse events/hooks. Wordpress hooks apply to the backend only, they are a way to interact with the WP core which is written in PHP (executed on the server, not the client).
Mouse events happen on the client side, so to achieve what you want you should register a Javascript file with wordpress via wp_register_script (http://codex.wordpress.org/Function_Reference/wp_register_script) and add your Javascript behaviour there.
You don't have to write a plugin, just add wp_register_script logic in your functions.php.
Vlad Cazacu is right, we dont have any hooks for javascript events and i am not sure if there is any option in other server side languages as well besides node.js. Anyways you can use jquery in the normal way with registering and enqueing the file. But if you want to have advanced interactivity then there are functions in wordpress that can do that for instance there's this function wp_localize_script, it is used with ajax to grabs the data as a javascript array/object and then converts it into php array/object which is then available to use in wordpress/php.
In short -
Add an id (and a styling class) to whatever you want a handler for
in the HTML
Register handlers in JS, as follows:
function fp_onload_js() {
var id = document.getElementById('myID');
id.addEventListener(
"click",
function() { myEventListener(); },
false);
}
Register/enqueue the file which contains your JS, in functions.php:
add_action('wp_enqueue_scripts', 'theme_enqueue_stuff');
function theme_enqueue_stuff() {
...
wp_enqueue_script(
'myHandle',
get_template_directory_uri() . '/path_to_my_js_file.js');
}
The tricky bit: you have to make sure that the event listener code is run after WordPress has constructed the DOM, after the IDs have been created. You need to run the JS after the page loads (see here). Basically, also in functions.php:
add_action('wp_footer', 'fp_onload_php');
function fp_onload_php() {
?>
<script type="text/javascript">
fp_onload_js();
</script>
<?php
}
And make sure you don't use the 'visual' tab in the WordPress editor - it will mess up your carefully-crafted HTML.
I am trying to use the hook_webform_submission_insert in my theme template.php file. I have 2 other webform hooks currently running in here and they work just fine. I am trying to get the submission data after it has been submitted. Below is my code.
function acquarius_hook_webform_submission_insert($node, $submission){
var_dump($node);
var_dump($submission);
}
I am sure I am missing something small here but everything I try seems to fail.
You need to replace hook keyword with your theme name. Also add hook functions in module.
YOURTHEMENAME_webform_submission_insert($node, $submission){
// give your code here
}
After you create a new hook, you need to clear the drupal caches.
Go to YOURSITE.com/admin/config/development/performance
And click on "Clear all caches"
I have created custom post type 'portfolio' in my wordpress application.
I am using wp-pagenavi plugin for pagination of custom posts.Can anyone guide me how will I implement ajax pagination i.e load newer posts without reloading the whole page. Any help will be greatly appreciated...
/*******ajax pagination*******/
jQuery(document).on('click', '#pagination a', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#content').html('Loading...'); //the 'main' div is inside the 'content' div
jQuery('#content').load(link+' #main');
});
the .live() function has been depreciated so use .on() instead.
obviously the jQuery library is needed too.
Here's a couple of options you can try:
AJAXify WordPress Tutorial
AJAXify WordPress Plugin
I've used the first option, its a good tutorial. I know it works. You may need to modify it some though. I cannot vouch for the second option as I've never used it. Just a quick Google search turned it up though.
I have been developing wordpress plugins for a while now and i always seem to get the following issues with all my plugins Jquery conflicts issues.
I have tried so many different ways to avoid these but i always get users contacting me saying when they have installed one off my plugins it has stopped another plugin from working aahhhhh.
I really want to get this sorted because i understand how frustrating this can be for people.
I always set and option or include wordpresses jquery, below is just an example not working code.
add_action( 'init', array( $this, 'include_jquery' ) );
function include_jquery(){
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"), false, '1.7.1');
wp_enqueue_script('jquery');
}
Ok so after issues with this i now have a select option in the plugin admin to toggle yes or no to include jquery or not i know it is automatically installed but some users remove this, this works for some people but not all.
if you include the wordpress jquery i know you have to run your jquery with the following.
jQuery(document).ready(function ($) {
jQuery instead of the dollar sign $
i understand and have used jquery no conflict and tried and tested some if not all off these
http://api.jquery.com/jQuery.noConflict/
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
This as with the others works for some but not all users with conflicts arising still with certain users.
I am hoping that from this post some of us wordpress plugin developers could help out and post a bullet proof way to use wordpress and jquery within our plugins without getting conflict issues.
Thanks
Doesn't it work with a closure?
(function($){
// your plugin code
})(jQuery);
Read these parts of the codex :
Load a default WordPress script from a non-default location
jQuery noConflict wrappers
You should use wp_enqueue_scripts hook instead of init.
And you should use jQuery.noConflict(); instead of $.noConflict();.