Multiple Flat Rate Shipping - Duplicate Shipping Options

RevConceptRevConcept Member
in Help edited March 2012
My clients just decided they want to add multiple shipping options. Previously, we had $0 to Continental USA, and $35 to AK and HI.

Now, they would like options for $0 Ground, $35 2nd Day and $55 Overnight to continental USA. The only option for AK and HI will be $35 2nd Day.

I tried altering the JavaScript I had, it's almost working...but I get duplicate instances of the Shipping options everytime the state changes.

URL: http://kpmaclane.com.s118336.gridserver.com/shop/kp-maclane-womens-polo-shirt/

CODE:
// ****** Shipping To USA Only ****** //

jQuery(document).ready(function() {
  jQuery('#customer_country, #shipping_country').val('US');
  jQuery('#customer_country_name, #shipping_country_name').addClass('fc_text_readonly').val('United States');
  jQuery('#customer_country_name, #shipping_country_name').attr('readonly', true).focus(function() {
    jQuery(this).blur();
  });
 
  // Update states
  FC.checkout.setAutoComplete("customer_state");
  FC.checkout.setAutoComplete("shipping_state");
});


// ****** Shipping Charge for Multi-Flat Rate ****** //

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
};
 
function calculateShipping() {
  var shippingCost = 0;
 
  /* BEGIN CUSTOM SHIPPING LOGIC */
  
  	addShippingOption(1, 0, 'Standard:', 'Ground Shipping');
	addShippingOption(2, 35, 'Priority:', 'Second Day');
	addShippingOption(3, 55, 'Express:', 'Overnight');	

var state_code = (jQuery("#use_different_addresses").is(":checked") ? jQuery("#shipping_state").val() : jQuery("#customer_state").val());
switch (state_code) {
  case "AK":
  case "HI":
	removeShippingOption(1);
	removeShippingOption(3);
    break;
  default:
    shippingCost = 0;
}

  
  /* END CUSTOM SHIPPING LOGIC */
 
  FC.checkout.config.orderFlatRateShipping = shippingCost;
  FC.checkout.updateShipping(-1);
}

 
jQuery(document).ready(function() {
  if (FC.checkout.config.customShipping.onLoad) {
    calculateShipping();
  }
 
  if (FC.checkout.config.customShipping.onLocationChange) {
    FC.checkout.overload("updateTaxes", function() { calculateShipping(); }, null);
  }
});

