The Foxy forums are on the move!

We're in the process of moving our forums over to a new system, and so these forums are now read-only.
If you have a question about your store in the meantime, please don't hesitate to reach out to us via email.

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.