How can I have more than one product on the same page?

Question

Using Craft Commerce, I would like to offer more than one product on my _entry template.

For example, let's say I am selling a wagon. I have a drop down of variants for color:

<label>Choose Color</label>

<select name="purchasableId" class="form-control">
    {% for purchasable in product.variants %}
        <option {% if purchasable.stock <= 0 and purchasable.unlimitedStock == false %}disabled {% endif %} value="{{ purchasable.purchasableId }}">
        {{ purchasable.wagon.label }} &ndash; {{ purchasable.price|currency(cart.currency) }}
        </option>
    {% endfor %}
</select>

Now I would also like to offer a warranty. There could be different prices for different plans (variants) as well:

<label>Choose Warranty</label>

<select name="purchasableId" class="form-control">
    {% for purchasable in product.variants %}
        <option {% if purchasable.stock <= 0 and purchasable.unlimitedStock == false %}disabled {% endif %} value="{{ purchasable.purchasableId }}">
        {{ purchasable.warranty.label }} &ndash; {{ purchasable.price|currency(cart.currency) }}
        </option>
    {% endfor %}
</select>

EDIT

Each "Warranty" is it's own section and has it's own product type within Commerce. You could purchase a warranty by visiting mysite.com/warranties/my-warranty or mysite.com/wagons.

An example might look like mysite.com/warranties/basic. That page would have information about the "basic" warranty along with the option to add to cart.

In theory, you could purchase a warranty without purchasing a wagon.

I also want to (somehow) allow the user to purchase a warranty when they purchase a wagon. That's not to say I must do it this way, I am open to ideas. Currently both products are available together.

EDIT 2

Here is what my current form looks like on my product page. Is there a naming convention I should follow to pass multiple options to the updateCart method? If I make both fields have the name of purchasableId, as expected, the system just grabs the last element. In my case it's the warranty product.

Since I would like to make the warranty a required field, maybe I need to restructure how I am selling wagons? I don't want to add to the variant list of my wagon product, that would get out of hand quickly.

Or, perhaps it's just a "Related Products" title and a link to the warranties page?

<form method="post" action="" accept-charset="utf-8">
<fieldset>
    <input type="hidden" name="action" value="commerce/cart/updateCart">
    <input type="hidden" name="redirect" value="commerce/cart">
    <input type="hidden" name="qty" value="1">
    {{ getCsrfInput() }}
</fieldset>

<fieldset>
    <label for="purchasableId">Choose Color</label>
    <select name="purchasableId" class="form-control">
        {% for purchasable in product.variants %}
            <option {% if purchasable.stock <= 0 and purchasable.unlimitedStock == false %}disabled {% endif %} value="{{ purchasable.purchasableId }}">
            {{ purchasable.title }} &ndash; {{ purchasable.price|currency(cart.currency) }}
        </option>
    {% endfor %}
    </select>
</fieldset>

<fieldset>
    {% set warranties = product.warrantyOptions %}  {# This is the products field #}
    <label for="warranty">Choose Warranty</label>
    <select name="warrantyId" class="form-control">
        {% for warranty in warranties %}
            {% for purchasable in warranty.variants %}
                <option {% if purchasable.stock <= 0 and purchasable.unlimitedStock == false %}disabled {% endif %}
                value="{{ purchasable.purchasableId }}">
               {{ purchasable.title }} &ndash; {{ purchasable.price|currency(cart.currency) }}
               </option>
           {% endfor %}
       {% endfor %}
    </select>
</fieldset>

Answer 1

Currently only one purchasableId can be added to the cart in a single form action. To get around this limitation you would need to use ajax to send multiple http requests (to add both items) OR use a plugin like MultiAdd: https://github.com/engram-design/MultiAdd