Foxy Forum Status

We're no longer responding to questions via our forum, but we will keep it up for historical reasons. If you can't find the answer you're looking for, please visit our knowledge base or contact us. If there's enough interest in the future, we may bring the forum back.

Different product options controlled in dropdown

KyleBischKyleBisch Member
in Help edited January 2014
I'm trying to add a form that can submit a variety of similar, but different items to the cart. The goal is that the customer can select item 1, item 2 or item 3, (which all have a slightly different name, price, image, and description) but can be submitted from the same dropdown form.

I've tried using the product modifiers, but those limit me to code, category, weight and price. I need to have different names, images, and custom options (description).
  • I think I figured out a solution on my own by designating various elements separately and adding them all together with Javascript.

    Thoughts on this:
    <input type="hidden" id="ShadowBulk" value="&price=37.95&weight=.4&image="; />

    <select id="ShadowDropdown">
    <option value=" E&code=Shadow E&description=Listen Only Earpiece for Motorola 2.5m Right angle 12inch" />Shadow E 2.5mm Right angle 12"</option>
    <option value=" F&code=Shadow F&description=Listen Only Earpiece for Motorola 2.5m Right angle 42inch">Shadow F 2.5mm Right angle 42"</option>
    <option value=" C&code=Shadow C&description=Listen Only Earpiece for Motorola 3.5m Right angle 12inch">Shadow C 3.5mm Right angle 12"</option>

    <select name="Tube" id="ShadowTube">
    <option value="&Tube=Clear Tube">Clear tube</option>
    <option value="&Tube=Black Tube">Black tube</option>

    <a onclick="this.href=getElementById('ShadowDropdown').value+getElementById('ShadowTube').value+getElementById('ShadowBulk').value" href="">
    Add to Cart!</a>

    I've got a hidden element that contains all of the product specs that are the same (id=ShadowBulk), a dropdown that contains the differing bits (id=ShadowDropdown) and a second dropdown for another option (id=ShadowTube). All three of these values get combined together into a single URL when the add to cart link is clicked.

    Is there any reason this won't work? Have I overlooked anything?
  • winstonwinston FoxyCart Team

    Looking over this, it's a pretty clever hack. I can't see anything obvious that should go wrong, but you will definitely want to test that in as many browsers as you can to ensure it's working well!
  • fc_adamfc_adam FoxyCart Team

    Interesting approach.

    If you're looking for alternatives to this - the other approach would be to use the ability to add multiple products to the cart at once, and then dynamically change the quantity attribute depending on what the customer selects in the dropdown.

    So for example:
    <input type="hidden" name="1:name" value="Shadow A" />
    <input type="hidden" name="1:price" value="12" />
    <input type="hidden" name="1:quantity" class="fc_quantity" value="0" />
    <input type="hidden" name="2:name" value="Shadow B" />
    <input type="hidden" name="2:price" value="11" />
    <input type="hidden" name="2:quantity" class="fc_quantity" value="0" />
      <option value="1">Shadow A</option>
      <option value="2">Shadow C</option>
    jQuery("select").change(function() {
      jQuery("input[name$='" + this.value + "':quantity").val(1);

    It's a basic example, but all of the products are described in full, but given a quantity of 0 (so they're not added to the cart), then whenever the select dropdown changes, it sets whatever it's changed to have a quantity of 1.

    You'll also want to set at least one of the products to a quantity of 1 to start with, the one that is shown by default in the select would make the most sense, so that if the customer just clicked add to cart then it worked correctly - or you could make the first option in the select object a blank one so they needed to change it.
Sign In or Register to comment.