4

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

enter image description here

5

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:

enter image description here

Then on the frontend:

enter image description here

Even showing availability for the combination selected:

enter image description here enter image description here

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

  • Thanks @PeterLewis, well explained. I wish I had seen an explanation like this upon delving into store, its one of the only things that lets it down in that there is little to explain the product entry in the back-end. Some of our products are a little bit more difficult to add in this way. For example if you look at the images I've just added above you'll see that each of the bandwidth options has a different pair of hardware options. I have though just resolved the issue using jQuery to alter the entry_id in the hidden input fields which I'll post shortly. Many thanks again Peter – Jonathan Green May 21 '14 at 15:48
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}");

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.