Shipping price change onLoad for Custom Flat Rate Shipping Option

GeoffreyGeoffrey Member
in Bugs & Feature Requests edited March 2012
Hi again. I'm implementing some logic for Multiple Custom Flat Rate Shipping Options in our checkout. I have it set up functionally to add the correct shipping option for each of four different variables we're using:

* US/Canada customer has Cart Total greater or equal to $25 = FREE SHIPPING
* US/Canada customer has Cart Total less than $25 = $4.00 Flat Rate Shipping
* International customer has Cart Total greater or equal to $45 = FREE SHIPPING
* International customer has Cart Total less than $45 = $7.50 Flat Rate Shipping

We are only offering ONE option for each of these variables, and I've added a checked="checked" attribute to the newShippingOption variable so that this is automatically selected as the available shipping option. Now when the checkout loads, the correct custom shipping option is showing up correctly as selected, but the "Shipping & Handling" field in the order summary is not changing from the default price of $0.00. That price only changes when I actually click on the already selected shipping option input. I need the price to change automatically without the click event because I intend to hide the Shipping Options section from view, as there is only one option for each circumstance and it shouldn't be necessary for the customer to select it.

I notice that when I do click on the displayed shipping option, it changes the value in the following input :
<input type="hidden" value="0" id="shipping_service_id" name="shipping_service_id">

... replacing "0" with whatever the ID code of the selected shipping option is. I tried just making all my shipping options have the ID code of "1" and manually programming value="1" into this hidden field, but it is still failing to change the shipping price without the mentioned click event. How can I make the price change automatic? I'm using the code snippet from this Multiple Custom Flat Rate Shipping Options wiki with no alteration except adding the checked="checked" attribute to the radio input for the displayed shipping option. Here's the custom shipping logic I'm using for reference:
  function customShippingLogic() {
    /* BEGIN CUSTOM SHIPPING LOGIC */
		if (typeof(country_code) === "undefined") {country_code = "";}
		new_country_code = (jQuery("#use_different_addresses").is(":checked") ? $("#shipping_country").val() : $("#customer_country").val());
		if (country_code != new_country_code) { // The shipping country has changed!
			country_code = new_country_code;
			removeCustomShippingContainer(); // This call will make sure that when it updates, it starts fresh.
			if (country_code == "US" && fc_json.total_price >= 25 || country_code == "CA" && fc_json.total_price >= 25) {
				addShippingOption(3, 0, 'USPS', 'Free Shipping');
			 } else if (country_code == "US" && fc_json.total_price < 25 || country_code == "CA" && fc_json.total_price < 25) {
				addShippingOption(1, 4, 'USPS', 'Standard');
			 } else if (country_code != "US" && fc_json.total_price >= 45 || country_code != "CA" && fc_json.total_price >= 45 ) {
				addShippingOption(3, 0, 'USPS', 'Free International Shipping');
			 } else {
				addShippingOption(2, 7.50, 'USPS', 'International');
			 }
		}
    /* END CUSTOM SHIPPING LOGIC */
  }



Additional pertinent settings:
  FC.checkout.config.customShipping = {
    onLoad: true,  // Set to false if you don't want shipping calculated when the checkout loads
    onLocationChange: true, // Set to true if your shipping logic relies on updating whenever the shipping location for the order changes
    onPreSubmit: true // Set to false if you don't want to load shipping if it hasn't already loaded before the user tries to checkout
  };



And here's our site url again for reference:

http://216.70.97.105/

Any help on this would be deeply appreciated. Thanks!

