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' );
Related
I've searched and not found an answer to why my .js file keeps giving me an error wp not defined in the wp.customize function.
I've enqueued the script like this
function ws_customizer_live_preview(){ wp_enqueue_script( 'ws-themecustomizer', get_template_directory_uri() .'/library/js/theme-customizer.js', array( 'jquery','customize-preview' ), true ); } add_action( 'customize_preview_init', 'ws_customizer_live_preview' );
This was basically copied from WP Docs. The javascript is
(function( $ ) {
"use strict";
wp.customize( 'ws_display_header', function( value ) {
value.bind( function( to ) {
false === to ? $( '.header' ).hide() : $( '.header' ).show();
} );
});
wp.customize( 'ws_footer_copyright_text', function( value ) {
value.bind( function( to ) {
$( 'span#copyright-message' ).text( to );
});
}); })(jQuery);
I need to know why the wp.customize in the js is giving me wp not defined error.
Thank you
Consider the following codes:
Load JS
$( "<script src=\"test.js\"><\/script>" ).on( "load",
function() {
console.log( "JS LOADED" );
}
).appendTo( $( "head" ) );
Load CSS
$( "<link rel=\"stylesheet\" href=\"test.css\" />" ).on( "load",
function() {
console.log( "CSS LOADED" );
}
).appendTo( $( "head" ) );
Can someone please explain me why the load event will not trigger for the js file. And what should be done to make it work ?
So, I have this function in jQuery:
$(function(){
$( ".unfocused" ).click(function ClickHeader () {
$( this ).addClass( "focused" );
$( this ).removeClass( "unfocused" );
$(".header").not(this).addClass( "unfocused" );
$(".header").not(this).removeClass( "focused" );
});
});
It works perfectly when a header is clicked the first time, but when I try to click another unfocused header, the function doesn't work anymore. Is it because it runs on document .ready?
Thanks for your help!
Change it like this:
$( document ).on("click", ".unfocused", function() {
$( this ).addClass( "focused" );
$( this ).removeClass( "unfocused" );
$(".header").not(this).addClass( "unfocused" );
$(".header").not(this).removeClass( "focused" );
});
This basically registers the event on the document. When you click a header, the event bubbles up to the document. There, the given selector is validated and the function is executed if needed.
Here is a jsfiddle using the delegate operation for handling the event like you need.
http://jsfiddle.net/MN9Zt/2/
$("body").delegate(".unfocused", "click", function() {
$(this).addClass("focused");
$(this).removeClass("unfocused");
$(".header").not(this).addClass("unfocused");
$(".header").not(this).removeClass("focused");
});
Is it possible to enable ckeditor by class type?
For example, I tried the following code but getting error:
$(document).ready(function() {
var txtArea= $(".ckeditor");
CKEDITOR.replace(txtArea,{ });
});
CKEDITOR.replace accepts ids and native element instances. But you're trying to pass jQuery object to it - it cannot work.
You should try this way:
$( document ).ready( function() {
$( '.ckeditor' ).each( function() {
CKEDITOR.replace( this );
} );
} );
Or, if you know that there's just one textarea to be replaced:
$( document ).ready( function() {
CKEDITOR.replace( $( '.ckeditor' )[ 0 ] );
} );
See this example on JSFiddle.
I know a lot of people ask questions about plug-ins and callbacks (and I've read lots of them - that's how i got this far) so please, bear with me. I tried my hand at a very simple hide/show accordion type plugin for FAQs and was successful at getting it to do what I wanted. However, as I am still learning, I am not really sure how some things work.
I was able to add a callback to the plugin after reading this question and a few others.
My question is: Is this code correct and is there a better way to implement this callback?
Here's a working sample and the code below.
Thank you for your time.
( function($) {
$.fn.simpleFAQ = function( options, callback ) {
// define default options
var defaults = {
textExpand : "Expand all",
textCollapse : "Collapse all",
displayAll : false,
toggleSpeed : 250
};
var options = $.extend( defaults, options );
// callback
if( typeof callback != "function" ) { callback = function(){} }
this.each( function () {
obj = $(this);
// insert FAQ expand all/collapes all text before FAQ
var txt = '<span class="simple_jfaqText">' + options.textExpand + ' / ' + options.textCollapse + '</span>';
$( txt ).insertBefore( obj );
// add class to desired FAQ element
obj.addClass( 'simple_jfaq' );
// show/hide faq answers according to displayAll option
( options.displayAll == false ) ? ddDisplay = 'none' : ddDisplay = 'block';
obj.children( 'dd' ).css( 'display', ddDisplay );
// add classes according to <dd> state (hidden/visible)
obj.children( 'dd:visible' ).prev( 'dt' ).addClass( 'expanded' );
obj.children( 'dd:hidden' ).prev( 'dt' ).addClass( 'collapsed' );
obj.children( 'dt' )
.click( function() {
// show/hide all answers (dd elements) on click
$(this).nextUntil( 'dt' ).slideToggle( options.toggleSpeed, callback );
// dt class change on click
$(this).toggleClass( 'collapsed' ).toggleClass( 'expanded' ); })
.hover( function() { $(this).toggleClass( 'hover' ); }, function(){ $(this).toggleClass( 'hover' ); });
});
// Expand All
obj.prev( 'span' ).children( 'a[rel=jfaq_expand]' ).click( function() {
// show all answers
$(this).parent( 'span' ).next( '.simple_jfaq' ).children( 'dd:hidden' ).slideToggle( options.toggleSpeed );
setTimeout( callback, options.toggleSpeed )
// change classes
$(this).parent( 'span' ).next( '.simple_jfaq' ).children( 'dt' ).removeClass( 'collapsed' ).addClass( 'expanded' );
});
// Collapse all
obj.prev( 'span' ).children( 'a[rel=jfaq_collapse]' ).click( function() {
// hide all answers
$(this).parent( 'span' ).next( '.simple_jfaq' ).children( 'dd:visible' ).slideToggle( options.toggleSpeed );
setTimeout( callback, options.toggleSpeed );
// change classes
$(this).parent( 'span' ).next( '.simple_jfaq' ).children( 'dt' ).removeClass( 'expanded' ).addClass( 'collapsed' );
});
};
})( jQuery );
I would recommend using jQuery's built in event system for this. You can trigger an event on any node, then the user of the FAQ code could bind to that event on that node. You can even pass data to the binding function.
Of course, my real recommendation is to use my plug-in of the same name. :)
It might be nice if the callback would execute in the context of some relevant element.
var clicked = this;
setTimeout(function() { callback.call(clicked); }, options.toggleSpeed );