Develop Reference

Javascript executing but not keeping value on Woocommerce checkout page

I'm using this in functions.php to execute on Woocommerce checkout page.
I see display: none is being applied but only for couple of miliseconds.
Any idea how to keep the styling on elements?
// add script to checkout page
add_action( 'wp_footer', 'add_javascript_function', 9999 );
function add_javascript_function() {
global $wp;
if ( is_checkout() && empty( $wp->query_vars['order-pay'] ) && ! isset( $wp->query_vars['order-received'] ) ) {
echo '<script>
window.addEventListener("DOMContentLoaded", () => {
let myDivs = document.getElementsByClassName("products");
for(let i = 2; i < myDivs.length; i++) {
myDivs[i].style.display="none"; }
});
</script>';
}
}
Also would like to add a button to toggle the items being hidden by this function. But this issue is driving me crazy.
Thanks in advance.

Using JS to set the initial visibility of your HTML elements won't work because after your function has run update_checkout is triggered which refreshes the order review part of the checkout. That is why you see your styles only being applied briefly.
You should use CSS to set the visibility of your products, then use JS to overrule those styles when clicking on a button, toggling between hidden and visible.
The woocommerce_review_order_after_cart_contents hook gives you a nice place to add a button for this. You can also add your CSS and JS there so everything is wrapped up in one neat little function. Like this:
add_action ('woocommerce_review_order_after_cart_contents', function() {
?>
<style>
.woocommerce-checkout-review-order-table .cart_item:nth-child(n+3) {
display: none;
}
</style>
<script>
jQuery( function( $ ) {
$( '#product-toggle' ).on( 'click', 'span.button', function() {
if ( $( this ).data( 'show' ) === true ) {
$( '.woocommerce-checkout-review-order-table .cart_item').show();
$( this ).text( 'Show less products' ).data( 'show', false );
} else {
$( '.woocommerce-checkout-review-order-table .cart_item').slice(2).hide();
$( this ).text( 'Show all products' ).data( 'show', true );
}
} );
} );
</script>
<?php
echo '<tr id="product-toggle"><td colspan="2"><span class="button" data-show="true">Show all products</span></td></tr>';
}, 10 );

Call a function from enqued js file on wordpress

I have enqueued the JS file to my WordPress plugin using :PHP
public function enqueue_scripts() {
wp_enqueue_script('my_awesome_plugin', plugins_url( '../assets/main.js', __FILE__), NULL, NULL, true );
}
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
I have a function called addedToCart() on that file : JS
addedToCart(){
console.log("Added to Cart");
}
I need to call that function once a user added to his cart. I can use this hook : PHP
add_action( 'woocommerce_add_to_cart', array( $this, 'add_to_cart' ), 10, 6 );
public function add_to_cart($cart_item_key, $product_id, $quantity, $variation_id, $variation, $cart_item_data)
{
?>
<script>
//What code should I add <-- Line
<script>
<?PHP
}
What code should I write to call that function on the JS File?
Thanks for your time.

You can listen to Woocommerce Js events to achieve this:
jQuery(document).ready(function($){
$('body').on( 'added_to_cart', function(){
//alert("Added to cart");
addedToCart(); //your function
});
});
Here's the list of events available around add-to-cart scenarios:
$( document.body ).trigger( 'adding_to_cart', [ $thisbutton, data ] );
$( document.body ).trigger( 'added_to_cart', [ response.fragments, response.cart_hash, $thisbutton ] );
$( document.body ).trigger( 'removed_from_cart', [ response.fragments, response.cart_hash, $thisbutton ] );
$( document.body ).trigger( 'wc_cart_button_updated', [ $button ] );
$( document.body ).trigger( 'cart_page_refreshed' );
$( document.body ).trigger( 'cart_totals_refreshed' );
$( document.body ).trigger( 'wc_fragments_loaded' );

WooCommerce event not triggering when using Select2 instead of actual select

