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.

Comprehensive Checkout JavasScript List

TheCosmonautTheCosmonaut Member
in Bugs & Feature Requests edited April 2010
Does anyone have a list of all the methods, properties, etc. available to FC.checkout? I'm building some custom shipping madness and have been unable to find a comprehensive list. I'm interested in the .config methods & properties, using calculated shipping instead of flat rate shipping, etc.

Thanks in advance!

--eric
Comments
  • OK - Did a "view source" and looked at the code in the checkout page and I believe I see all the config properties available. Not sure what some of them mean (such as what the addition of Future to the parameters mean), but I don't think that's supercrucial right now. That combined with the documentation on the JSON object (http://wiki.foxycart.com/docs/json?s[]=fc&s[]=json) are geting me where I need to go.

    Is there an object which stores the current shipping selections (FedEx vs. UPS, for example)? How would I get those values?

    Thanks again!

    --eric
  • brettbrett FoxyCart Team
    Hi Eric.
    You're definitely getting into advanced territory here, so we can't offer too much help, but the best way to proceed is probably by checking Firebug's net tab and seeing the requests that are made along with the responses.

    You might also want to look at this thread:
    http://forum.foxycart.com/comments.php?DiscussionID=2815
    Lots of stuff about the shipping there.

    Let us know how it goes.
  • lukeluke FoxyCart Team
    Also, please be aware that the FC.checkout code isn't really designed for user tweaking / customizing. That entire file could be radically changed in a future version and we don't publicly document internal changes (that file is considered internal). Please, proceed at your own risk.
  • TheCosmonautTheCosmonaut Member
    edited April 2010
    Thanks much for the responses!

    I had kind of a wacky scenario: the client wanted to use the FoxyCart calculator to calculate UPS & FedEx shipping prices, PLUS he wanted:
    * $3.50 handling added to orders less than $100 shipping with UPS
    * Free shipping on orders over $100 shipping with UPS
    * $5 handling added to orders shipping with FedEx (any total order price)

    I ended up overriding the updateShipping shipping with a custom function. I duplicated the updateShipping function, renamed it, and added script which looked at data.shipping_options[ i ].method to determine the shipping company, then looked at the order total (in the case of UPS), and then modified the shipping. Here's the relevant code:
    for (var i = 0; i<data.shipping_options.length; i++) {
    									if (data.shipping_options[ i ].method == "UPS") {
    										//alert ("UPS!");
    										// check to see if price is over $100 - if so, make shipping free
    										var myHandling = 3.50;
    										var myShipping = parseFloat(data.shipping_options[ i ].price) + myHandling;
    										if (fc_json.total_price > 100) {
    											myShipping = 0;
    										}
    										shippingOptions += "<label class=\"fc_radio\" for=\""+prefix+"shipping_service_"+data.shipping_options[ i ].service_id+"\">";
    										//shippingOptions += "<input type=\"radio\" name=\""+prefix+"shipping_service\" id=\""+prefix+"shipping_service_"+data.shipping_options[ i ].service_id+"\" value=\""+data.shipping_options[ i ].service_id+"|"+data.shipping_options[ i ].price+"\" class=\"fc_radio fc_required\" onclick=\"FC.checkout.updatePrice("+multiship+")\" />"; // original
    										shippingOptions += "<input type=\"radio\" name=\""+prefix+"shipping_service\" id=\""+prefix+"shipping_service_"+data.shipping_options[ i ].service_id+"\" value=\""+data.shipping_options[ i ].service_id+"|"+myShipping+"\" class=\"fc_radio fc_required\" onclick=\"FC.checkout.updatePrice("+multiship+")\" />";
    										shippingOptions += "<span class=\"fc_shipping_carrier\">"+data.shipping_options[ i ].method+"</span> "; 
    										shippingOptions += "<span class=\"fc_shipping_service\">"+data.shipping_options[ i ].service_name+" <span style=\"font-size:0.9em; float:none;\">(Free for orders over $100)</span></span> "; 
    										//shippingOptions += "<span class=\"fc_shipping_cost\">"+FC.formatter.currency(data.shipping_options[ i ].price,true)+"</span> ";// Original
    										shippingOptions += "<span class=\"fc_shipping_cost\">"+FC.formatter.currency(myShipping,true)+"</span> ";
    										shippingOptions += "</label>";
    									} else {	
    										var myHandling = 5;
    										var myShipping = parseFloat(data.shipping_options[ i ].price) + myHandling;
    										shippingOptions += "<label class=\"fc_radio\" for=\""+prefix+"shipping_service_"+data.shipping_options[ i ].service_id+"\">";
    										//shippingOptions += "<input type=\"radio\" name=\""+prefix+"shipping_service\" id=\""+prefix+"shipping_service_"+data.shipping_options[ i ].service_id+"\" value=\""+data.shipping_options[ i ].service_id+"|"+data.shipping_options[ i ].price+"\" class=\"fc_radio fc_required\" onclick=\"FC.checkout.updatePrice("+multiship+")\" />"; // original
    										shippingOptions += "<input type=\"radio\" name=\""+prefix+"shipping_service\" id=\""+prefix+"shipping_service_"+data.shipping_options[ i ].service_id+"\" value=\""+data.shipping_options[ i ].service_id+"|"+myShipping+"\" class=\"fc_radio fc_required\" onclick=\"FC.checkout.updatePrice("+multiship+")\" />";
    										shippingOptions += "<span class=\"fc_shipping_carrier\">"+data.shipping_options[ i ].method+"</span> "; 
    										shippingOptions += "<span class=\"fc_shipping_service\">"+data.shipping_options[ i ].service_name+"</span> "; 
    										//shippingOptions += "<span class=\"fc_shipping_cost\">"+FC.formatter.currency(data.shipping_options[ i ].price,true)+"</span> ";// Original
    										shippingOptions += "<span class=\"fc_shipping_cost\">"+FC.formatter.currency(myShipping,true)+"</span> ";
    										shippingOptions += "</label>";
    									}
    
    								}
    

    The only other trick was to make sure all references to "config" were changed to "FC.checkout.config". Oh, and there seemed to be a strange bug where the "multiship" variable was coming through as an object. But with those changes, everything seems to be working like a charm!

    Do you think, however, that you may be updating the updateShipping function at some point which would break this code? :)

    Thanks again for all your help.

    --eric

    (edit: annoying that the [ code ] shortcode doesn't appear to work :P )
  • bjbkbjbk Member
    Hey Eric,

    Sorry I didnt get around to posting in the other thread, but I see you found a solution. I'll post my code here anyway, as my approach might be a bit more 'future-friendly' as it doesn't overwrite a FC function, rather piggybacks on one.
    function updateMyShippingCost() {
    // Grab current shipping cost (from live rates)
    var shippingCost = FC.checkout.config.orderShipping;
    // Grab currently selected shipping option
    var carrier = $("input[name=shipping_service]:checked").siblings(".fc_shipping_carrier").html();
    if ( carrier != null ) { // something is selected
    if ( carrier == "FedEx" ) { // it's FedEx!
    shippingCost += 10;
    } else if ( carrier == "UPS" ) { // it's UPS!
    shippingCost += 3.5;
    if (fc_json.total_price >= 100) { // Free shipping!
    shippingCost = 0;
    }
    }
    }
    // Update the shipping cost with the updated figures
    FC.checkout.config.orderShipping = shippingCost;
    }
    jQuery(document).ready(function(){
    // set the custom function to run before the updatePriceDisplay function
    FC.checkout.overload("updatePriceDisplay", "updateMyShippingCost", null);
    });
    
  • brettbrett FoxyCart Team
    @TheCosmonaut: Awesome! Thanks for sharing. As far as breaking in the future, yes, it's definitely possible, BUT one of the first improvements to shipping that we will make will be to allow a custom endpoint, which would kind of allow you to basically take your code and make it "official" in that FoxyCart would query your endpoint and you'd return the values (JSON based, likely). So it's nice to see that your approach kind of mirrors what we're planning.

    @bjbk, nice approach. Very cool.
  • My problem is that I need to charge a flat shipping rate of $10.00 on all orders totaling less than $150.00 and free shipping on orders totaling more than that. I cannot seem to find this on any of the forums or documentation pages. Can you give me the code or suggestions of how to set this up.

    Thanks.
  • fc_adamfc_adam FoxyCart Team
    @momtojbew,

    What you'd want is our tiered flat rate shipping snippet, and that will cover the basics of what you need, the custom logic would be something like this:
    var amount = fc_json.total_price;
     
    if (amount < 150) {
      shippingCost = 10; // $5 per product
    }
    
Sign In or Register to comment.