//<![CDATA[
  /* Multiple Flat Rate Shipping Options Logic v2.1 */
 
  jQuery(document).ready(function() {
    jQuery("input[name=shipping_service]").live('click', function(){
      shipping_service_description = jQuery(this).siblings(".fc_shipping_carrier").html();
      shipping_service_description += ((shipping_service_description == "") ? '' : ' ');
      shipping_service_description += jQuery(this).siblings(".fc_shipping_service").html();
      $("#shipping_details").val(shipping_service_description);
      // Launch FoxyCart functionality
      FC.checkout.updatePrice(-1);
    });
 
    if (FC.checkout.config.customShipping.onLoad) {
      runShippingLogic();
    }
 
    if (FC.checkout.config.customShipping.onLocationChange) {
      FC.checkout.overload("updateTaxes", function() { runShippingLogic(); }, null);
    }
 
    if (FC.checkout.config.customShipping.onPreSubmit) {
      FC.checkout.overload("validateAndSubmit", function() {if (!jQuery("#shipping_service_id").length) { runShippingLogic(); }}, null);
    }
  });
 
  function runShippingLogic() {
    // Check to see if there are actually shippable products in the current cart before running the custom shipping (0.7.1+ only), or just run it for older carts
    if ((typeof(FC.checkout.config.hasShippableProducts) === "boolean" && FC.checkout.config.hasShippableProducts) || typeof(FC.checkout.config.hasShippableProducts) === "undefined") {
        customShippingLogic();
    }
  }
 
  // example: addShippingOption(1, 4.99, 'PostBox', 'Express Local');
  function addShippingOption(code, cost, carrier, service) {
    if (jQuery("#fc_shipping_methods_inner").length == 0) {
      addCustomShippingContainer();
    }
    var newShippingOption = '<label for="shipping_service_' + code + '" class="fc_radio"><input type="radio" class="fc_radio fc_required" value="' + code + '|' + cost + '" id="shipping_service_' + code + '" name="shipping_service" /><span class="fc_shipping_carrier">' + carrier + '</span><span class="fc_shipping_service">' + service + '</span><span class="fc_shipping_cost">' + FC.formatter.currency(cost, true) + '</span></label>';
    jQuery("#fc_shipping_methods_inner").append(newShippingOption);
  }
 
  // example: updateShippingOptionCost(1, 4);
  function updateShippingOptionCost(code, cost) {
    jQuery("input#shipping_service_" + code).val(code + '|' + cost).siblings("span.fc_shipping_cost").html(FC.formatter.currency(cost, true));
    FC.checkout.updatePrice(-1);
  }
 
  // example: removeShippingOption(1);
  function removeShippingOption(code) {
    jQuery("label[for=shipping_service_" + code + "]").remove();
    if (jQuery("#fc_shipping_methods_inner").html() == "") {
      removeCustomShippingContainer();
    }
    FC.checkout.updatePrice(-1);
  }
 
  function addCustomShippingContainer() {
 
jQuery("#fc_custom_shipping_methods_container").html('<h2>Shipping Options</h2><div class="fc_row fc_shipping_methods_container" id="fc_shipping_methods_container"><div class="fc_radio_group_container fc_row fc_shipping_methods" id="fc_shipping_methods"><input type="hidden" value="0" id="shipping_service_id" name="shipping_service_id"><input type="text" style="display:none;" value="" id="shipping_service_description" name="shipping_service_description"><input type="text" value="" id="shipping_details" name="Shipping_Details" style="display:none;" /><div class="fc_shipping_methods_inner" id="fc_shipping_methods_inner"></div><label style="display: none;" class="fc_error" for="fc_shipping_methods">Please select a shipping method.</label></div></div>');
  }
 
  function removeCustomShippingContainer() {
    jQuery("#fc_custom_shipping_methods_container").html("");
    FC.checkout.updatePrice(-1);
  }
  //]]>