I've built a custom website using Wordpress and WooCommerce and have installed Select2 to generate custom selects which is working fine. The issue I am having is with some of the selects on the WooCommerce pages, specifically those that trigger an event on change.
The custom selects successfully change the option selected, but the issue arises with selects that are meant to trigger an event. For example, the colour variation dropdown on the product page or the 'Sort By' select on the store page.
I've looked through the WooCommerce JS files and discovered some WooCommerce specific events that are triggered when a selection is made using the actual select box but I'm not sure how to implement this when using Select2 instead.
Here is a copy of the WooCommerce JS in relation to the event I'm talking about (in this case the change to the select for product variations):
.on( 'change', '.variations select', function() {
$form.find( 'input[name="variation_id"], input.variation_id' ).val( '' ).change();
$form.find( '.wc-no-matching-variations' ).remove();
if ( $use_ajax ) {
if ( $xhr ) {
$xhr.abort();
}
var all_attributes_chosen = true;
var some_attributes_chosen = false;
var data = {};
$form.find( '.variations select' ).each( function() {
var attribute_name = $( this ).data( 'attribute_name' ) || $( this ).attr( 'name' );
if ( $( this ).val().length === 0 ) {
all_attributes_chosen = false;
} else {
some_attributes_chosen = true;
}
data[ attribute_name ] = $( this ).val();
});
if ( all_attributes_chosen ) {
// Get a matchihng variation via ajax
data.product_id = $product_id;
$xhr = $.ajax( {
url: wc_cart_fragments_params.wc_ajax_url.toString().replace( '%%endpoint%%', 'get_variation' ),
type: 'POST',
data: data,
success: function( variation ) {
if ( variation ) {
$form.find( 'input[name="variation_id"], input.variation_id' )
.val( variation.variation_id )
.change();
$form.trigger( 'found_variation', [ variation ] );
} else {
$form.trigger( 'reset_data' );
$form.find( '.single_variation_wrap' ).after( '<p class="wc-no-matching-variations woocommerce-info">' + wc_add_to_cart_variation_params.i18n_no_matching_variations_text + '</p>' );
$form.find( '.wc-no-matching-variations' ).slideDown( 200 );
}
}
} );
} else {
$form.trigger( 'reset_data' );
}
if ( some_attributes_chosen ) {
if ( $reset_variations.css( 'visibility' ) === 'hidden' ) {
$reset_variations.css( 'visibility', 'visible' ).hide().fadeIn();
}
} else {
$reset_variations.css( 'visibility', 'hidden' );
}
} else {
$form.trigger( 'woocommerce_variation_select_change' );
$form.trigger( 'check_variations', [ '', false ] );
$( this ).blur();
}
// Custom event for when variation selection has been changed
$form.trigger( 'woocommerce_variation_has_changed' );
} )
And then my own attempt to utilise this event:
$('#pa_colour').select2();
$('#pa_colour').on('change', function(){
var $form = $(this).parents('form');
$form.trigger( 'woocommerce_variation_select_change' );
$form.trigger( 'woocommerce_variation_has_changed' );
});
Unfortunately the site isn't live yet so I can't provide a link but hopefully you get the idea.
If someone can help me here I'd be so appreciative, I'm not exactly sure how Wordpress hooks (if this is what this is) work and I may be just missing something obvious.
Thanks,
Kathryn

This isn't a solution exactly, but I ended up replacing the Select2 plugin with the Selectric plugin and that works perfectly. Oh well! Thanks guys. http://lcdsantos.github.io/jQuery-Selectric/

I came across the same issue and found a solution in the last comment in this thread Select2 not showing selected value
The comment by Matt inspired by Kevin suggested wrapping the select2 call in $(window).bind("load", function() {...}); which worked for me.
Kudos to those guys.

Woocommerce "Add to cart" ajax

