Add subscription options to cart

I need to add some checkboxes to the cart. The user should not be able to checkout unless a box is checked, and it will affect the subscription. Like this:

Make this a monthly recurring donation (greatly appreciated!)
[ ] Yes [ ] No

Been combing through the docs but haven't found the right info.

Thanks.
Comments
  • fc_adamfc_adam FoxyCart Team
    @jsoningram,

    What you're describing there is possible - but would be an advanced customisation on the checkout involving removing and re-adding the product as a subscription.

    Could you do this as part of the add to cart form for the product instead? That would be a much simpler approach - where you would just have a checkbox with a name of "sub_frequency" and the value set to "1m". Then if the customer checks that box, the product will be made a monthly subscription. If not - that parameter is not submitted with the form and it will just be a once off donation.
  • Thanks, @fc_adam

    The client is pretty adamant about it being in the cart.
  • @fc_adam,

    I thought I read that checkout is static, and any customisation must be done in the cart. Is that not the case?
  • fc_adamfc_adam FoxyCart Team
    edited August 2015
    @jsoningram,

    No - you can make changes to any template you want. There were more restrictions on what you could do in FoxyCart version 1.1 and older, but you could still make modifications using javascript. Version 2.0 allows you to edit all aspects of the templates.

    As I mentioned - it is possible to take that approach of including it on the cart or the checkout - but it's an advanced customisation. You would need to make use of jsonp requests to remove the existing product, and re-add it as a subscription product. We do have update calls for jsonp - but that's only to update the quantity, you can't currently change other parameters of the product.

    More information on jsonp here: http://wiki.foxycart.com/static/redirect/jsonp

    The approach I mentioned above though of handling this in the add to cart would be significantly more straightforward and simpler to set up.
  • @fc_adam,

    I've got some code partially working. I'm watching for changes on a radio button on the checkout page. If "yes" gets selected, we dump the cart, add the new item and refresh the cart. Only trouble is if the customer decides to check "no", nothing happens. Something is preventing change() from firing again. I've also tried click() and on("click",fn).

    Also it's not just no that's not working. If the customer initially checks "no", the code works. But then if they decide to choose "yes"... nothing.


    var myCode,
    myDonationName,
    myTotal;

    $(".ra-subscription").change(function(){
    if ($("#ra-subscription-yes").is(":checked")) {
    myTotal = FC.json.total_order;
    myCode = "restoredanew_sub";
    myDonationName = "Monthly Donation";
    console.log("yes");
    FC.cart.request({
    'empty': 'true',
    'name': myDonationName,
    'price': myTotal,
    'sub_frequency': '1m',
    'code': myCode
    }).done(function () {
    FC.checkout.render();
    $("#ra-subscription-no").removeAttr("checked");
    $("#ra-subscription-yes").attr("checked", "checked");
    next();
    });
    } else if ($("#ra-subscription-no").is(":checked")) {
    myTotal = FC.json.total_order;
    myCode = "restoredanew_donation";
    myDonationName = "One-Time Donation";
    console.log("computer says no");
    FC.cart.request({
    'empty': 'true',
    'name': myDonationName,
    'price': myTotal,
    'code': myCode
    }).done(function () {
    FC.checkout.render();
    $("#ra-subscription-yes").removeAttr("checked");
    $("#ra-subscription-no").attr("checked", "checked");
    next();
    });
    }
    });
  • fc_adamfc_adam FoxyCart Team
    @jsoningram,

    Awesome to hear you're making progress. The issue you're experiencing I believe is due to the way that our templates are re-rendered on the page. When you refresh the cart, that removes and re-adds all the affected HTML, so any jquery hooks tied to an element are lost. You'll need to catch those bubbling up the DOM instead like this:

    jQuery("body").on("change", ".ra-subscription", function() { ... });
  • @fc_adam,

    THANK YOU! That was it. So here's my finished template:
    https://github.com/jsoningram/2.0-templates/blob/master/default_templates/responsive.checkout.twig

    The radio buttons start around line 149, and the JS magic is down just above
  • fc_adamfc_adam FoxyCart Team
    @jsoningram,

    Awesome!
Sign In or Register to comment.