First off, I'd like to thank Jeremy for his help.
I have a set of add-on products that go along with my primary product. The options are a radio group.
I am using Multi-Add to tie everything together - and it's all working great. I'm able to add the primary and optional products to the cart.
Where I am hung up is, because I have a radio group - no matter which option I choose, I am always ending up with the last option being chosen.
Which makes perfect sense since that's the last radio in the group that gets picked up.
Here is what I have so far:
...
// items[1][qty] is a <select> input for the primary product
...
{% for foo in products %}
<div class="radio">
<label>
<input type="radio" name="items[2][qty]" value="1">
{{ foo.title }} – {% if foo.defaultVariant.price == 0 %} Included with registration {% else %} {{ foo.defaultVariant.price|currency(cart.currency) }}{% endif %}
</label>
<input type="hidden" name="items[2][purchasableId]" value="{{ foo.defaultVariant.purchasableId }}">
</div>
{% endfor %}
As you can see whatever the last radio input is, will be the value that is picked up by Craft regardless of what the user has actually chosen.
So I thought since each radio is a product (with no variants), I could just use the loop index:
<input type="hidden" name="items[{{ loop.index }}][purchasableId]" value="{{ foo.defaultVariant.purchasableId }}">
Which works, but the loop will start at 1
each time. I am hung up on how I can start the loop at a specific number. Or, perhaps there is a better way?
If I were using checkboxes, I'd only have one option per product/input name.
I have also tried using a <select>
element, but I get hung up on how I can offer a "No thanks" option.
<select name="items[2][purchasableId]" class="form-control required">
<option value="">Select</option>
{% for foo in products %}
<option value="{{ profile.defaultVariant.purchasableId }}">
{{ foo.title }} – {% if foo.defaultVariant.price == 0 %} Included with registration {% else %} {{ foo.defaultVariant.price|currency(cart.currency) }}{% endif %}
</option>
{% endfor %}
</select>
<input type="hidden" name="items[2][qty]" value="1">
Which also works well, but if the user does not choose an option, because I am passing a value of 1
with the hidden input, I get an error that I am attempting to use an invalid purchasable ID. Which also makes perfect sense.
I feel like I am so close, but just can't quite see clear enough to know what to do.
Thank you for any suggestions!