Multiple shipping options based on cart total cost

in Help edited September 2014
Client has requested something I'm not quite used to, and unfortunately this is a hot potato at this time. I need to move quickly on this...last minute curve ball.

Screenshot:
https://www.dropbox.com/s/quy5npxy22l56ny/Screen%20Shot%202014-09-30%20at%202.19.45%20PM.png

They want to offer a "Standard" and an "Express" shipping option, each with its own tier of pricing depending upon the total cost amount of the order. I realize that I would do this via Javascript and your examples located at the link below, but I'm a backend guy...JS isn't my thing, and I'm feeling slightly lost right now.

https://wiki.foxycart.com/snippets/shipping/multiple_flat_rates
Comments
  • brettbrett FoxyCart Team
    Hey @bdcadvertising. #fc_adam should be hopping on in the next few hours. He'll get back to you with some code.
  • fc_adamfc_adam FoxyCart Team
    @bdcadvertising,

    Based on what you've said there, this should get you started:
    addShippingOption(1, 5, '', 'Standard Delivery');
    addShippingOption(2, 10, '', 'Express');
     
    if (fc_json.total_price < 10) {
      updateShippingOptionCost(1, 6);
      updateShippingOptionCost(2, 12);
    } else if (fc_json.total_price < 20 {
      updateShippingOptionCost(1, 10);
      updateShippingOptionCost(2, 15);
    }
    
  • Okay, so I have it in place now. I've also ensured that the following has been done, however, shipping cost is still $0.00 in the cart checkout page. Thoughts?
    STEP 1: UPDATE CATEGORIES
    Update all categories to 'Shipped using a flat rate fee' with a value of 0 in the 'Product Delivery Option' section.

    Here's what the code looks like:
    <script type="text/javascript" charset="utf-8">
      //<![CDATA[
     
      FC.checkout.config.customShipping = {
        onLoad: true,  // Set to false if you don't want shipping calculated when the checkout loads
        onLocationChange: false, // 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 */
     
        addShippingOption(1, 6.95, '', 'Standard Delivery (3-6 days)');
        addShippingOption(2, 16.95, '', 'Express (2-3 days)');
    
        // between $0-25.00
        if (fc_json.total_price <= 25) {
            updateShippingOptionCost(1, 6.95);
            updateShippingOptionCost(2, 16.95);
        
        // between $25.01-$50.00
        } else if (fc_json.total_price <= 50 {
            updateShippingOptionCost(1, 11.95);
            updateShippingOptionCost(2, 21.95);
        
        // between $50.01-$75.00
        } else if (fc_json.total_price <= 75 {
            updateShippingOptionCost(1, 12.95);
            updateShippingOptionCost(2, 22.95);
        
        // between $75.01-100.00
        } else if (fc_json.total_price <= 100 {
            updateShippingOptionCost(1, 14.95);
            updateShippingOptionCost(2, 24.95);
        
        // between $100.01-$150.00
        } else if (fc_json.total_price <= 150 {
            updateShippingOptionCost(1, 16.95);
            updateShippingOptionCost(2, 26.95);
        
        // between $150.01-$200.00
        } else if (fc_json.total_price <= 200 {
            updateShippingOptionCost(1, 18.95);
            updateShippingOptionCost(2, 28.95);
        
        // between $200.01-$300.00
        } else if (fc_json.total_price <= 300 {
            updateShippingOptionCost(1, 21.95);
            updateShippingOptionCost(2, 31.95);
        
        // over $300
        } else if (fc_json.total_price > 300 {
            updateShippingOptionCost(1, 21.95);
            updateShippingOptionCost(2, 31.95);
        }
     
        /* END CUSTOM SHIPPING LOGIC */
      }
     
      //]]>
    </script>
     
    <script type="text/javascript" charset="utf-8">
      //<![CDATA[
      /* Multiple Flat Rate Shipping Options Logic v2.4 */
     
      jQuery(document).ready(function() {
        jQuery("#fc_custom_shipping_methods_container").on('click', 'input[name=shipping_service]', 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) {
          isValidateAndSubmit = false;
          FC.checkout.overload("updateTaxes", function() { if (!isValidateAndSubmit) { runShippingLogic(); } }, null);
          FC.checkout.overload("validateAndSubmit", function() { isValidateAndSubmit = true; }, function() { isValidateAndSubmit = false });
        }
     
        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();
        }
        carrier = (typeof(carrier) == 'undefined' || carrier == null) ? "" : carrier;
        service = (typeof(service) == 'undefined' || service == null) ? "" : service;
        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);
      }
      //]]>
    </script>
    

    I also have this in the checkout template, and have force-reloaded it int your system:
    ^^custom_begin^^
      <div id="fc_custom_shipping_methods_container">
      </div>
      ^^custom_end^^
    
  • fc_adamfc_adam FoxyCart Team
    @bdcadvertising,

    All your 'else if' statements are missing a closing bracket:
    } else if (fc_json.total_price <= 50 {
    

    That should be:
    } else if (fc_json.total_price <= 50) {
    
  • Thanks Adam. You're right, and I've fixed that.

    Unfortunately, that didn't resolve the issue. Shipping is still showing up as $0.00. I've re-pulled the checkout template and clicked the "update" button in the admin, but that didn't resolve it.

    Here's my current code:
    <script type="text/javascript" charset="utf-8">
      //<![CDATA[
     
      FC.checkout.config.customShipping = {
        onLoad: true,  // Set to false if you don't want shipping calculated when the checkout loads
        onLocationChange: false, // 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 */
     
        addShippingOption(1, 6.95, '', 'Standard Delivery (3-6 days)');
        addShippingOption(2, 16.95, '', 'Express (2-3 days)');
    
        // between $0-25.00
        if (fc_json.total_price <= 25) {
            updateShippingOptionCost(1, 6.95);
            updateShippingOptionCost(2, 16.95);
        
        // between $25.01-$50.00
        } else if (fc_json.total_price <= 50) {
            updateShippingOptionCost(1, 11.95);
            updateShippingOptionCost(2, 21.95);
        
        // between $50.01-$75.00
        } else if (fc_json.total_price <= 75) {
            updateShippingOptionCost(1, 12.95);
            updateShippingOptionCost(2, 22.95);
        
        // between $75.01-100.00
        } else if (fc_json.total_price <= 100) {
            updateShippingOptionCost(1, 14.95);
            updateShippingOptionCost(2, 24.95);
        
        // between $100.01-$150.00
        } else if (fc_json.total_price <= 150) {
            updateShippingOptionCost(1, 16.95);
            updateShippingOptionCost(2, 26.95);
        
        // between $150.01-$200.00
        } else if (fc_json.total_price <= 200) {
            updateShippingOptionCost(1, 18.95);
            updateShippingOptionCost(2, 28.95);
        
        // between $200.01-$300.00
        } else if (fc_json.total_price <= 300) {
            updateShippingOptionCost(1, 21.95);
            updateShippingOptionCost(2, 31.95);
        
        // over $300
        } else if (fc_json.total_price > 300) {
            updateShippingOptionCost(1, 21.95);
            updateShippingOptionCost(2, 31.95);
        }
     
        /* END CUSTOM SHIPPING LOGIC */
      }
     
      //]]>
    </script>
    
  • Hold on. Maybe not...
  • I think we're finally good! This totally worked.

    Thank you for all your help with this. I know I can re-use this time and time again, as most of our type of client will require a shipping function of this sort.
  • fc_adamfc_adam FoxyCart Team
    @bdcadvertising,

    Happy to help!
Sign In or Register to comment.