Question

我正在开发一个nopCommerce 3.70网站，我正在制作一个定制的MagaMenu下拉列表，

我完成它的方式是创建一个TopMenu.cshtml文件并将其放在我的主题文件夹下，所以它覆盖了默认值，我根据bootstrap的Maga菜单制作了一些自定义帮助器和CSS，并且用于移动设备我仍在使用DefaultClean的标准，但我的整个想法只适用于主页，所有其他页面都搞砸了菜单，我不知道为什么它不在其他页面上工作，这是我的代码。

        $(document).ready(function () {
            $(".dropdown").hover(
                function () {
                    $('.dropdown-menu', this).stop().fadeIn("fast");
                },
                function () {
                    $('.dropdown-menu', this).stop().fadeOut("fast");
                });
          
            $('.menu-toggle').click(function () {
                $(this).siblings('.top-menu.mobile').slideToggle('slow');
            });
            $('.top-menu.mobile .sublist-toggle').click(function () {
                $(this).siblings('.sublist').slideToggle('slow');
            });
        });

         .navbar-default {
             color: #fff;
             background-color: #4ab2f1;
             border-color: #4ab2f1;
         }

        .navbar-default .navbar-nav > li > a { color: #fff; }

        .navbar-default .navbar-nav > .dropdown > a .caret {
            border-top-color: #fff;
            border-bottom-color: #fff;
        }

        .navbar-default .navbar-brand { color: #fff; }

        .menu-large { position: static !important; }

        .megamenu {
            padding: 20px 0px;
            width: 100%;
        }

        .megamenu > li > ul {
            padding: 0;
            margin: 0;
        }

        .megamenu > li > ul > li { list-style: none; }

        .megamenu > li > ul > li > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.428571429;
            color: #333333;
            white-space: normal;
        }

        .megamenu > li ul > li > a:hover,
        .megamenu > li ul > li > a:focus {
            text-decoration: none;
            color: #262626;
            background-color: #f5f5f5;
        }

        .megamenu.disabled > a,
        .megamenu.disabled > a:hover,
        .megamenu.disabled > a:focus { color: #999999; }

        .megamenu.disabled > a:hover,
        .megamenu.disabled > a:focus {
            text-decoration: none;
            background-color: transparent;
            background-image: none;
            filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
            cursor: not-allowed;
        }

        .megamenu.dropdown-header {
            color: #4ab2f1;
            font-size: 18px;
        }

        @media (max-width: 768px) {
            .megamenu {
                margin-left: 0;
                margin-right: 0;
            }

            .megamenu > li { margin-bottom: 30px; }

            .megamenu > li:last-child { margin-bottom: 0; }

            .megamenu.dropdown-header { padding: 3px 15px !important; }

            .navbar-nav .open .dropdown-menu .dropdown-header { color: #fff; }
        }

@model TopMenuModel
@using Nop.Web.Models.Catalog;

@helper RenderMegaMenuCategoryLine(CategorySimpleModel category, int level)
{
    <li class="dropdown menu-large">
        <a class="dropdown-toggle" data-toggle="dropdown" href="@Url.RouteUrl("Category", new {SeName = category.SeName})">

            @category.Name
            @if (category.NumberOfProducts.HasValue)
            {
                <text> </text>@T("Categories.TotalProducts", category.NumberOfProducts.Value)
            }
        </a>

        @{
            //subcategories
            var subCategories = category.SubCategories.Where(x => x.IncludeInTopMenu).OrderBy(m => m.Name).ToList();

            if (subCategories.Count > 0)
            {
                var itemsPerColumn = subCategories.Count();

                while (itemsPerColumn % 4 != 0)
                {
                    itemsPerColumn = itemsPerColumn + 1;
                }

                itemsPerColumn = itemsPerColumn / 4;

                var subCategoryColumn = new List<CategorySimpleModel>();
                var lastItem = subCategories.Last();

                
                <ul class="dropdown-menu megamenu row">
                    @foreach (var subCategory in subCategories)
                    {
                        subCategoryColumn.Add(subCategory);

                        if (subCategoryColumn.Count() == itemsPerColumn || subCategory.Equals(lastItem))
                        {
                            @RenderMegaMenuSubCategories(subCategoryColumn)

                            subCategoryColumn = new List<CategorySimpleModel>();
                        }
                    }
                </ul>
            }
        }
    </li>
}

@helper RenderMegaMenuSubCategories(List<CategorySimpleModel> categories)
{
    <li class="col-sm-3">
        <ul>
            @foreach (var category in categories)
            {
                <li>
                    <a href="@Url.RouteUrl("Category", new {SeName = category.SeName})">

                        @category.Name
                        @if (category.NumberOfProducts.HasValue)
                        {
                            <text> </text>@T("Categories.TotalProducts", category.NumberOfProducts.Value)
                        }

                    </a>
                </li>
            }
        </ul>
    </li>
}

@helper RenderResponsiveCategoryLine(CategorySimpleModel category, int level)
{
    <li>
        <a href="@Url.RouteUrl("Category", new { SeName = category.SeName })">
            @category.Name
            @if (category.NumberOfProducts.HasValue)
            {
                <text> </text>@T("Categories.TotalProducts", category.NumberOfProducts.Value)

            }
        </a>
        @{
            //subcategories
            var subCategories = category.SubCategories;

            var levelClass = "";
            if (level == 0)
            {
                levelClass = "first-level";
            }
            if (subCategories.Count > 0)
            {
                <div class="sublist-toggle"></div>
                    <ul class="sublist @levelClass">
                        @foreach (var subCategory in subCategories)
                        {
                            @RenderResponsiveCategoryLine(subCategory, level + 1)
                        }
                    </ul>
            }
        }
    </li>
}


@{

    <div class="navbar navbar-default navbar-static-top hidden-sm hidden-xs">
        <div class="container">
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    @Html.Widget("header_menu_before")
                    @{
                        var rootCategories = Model.Categories.Where(x => x.IncludeInTopMenu).ToList();
                    }
                    @foreach (var category in rootCategories)
                    {
                        @RenderMegaMenuCategoryLine(category, 0)
                    }
                    @foreach (var topic in Model.Topics)
                    {
                        <li>
                            <a href="@Url.RouteUrl(" Topic", new {SeName = topic.SeName})">@topic.Name</a>
                        </li>
                    }

                    @Html.Widget("header_menu_after")
                </ul>
            </div>
        </div>
    </div>


}

@{
    //mobile menu responsive

    var rootCategoriesResponsive = Model.Categories.ToList();
    //name it "Categories" if we have only categories. Otherwise, "Menu"
    var responsiveMenuTitle = (rootCategoriesResponsive.Count > 0 && Model.Topics.Count == 0) ? T("Categories") : T("Menu");
    <div class="hidden-lg hidden-md  menu-toggle">@responsiveMenuTitle</div>
    <ul class="hidden-lg hidden-md  top-menu mobile">
        @Html.Widget("mob_header_menu_before")
        @foreach (var category in rootCategoriesResponsive)
        {
            @RenderResponsiveCategoryLine(category, 0)
        }
        @foreach (var topic in Model.Topics)
        {
            <li><a href="@Url.RouteUrl(" Topic", new { SeName=topic.SeName })">@topic.Name</a></li>
        }
        @Html.Widget("mob_header_menu_after")
    </ul>

}

代码全部在TopMenu.cshtml页面内，js用脚本标签包围，css用脚本标签包围，当然我在css中为@media做了转义字符。

任何有输入的人？

Answer 1

您的菜单问题是您不包括Bootstrap 。

没有版本的nopCommerce默认使用Bootstrap ，这就是为什么每当新版本发布时，开发人员都会发布启用了bootstrap的主题，如下所示：

Default Clean Theme Bootstrap version (Free)

您可以抓住上述主题并在此处添加菜单，也可以自己将其包含在主题中。如果您选择后一种方法，请将引导程序解压缩到主题的内容文件夹中。

然后，从主题的Shared文件夹中，在_Root.Head.cshtml文件中，添加对引导程序文件的引用，如下所示：

Html.AddScriptParts(ResourceLocation.Head, "~/Themes/THEMENAME/Content/BOOTSTRAPFOLDER/dist/js/bootstrap.min.js");
Html.AddCssFileParts(ResourceLocation.Head, "~/Themes/THEMENAME/Content/BOOTSTRAPFOLDER/dist/css/bootstrap.min.css");

我目前正在研究一个3.70 Bootstrap主题 - 这是我用来合并bootstrap的方法。

Answer 2

由于版本3.80 Html.AppendScriptParts("~/Administration/Scripts/bootstrap/bootstrap.min.js");使用Bootstrap作为管理区域...

所以简单地添加

TopMenu.cshtml

到<?xml version="1.0" encoding="utf-8"?> <?qbxml version="13.0"?> <QBXML> <QBXMLMsgsRq onError="stopOnError"> <InventoryAdjustmentAddRq requestID="13"> <InventoryAdjustmentAdd> <AccountRef> <FullName>Inventory Adjustments</FullName> </AccountRef> <TxnDate>2016-12-28</TxnDate>  <Memo></Memo> <InventoryAdjustmentLineAdd> <ItemRef> <ListID>TxnLID-9051</ListID> </ItemRef> <QuantityAdjustment> <QuantityDifference>0.00000</QuantityDifference> </QuantityAdjustment> </InventoryAdjustmentLineAdd> </InventoryAdjustmentAdd> </InventoryAdjustmentAddRq> </QBXMLMsgsRq> </QBXML> 20161228.19:16:51 UTC : QBWebConnector.SOAPWebService.do_sendRequestXML() : Request xml received. 20161228.19:16:51 UTC : QBWebConnector.SOAPWebService.ProcessRequestXML() : Processing request #2 20161228.19:16:51 UTC : QBWebConnector.SOAPWebService.ProcessRequestXML() : REQUEST: received from application: size (bytes) = 1191 20161228.19:16:51 UTC : QBWebConnector.SOAPWebService.ProcessRequestXML() : Sending request to QuickBooks. 20161228.19:16:51 UTC : QBWebConnector.SOAPWebService.ProcessRequestXML() : Response received from QuickBooks: size (bytes) = 379 20161228.19:16:51 UTC : QBWebConnector.SOAPWebService.ProcessRequestXML() : Sending response back to application. 20161228.19:16:51 UTC : QBWebConnector.SOAPWebService.do_receiveResponseXML() : *** Calling receiveResponseXML() with following parameters: 20161228.19:16:51 UTC : QBWebConnector.SOAPWebService.do_receiveResponseXML() : wcTicket="3388bbdc-18d0-a594-7dfd-70f68aac289e" 20161228.19:16:51 UTC : QBWebConnector.SOAPWebService.do_receiveResponseXML() : response = 20161228.19:16:51 UTC : QBWebConnector.SOAPWebService.do_receiveResponseXML() : XML dump follows: - <?xml version="1.0" ?> <QBXML> <QBXMLMsgsRs> <InventoryAdjustmentAddRs requestID="13" statusCode="3140" statusSeverity="Error" statusMessage="There is an invalid reference to QuickBooks Account "Inventory Adjustments" in the InventoryAdjustment. QuickBooks error message: Invalid argument. The specified record does not exist in the list." /> </QBXMLMsgsRs> </QBXML>

看看this responsive mega menu。

nopCommerce 3.70中的bootstrap Maga菜单

2 个答案: