4

Expresso Store's default behavior is to output modifiers as menus. This makes sense when the product is a T-Shirt and the variations are predictable: you have a modifier for size (with options for S, M, L) and a modifier for Color (red, orange, yellow, green). Expresso Store outputs each modifier as a menu, and the built-in Javascript updates the price variable and appropriate SKU so that the correct item is added to the cart when the form is submitted.

But this UI isn't great for things like tickets, where you want to display the modifiers all at once. Suppose each product is a single production, with modifiers for dates and seating. How do you output buttons (essentially radio buttons) so the user can see all their options before clicking anything?

  • (FYI I have this solved and I'm going to answer my own question in 7 hours... Just wanted to document it somewhere useful). For now, here's the jSFiddle. – James Muspratt Feb 1 '13 at 15:43
  • 7 hours?! How precise. Is there some sort of rate limit since you are new to SE? Normally you can answer your own question right away. – Adrian Macneil Feb 1 '13 at 16:14
  • Yep. If your Stack score is under a certain level you have to wait seven hours... – James Muspratt Feb 1 '13 at 18:10
4

Answering my own question as I think this is useful. Adrian at Expresso helped me out.

Basically, we output the menus and also output custom buttons. Then we just hide the menus with CSS. This presumably avoids writing lots of new custom Javascript or introducing new dependencies to the way the form is processed by Store.

See this jsFiddle

EE code

{!-- EE/Store code for the <select>s that actually control what gets added to the Cart: --}
{modifiers}
    <select id="{modifier_input_name}" name="{modifier_input_name}">
        {modifier_options}
            <option value="{option_id}">
            {option_name} {if price_mod_val} ({price_mod}) {/if}
            </option>
        {/modifier_options}
    </select>
{/modifiers}

<!-- EE/Store code for radio buttons:-->
{modifiers}

<ul class="radio-set">

    {modifier_options}
        <li><a class="radio" data-select="{modifier_input_name}" data-option-val="{option_id}" href="#">{option_name} {if price_mod_val} ({price_mod}) {/if}</a></li>
{/modifier_options}
    </ul>
{/modifiers}

jQuery Code

$(document).ready(function() {

    // highlight the first button, since it corresponds to the (default) <option> in the <select>
    $("ul.radio-set li:first-child a.radio").addClass("active");


    // button clicks: we only need the buttons to change the <select>, not the other way around (since the select will be hidden by CSS
    $('a.radio').click(function() {

        var this_button = $(this);
        var this_ul = this_button.closest("ul.radio-set");
        var neighbor_buttons = this_ul.find('a.radio');

        // remove highlights from all buttons in this group
        $(neighbor_buttons).removeClass("active");

        // highlight this buton
        this_button.addClass("active");

        // get the corresponding select menu
        var select_id = $(this_button).data("select");
        var select = "#"+select_id;

        // get the value of the corresponding option
        var opt_val = $(this_button).data("option-val");

        // Update the select menu with the option content and trigger change() for Store
        $(select).val(opt_val).trigger('change');

        return false;

    });

});
| improve this answer | |
3

What about:

{modifiers}
    {modifier_name}:
    {modifier_options}
        <label><input type="radio" name="{modifier_input_name}" value="{option_id}" /> {option_name}</label>
    {/modifier_options}
{/modifiers}
| improve this answer | |
  • Definitely a great choice if you are happy with the look of standard radio buttons. – Adrian Macneil Feb 2 '13 at 3:59

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.