Subscription order with multiple distinct products in one form

EricTheRedEricTheRed Member
in Help edited April 2012
I had previously set up my customer's store (version 0.7.2) with one Product category and then integrated 9 distinct products within a form on the site that allowed a visitor to select the quantity for each of the 9 products and then click the order button one time to start the checkout process. Foxycart has been working wonderfully at handling the orders.

My customer now wants to add in a subscription option as a distinct product choice in the same form based page. The subscription would be for a single product from a reduced selection list of the 9 products. The subscription would be either for once a month, or once every 2 weeks.

I have reviewed the code snippets and was easily able to add a subscription selection to the form page, but have been unable to find a way to set the behavior such that the subscription is added only when the visitor selects a quantity of "1" from a choice of either "0" or "1".

Is there a way to set this up so that with one click on the "add to cart" button a visitor can select a combination of products that might or might not include the subscription?

In my testing so far, the subscription is always added to the cart.

Thank you in advance for the help.
Comments
  • sparkwebsparkweb Member, Integration Developer, FoxyShop, Order Desk
    Eric, if you can share (or whisper) a dev url that would be really helpful.
  • lukeluke FoxyCart Team
    Hey Eric. Please send along a link so we can take a look, but if you have the quantity for that subscription product set to 0, it shouldn't add the product.
  • Thank you sparkweb and luke for the replies. It turns out it was developer error. One should not code when they are tired. What a difference a good nights sleep makes, LOL.

    It turns out the problem was with the numbering of the different products on the page. I thought I had the numbering correct for the new subscription product but apparently there were issues that I missed. When I was going through additional trouble shooting this morning, I discovered where the problem was - the item numbering. This was only apparent after I simplified the new page to include the subscription and one product.

    Everything appears to be working correctly. I am going to add the subscription code back into a copy of the existing page and see how things go. I will start out small.

    Here is what the code should look like in order to work:

    <form class="foxycart" action="https://yourdomain.foxycart.com/cart"; method="post" accept-charset="utf-8">

    <table width="700" border="0" cellspacing="2" cellpadding="2" >
    <tr>
    <td>
    <p align="left"><strong>Widget Club</strong>
    <br />
    A monthly subscription to great widgets
    <br />
    The cost is $10 per month for one
    <br />
    one widget. Please choose
    <br /> your widget below
    <input type="hidden" name="name" value="Monthly Widget Subscription" />
    <input id="sub_frequency" type="hidden" name="sub_frequency" value="1m">
    <input id="price" type="hidden" name="price" value="10.00"><br />
    <select name="choice">
    <option value="Widget Master's Choice">Widget Master's Choice</option>
    <option value="Blue Widget">Blue Widget</option>
    <option value="Green Widget">Green Widget</option>
    </select>
    <br /><br />
         

    <select name="quantity">
    <option value="0">0</option>
    <option value="1">1</option>

    </select>
    </p>
    </td>
    <td><input type="hidden" name="1:name" value="Red Widget" />
    <br /><br />
    <input type="hidden" name="1:price" value="10.95" />    Red Widget @ $10.95/widget
    <br /><br />
         

    <select name="1:quantity">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    </select>  Widget(s)
    <br /><br />
    </td>
    </tr>
    <br /><br /><br />
    </table>
    <p align="right"><input type="image" name="submit" src="images/add_to_cart_button.gif" border="0" class="submit" />
    </p>
    </form>
  • lukeluke FoxyCart Team
    Thanks for following up!
  • I need a shopping cart monthly subscription for 5 different products. I would like the customer to be able to mix and match and combination of the 5 products so long they order at least 6 products (we would like them to buy more than 6 if possible). Will a customer have to fill out a comments field to specify the quantity breakdown of each product?
    All the products have the same price. We offer free shipping.

    If this is possible, could you please send me sample code of the subscription page? Thanks!!
  • fc_adamfc_adam FoxyCart Team
    @seohonolulu2,

    That is possible - essentially if you can create the form to gather the data, FoxyCart can handle the product data.

    For what you're wanting to do, you could simply setup a form with each of the 5 products in a single add to cart call, and as long as each of them share the same subscription setup (ie: the same frequency, start and end date) then they will all be joined together as a single subscription. For details on adding multiple products to the cart at once, see here: http://wiki.foxycart.com/static/redirect/add_to_cart

    In terms of requiring they order at least 6 products, this will require a little javascript validation to check the total quantity in the cart and blocking the user from continuing the checkout process if there isn't. You could put this validation as part of your add to cart script using the preprocess event (http://wiki.foxycart.com/static/redirect/javascript#adding_your_own_events), and also on the cart and checkout templates for extra security.

    In terms of actually setting this up, if it's something you're not comfortable with taking on, perhaps it might be best to work with a developer who can help you get it all working as you'd like. Do you have a developer you're working with? If not, we can recommend some great developers who are familiar with FoxyCart who could help you out.
  • edited November 2014
    Hi thanks for the code/discussion. I've adjusted it for my site and it works great however I would like to make it a little cleaner by having a check box (subscribe) that on-click a new popup displays this form. I'm relatively new to java/css is there a simple way to do this? Thanks.

    - Ben
  • fc_adamfc_adam FoxyCart Team
    @allthenamesweretaken,

    Good question. So as a basic example, you could use jQuery and wrap the portion you want to hide in a div element, like this:
    <input type="checkbox" id="subscribe_toggle" value="1" />
    <div id="subscribe_container" style="display:none;">
    <p>This content will only show when the checkbox is checked</p>
    </div>
    

    The javascript would then look like this:
    <script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#subscribe_toggle").on('click', function() {
            toggleContainer();
        });
        toggleContainer();
    });
    
    function toggleContainer() {
        jQuery("#subscribe_toggle").toggle(jQuery(this).is(":checked"));    
    }
    </script>
    

    If you paste the javascript block right before the closing </head> tag, and include that checkbox and container div as I noted above, that should work.
  • Perfect! thanks thats exactly what i'm looking for! I was able to get a working version by clicking a link however I would really like the check box.

    For me for some reason the only thing that happens is the box gets checked however no new window appears.
    Also I've been really working hard on trying to figure out the "jquery date picker" box with a calendar however its also the same thing...After clicking on the calendar input box no calendar appears. Its more than likely user error to be honest but it makes me wonder if it is something simple on my end...I know this is potentially a complicated issue but i'm frustrated and if if I can just be pointed in the right direction. Even where to study I would still be grateful.

    Here is my compiled code for the checkbox:
    <html>
    <head>
    <script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#subscribe_toggle").on('click', function() {
            toggleContainer();
        });
        toggleContainer();
    });
     
    function toggleContainer() {
        jQuery("#subscribe_toggle").toggle(jQuery(this).is(":checked"));    
    }
    </script>
    
    </head>
    
    <body>
    
    
    <input type="checkbox" id="subscribe_toggle" value="1" />
    <div id="subscribe_container" style="display:none;">
    <p>This content will only show when the checkbox is checked</p>
    </div>
    
    </body>
    </html>
    
  • fc_adamfc_adam FoxyCart Team
    @allthenamesweretaken,

    Sorry that's my bad - the toggleContainer function should look like this:
    function toggleContainer() {
        jQuery("#subscribe_container").toggle(jQuery("#subscribe_toggle").is(":checked"));    
    }
    
  • sottwellsottwell Member
    edited July 2015
    I couldn't get this to work, so I found this instead:

    <input type="checkbox" id="subscribe_toggle" value="1" /> Toggle This
    <div id="subscribe_container" style="display:none;">
    <p>This content will only show when the checkbox is checked</p>
    </div>

    <script src="jquery.min.js"></script>
    <script type="text/javascript">
    $('#subscribe_toggle').change(function() {
    $('#subscribe_container').toggle(this.checked);
    });
    </script>
  • fc_adamfc_adam FoxyCart Team
    @sottwell,

    Keep in mind that your approach will only work when the checkbox is changed. If the checkbox is checked on page load for some reason, then the subscribe_container won't be displayed.
Sign In or Register to comment.