Hi,
below is the Javascript code we used, I'll give some explanation further down. You can add the code for example all the way at the end of your show_default view:
<script>
jQuery(function(){
jQuery('.hikashop_cart_input_button').click(function(){
setTimeout(function(){
var qtyForFreeShipping = jQuery('td.hikashop_cart_module_product_total_value span.hikashop_product_price').text().replace(/,/g,".");
var diffQty = 900 - parseFloat(qtyForFreeShipping.substr(qtyForFreeShipping.indexOf(" ")));
if(diffQty < 0){
jQuery('#system-message > div').hide();
}
else{
jQuery('#qtyForFreeShipping').text(diffQty);
}
},800);
});
});
</script>
It looks more complicated than it is.
First we register the click event when someone clicks on the "Add to cart button":
jQuery('.hikashop_cart_input_button').click(function(){
Because the Ajax call always takes a little while to complete, we had to add a timeout to wait for about 800ms to be sure we always get the correct updated total price:
setTimeout(function(){ ... },800);
Then we need to grab the total price from the page. Since we have a Hikashop Cart Module on all our pages we can easily get the current total price from there and calculate the diffQty:
var qtyForFreeShipping = jQuery('td.hikashop_cart_module_product_total_value span.hikashop_product_price').text().replace(/,/g,".");
var diffQty = 900 - parseFloat(qtyForFreeShipping.substr(qtyForFreeShipping.indexOf(" ")));
If your prices have decimal values, the comma needs to be replaced by a dot and we need to get rid of the currency symbol in front with a substr before we can use parseFloat to change the string to a number.
Then we have a simple if-else to hide the system message if the total cart value is above 900, or otherwise modify the value in the message. To grab the price in your message with jQuery, the easiest way is to put a span with a unique class or id around the price value in your MISSING_QTY_FOR_FREE_SHIPPING constant, so change it to something like:
MISSING_QTY_FOR_FREE_SHIPPING = If you buy for NOK <span id="qtyForFreeShipping">%s</span> or more you get free shipping!
Then we can simply update the value with jQuery by grabbing the id "qtyForFreeShipping":
jQuery('#qtyForFreeShipping').text(diffQty);
And that's it, for us this works fine.