On the product category page, when someone clicks "Add to cart", woocommerce adds "View cart" below this button through Ajax. I found that the script which handle this is /assets/js/frontend/add-to-cart.js
Now, I want to add also "Procceed to checkout", so someone can go to checkout immediately.
This is the output of the script:
jQuery( function( $ ) {
// wc_add_to_cart_params is required to continue, ensure the object exists
if ( typeof wc_add_to_cart_params === 'undefined' )
return false;
// Ajax add to cart
$( document ).on( 'click', '.add_to_cart_button', function(e) {
// AJAX add to cart request
var $thisbutton = $( this );
if ( $thisbutton.is( '.product_type_simple' ) ) {
if ( ! $thisbutton.attr( 'data-product_id' ) )
return true;
$thisbutton.removeClass( 'added' );
$thisbutton.addClass( 'loading' );
var data = {
action: 'woocommerce_add_to_cart',
};
$.each( $thisbutton.data(), function( key, value ) {
data[key] = value;
});
// Trigger event
$( 'body' ).trigger( 'adding_to_cart', [ $thisbutton, data ] );
// Ajax action
$.post( wc_add_to_cart_params.ajax_url, data, function( response ) {
if ( ! response )
return;
var this_page = window.location.toString();
this_page = this_page.replace( 'add-to-cart', 'added-to-cart' );
if ( response.error && response.product_url ) {
window.location = response.product_url;
return;
}
// Redirect to cart option
if ( wc_add_to_cart_params.cart_redirect_after_add === 'yes' ) {
window.location = wc_add_to_cart_params.cart_url;
return;
} else {
$thisbutton.removeClass( 'loading' );
fragments = response.fragments;
cart_hash = response.cart_hash;
// Block fragments class
if ( fragments ) {
$.each( fragments, function( key, value ) {
$( key ).addClass( 'updating' );
});
}
// Block widgets and fragments
$( '.shop_table.cart, .updating, .cart_totals' ).fadeTo( '400', '0.6' ).block({
message: null,
overlayCSS: {
opacity: 0.6
}
});
// Changes button classes
$thisbutton.addClass( 'added' );
// View cart text
if ( ! wc_add_to_cart_params.is_cart && $thisbutton.parent().find( '.added_to_cart' ).size() === 0 ) {
$thisbutton.after( ' <a href="' + wc_add_to_cart_params.cart_url + '" class="added_to_cart wc-forward" title="' +
wc_add_to_cart_params.i18n_view_cart + '">' + wc_add_to_cart_params.i18n_view_cart + '</a>' );
}
// Replace fragments
if ( fragments ) {
$.each( fragments, function( key, value ) {
$( key ).replaceWith( value );
});
}
// Unblock
$( '.widget_shopping_cart, .updating' ).stop( true ).css( 'opacity', '1' ).unblock();
// Cart page elements
$( '.shop_table.cart' ).load( this_page + ' .shop_table.cart:eq(0) > *', function() {
$( '.shop_table.cart' ).stop( true ).css( 'opacity', '1' ).unblock();
$( 'body' ).trigger( 'cart_page_refreshed' );
});
$( '.cart_totals' ).load( this_page + ' .cart_totals:eq(0) > *', function() {
$( '.cart_totals' ).stop( true ).css( 'opacity', '1' ).unblock();
});
// Trigger event so themes can refresh other areas
$( 'body' ).trigger( 'added_to_cart', [ fragments, cart_hash, $thisbutton ] );
}
});
return false;
}
return true;
});
Is there anybody who has done something similar?

If you look here from the Woocommerce repo, you can see that add-to-cart.js is localized from that class.
Unfortunately, there isn't a filter to just add your own link. What you could try is copying add-to-cart.js to your theme and set the new src of the registered add-to-cart.js to your new local copy, by using this method.
From there you can alter the this conditional found in Woocommerce repo.
So, technically yes, you could could this, but there are caveats:
You would need to repeat this process for variation products
If translation is a concern, you need to address that as well
Any time the plugin updates, you now have to comb through these files for any differences that could break functionality or cause a security issue.

Why does returning false stop propagation with jQuery while it doesn't with POJS?

Here is a jsfiddle using POJS showing that return false; doesn't stop the event's propagation: http://jsfiddle.net/Ralt/Lz2Pw/
Here is another using jQuery showing that return false; does stop the event's propagation: http://jsfiddle.net/Ralt/D5Mtg/
Edit: The one explaining to me why jQuery does this - differing from the original behavior intentionally - (and where in the code) gets the answer.
Here is the code (long, but very easy to read):
HTML for both versions:
<div id="parent1">
<div id="child1">child1</div>
</div>
<div id="parent2">
<div id="child2">child2</div>
</div>
<div id="parent3">
<div id="child3">child3</div>
</div>
POJS:
document.getElementById( 'child1' ).onclick = function( e ) {
console.log( 'child1' );
e.preventDefault();
};
document.getElementById( 'parent1' ).onclick = function( e ) {
console.log( 'parent1' );
};
document.getElementById( 'child2' ).onclick = function( e ) {
console.log( 'child2' );
return false;
};
document.getElementById( 'parent2' ).onclick = function( e ) {
console.log( 'parent2' );
};
document.getElementById( 'child3' ).onclick = function( e ) {
console.log( 'child3' );
e.stopPropagation();
};
document.getElementById( 'parent3' ).onclick = function( e ) {
console.log( 'parent3' );
};
jQuery version:
$( '#child1' ).click( function( e ) {
console.log( 'child1' );
e.preventDefault();
});
$( '#parent1' ).click( function( e ) {
console.log( 'parent1' );
});
$( '#child2' ).click( function( e ) {
console.log( 'child2' );
return false;
});
$( '#parent2' ).click( function( e ) {
console.log( 'parent2' );
});
$( '#child3' ).click( function( e ) {
console.log( 'child3' );
e.stopPropagation();
});
$( '#parent3' ).click( function( e ) {
console.log( 'parent3' );
});

On line 3331 of version 1.7.1, in jQuery.event.dispatch:
ret = ( (jQuery.event.special[ handleObj.origType ] || {}).handle || handleObj.handler )
.apply( matched.elem, args );
if ( ret !== undefined ) {
event.result = ret;
if ( ret === false ) {
event.preventDefault();
event.stopPropagation();
}
}
A lot of packaging has happened before this line, but basically, it runs the handler function (either a raw function, or the handler memeber function of a handlerObject) using apply. If the result of that call is false, it does preventDefault and stopPropagation.
This is mentioned in the documentation for on():
Returning false from an event handler will automatically call event.stopPropagation() and event.preventDefault().
As for why they did it? I don't know, as I'm not not the jQuery design team, but I assume it's just because return false is a lot quicker to type than event.preventDefault(); event.stopPropagation();. (And if jQuery isn't about making sure you have less to type, I'm not sure what it's about.)
I don't believe the return value of an event handler is ever actually used anywhere in POJS (someone correct if that's wrong!). Thus, jQuery can safely have a return statement cause side effects in a handler (since returning false in a POJS handler is meaningless, no POJS functionality is harmed).