Try your search with a different keyword or use * as a wildcard.
@model MenuItemModel
@using Nop.Core.Domain.Menus;
@{
var routeData = new { menuItemId = Model.Id, entityIdInput = Html.IdFor(model => model.ProductId), entityInfoBlock = "product-info", btnId = "btnRefreshEntity" };
}
<section class="content">
<div class="container-fluid">
<div class="form-horizontal">
<div class="row">
<div class="col-md-12 clearfix">
<div class="float-left">
@await Component.InvokeAsync(typeof(SettingModeViewComponent), new { modeName = "menu-advanced-mode" })
</div>
</div>
</div>
<div class="card card-default">
<div class="card-body">
<input type="hidden" asp-for="MenuId" />
<div class="form-group row">
<div class="col-md-3">
<nop-label asp-for="MenuItemTypeId" />
</div>
<div class="col-md-9">
<nop-select asp-for="MenuItemTypeId" asp-items="Model.AvailableMenuItemTypes" />
<span asp-validation-for="MenuItemTypeId"></span>
</div>
</div>
<div class="form-group row menu-item-row row-standard-link row-@((int)MenuItemType.StandardPage)">
<div class="col-md-3">
<nop-label asp-for="RouteName" />
</div>
<div class="col-md-9">
<nop-select asp-for="RouteName" asp-items="Model.AvailableStandardRoutes" />
<span asp-validation-for="RouteName"></span>
</div>
</div>
<div class="form-group row menu-item-row row-@((int)MenuItemType.Category)">
<div class="col-md-3">
<nop-label asp-for="CategoryId" />
</div>
<div class="col-md-9">
<nop-select asp-for="CategoryId" asp-items="Model.AvailableCategories" />
<span asp-validation-for="CategoryId"></span>
</div>
</div>
<div class="form-group row menu-item-row row-@((int)MenuItemType.Manufacturer)">
<div class="col-md-3">
<nop-label asp-for="ManufacturerId" />
</div>
<div class="col-md-9">
<nop-select asp-for="ManufacturerId" asp-items="Model.AvailableManufacturers" />
<span asp-validation-for="ManufacturerId"></span>
</div>
</div>
<div class="form-group row menu-item-row row-@((int)MenuItemType.Vendor)">
<div class="col-md-3">
<nop-label asp-for="VendorId" />
</div>
<div class="col-md-9">
<nop-select asp-for="VendorId" asp-items="Model.AvailableVendors" />
<span asp-validation-for="VendorId"></span>
</div>
</div>
@if (Model.AvailableMenuItemTemplates.Any())
{
<div class="form-group row menu-item-row row-template-select row-@((int)MenuItemType.Category) row-@((int)MenuItemType.Manufacturer) row-@((int)MenuItemType.Vendor)">
<div class="col-md-3">
<nop-label asp-for="TemplateId" />
</div>
<div class="col-md-9">
<nop-select asp-for="TemplateId" asp-items="Model.AvailableMenuItemTemplates" />
<span asp-validation-for="TemplateId"></span>
</div>
</div>
<div class="form-group row menu-item-row row-template-select row-@((int)MenuItemType.Category) row-@((int)MenuItemType.Manufacturer) row-@((int)MenuItemType.Vendor)">
<div class="offset-md-3 col-md-9">
<div class="callout">
<ul>
<li>@T("Admin.ContentManagement.Menus.MenuItem.Template.Simple.Description")</li>
<li>@T("Admin.ContentManagement.Menus.MenuItem.Template.Grid.Description")</li>
<li>@T("Admin.ContentManagement.Menus.MenuItem.Template.List.Description")</li>
</ul>
</div>
</div>
</div>
}
<div class="form-group row menu-item-row row-@((int)MenuItemType.TopicPage)">
<div class="col-md-3">
<nop-label asp-for="TopicId" />
</div>
<div class="col-md-9">
<nop-select asp-for="TopicId" asp-items="Model.AvailableTopics" />
<span asp-validation-for="TopicId"></span>
</div>
</div>
<div class="form-group row menu-item-row row-@((int)MenuItemType.Product)">
<div class="col-md-3">
<nop-label class="product-label" asp-for="ProductId" />
</div>
<div class="col-md-9 choose-entity-container">
<div id="product-info" class="entity-info">
<a asp-controller="Product" asp-action="Edit" asp-route-id="@Model.ProductId">@Model.ProductName</a>
</div>
<input type="hidden" asp-for="ProductId" />
<button type="submit" id="btnSelectProduct" onclick="javascript:OpenWindow('@(Html.Raw(Url.Action("MenuItemSelectProductPopup", "Menu", routeData)))', 800, 850, true);return false;" class="btn btn-primary">
@T("Admin.ContentManagement.Menus.MenuItem.Fields.Product.Select")
</button>
<button type="submit" id="product-remove" class="btn btn-danger">
@T("Admin.ContentManagement.Menus.MenuItem.Fields.Product.Remove")
</button>
<input type="submit" id="btnRefreshEntity" style="display: none" />
<span asp-validation-for="ProductId"></span>
</div>
</div>
@(await Html.LocalizedEditorAsync<MenuItemModel, MenuItemLocalizedModel>("menu-item-localized",
@<div class="form-group row">
<div class="col-md-3">
<nop-label asp-for="@Model.Locales[item].Title" />
</div>
<div class="col-md-9">
<nop-editor asp-for="@Model.Locales[item].Title" />
<span asp-validation-for="@Model.Locales[item].Title"></span>
</div>
<input type="hidden" asp-for="@Model.Locales[item].LanguageId" />
</div>,
@<div>
<div class="form-group row menu-item-row row-@((int)MenuItemType.Text) row-@((int)MenuItemType.StandardPage) row-@((int)MenuItemType.CustomLink)">
<div class="col-md-3">
<nop-label asp-for="Title" />
</div>
<div class="col-md-9">
<nop-editor asp-for="Title" />
<span asp-validation-for="Title"></span>
</div>
</div>
</div>, cssClass: $"menu-item-row row-{(int)MenuItemType.Text} row-{(int)MenuItemType.StandardPage} row-{(int)MenuItemType.CustomLink}"))
<div class="form-group row menu-item-row row-@((int)MenuItemType.CustomLink)">
<div class="col-md-3">
<nop-label asp-for="Url" />
</div>
<div class="col-md-9">
<nop-editor asp-for="Url" />
<span asp-validation-for="Url"></span>
</div>
</div>
<div class="form-group row @(!Model.AvailableMenuItems.Any() ? "d-none" : "")">
<div class="col-md-3">
<nop-label asp-for="ParentId" />
</div>
<div class="col-md-9">
<nop-select asp-for="ParentId" asp-items="Model.AvailableMenuItems" />
<span asp-validation-for="ParentId"></span>
</div>
</div>
<div class="form-group row">
<div class="col-md-3">
<nop-label asp-for="Published" />
</div>
<div class="col-md-9">
<nop-editor asp-for="Published" />
<span asp-validation-for="Published"></span>
</div>
</div>
<div class="form-group row menu-item-row row-template row-template-subitems">
<div class="col-md-3">
<nop-label asp-for="NumberOfSubItemsPerGridElement" />
</div>
<div class="col-md-9">
<nop-editor asp-for="NumberOfSubItemsPerGridElement" />
<span asp-validation-for="NumberOfSubItemsPerGridElement"></span>
</div>
</div>
<div class="form-group row menu-item-row row-template row-template-@((int)MenuItemTemplate.Grid)">
<div class="col-md-3">
<nop-label asp-for="NumberOfItemsPerGridRow" />
</div>
<div class="col-md-9">
<nop-editor asp-for="NumberOfItemsPerGridRow" />
<span asp-validation-for="NumberOfItemsPerGridRow"></span>
</div>
</div>
<div class="form-group row menu-item-row row-template row-template-@((int)MenuItemTemplate.List) row-template-@((int)MenuItemTemplate.Grid)">
<div class="col-md-3">
<nop-label asp-for="MaximumNumberEntities" />
</div>
<div class="col-md-9">
<nop-editor asp-for="MaximumNumberEntities" />
<span asp-validation-for="MaximumNumberEntities"></span>
</div>
</div>
<div class="form-group row">
<div class="col-md-3">
<nop-label asp-for="DisplayOrder" />
</div>
<div class="col-md-9">
<nop-editor asp-for="DisplayOrder" />
<span asp-validation-for="DisplayOrder"></span>
</div>
</div>
<div class="form-group advanced-setting row">
<div class="col-md-3">
<nop-label asp-for="CssClass" />
</div>
<div class="col-md-9">
<nop-editor asp-for="CssClass" />
<span asp-validation-for="CssClass"></span>
</div>
</div>
@await Component.InvokeAsync(typeof(AclCustomerRolesViewComponent), Model)
<div class="form-group advanced-setting row">
<div class="col-md-3">
<nop-label asp-for="SelectedStoreIds" />
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">
<nop-select asp-for="SelectedStoreIds" asp-items="Model.AvailableStores" asp-multiple="true" />
<script>
$(function() {
var storesIdsInput = $('#@Html.IdFor(model => model.SelectedStoreIds)').select2({
closeOnSelect: false,
@if (!Model.AvailableStores.Any())
{
<text>
disabled: true,
placeholder: 'No stores available',
</text>
}
});
});
</script>
</div>
<div class="col-md-8">
@await Component.InvokeAsync(typeof(MultistoreDisabledWarningViewComponent))
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script asp-location="Footer">
$(function () {
const menuItemTypeElement = $('#@Html.IdFor(model => model.MenuItemTypeId)');
const menuItemTemplateElement = $('#@Html.IdFor(model => model.TemplateId)');
const productEl = $("#@Html.IdFor(model => model.ProductId)")
const categoryElement = $('#@Html.IdFor(model => model.CategoryId)');
const manufacturerElement = $('#@Html.IdFor(model => model.ManufacturerId)');
const vendorElement = $('#@Html.IdFor(model => model.VendorId)');
menuItemTypeElement.on('change', function () {
$('#menuitem-form .menu-item-row').addClass('d-none');
$('.row-' + menuItemTypeElement.val()).removeClass('d-none');
if (isTypeTemplated())
menuItemTemplateElement.trigger('change');
[categoryElement, manufacturerElement, vendorElement].forEach((el) => {
if (el.is(':visible'))
el.trigger('change');
});
});
[manufacturerElement, vendorElement].map(el => el.on('change', function() {
let isAllItems = $(this).val() == '0';
menuItemTemplateElement.find('option').prop("disabled", false);
$('.row-@((int)MenuItemType.Text)').toggleClass('d-none', !isAllItems);
$('.row-template-select').toggleClass('d-none', !isAllItems);
}));
categoryElement.on('change', function () {
let isAllItems = $(this).val() == '0' || $(this).val() == null;
menuItemTemplateElement
.find('option')
.filter('[value="@((int)MenuItemTemplate.Simple)"]')
.prop("disabled", isAllItems);
if (isAllItems && (menuItemTemplateElement.val() == '@((int)MenuItemTemplate.Simple)' || menuItemTemplateElement.val() == null))
menuItemTemplateElement.val('@((int)MenuItemTemplate.Grid)');
$('.row-@((int)MenuItemType.Text)').toggleClass('d-none', $(this).val() != '0' && $(this).val() != null);
if (menuItemTemplateElement.val() == '@((int)MenuItemTemplate.Grid)')
$('.row-template-subitems').removeClass('d-none');
});
menuItemTemplateElement.on('change', function () {
$('#menuitem-form .row-template').addClass('d-none');
if (!isTypeTemplated())
return;
if ($(this).val() == '@((int)MenuItemTemplate.Simple)')
return;
[manufacturerElement, vendorElement, categoryElement].forEach((el) => {
if (el.is(':visible'))
el.trigger('change');
});
$('.row-template-' + menuItemTemplateElement.val()).removeClass('d-none');
});
menuItemTypeElement.trigger('change');
menuItemTemplateElement.trigger('change');
$('#product-remove').on('click', function () {
$('#product-info').text('');
productEl.val('');
toggleRemoveButton();
return false;
});
$('#btnRefreshEntity').on('click', function () {
toggleRemoveButton();
return false;
});
function isTypeTemplated()
{
return ['@((int)MenuItemType.Category)', '@((int)MenuItemType.Manufacturer)', '@((int)MenuItemType.Vendor)'].indexOf(menuItemTypeElement.val()) != -1;
}
function toggleRemoveButton() {
$('#product-remove').toggle($('#@Html.IdFor(model => model.ProductId)').val() > 0)
}
});
</script>