help organising radio button groups for a product selection matrix - Razor

Ajay Karwal 31 posts 149 karma points

Sep 22, 2015 @ 09:46

Help organising Radio Button groups for a product selection matrix.

Razor

Umbraco 7

I'm a little stuck trying to create a product selection matrix (selling mobile phone cases) where the user selects their phone model and is then presented with some colour options.

This is my content structure enter image description here

This is the output I've currently got Current Output

And this is the output I'm trying to achieve DESIRED structure

My code for rending this is

@{var productList = Model.Content.Children.Where("Visible"); }

@foreach (var product in productList)
{
    <div class="radio">
        <label><input type="radio" name="model" value="@product.Name"> @product.Name</label>
    </div>

    var skuList = product.Children.Where("Visible");
    if (skuList.Any())
    {
        <div style="border:1px solid red;">
            @foreach (var sku in skuList)
            {
                <div class="radio">
                    <label><input type="radio" name="sku" value="@sku.GetPropertyValue("skuUK")"> @sku.Name</label>
                </div>
            }
        </div>
    }
}

The idea is that if the user selects iPhone6, the black and yellow options will show and if the Samsung is selected only the Pink option will be shown.

Can anyone suggest a different (better) way to achieve this.

I'm thinking it may be achieved with a Helper method but I'm not sure how to do this.

Copy Link

Dennis Aaen 4499 posts 18254 karma points admin hq c-trib

Sep 22, 2015 @ 10:18

Hi Ajay,

What if you are doing something like this would this solve your data output problem.

@{var productList = Model.Content.Children.Where("Visible"); }

@foreach (var product in productList)
{
    <div class="radio">
        <label><input type="radio" name="model" value="@product.Name"> @product.Name</label>

        @{ 
                var skuList = product.Children.Where("Visible");
                if (skuList.Any())
                {
                    <div style="border:1px solid red;">
                        @foreach (var sku in skuList)
                        {
                            <div class="radio">
                                <label><input type="radio" name="sku" value="@sku.GetPropertyValue("skuUK")"> @sku.Name</label>
                            </div>
                        }
                    </div>
                }
        }
    </div>
}

Hope this helps,

/Dennis

Copy Link

Ajay Karwal 31 posts 149 karma points

Sep 22, 2015 @ 10:51

That actually gave the same sort of markup as before.

I've pretty much got the solution by repeating the first foreach; once for the product, and again for the sku's

<fieldset id="modelSelect">
    @foreach (var product in productList)
    {
        <div class="radio">
            <label><input type="radio" data-sku-group="@product.Id" name="model" value="@product.Name"> @product.Name</label>
        </div>
    }
</fieldset>
@foreach (var product in productList)
{
    var skuList = product.Children.Where("Visible");
    if (skuList.Any())
    {
        <fieldset class="sku-group" id="@product.Id" style="border:1px solid red; display:none;">
            @foreach (var sku in skuList)
            {
                <div class="radio">
                    <label><input type="radio" name="@product.Id" value="@sku.GetPropertyValue("skuUK")"> @sku.Name</label>
                </div>
            }
        </fieldset>
    }
}

I've added some ID's so I'm now able to show and hide as necessary via JS.

A clean enough solution I think.

Copy Link

is working on a reply...

Flag this post as spam?

Help organising Radio Button groups for a product selection matrix.