Javascript Alert Firing Three Times on Checkout

rainleaderrainleader Member
in Help edited December 2012
I added this code on my checkout template:
if (shippingCost > 0) {
alert("Add six (6) coffee products to your cart to qualify for free shipping!");
}

It's supposed to trigger an alert if the user's current cart configuration calls for a shipping price. For some reason, it triggers the alert three times (e.g. you have to cancel it three times). Any idea why?

Here is the rest of the code (for context):
function calculateShipping() {
  var shippingCost = 0;
 
/* BEGIN CUSTOM SHIPPING LOGIC */
shippingCost = 12;
 
var coffeeProducts = 0;
for (var p in fc_json.products) {
	if (fc_json.products[p].category == "coffee") {
		coffeeProducts += fc_json.products[p].quantity;
 
	}
}
 
if (coffeeProducts > 0) {
	if (coffeeProducts == 1) {
		shippingCost = 5 ; // $5 for one coffee product
	} else if (coffeeProducts < 6) {
		shippingCost = 11; // $11 for less than 6 coffee products
	} else { // free for more than 6 coffee products
		shippingCost = 0; // Free shipping because they bought so much
	}
}

if (fc_json.hasOwnProperty('coupons')) {
        shippingCost = 11;
}

if (shippingCost > 0) {
alert("Add six (6) coffee products to your cart to qualify for free shipping!");
}
Comments
  • fc_adamfc_adam FoxyCart Team
    @rainleader,

    I added an alert to the script you have on your checkout, and it only appeared once - but it appeared each time I updated a location field (city, state, postcode, country).

    Are you saying you get it three times in a row after entering a single field?
  • Hi @fc_adam,

    I'm getting it three times in a row without entering any fields. Once I click Checkout (from the Cart), it triggers the alert. It takes three clicks of OK to cancel it.
  • fc_adamfc_adam FoxyCart Team
    @rainleader,

    I'm only able to get it to trigger a single time on page load, but when I login I do get it alerting me three times. This is because technically the updateTaxes function (which is what this custom shipping is triggered off of) is running for three of the customer fields that are being filled and calling updateTaxes.

    For most people, this isn't an issue as it'll just update the shipping three times, but as you're showing an alert - it's glaringly obvious how many times the function is running.

    So two options. If you want to stick with the alert, we could look at altering the way that the custom shipping is being called when the location changes. The other option would be that instead of displaying an alert, you add a box to your checkout page to say that if the customer added a few more products they'd get free shipping. Then in your custom shipping, you'd check if the alert is present on the page already - and if it isn't then display it, otherwise don't do anything.

    Thoughts?
  • Hi @fc_adam,

    Thanks for your detailed reply -- makes sense. I think the direction to go is with the box/notification displayed on the checkout page. Is this as simple as using a conditional and a little jQuery? Do you have any samples for what the implementation code might look like?
  • fc_adamfc_adam FoxyCart Team
    @rainleader,

    This will add a h5 before the "cancel and continue shopping" link on your checkout:
    if (jQuery("#add_more_note").length == 0 && shippingCost > 0) {
    	jQuery("#fc_cancel_continue_shopping").prepend("<h5 id='add_more_note'>Add six (6) coffee products to your cart to qualify for free shipping!</h5>");
    }
    
  • rainleaderrainleader Member
    edited December 2012
    Thanks! I tried using Noty (a jQuery notification plugin), just to see if it would work. This is the code:

    I'm trying to install [Noty][1] (a jQuery Notification plugin) on a checkout page (FoxyCart template). I installed the following code in the <head> section of my checkout template:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>;
        
        <script type="text/javascript" src="http://lavajavamaui.com/js/noty/jquery.noty.js"></script>;
        
        <script type="text/javascript" src="http://lavajavamaui.com/js/noty/layouts/top.js"></script>;
        <script type="text/javascript" src="http://lavajavamaui.com/js/noty/layouts/topLeft.js"></script>;
        <script type="text/javascript" src="http://lavajavamaui.com/js/noty/layouts/topRight.js"></script>;
        <!-- You can add more layouts if you want -->
        
        <script type="text/javascript" src="http://lavajavamaui.com/js/noty/themes/default.js">;
        </script>
        <script type="text/javascript">
        var noty = noty({text: 'noty - a jquery notification library!'});
        </script>
    

    If I understand correctly, this is all that needs to be done to get it to display properly. For some reason, the notification is not popping up. Is there something wrong with this line?
    <script type="text/javascript">
        var noty = noty({text: 'noty - a jquery notification library!'});
        </script>
    

    Here is a page that should fire Noty: https://lavajavamaui.foxycart.com/checkout.php?fcsid=pmsf8a8nqsil5bidba5pjdll02

    Any idea why that doesn't work? Are there conflicts with how I'm calling it?
  • fc_adamfc_adam FoxyCart Team
    @rainleader,

    So you don't need to include jQuery - the checkout includes that automatically. That could be breaking some stuff, although I see you've removed that in your current template.

    The other thing is that you haven't actually cached those scripts into your template, so they're being loaded over http. Some browsers, like Chrome, won't load http assets when on a https connection, so when I view your page in Chrome none of those javascript scripts are being loaded.

    You'll want to add them to your template and cache them for them to be included securely.
  • Gotcha, thanks! Didn't know that.

    And, with your original code (below), I want to dynamically update the string to say "add x more items to qualify for free shipping". How do I re-enter the JS portion of the code to input the value of 6 - coffeeProducts?
  • fc_adamfc_adam FoxyCart Team
    if (jQuery("#add_more_note").length == 0 && shippingCost > 0) {
    	jQuery("#fc_cancel_continue_shopping").prepend("<h5 id='add_more_note'>Add " + (6 - coffeeProducts) + "more coffee products to your cart to qualify for free shipping!</h5>");
    }
    

    That should do it for you.
  • Thanks fc_adam! That worked. I appreciate all your help.

    For some reason, fc_cancel_continue_shopping (that link) doesn't appear. Something with the prepend statement?
  • fc_adamfc_adam FoxyCart Team
    @rainleader - what do you mean it doesn't appear? It will already be on your checkout template - unless you've hidden it with CSS?
  • rainleaderrainleader Member
    edited December 2012
    Ahh... nevermind! Absolute positioning via CSS. The notification was stuck directly over it (covering it up). Solved, thanks!
Sign In or Register to comment.