Comments
  • fc_adamfc_adam FoxyCart Team
    @RevConcept,

    Two things I'd suggest:

    Firstly, replace the code you have now for multiple flat rates with the updated code listed here: http://wiki.foxycart.com/snippets/shipping/multiple_flat_rates
    Some changes and improvements have been made since you grabbed that code initially.

    Secondly, you'll want to look at the "removeCustomShippingContainer()" function, and run that each time you run your custom code which adds all the options. That way you'll always start fresh when you add in the shipping options. You can see that in use in one of the examples at the bottom of the wiki page linked above.
  • Thanks so much. I think I got it all sorted out. Ran some tests and it's doing exactly what I need it to. For anyone else, here is what I ended up using:
    // ****** Shipping Charge for Multi-Flat Rate ****** //
    
    //<![CDATA[
     
      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
      };
     
      function customShippingLogic() {
        
    	/* BEGIN CUSTOM SHIPPING LOGIC */
    	
    	if (typeof(state_code) === "undefined") {state_code = "";}
    new_state_code = (jQuery("#use_different_addresses").is(":checked") ? $("#shipping_state").val() : $("#customer_state").val());
    if (state_code != new_state_code) { // The shipping country has changed!
      state_code = new_state_code;
      removeCustomShippingContainer(); // This call will make sure that when it updates, it starts fresh.
      if (state_code == "AK" || state_code == "HI") {
        postage = 35;
        addShippingOption(2, postage, 'USPS', 'Second Day');
     
       } else {
        postage = 0;
        addShippingOption(1, postage, 'USPS', 'Ground');
    	
    	postage = 35;
        addShippingOption(2, postage, 'USPS', 'Second Day');
    	
    	postage = 55;
        addShippingOption(3, postage, 'USPS', 'Overnight');
    
      }
    } 
     
        /* END CUSTOM SHIPPING LOGIC */
    	
      }
     
      //]]>
    
      //<![CDATA[
      /* Multiple Flat Rate Shipping Options Logic v2.1 */
     
      jQuery(document).ready(function() {
        jQuery("input[name=shipping_service]").live('click', function(){
          shipping_service_description = jQuery(this).siblings(".fc_shipping_carrier").html();
          shipping_service_description += ((shipping_service_description == "") ? '' : ' ');
          shipping_service_description += jQuery(this).siblings(".fc_shipping_service").html();
          $("#shipping_details").val(shipping_service_description);
          // Launch FoxyCart functionality
          FC.checkout.updatePrice(-1);
        });
     
        if (FC.checkout.config.customShipping.onLoad) {
          runShippingLogic();
        }
     
        if (FC.checkout.config.customShipping.onLocationChange) {
          FC.checkout.overload("updateTaxes", function() { runShippingLogic(); }, null);
        }
     
        if (FC.checkout.config.customShipping.onPreSubmit) {
          FC.checkout.overload("validateAndSubmit", function() {if (!jQuery("#shipping_service_id").length) { runShippingLogic(); }}, null);
        }
      });
     
      function runShippingLogic() {
        // Check to see if there are actually shippable products in the current cart before running the custom shipping (0.7.1+ only), or just run it for older carts
        if ((typeof(FC.checkout.config.hasShippableProducts) === "boolean" && FC.checkout.config.hasShippableProducts) || typeof(FC.checkout.config.hasShippableProducts) === "undefined") {
            customShippingLogic();
        }
      }
     
      // example: addShippingOption(1, 4.99, 'PostBox', 'Express Local');
      function addShippingOption(code, cost, carrier, service) {
        if (jQuery("#fc_shipping_methods_inner").length == 0) {
          addCustomShippingContainer();
        }
        var newShippingOption = '<label for="shipping_service_' + code + '" class="fc_radio"><input type="radio" class="fc_radio fc_required" value="' + code + '|' + cost + '" id="shipping_service_' + code + '" name="shipping_service" /><span class="fc_shipping_carrier">' + carrier + '</span><span class="fc_shipping_service">' + service + '</span><span class="fc_shipping_cost">' + FC.formatter.currency(cost, true) + '</span></label>';
        jQuery("#fc_shipping_methods_inner").append(newShippingOption);
      }
     
      // example: updateShippingOptionCost(1, 4);
      function updateShippingOptionCost(code, cost) {
        jQuery("input#shipping_service_" + code).val(code + '|' + cost).siblings("span.fc_shipping_cost").html(FC.formatter.currency(cost, true));
        FC.checkout.updatePrice(-1);
      }
     
      // example: removeShippingOption(1);
      function removeShippingOption(code) {
        jQuery("label[for=shipping_service_" + code + "]").remove();
        if (jQuery("#fc_shipping_methods_inner").html() == "") {
          removeCustomShippingContainer();
        }
        FC.checkout.updatePrice(-1);
      }
     
      function addCustomShippingContainer() {
     
    jQuery("#fc_custom_shipping_methods_container").html('<h2>Shipping Options</h2><div class="fc_row fc_shipping_methods_container" id="fc_shipping_methods_container"><div class="fc_radio_group_container fc_row fc_shipping_methods" id="fc_shipping_methods"><input type="hidden" value="0" id="shipping_service_id" name="shipping_service_id"><input type="text" style="display:none;" value="" id="shipping_service_description" name="shipping_service_description"><input type="text" value="" id="shipping_details" name="Shipping_Details" style="display:none;" /><div class="fc_shipping_methods_inner" id="fc_shipping_methods_inner"></div><label style="display: none;" class="fc_error" for="fc_shipping_methods">Please select a shipping method.</label></div></div>');
      }
     
      function removeCustomShippingContainer() {
        jQuery("#fc_custom_shipping_methods_container").html("");
        FC.checkout.updatePrice(-1);
      }
      //]]>
    
Sign In or Register to comment.