Edit live shipping price in cart v2.0

Only944Only944 Member
I currently am using v 1.1 and starting to convert to v 2.0

I need help with my custom checkout code.

I'm getting live shipping rates, and then discounting them by a percentage. I'm also hiding certain shipping rates, and adding a free shipping option. Based on where the products are being shipped to and the weight, and how many items are in the cart . I'm not sure how to set this up in version 2.0, or where to find help.

Here is the code I have in v1.1. Sorry if it's messy, I'm not very good at coding.



<script type="text/javascript" charset="utf-8">
//<![CDATA[

FC.customLiveShipping = {}

FC.customLiveShipping.config = {
autoSelect: true // Set to true if you'd like the top shipping option to be automatically selected for the user
};


FC.customLiveShipping.logic = function() {
/* BEGIN CUSTOM SHIPPING LOGIC */




var country = (jQuery("#use_different_addresses").is(":checked") ? $("#shipping_country").val() : $("#customer_country").val());



if (country == "US" && fc_json.total_weight >= .81 && fc_json.total_weight <= 6.99) {jQuery(".custom_fields_block").hide();
FC.customLiveShipping.update('First', '-36%');
FC.customLiveShipping.update('Priority', '-36%');
FC.customLiveShipping.update('Ground', '-14%');
FC.customLiveShipping.update('Next', '-8%');
FC.customLiveShipping.update('Canada', '-14%');
FC.customLiveShipping.update('Express', '+20%');
FC.customLiveShipping.hide('USPS First');
FC.customLiveShipping.hide('USPS Priority');
FC.customLiveShipping.show('USPS Express');
FC.customLiveShipping.show('UPS');
jQuery("label[for='shipping_service_60'] span.fc_shipping_service").html("USPS Priority Mail FREE");}

if (country == "US" && fc_json.total_weight >= 7.0) {jQuery(".custom_fields_block").hide();
FC.customLiveShipping.update('First', '-36%');
FC.customLiveShipping.update('Priority', '-36%');
FC.customLiveShipping.update('Ground', '-14%');
FC.customLiveShipping.update('Next', '-8%');
FC.customLiveShipping.update('Canada', '-14%');
FC.customLiveShipping.update('Express', '+1%');
FC.customLiveShipping.hide('USPS First');
FC.customLiveShipping.hide('USPS Next');
FC.customLiveShipping.hide('USPS Canada');
FC.customLiveShipping.hide('USPS Express');
FC.customLiveShipping.hide('UPS Ground');
FC.customLiveShipping.hide('UPS Next');
FC.customLiveShipping.hide('USPS Priority');
jQuery("label[for='shipping_service_60'] span.fc_shipping_service").html("Fedex Ground/USPS Priority FREE")}



if (country == "US" && fc_json.total_weight < .81) {jQuery(".custom_fields_block").hide();
FC.customLiveShipping.update('First', '-36%');
FC.customLiveShipping.update('Priority', '-36%');
FC.customLiveShipping.update('Ground', '-14%');
FC.customLiveShipping.update('Next', '-8%');
FC.customLiveShipping.update('Canada', '-14%');
FC.customLiveShipping.update('Express', '+30%');
FC.customLiveShipping.hide('USPS First');
jQuery("label[for='shipping_service_60'] span.fc_shipping_service").html("USPS First Class Mail FREE")}


if (country == "US" && fc_json.total_weight < .81 && fc_json.product_count > 1) {jQuery(".custom_fields_block").hide();
FC.customLiveShipping.update('First', '-36%');
FC.customLiveShipping.update('Priority', '-36%');
FC.customLiveShipping.update('Ground', '-14%');
FC.customLiveShipping.update('Next', '-8%');
FC.customLiveShipping.update('Canada', '-14%');
FC.customLiveShipping.update('Express', '+30%');
FC.customLiveShipping.hide('USPS First');
FC.customLiveShipping.hide('USPS Priority');
FC.customLiveShipping.show('USPS Express');
jQuery("label[for='shipping_service_60'] span.fc_shipping_service").html("USPS Priority Mail FREE");}







if (country == "PR" && fc_json.total_weight < .81) {FC.customLiveShipping.hide('First');
FC.customLiveShipping.add(100, 0.00, 'USPS', 'First Class Mail - FREE');
FC.customLiveShipping.update('Priority', '-50%');
FC.customLiveShipping.update('Ground', '+4%');
FC.customLiveShipping.update('Next', '+7%');
FC.customLiveShipping.update('Express', '+20%');
} else if (country == "PR" && fc_json.total_weight >= .81 && fc_json.total_weight <= 6.99) {FC.customLiveShipping.hide('First');
FC.customLiveShipping.hide('Priority');
FC.customLiveShipping.add(101, 0.00, 'USPS', 'Priority Mail 3 Day - FREE');
FC.customLiveShipping.update('Ground', '+4%');
FC.customLiveShipping.update('Next', '+7%');
FC.customLiveShipping.update('Express', '+20%');
} else if (country == "PR" && fc_json.total_weight >= 7.0){FC.customLiveShipping.hide('ALL');
FC.customLiveShipping.add(103, 0.00, 'USPS', 'Priority Mail - FREE');
}



else if (country != "US" && fc_json.total_weight <= 6.99){FC.customLiveShipping.update('First', '-10%');
FC.customLiveShipping.update('Priority', '-5%');
FC.customLiveShipping.update('Ground', '-10%');
FC.customLiveShipping.update('Next', '-5%');
jQuery(".custom_fields_block").hide();
} else if (country != "US" && fc_json.total_weight >= 7.00){FC.customLiveShipping.update('First', '-10%');
FC.customLiveShipping.update('Priority', '-5%');
FC.customLiveShipping.update('Ground', '-10%');
FC.customLiveShipping.update('Next', '-5%');
FC.customLiveShipping.update('Canada', '-14%');
FC.customLiveShipping.update('Express', '-10%');
FC.customLiveShipping.hide('USPS First');
FC.customLiveShipping.hide('USPS Express');
FC.customLiveShipping.hide('UPS Worldwide');
FC.customLiveShipping.hide('UPS Next');
jQuery(".custom_fields_block").show();
}






if (country == "UM" && fc_json.total_weight < .81) {FC.customLiveShipping.hide('First');
FC.customLiveShipping.add(100, 0.00, 'USPS', 'First Class Mail - FREE');
FC.customLiveShipping.update('Priority', '-36%');
FC.customLiveShipping.update('Ground', '+4%');
FC.customLiveShipping.update('Next', '+7%');
FC.customLiveShipping.update('Express', '+20%');
} else if (country == "UM" && fc_json.total_weight >= .81 && fc_json.total_weight <= 6.99) {FC.customLiveShipping.hide('First');
FC.customLiveShipping.hide('Next');
FC.customLiveShipping.hide('Ground');
FC.customLiveShipping.hide('Priority');
FC.customLiveShipping.show('USPS Express');
FC.customLiveShipping.add(101, 0.00, 'USPS', 'Priority Mail - FREE');
FC.customLiveShipping.update('Express', '+20%');
} else if (country == "UM" && fc_json.total_weight >= 7.0){FC.customLiveShipping.hide('ALL');
FC.customLiveShipping.add(103, 0.00, 'USPS', 'Priority Mail - FREE');
}



else if (country != "US" && fc_json.total_weight <= 6.99){FC.customLiveShipping.update('First', '-10%');
FC.customLiveShipping.update('Priority', '-5%');
FC.customLiveShipping.update('Ground', '-10%');
FC.customLiveShipping.update('Next', '-5%');
jQuery(".custom_fields_block").show();
} else if (country != "US" && fc_json.total_weight >= 7.00){FC.customLiveShipping.update('First', '-10%');
FC.customLiveShipping.update('Priority', '-5%');
FC.customLiveShipping.update('Ground', '-10%');
FC.customLiveShipping.update('Next', '-5%');
FC.customLiveShipping.update('Canada', '-14%');
FC.customLiveShipping.update('Express', '-10%');
FC.customLiveShipping.hide('USPS First');
FC.customLiveShipping.hide('USPS Express');
FC.customLiveShipping.hide('UPS Worldwide');
FC.customLiveShipping.hide('UPS Next');
jQuery(".custom_fields_block").show();
}



Comments
  • OK, I found the code that I was looking for but I still need a little help.

    I added that hung of code to the cart footer, and then added this custom code to the correct area.


    var country = FC.json.shipping_address.country;

    if (country == "US" && fc.json.total_weight >= .81 && fc.json.total_weight <= 6.99)
    {fc.customLiveShipping.update('First', '-36%');
    fc.customLiveShipping.update('Priority', '-36%');
    fc.customLiveShipping.update('Ground', '-14%');
    fc.customLiveShipping.update('Next', '-8%');
    fc.customLiveShipping.update('Canada', '-14%');
    fc.customLiveShipping.update('Express', '+20%');
    fc.customLiveShipping.hide('USPS First');
    fc.customLiveShipping.remove('USPS Priority');
    fc.customLiveShipping.show('USPS Express');
    fc.customLiveShipping.show('UPS');
    FC.customLiveShipping.update('Free Ground Shipping', null, null, 'USPS Priority Mail FREE');
    }




    It IS hiding USPS First class mail, but not Priority mail.
    It's not discounting the rates at all.
    The words free ground shipping are not changing.
    And I don't think the total weights are being counted either.

    What am I missing?
  • fc_adamfc_adam FoxyCart Team
    @Only944,

    We're happy to help out here - great to hear you're making the jump to 2.0!

    When updating your custom logic there, I did note a couple small issues that I corrected, but I wanted to clarify them with you in case they were intended.

    For the US - you've got two tiers that look like this:
    if (country == "US" && fc_json.total_weight < .81) {
    ...
    }
    if (country == "US" && fc_json.total_weight < .81 && fc_json.product_count > 1) {
    ...
    }
    For a cart that weighs less than .81, and has 2 or more products, both of those tiers will apply. I'm assuming the first tier should only apply if there is only 1 product in the cart, compared to the second one when there is two or more?

    You've then got a couple other tiers - one for "PR" and one for "UM". At the end of both you have duplicate tiers that look like this:
    ...
    } else if (country != "US" && fc_json.total_weight <= 6.99) {
    ...
    } else if (country != "US" && fc_json.total_weight >= 7.00) {
    ...
    }
    As both of these tiers are duplicated between the PR and UM tiers - they will also both be run twice - resulting in the rates being modified twice. I'm assuming this logic should only run if it's not the US, but also not PR or UM?

    If you could confirm both of those things - I'll send through an updated logic for you that corrects it and updates for 2.0 as well.
  • Hi Adam,

    Thanks for the help.

    Ha ha, I told you my coding was sloppy.

    Your first question. You are correct in your assumption.
    The first If statement is for if the weight is < .81 and only 1 item in the cart.
    Second If statement is for a weight of < .81 and with 2 or more items in the cart.

    The Second code you are right about too. It should say, If not the US, PR, or UM .... But I didn't know how to code that. lol, so I rigged it up to work right.

    Thanks so much!
  • fc_adamfc_adam FoxyCart Team
    @Only944,

    Awesome, thanks for confirming.

    So for 2.0 you'll be making use of this updated version of the live rates snippet: https://wiki.foxycart.com/v/2.0/snippets/live_rate_shipping_modification. Follow the instructions on getting it added to your store.

    When it talks about adding the custom shipping logic - you can use this updated version of your existing logic: http://pastebin.com/raw/YxtBWZWp

    That should hopefully work well for you - let me know if you run into any issues.

    One additional note - your old logic included some code for hiding and showing a custom_fields_block element. You'll want to approach that slightly differently with 2.0 as well - handling it with Twig custom logic to hide/show it. We can assist with that as well.
  • Adam,

    That worked GREAT! Your code is so nice and neat!

    New question. My sidecart doesn't work at all. It goes straight to full page.
    Under customize cart type, "Default (sidecart)" is grayed out, and all I can select is Full Page, or custom.
    Am I missing some type of code somewhere? Or is it because of some code that's on my page from v1.1?

    Also, I tried changing the colors of the cart template. Only the primary color does anything, and it's only the color of the words. Is there an easy way to change the background color? That would be cool for us code challenged people.
  • fc_adamfc_adam FoxyCart Team
    @Only944,

    For the "customise cart type" option - the sidecart is the default selection - so you can uncheck that option to keep it as the default. You only need to enable that option if you want to change it from the default.

    If there is a javascript error - it would prevent the Sidecart from loading in some instances. Is the test website live that I could see it in action to assist?
    Also, I tried changing the colors of the cart template. Only the primary color does anything, and it's only the color of the words. Is there an easy way to change the background color? That would be cool for us code challenged people.
    The colours configuration doesn't apply to everything just yet - but we do plan to expand that in the future. For now you can make more detailed changes using CSS. Could you clarify which portion you're wanting to change the colour of?
  • Hi Adam,

    I have the "Customize Cart Type" unchecked, and the sidecart still doesn't load. It just goes straight to the full page cart. Here is a live test page that I setup for testing V2.0

    http://only944.com/test/

    For the colors. I see that I can make inline CSS changes to the of the cart, but I'm kind of limited with that.
    It would be awesome if everything was clearly customizable with css (like if your CSS sheet for the cart was visible and changeable), but it looks good the way it is too. Mostly just the background color and "texture" I was looking to change, but I just figured that out.
  • fc_adamfc_adam FoxyCart Team
    @Only944,

    Thanks for providing the link. Reviewing the page there - I'm not seeing the loader.js included for your test store. If you grab the code for that from the Sample Code section of your store's FoxyCart administration, and include it on the page - it should make the Sidecart start working correctly.

    I'd also recommend removing the previous FoxyCart CSS and Javascript - and also ensure that only one version of jQuery is included on the page.

    In terms of the colours - great to hear you were able to get that working. You can add your own complete stylesheet to any of the FoxyCart templates, to customise anything you need there. We don't support customising the raw CSS stylesheet at this point - but you're able to overwrite all of those styles with your own custom ones as needed.
  • Only944Only944 Member
    edited February 5
    YAY, I knew I was missing something simple like that. The side cart works great now.

    I'm not really sure how to override the CSS like that, it's a little above me right now, but that ok, it looks great the way it is. Maybe I will figure it out one day.

    I noticed a little typo that makes a big difference in the Documentation for V2.0, it says:

    "insert the loader.js FoxyCart javascript file from “Step 1” of the sample code section of your FoxyCart admin right above the closing </body> tag of your webpage,"

    But is should be just above the closing </header> tag. Not body, right?

    https://wiki.foxycart.com/v/2.0/getting_started/site_setup

    Thanks for all the help!!!
  • Interesting side note. If I have my admin open in 2 different browsers at the same time, the side cart doesn't work, and just goes to full page. If I close one of the admins, the side cart works again. Crazy.
  • fc_adamfc_adam FoxyCart Team
    edited February 5
    @Only944,
    But is should be just above the closing </header> tag. Not body, right?
    Good question. The documentation is correct there - we do recommend placing the include right before the closing </body> tag - which is where javascript is generally recommended to be placed as well. You can place it before the closing </head> tag if you want - it will work fine there too.
    Interesting side note. If I have my admin open in 2 different browsers at the same time, the side cart doesn't work, and just goes to full page. If I close one of the admins, the side cart works again. Crazy.
    That's... very interesting! Having the admin open in any number of browsers shouldn't impact the working of Sidecart at all. I've tried to replicate it on my side but Sidecart continues to work with two admins open in different browsers. Just to confirm - when you were testing, the page was finishing loading before you interacted with the add to cart? If the page hasn't completed loading - our own javascript may not have initialised yet to make Sidecart work.
  • Thanks for letting me know. I learned something new today.

    There still seems to be something wrong with my website. I'm using wordpress for my website. If I'm logged into wordpress (as if to edit my website), then my side cart works. But if I log out, or use a different computer, then the side cart doesn't work.

    But I think I want to use the full page cart anyways.

    Thanks for all your help, you are awesome!
    I'm sure I will have more questions in the future, probably about some other code I totally messed up. :smile:

    -Kyle
  • fc_adamfc_adam FoxyCart Team
    @Only944,

    Weird! Not sure what would have caused that - but we can dig into it if you'd like. If you did want to stick with full page cart though - if you haven't already you can set that for the cart type in your store's configuration in the administration.
  • Thanks, all is good. I'm sticking with the full page cart. I like the way it looks and operates and I think it will be best for my customers.

    I also just realized that the cart include has everything that I need. LOL. That's where I can customize the cart. LOL I might be a little slow, but I always get there eventually.

    Thanks again for all your help.
  • Hi Adam,

    Where is the checkout include? How can I change the css on the checkout to make it look like my cart? Am I missing something? I don't see anything in the checkout that I can change, no place to override the css, or I just don't know how, or where.

    Thanks
  • fc_adamfc_adam FoxyCart Team
    @Only944,

    To override the styling on any of the templates, you can simply include your own CSS within the page. One way you could do that is by using the "Add custom header or footer code to your templates" option on the configuration page. Within the "header" textarea for that option, you can include a style block and that will be included on the cart, checkout and receipt automatically for you:
    <style type="text/css">
    /* Your styles */
    </style>
    If you are planning some more complex style changes though - you can set up a remote template for each one as needed and define your styles in that page, before caching the page through the administration. You can see details about how to do that on our wiki here: https://wiki.foxycart.com/v/2.0/templates/intermediate-automagicache

    Does that help clarify how to customise styles?
  • Yay, I got it to work. There were just a few last adjustments I wanted to make and this will worked.

    Thanks,
    -Kyle
  • fc_adamfc_adam FoxyCart Team
    @Only944,

    Awesome! Glad you were able to get it how you wanted.
Sign In or Register to comment.