Multiple options and multipliers

opus13opus13 Member
in Help edited May 2012
Been poking at this for a while, and i just can't seem to figure this out.

Ok, so i need to set up a cart for scheduled services. Let's say I am giving guitar lessons. I want to be able to let someone select 3, 6, or 12 months of prepayment, but then also select 1 or 2 times a week.

The 'months' dropdowns are no problem, but is there a way to have as second dropdown acting as a multiplier?
Comments
  • brettbrett FoxyCart Team
    Hi @opus13. I think the short answer is "javascript", but do you have a mockup of what you're after?

    (I think the long answer is also "javascript" though, fwiw :)
  • opus13opus13 Member
    hopefully this explains it a bit better.

    http://www.ultradeluxxe.com/storage/foxycart/

    obviously the first drop down can be a simple addition to the base price of the lesson. The trick is that the second field should multiply the first by 2.
  • fc_adamfc_adam FoxyCart Team
    @opus13,

    Making some small changes to your form (giving the two select inputs an id and removing your price modifiers) and adding in a total readonly field like this:
    <select name="Length of Time" id="length">
    	<option value="3 Months">3 months</option>
    	<option value="6 Months">6 months</option>
    	<option value="12 Months">12 months</option>
    </select>
    	<select name="Frequency" id="frequency">
    	<option value="1 per week">1 per week</option>
    	<option value="2 per week">2 per week</option>
    </select>
    <input type="text" readonly="readonly" value="0" id="total">
    <input class="submit" name="Buynow" type="submit" value="Add to Cart">
    

    Paste the following right before the closing </head> of your page template where this form lives:
    <script type="text/javascript">
    jQuery(document).ready(function() {
    	jQuery("select#length, select#frequency").change(function() {
    		updateTotal();
    	});
    
    	updateTotal();
    });
    
    function updateTotal() {
    	var length = parseInt(jQuery("select#length").val().match(/^(\d+)\s/)[1]);
    	var frequency = parseInt(jQuery("select#frequency").val().match(/^(\d+)\s/)[1]);
    	var price = 100;
    
    	switch(length) {
    		case 3:
    			price = 100;
    			break;
    		case 6:
    			price = 200;
    			break;
    		case 12:
    			price = 400;
    			break;
    	}
    
    	price *= frequency;
    	jQuery("input[name='price']").val(price);
    	jQuery("#total").val("$" + fcc._currency_format(price));
    }
    </script>
    

    That will update the hidden price input with the total figure, and also update a visible total field so your customers can see the total price before adding to cart.
  • opus13opus13 Member
    Thanks for the help, but I seem to be missing something.

    I've got the std ref's in the header, the additional script afterwards, have placed your cart form in the body, but nothing changes in the readonly field to start, and not when options are selected. clicking the add-to cart incites no response.



  • opus13opus13 Member
    Ok, got it to populate the readonly field (ff/chrome don't like to load the page locally, it seems).

    Next trick: No colorbox popping up :/
  • fc_adamfc_adam FoxyCart Team
    Can you link us to your page?
  • lancelance Member, Community Support Member
    @opus13 -

    The colorbox is definitely popping up on the sample page, though the code Adam provided is not shown there, so I suspect you're deploying elsewhere. If you could provide a link where we can take a look that would be a bug help.

    Lance
  • fc_adamfc_adam FoxyCart Team
    @opus13,

    You need to actually setup your FoxyCart add to cart form. The form elements I included above are just a part of an add to cart form - you'll need the name element and the wrapping form element to point to your store.
  • lancelance Member, Community Support Member
    @opus13 -

    Yes, you will need to wrap the existing elements in something like this - which I pulled directly from the first link in this thread. (Note, I replaced your domain name with YOURDOMAIN for privacy in case you ever want to remove references from this thread.
    <form accept-charset="utf-8" action="https://YOURDOMAIN.foxycart.com/cart"; method="post">
        <input name="name" type="hidden" value="Guitar Lessons" />
    
    ....
    
    </form>
    

    Hope this helps.

    Lance
  • opus13opus13 Member
    Ain't that the way -it's always the obvious things.

    Thanks for the assistance.
  • lancelance Member, Community Support Member
    Glad you got this figured out. Feel free to start a new thread as needed if other questions arise. I always love to see new FoxyCart powered stuff coming online!
Sign In or Register to comment.