Geoffrey
Comments
  • sparkwebsparkweb Member, Integration Developer, FoxyShop, Order Desk
    I think what you missing is:
    FC.checkout.updatePrice(-1);
    
  • GeoffreyGeoffrey Member
    edited March 2012
    Hi David. I actually tried adding that to each of the logic variables like so:
    if (country_code == "US" && fc_json.total_price >= 25 || country_code == "CA" && fc_json.total_price >= 25) {
    				addShippingOption(3, 0, 'USPS', 'Free Shipping');
                                    FC.checkout.updatePrice(-1);
    			 } else if { .... 
    etc.
    

    But this didn't solve the issue. I was still required to click the radio input. Is there I different place in the logic where I should try putting that?
  • fc_adamfc_adam FoxyCart Team
    Give this a try:
    function customShippingLogic() {
        /* BEGIN CUSTOM SHIPPING LOGIC */
    		if (typeof(country_code) === "undefined") {country_code = "";}
    		new_country_code = (jQuery("#use_different_addresses").is(":checked") ? $("#shipping_country").val() : $("#customer_country").val());
    		if (country_code != new_country_code) { // The shipping country has changed!
    			country_code = new_country_code;
    			removeCustomShippingContainer(); // This call will make sure that when it updates, it starts fresh.
    			if (country_code == "US" && fc_json.total_price >= 25 || country_code == "CA" && fc_json.total_price >= 25) {
    				addShippingOption(3, 0, 'USPS', 'Free Shipping');
    			 } else if (country_code == "US" && fc_json.total_price < 25 || country_code == "CA" && fc_json.total_price < 25) {
    				addShippingOption(1, 4, 'USPS', 'Standard');
    			 } else if (country_code != "US" && fc_json.total_price >= 45 || country_code != "CA" && fc_json.total_price >= 45 ) {
    				addShippingOption(3, 0, 'USPS', 'Free International Shipping');
    			 } else {
    				addShippingOption(2, 7.50, 'USPS', 'International');
    			 }
    			 // Automatically select the first listed shipping option
    			 jQuery("#fc_shipping_methods_inner input[type='radio']:first").click();
    		}
        /* END CUSTOM SHIPPING LOGIC */
      }
    
  • Super! That worked, Adam. I knew I could bind jQuery events to a click, but I had yet to discover that it can be used to execute a click. Thanks for the new trick, and your excellent support!

    Cheers,
    Geoffrey
  • PecanPecan Member
    Sorry to jump in on your thread Geoffrey but I am in need of a similar bit of code to help me set postage costs for domestic and international customers.

    I guess if you're reading this Adam you might be able to help, basically I am looking for a multiple flat rates code to add shipping costs based on the following criteria.

    UK customers with a cart value of under 9.99 = £3.00 flat rate shipping
    UK customers with a cart value of 9.99 and over = free shipping

    All European international customers = £3.00 flat rate shipping
    All other international customers (i.e. not UK and EU) = £5.00 flat rate shipping

    I hope this is possible, I have little understanding of Javascript (apart from substituting values etc.), have a good handle on HTML and CSS so your help would be most appreciated on this one. Thanks in advance.
  • fc_adamfc_adam FoxyCart Team
    edited March 2012
    @Pecan,

    Something like this should cover your needs, adding it in for the custom code part when running through the multiple flat rates setup on the wiki:
    function customShippingLogic() {
        /* BEGIN CUSTOM SHIPPING LOGIC */
    		if (typeof(country_code) === "undefined") {country_code = "";}
    		new_country_code = (jQuery("#use_different_addresses").is(":checked") ? $("#shipping_country").val() : $("#customer_country").val());
    		if (country_code != new_country_code) { // The shipping country has changed!
    			country_code = new_country_code;
    			removeCustomShippingContainer(); // This call will make sure that when it updates, it starts fresh.
    			if (country_code == "GB" && fc_json.total_price < 10) {
    				addShippingOption(1, 3, '', 'Flat Rate Shipping');
    			 } else if (country_code == "GB" && fc_json.total_price >= 10) {
    				addShippingOption(1, 0, '', 'Free Shipping');
    			 } else if ( jQuery.inArray(country_code, ["FR","GR", "DE"] ) {
    				addShippingOption(1, 3, '', 'Flat Rate Shipping');
    			 } else {
    				addShippingOption(1, 5, '', 'Flat Rate Shipping');
    			 }
    		}
        /* END CUSTOM SHIPPING LOGIC */
      }
    

    Note that you'll need to fill the array with all of the 2 character country codes for the relevant EU countries you're wanting to match against. Specifically the array is this bit:
    ["FR","GR", "DE"]
    

    Also, you may want to change the name of the shipping options as set in that script.
  • PecanPecan Member
    edited April 2012
    Hi Adam,

    Thanks for the custom script and your fast response. There is a slight problem however, after adding your code to my checkout template the shipping section of the checkout page no longer loads. I have added the country codes and changed the shipping option details as you suggested and it still doesn't load. Are there any small errors in the code below?

    function customShippingLogic() {
        /* BEGIN CUSTOM SHIPPING LOGIC */
    		if (typeof(country_code) === "undefined") {country_code = "";}
    		new_country_code = (jQuery("#use_different_addresses").is(":checked") ? $("#shipping_country").val() : $("#customer_country").val());
    		if (country_code != new_country_code) { // The shipping country has changed!
    			country_code = new_country_code;
    			removeCustomShippingContainer(); // This call will make sure that when it updates, it starts fresh.
    			if (country_code == "GB" && fc_json.total_price < 10) {
    				addShippingOption(1, 3, 'Royal Mail 1st class', 'Flat Rate Shipping');
    			 } else if (country_code == "GB" && fc_json.total_price >= 10) {
    				addShippingOption(2, 0, 'Royal Mail 1st class', 'Free Shipping');
    			 } else if ( jQuery.inArray(country_code, ["AT","BE","BG","CY","CZ","DK","EE","FI","FR","DE","GR","HU","IE","IT","LV","LT","LU","MT","NL","PL","PT","RO","SK","SI","ES","SE"] ) {
    				addShippingOption(3, 3, 'Royal Mail AirMail', 'Flat Rate Shipping');
    			 } else {
    				addShippingOption(4, 5, 'Royal Mail AirMail', 'Flat Rate Shipping');
    			 }
    		}
        /* END CUSTOM SHIPPING LOGIC */
      }
    
  • fc_adamfc_adam FoxyCart Team
    edited April 2012
    @Pecan,

    Ah sorry, that's my fault. I missed a closing bracket. Try this:
    function customShippingLogic() {
        /* BEGIN CUSTOM SHIPPING LOGIC */
    		if (typeof(country_code) === "undefined") {country_code = "";}
    		new_country_code = (jQuery("#use_different_addresses").is(":checked") ? $("#shipping_country").val() : $("#customer_country").val());
    		if (country_code != new_country_code) { // The shipping country has changed!
    			country_code = new_country_code;
    			removeCustomShippingContainer(); // This call will make sure that when it updates, it starts fresh.
    			if (country_code == "GB" && fc_json.total_price < 10) {
    				addShippingOption(1, 3, 'Royal Mail 1st class', 'Flat Rate Shipping');
    			 } else if (country_code == "GB" && fc_json.total_price >= 10) {
    				addShippingOption(2, 0, 'Royal Mail 1st class', 'Free Shipping');
    			 } else if ( jQuery.inArray(country_code, ["AT","BE","BG","CY","CZ","DK","EE","FI","FR","DE","GR","HU","IE","IT","LV","LT","LU","MT","NL","PL","PT","RO","SK","SI","ES","SE"] ) ) {
    				addShippingOption(3, 3, 'Royal Mail AirMail', 'Flat Rate Shipping');
    			 } else {
    				addShippingOption(4, 5, 'Royal Mail AirMail', 'Flat Rate Shipping');
    			 }
    		}
        /* END CUSTOM SHIPPING LOGIC */
      }
    
  • PecanPecan Member
    Hi Adam that's great and it now shows.

    I have discovered though that the last shipping option (no. 4 in the above code) does not show when a non-EU country is inputted. I want that option to be the sole option available for all non-EU countries.

    Everything else works perfectly as far as I can see but I would really appreciate your help in figuring out why this is.

    Could it be that I need to enter all of the remaining country codes into a separate array for the last shipping option?

    Also would it be possible for the first shipping option to be auto-selected regardless of which ones are visible?
  • fc_adamfc_adam FoxyCart Team
    Mate. Not my day.
    function customShippingLogic() {
        /* BEGIN CUSTOM SHIPPING LOGIC */
    		if (typeof(country_code) === "undefined") {country_code = "";}
    		new_country_code = (jQuery("#use_different_addresses").is(":checked") ? $("#shipping_country").val() : $("#customer_country").val());
    		if (country_code != new_country_code) { // The shipping country has changed!
    			country_code = new_country_code;
    			removeCustomShippingContainer(); // This call will make sure that when it updates, it starts fresh.
    			if (country_code == "GB" && fc_json.total_price < 10) {
    				addShippingOption(1, 3, 'Royal Mail 1st class', 'Flat Rate Shipping');
    			 } else if (country_code == "GB" && fc_json.total_price >= 10) {
    				addShippingOption(2, 0, 'Royal Mail 1st class', 'Free Shipping');
    			 } else if ( jQuery.inArray(country_code, ["AT","BE","BG","CY","CZ","DK","EE","FI","FR","DE","GR","HU","IE","IT","LV","LT","LU","MT","NL","PL","PT","RO","SK","SI","ES","SE"] ) > -1 ) {
    				addShippingOption(3, 3, 'Royal Mail AirMail', 'Flat Rate Shipping');
    			 } else {
    				addShippingOption(4, 5, 'Royal Mail AirMail', 'Flat Rate Shipping');
    			 }
    		}
        /* END CUSTOM SHIPPING LOGIC */
      }
    
  • PecanPecan Member
    Not sure what you changed there Adam but it now works like a charm.

    Thanks for all your help. :)
  • fc_adamfc_adam FoxyCart Team
    I missed this much:
    > -1
    

    :)
Sign In or Register to comment.