NopCommerce 3.4中商品详情页面单选框、复选框的美化

先上图给大家看看效果，点这里打开网站（后期可能会找不到这个商品，现在再测试阶段）

现在你能看到的这个页面中，尺寸、文本描述是单选框（属性是我乱写的名字），上门安装是复选框。效果就看到这里，请君跳过图片，开始看实现过程：

NopCommerce的属性View全部在Product下面_ProductAttributes.cshtml生成的，所以，整个的操作都是在_ProductAttributes.cshtml这个文件中。

打开这个文件，首先里面会有它生成各种控件用的一大段forearch,如图

NopCommerce 3.4中商品详情页面单选框、复选框的美化

他这个里面一个Case就是一种控件，我重写的是单选和复选，所以改他的RadioList和CheckBox就好了，先来看单选的代码，说明在注释中

 case AttributeControlType.RadioList:
                {
                    <div style="min-height: 25px;">
                        @*单选框他会有很多个选项，foreach，高手忽略这句*@
                        @foreach (var pvaValue in attribute.Values)
                        {
                            <div class="item @(pvaValue.IsPreSelected?Html.Raw("selected"):Html.Raw(""))">
                                @*把他的单选按钮给通过Display:none隐藏起来*@
                                <input id="@(controlId)_@(pvaValue.Id)" type="radio" name="@(controlId)" value="@pvaValue.Id" checked="@pvaValue.IsPreSelected" style="display: none" />
                                @*下面是给用户显示的被美容过的单选按钮，我没法往出来贴CSS，想办法完了给大家一个下载地址吧*@
                                <a title="@pvaValue.Name @(!String.IsNullOrEmpty(pvaValue.PriceAdjustment) ? " [" + pvaValue.PriceAdjustment + "]" : null)" href="#" class="radio_a">
                                    @if (!string.IsNullOrEmpty(pvaValue.PictureUrl))
                                    {
                                        @*下面是商品属性所关联的图片*@
                                        <img src="@pvaValue.PictureUrl" style="width: 15px;height: 15px;" />
                                    }
                                    <i>@pvaValue.Name @(!String.IsNullOrEmpty(pvaValue.PriceAdjustment) ? " [" + pvaValue.PriceAdjustment + "]" : null)</i>
                                </a><b></b>
                            </div>
                        }
                    </div>
                }
                break;

单选按钮