0

I have made a shortcode to display the amount of price needed for free shipping, when the customer reach the amount of 400 or more, the messege replaced by another messege.

I wan't this shortcode to be updated dynamically, without page refresh, same as the cart icon, that when user adds a product to cart the number of products in cart is changing automatically. My guess is that I need an ajax function, the question is how?

Please, can someone help me with that, my knowlage is basic but any help would be appreciated.

the shortcode:

add_shortcode( 'woocommerce_free_shipping_notice', 'free_shipping_cart_notice' );
function free_shipping_cart_notice() {
 $min_amount = 400;
 $current = WC()->cart->subtotal;
 if ( $current < $min_amount ) {
   echo '<p class="free-shipping-msg">you need  ' . wc_price( $min_amount - $current ) . ' more to get free shipping</p>';
}
 else if ($current > $min_amount ) {
   echo '<p class="free-shipping-msg">you are now have a free shipping for current order.</p>';
}
}
Meidanm
  • 31
  • 5
  • You just need a simple loading function of this part of your website triggered by any cart update. It's really simple - just search for it! – Mr. Jo May 12 '21 at 11:18
  • Does this answer your question? [Refresh Part of Page (div)](https://stackoverflow.com/questions/17886578/refresh-part-of-page-div) – Mr. Jo May 12 '21 at 11:25
  • Use this to detect cart update: `$( document.body ).on( 'updated_cart_totals', function(){ //reload part of page e.g. your notice });` – Mr. Jo May 12 '21 at 11:27
  • @Mr.Jo Thank you for trying to help! I have been following your answers but still no success.. I didn't understant how can I put my PHP function inside the js function or how to reload only the shortcode text. can you save me? – Meidanm May 12 '21 at 14:27
  • Why do you want to put PHP into CSS? This is not possible at all. I've never mentioned this. Focus on the basic HTML and JavaScript for learning. In this case we're reloading an HTML element with JS. PHP renders everything in the background. No need to put PHP into CSS. Just follow my second comment and continue with the listener method in jQuery for making the reload. In case you need help, please post your final HTML code for me containing your element you want to reload (not the full page)... – Mr. Jo May 12 '21 at 14:32
  • Where do you want to put this shortcode? On which page? – Vincenzo Di Gaetano May 12 '21 at 20:48
  • @VincenzoDiGaetano Within my Header – Meidanm May 12 '21 at 21:30
  • @Mr.Jo After some search, I was able to get to this: jQuery( document ).on( 'wc_fragments_loaded', function(){ var msg = document.getElementById("freeshippingmsg"); msg.location.reload(true); }); when product is added I am getting a cosole errors Uncaught TypeError: $ is not a function at HTMLDocument. (custom.js?ver=5.7.2:24) at HTMLDocument.dispatch (jquery.min.js?ver=3.5.1:2) at HTMLDocument.v.handle (jquery.min.js?ver=3.5.1:2) at Object.trigger (jquery.min.js?ver=3.5.1:2) at HTMLBodyElement. (jquery.min.js?ver=3.5.1:2) – Meidanm May 14 '21 at 18:24

0 Answers0