am trying to do somthing like : Woocommerce update checkout ajax! am building a multistep form for my client where the customer is adding a product in the cart using ajax . I need to update the checkout when a product is added into the cart . I tried to do an onclick function so when the user add the product in the cart the checkout step update without refreshing the page :
jQuery('#test').on('click',function(){
$( document.body ).trigger( 'update_checkout' );
})
but its not working and i feel like am missing somthing obvious .... Any tips ? :)
This event fire after checkout update
jQuery( document ).on( 'updated_checkout', function() {
//Write code here to fire event
console.log('run');
});
Your code is correct you have to replace $ with jQuery
//Paste this code in theme footer.php file and check it on checkout page
<?php if (is_checkout()) { ?>
<button id="test">Click here to update checkout</button>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#test').on('click',function(){ alert("pp");
jQuery( document.body ).trigger( 'update_checkout' );
});
});
</script>
<?php } ?>
The code is tested everything is working fine.
Related
I am offering customers a repurchase on the order confirmed page. If they click the link they are sended directly to the checkout page. However, the form is then prefilled with the previous data. I would like to clear it, because the idea is one product(ticket) per person.
So far i have the following (and in the page source i can see the script is loaded):
function print_script() {
if (isset($_GET['extrapersoon']) && is_page(21560)){
echo '<script>
window.addEventListener("load", function(){myFunction()};
function myFunction() {
document.getElementsByClassName("woocommerce-checkout").reset();
}
</script>';
}
}
add_action('wp_print_scripts', 'print_script');
I tried other triggers too, such as window.load but no result yet.
Anyone?
You should put the script in the footer using add_action( 'wp_footer', 'print_script' ); to make sure the form gets cleared after the data was loaded into it.
Wordpress has jQuery on default, so I'm using it to look for all the forms in the document and clear them. The function is automatically called on page load, therefore no need for a event listener.
<?php
function print_script() {
if (isset($_GET['extrapersoon']) && is_page(21560)) { ?>
<script type="text/javascript">
( function( $ ) {
$('form').each(function() { this.reset() });
}( jQuery ) );
</script>
<?php }
}
add_action( 'wp_footer', 'print_script' ); ?>
I have a custom page that displays a product with variations, a custom field and add to cart button.
I need to trigger some validation in javascript when the add to cart button is clicked, but if the form doesn't validate, then add to cart can't be performed.
I'd like to know if it's possible to achieve.
First I tried to do as explained here :
WooCommerce add to cart validation: prevent add to cart
It's working great and I'd like to be able to use this code but for me it can't be because :
- I'm using a custom page and not the usual woocommerce product page
- This means that after validation, I'm redirected to the standard woocommerce page which is blank
That's why I really need to use Javascript to perform this:
- javascript or jquery function triggered on the add to cart click
- then the function checks it everything is ok
- if yes, then product can be added to cart
- if no, an alert is displayed and the user remains on the same page, nothing added to cart.
I tried to be as clear as possible.
Hoping I can get some help.
Thanks a lot.
Please try this way:
function so_validate_add_cart_item( $passed, $product_id, $quantity, $variation_id = '', $variations= '' ) {
<script>
jQuery(function($){
jQuery(document).on('click', '.single_add_to_cart_button', function (e) {
e.preventDefault();
// your validation here
});
});
</script>
}
add_filter( 'woocommerce_add_to_cart_validation', 'so_validate_add_cart_item', 10, 5 );
After submission, my contact form redirects to a URL followed by an unfamiliar code like #wpcf7-f1258-o1. but i used on_sent_ok: "my_redirect();" on additional heading.
Please help!
The on_sent_ok method has been removed from Contact Form 7.
See: https://contactform7.com/2017/06/07/on-sent-ok-is-deprecated/
Try using a hook on the page where the contact form is located:
add_action('wp_head', 'cf7_redirect_script');
function cf7_redirect_script(){
if(is_page('page-slug') { ?> // slug of the page which your contact form is on (can also be an ID)
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
// put the desired redirect URL below
location = 'http://yourdomain.com/thank-you';
}, false );
</script>
<?php }
}
After clicking on Users -> Edit User , I want to create a custom button in users page next to Update button.Which action should be written inside our functions.php page
By default WordPress not provided any hook to add a custom button in WordPress user edit interface but we can add it by hook using jquery. Button action we can implement by using function action admin_init.
add_action('admin_head','add_button_profile');
function add_button_profile( $checkout ) {
if(isset($_GET['user_id']) && !empty($_GET['user_id'])){
?>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".submit #submit").after(' <input
id="customButton" class="button button-primary" name="customsubmit"
value="Custom Button" type="submit">');
});
</script>
<?php }
}
add_action('init','custom_button_function');
function custom_button_function() {
if(is_admin() && isset($_POST['customsubmit']) && ($_POST['customsubmit']
== 'Custom Button')){
#####You can create button action here
}
}
I have a "Products" custom post type. Normally, this custom post type have an "Add New" button. I want to add another button call "Update from Provider".
Currently, I have modify the Wordpress code (in "wordpress\wp-admin\includes\class-wp-list-table.php") to add that button. In this case, when I update Wordpress, my modified code will be deleted. Therefore, I need to move that button to my plug-in code.
In this case, please help me how to move that button to my plug-in code.
Well, if you opened the core file you saw that there's no action in it where we can hook.
Only a couple of filters. We can use the following:
add_filter( 'views_edit-movies', 'so_13813805_add_button_to_views' );
function so_13813805_add_button_to_views( $views )
{
$views['my-button'] = '<button id="update-from-provider" type="button" title="Update from Provider" style="margin:5px">Update from Provider</button>';
return $views;
}
It produces this:
To put it in an approximate position from where you'd like, use the following:
add_action( 'admin_head-edit.php', 'so_13813805_move_custom_button' );
function so_13813805_move_custom_button( )
{
global $current_screen;
// Not our post type, exit earlier
if( 'movies' != $current_screen->post_type )
return;
?>
<script type="text/javascript">
jQuery(document).ready( function($)
{
$('#update-from-provider').prependTo('span.displaying-num');
});
</script>
<?php
}
Which results in this: