Product Options with Quantities

LucyILucyI Member
I am designing a form for purchasing concert season subscriptions. Subscriptions are grouped by number of concerts purchased together, for instance a 6-concert series or a 5-concert series. Within each series there are different sections/prices that I'm setting up as product options. I'd like to structure this so that within a series they can purchase a quantity from any of the sections at the same time. How would I set the parameters for the quantity inputs so that they connect to the section option and also the main series product?

Here is my code so far for the 6-concert series. (Not working.)

<form action="https://###.foxycart.com/cart" method="post" accept-charset="utf-8">
<h3>Complete Series: 6 Concert Subscription 15% Discount</h3>
<input type="hidden" name="name" value="6 Concert Subscription">
<input type="hidden" name="price" value="">
<input type="hidden" name="code" value="6concertSub">

<label>Section A <input name="quantity" value="0" type="number" value="A{p:312.00|c+SecA}"/></label>
<label>Section B <input name="quantity" value="0" type="number" value="B{p:264.00|c+SecB}"></label>
<label>Section C <input name="quantity" value="0" type="number" value="C{p:214.00|c+SecC}"></label>


PS Although these are referred to as subscriptions, they are not sold as actual recurring subs. Just one-time sales.
Tagged:
Comments
  • fc_adamfc_adam FoxyCart Team
    @Lucyl,

    Thanks for posting. Before we suggest some potential approaches, I want to make sure I'm on the same page for what you're wanting to achieve.

    You mentioned that you're wanting to allow the customer to order quantities from any of the sections at the same time - should the total quantity from each section only be as many as the "subscription" allows? So if someone is purchasing the 6 concert subscription, should their sections only be allowed to be a combined total of 6?

    Or alternatively - can they be any number of quantity on the individual sections, but you're wanting to ensure that it shows in the cart what the quantity of each individual section is, as well as the quantity of the "subscription" as a whole, separately to the section totals?
  • LucyILucyI Member
    Hi @fc_adam Thanks for responding so quickly to this and my other post. Let me try to clarify (for my own sake even!) what the requirements are for these ticket sales.

    There are two discounted series: 1.) the 6 concert series 2.) the 3-5 concert series. I'm thinking of these as two distinct products, each with a different set of options, (but maybe there is a better way to think about them.)

    Single tickets at full price are not sold from this site, so although the discount % is part of the copy, we never actually have to apply discounts; we just set different prices for the different series and sections.

    6-CONCERT SERIES:
    There are only 6 concerts in the season total, so for this the actual concerts don't have to be chosen, only the section and the quantity. The simplest purchase for this series would be quantity of 1 series, section A. Although this is a quantity of 1, this buys you 6 tickets in section A; one for each concert. A more complicated sale would involve buying quantities in different sections, say 1 for section A and 1 for Section B. (This would be 12 tickets, 2 for each concert, but different sections.)

    Product: 6-Concert Series
    Options:
    Section A, quantity
    Section B, quantity
    etc.
    Total adds the quantities from all options


    3-5-CONCERT SERIES:
    This series has more complex rules. You have to buy tickets for 3 or more different concerts (can't be 3 of the same concert), and all 3 have to be in the same section. The concerts don't all have the same price, so we need to choose individual concerts and have that price added to the total. And there needs to be a way to prevent purchase if there aren't at least three concerts chosen.

    Product: 3-5-Concert Series
    Options:
    Section A, quantity
    __Concert 1 __Concert 2 __Concert 3 etc. <-- these would be checkboxes, each price added to total
    Section B, quantity
    __Concert 1 __Concert 2 __Concert 3
    Section C, quantity
    __Concert 1 __Concert 2 __Concert 3
    etc.

    Would it be better to treat these as products rather than options? For instance each section is a distinct product?
  • LucyILucyI Member
    Just to update you: I have decided to make each section a different product, instead of an option. This (I hope) will simplify things.

    So the key now is for the 3 to 5 concert series, where the concerts have to be chosen, to make the total change depending on which concerts are chosen, and to make sure they choose between 3 to 5 concerts.
  • fc_adamfc_adam FoxyCart Team
    @Lucyl,

    Thanks for spelling that out in more detail - that's really helpful! I think I have a better understanding now.

    Splitting the section out into different products would definitely make the most sense - you can make use of product bundling to keep them all linked together. Bundling works by linking child products to a parent product. Taking the example form you had in your original post - that would look like this:
    <h3>Complete Series: 6 Concert Subscription 15% Discount</h3>
    <form action="https://###.foxycart.com/cart" method="post" accept-charset="utf-8">
    <input type="hidden" name="1:name" value="6 Concert Subscription">
    <input type="hidden" name="1:price" value="0">
    <input type="hidden" name="1:code" value="6concertSub">

    <input type="hidden" name="2:name" value="Section A">
    <input type="hidden" name="2:price" value="312">
    <input type="hidden" name="2:code" value="6concertSubSecA">
    <input type="hidden" name="2:parent_code" value="6concertSub">
    <label>Section A $312: <input name="2:quantity" value="0" type="number"/></label>

    <input type="hidden" name="3:name" value="Section B">
    <input type="hidden" name="3:price" value="264">
    <input type="hidden" name="3:code" value="6concertSubSecB">
    <input type="hidden" name="3:parent_code" value="6concertSub">
    <label>Section B $264: <input name="3:quantity" value="0" type="number"/></label>

    <input type="hidden" name="4:name" value="Section C">
    <input type="hidden" name="4:price" value="214">
    <input type="hidden" name="4:code" value="6concertSubSecC">
    <input type="hidden" name="4:parent_code" value="6concertSub">
    <label>Section C $214: <input name="4:quantity" value="0" type="number"/></label>
    </form>
    The 3-5 concerts would take a similar approach - but would need some javascript validation for ensuring the minimum quantities are met, and would also require a slightly different approach for the form.

    Could you clarify for me this point:
    You have to buy tickets for 3 or more different concerts (can't be 3 of the same concert), and all 3 have to be in the same section
    Am I correct in summarising that the customer has to select 3-5 concerts, and that all of those concerts have to be for the same section. So they could select to attend Concerts 1, 2 and 4 - and all of those concerts have to be in the same section. They couldn't select concerts 1 and 4 in section A and concert 2 in section B?

    Or is it more that they can only select a single section per concert they choose? So they can't request 2 in section A and 2 in section B for concert 1?
  • LucyILucyI Member
    @fc_adam First off let me just say THANKS! for staying with me. I can't imagine wading through this complexity and I so appreciate the stellar customer service that FoxyCart has always provided.

    I have the series set up now with each section being a distinct product. For the 3-5-concert series, I now have the concert selection as modifiers, and have used your jquery snippet to add up the checked concert prices and create a total, so that's working beautifully.

    Now I just need to restrict purchase to three or more concerts, and yes all from the same section. (And I suppose to be really user-friendly, if they choose 6 concerts I should direct them to the 6-concert series at a lower price.)

    But each section is now an individual product, so maybe that helps simplify. A complexity: they can buy a series in one section, and another series in a different section (for instance to give as a gift), so all sections are available on the page at the same time.

    You had mentioned in my other post either preventing the submit, or having a message in the cart. I'd prefer to prevent the submit, and I do have jquery loading in this page for the modifier totals. So - would your solution for this involve jquery?
  • fc_adamfc_adam FoxyCart Team
    @Lucyl,

    Awesome - sounds like you're making great progress!

    The validations will work with jQuery on your add to cart page. Is this page publicly available by any chance? It would be very helpful for building out the javascript to be able to interact with the page itself - less room for error then. If not - if you could paste the HTML that makes up the add to cart for the 3-5 series, that'd be helpful too.
  • fc_adamfc_adam FoxyCart Team
    edited May 1
    @Lucyl,

    Thanks for whispering that link. I see you've got all of the products in a single form. While that is a valid approach - in terms of managing products and validating quantities - it would be a bit easier to break each different product into it's own form. So the 6 concert series would be one form, and then each section for the 3-5 series would be it's own form, with it's own submit button. Customers will still be able to add multiple series to the cart (but just one at a time), and with the Sidecart they'll stay on the same page - but by breaking them up it just makes it easier to manage the validations.

    After doing that - you could add some validations like this:
    <script>
    var FC = FC || {};
    FC.onLoad = function () {
    FC.client.on("cart-submit", function(params) {
    var series = 0;
    var section = "";
    for (key in params.data) {
    var attr = decodeURIComponent(key).replace(/\d+:/, "");
    if (attr == "code") {
    var code = params.data[key];
    if (code.indexOf("6concertSub") == 0) {
    series = 6;
    } else if (code.indexOf("choice") == 0) {
    series = 3;
    section = code.replace("choiceSec", "");
    }
    }
    }
    if (series == 3) {
    var checkboxes = $(params.element).find("input[type='checkbox']:checked").length;

    if (checkboxes < 3) {
    alert("Please select at least 3 concerts within Section " + section + ".");
    return false;
    } else if (checkboxes > 5) {
    alert("You can only have a maximum of 5 concerts in Section " + section + ". Alternatively, you may want to consider the 6 concert series.");
    return false;
    }
    }
    });
    }
    </script>
    The code above runs after the customer tries to add to cart, but before the product is actually added. You can then stop it from happening if needed. It works by looping through the data in the add to cart, and working out which sort of product it is. If it's for a 3-5 series product, it then calculates how many checkboxes are checked and stops the add to cart if it's less than 3 or more than 5.
  • LucyILucyI Member
    Thank you. That's part way there!

    It's not picking up the section variable in the alerts, and it's not re-counting checkboxes after an alert is shown and the number of checkboxes is changed. I'm just starting to look into why those two issues, but if you have any hints that would be awesome.
  • fc_adamfc_adam FoxyCart Team
    @Lucyl,

    Looking at your page - I see you've added the javascript there, and you've split the 6 series into a separate form from the 3-5 series. The javascript does rely on each of the 3-5 series products being in a separate form as well, so each section would be it's own form. Or did you specifically need them to all be in the same form?
  • LucyILucyI Member
    Ah, I misunderstood. That's fine to have separate forms. Better actually. I just need to make smaller buttons and line them up with the quantity inputs... And the code seems to be working perfectly. Thank you so much. Once I get everything cleaned I'll post the html here so others can utilize this.
  • fc_adamfc_adam FoxyCart Team
    @Lucyl,

    Awesome! I'm glad that got it working as expected! Good luck with the last portions, it's a great looking add to cart page.

    Quick note for you - the two radio inputs for the session times all share the same id that the label references - so if you click on one of those labels, no matter which one, it'll interact with the first instance of the radio inputs at the top. You'll want to ensure each one has a unique ID that the labels can reference in their for attribute.
  • LucyILucyI Member
    Oh thanks, I do have fix those duplicate IDs! But, for me the radio buttons work properly (at least on Chrome), because the names are unique for each series and section. Do you see a different behavior? I always thought it was the name attribute that makes the magic radio button relationship...
  • fc_adamfc_adam FoxyCart Team
    @Lucyl - if you click on the radio inputs directly it works fine - but if you click on the labels directly, that's when it interacts with the first inputs on the page rather than whichever input the label is next to.
    I always thought it was the name attribute that makes the magic radio button relationship...
    Yeah, that can be a common point of confusion. The for attribute will be linked via the ID attribute rather than the name - some details on that here.
  • LucyILucyI Member
    Thank you for that clarification! So often in examples in the wild you see the for attribute, the ID, and the name all set to exactly the same value -- so the specific way they all relate is obscured. (Actually think you may have given me a fix for an issue I'm having with a completely different project.)

Sign In or Register to comment.