Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Ajay Karwal 31 posts 149 karma points
    Sep 22, 2015 @ 09:46
    Ajay Karwal
    0

    Help organising Radio Button groups for a product selection matrix.

    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.

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Sep 22, 2015 @ 10:18
    Dennis Aaen
    0

    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

  • Ajay Karwal 31 posts 149 karma points
    Sep 22, 2015 @ 10:51
    Ajay Karwal
    0

    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.

Please Sign in or register to post replies

Write your reply to:

Draft