Expresso store multiple product modifiers

Question

The main issue I’m having, and this is a general issue, is because the products are part of a range. In essentially the same way as an iPad where you have options of 16gb, 32gb or 64gb memory with wi-fi or wi-fi & mobile options our ranges work in a similar fashion, some with far more complex options.

As with the iPad, it can be said there are 6 different products reflecting the options, our products are similar and instead of showing, for example, 6 products that all look the same from the outside we’re promoting the product range and have an options panel so the end user can select their requirements and a product model is defined for them.

This is part of a complete redesign I am working on but the current site has this functionality working (My boss liked it so much he wanted me to add it before I developed the new site!!) and you can see it in the left hand panel here http://www.picotech.com/picoscope5000-flexibleresolution.html

It’s built on jQuery so is all client side and just passes a catalogue number to the cart. The problem I’m having is I can’t seem to replicate that function. There are some models that are set from 1 option that would work with a product modifier but there are many with more than 1 option and it is not (from what I can gather?!) possible to use multiple product modifiers.

Any solution would be greatly appreciated.

Further more, from what I’m noticing one entry is being rendered in the JavaScript code that’s generated, Is that what is used to send info to the cart??? If I was able to generated an array of all the models in the range then I'm hoping that would work but I'm unsure as to how to do that.

Much appreciated Jon

Answer 1

Yes it is possible to use multiple modifiers as long as there's only a single option selectable per modifier - so as per your example, there is 1 product called iPad, that has different modifiers and options to create the variants, but an iPad can't be a 16Gb and a 32Gb model - obviously. Here's an example of the EE Entry in the backend:

Then on the frontend:

Even showing availability for the combination selected:

The important part is that your product template is assigning all the modifiers/options with the correct names, so when your product form is submitted, Store knows what variants (modifiers/options) the customer has selected.

{exp:store:product entry_id="{entry_id}" return="/checkout/basket"}
    ...
    {modifiers}
        {if "{modifier_name}" != ""}
                <label>
                    <select id="{modifier_name}" name="{modifier_input_name}" class="dropdown required" tabindex="1">
                             <option value="">-- Select {modifier_name} --</option>
                         {modifier_options}
                             <option value="{option_id}" {if "{modifier_name}" == "Colour"} itemprop="color"{/if}>{option_name}</option>
                         {/modifier_options}
                    </select>
                </label>
        {/if}
    {/modifiers}
{/exp:store:product}

Specific documentation link: https://exp-resso.com/docs/product_form_tag.html#product_form_tag_example

Answer 2

OK, thanks again to Peter for answering my question. My challenge is that no two products are the same and some with many variants. To create the price options modules that can be seen on the current site (http://www.picotech.com/highest-performance-oscilloscopes.html) and are being plugged into exp:resso store I created a load of conditional jQuery scripts that changed the info when requested. My solution was a lot easier than I thought, as opposed to creating product ranges with a modifier creating each product I stuck with what I already had in a full list of products. Then upon discovering the entry_id in the hidden input field was what store was looking for to update the cart I added the jQuery below to my conditionals and all was saved.

$("input[name='entry_id']").val("{store_info}{entry_id}{/store_info}");