Try your search with a different keyword or use * as a wildcard.
@model IList<AddProductToOrderModel.ProductAttributeModel>
@using System.Text
@using Nop.Core.Domain.Catalog;
@using Nop.Services.Catalog;
@inject CatalogSettings catalogSettings
@if (Model.Count > 0)
{
//dynamic update support
var attributeChangeScriptsBuilder = new StringBuilder();
var productId = Convert.ToInt32(ViewData["productId"]);
var attributesHaveConditions = Model.Any(a => a.HasCondition);
var attributeChangeHandlerFuncName = $"attribute_change_handler_{productId}";
var getAttributeValueName = new Func<AddProductToOrderModel.ProductAttributeValueModel, string>((attributeValue) =>
string.IsNullOrEmpty(attributeValue.PriceAdjustment) ? attributeValue.Name : T("Products.ProductAttributes.PriceAdjustment",
attributeValue.Name, attributeValue.PriceAdjustment, attributeValue.CustomerEntersQty ? T("Products.ProductAttributes.PriceAdjustment.PerItem").Text : string.Empty).Text);
<div class="card card-default">
<div class="card-body">
@foreach (var attribute in Model)
{
<div id="@(NopCatalogDefaults.ProductAttributePrefix)row_@(attribute.Id)" class="form-group row">
@{
var controlId = $"{NopCatalogDefaults.ProductAttributePrefix}{attribute.Id}";
var textPrompt = !string.IsNullOrEmpty(attribute.TextPrompt) ? attribute.TextPrompt : attribute.Name;
}
<div class="col-md-3">
<div class="label-wrapper">
<label class="col-form-label">
@textPrompt
</label>
</div>
</div>
<div class="col-md-9 attributes">
<div class="input-group input-group-required">
@switch (attribute.AttributeControlType)
{
case AttributeControlType.DropdownList:
{
<select name="@(controlId)" id="@(controlId)" @(attribute.Values.Any(value => value.CustomerEntersQty) ? Html.Raw($"onchange=\"showHideDropdownQuantity('{controlId}')\"") : null)>
@if (!attribute.IsRequired)
{
<option value="0">---</option>
}
@foreach (var attributeValue in attribute.Values)
{
<option selected="@attributeValue.IsPreSelected" value="@attributeValue.Id">
@getAttributeValueName(attributeValue)
</option>
}
</select>
foreach (var attributeValue in attribute.Values.Where(value => value.CustomerEntersQty))
{
<div id="@(controlId)_@(attributeValue.Id)_qty_box" style="display: none">
<label class="margin-l-10 margin-r-5" for="@(controlId)_@(attributeValue.Id)_qty">@(T("Products.ProductAttributes.PriceAdjustment.Quantity").Text)</label>
<input class="qty-box form-control" type="text" name="@(controlId)_@(attributeValue.Id)_qty" id="@(controlId)_@(attributeValue.Id)_qty" value="@(attributeValue.Quantity)" />
</div>
}
<script>
$(function() {
showHideDropdownQuantity("@controlId");
});
</script>
}
break;
case AttributeControlType.RadioList:
case AttributeControlType.ColorSquares:
case AttributeControlType.ImageSquares:
{
foreach (var attributeValue in attribute.Values)
{
<div class="form-check">
<label class="form-check-label" for="@(controlId)_@(attributeValue.Id)">
<input class="form-check-input" id="@(controlId)_@(attributeValue.Id)" type="radio" name="@(controlId)" value="@attributeValue.Id" checked="@attributeValue.IsPreSelected"
@(attribute.Values.Any(value => value.CustomerEntersQty) ? Html.Raw($"onclick=\"showHideRadioQuantity('{controlId}')\"") : null) />
@getAttributeValueName(attributeValue)
</label>
@if (attributeValue.CustomerEntersQty)
{
<div id="@(controlId)_@(attributeValue.Id)_qty_box" style="display: none">
<label class="margin-l-10 margin-r-5" for="@(controlId)_@(attributeValue.Id)_qty">@(T("Products.ProductAttributes.PriceAdjustment.Quantity").Text)</label>
<input class="qty-box form-control" type="text" name="@(controlId)_@(attributeValue.Id)_qty" id="@(controlId)_@(attributeValue.Id)_qty" value="@(attributeValue.Quantity)" />
</div>
}
</div>
<script>
$(function() {
showHideRadioQuantity("@controlId");
});
</script>
}
}
break;
case AttributeControlType.Checkboxes:
case AttributeControlType.ReadonlyCheckboxes:
{
foreach (var attributeValue in attribute.Values)
{
<div class="form-check">
<label class="form-check-label" for="@(controlId)_@(attributeValue.Id)">
<input class="form-check-input" id="@(controlId)_@(attributeValue.Id)" type="checkbox" name="@(controlId)" value="@attributeValue.Id" checked="@attributeValue.IsPreSelected" @(attribute.AttributeControlType == AttributeControlType.ReadonlyCheckboxes ? Html.Raw(" disabled=\"disabled\"") : null)
@(attributeValue.CustomerEntersQty ? Html.Raw($"onchange=\"showHideCheckboxQuantity('{controlId}_{attributeValue.Id}')\"") : null) />
@getAttributeValueName(attributeValue)
</label>
@if (attributeValue.CustomerEntersQty)
{
<div id="@(controlId)_@(attributeValue.Id)_qty_box" style="display: none">
<label class="margin-l-10 margin-r-5" for="@(controlId)_@(attributeValue.Id)_qty">@(T("Products.ProductAttributes.PriceAdjustment.Quantity").Text)</label>
<input class="qty-box form-control" type="text" name="@(controlId)_@(attributeValue.Id)_qty" id="@(controlId)_@(attributeValue.Id)_qty" value="@(attributeValue.Quantity)" />
<script>
$(function() {
showHideCheckboxQuantity('@(controlId)_@(attributeValue.Id)');
})
</script>
</div>
}
</div>
}
}
break;
case AttributeControlType.TextBox:
{
<input name="@(controlId)" type="text" id="@(controlId)" class="form-control" />
}
break;
case AttributeControlType.MultilineTextbox:
{
<textarea cols="20" id="@(controlId)" name="@(controlId)" rows="2" class="form-control"></textarea>
}
break;
case AttributeControlType.Datepicker:
{
<nop-date-picker asp-day-name="@(controlId + "_day")"
asp-month-name="@(controlId + "_month")"
asp-year-name="@(controlId + "_year")"
asp-begin-year="@(DateTime.UtcNow)"
asp-end-year="@(DateTime.UtcNow.AddYears(catalogSettings.CountDisplayedYearsDatePicker))" />
}
break;
case AttributeControlType.FileUpload:
{
var allowedFileTypes = string.Empty;
if (attribute.AllowedFileExtensions.Any())
{
var fileTypeList = attribute.AllowedFileExtensions
.Select(x => new FileExtensionContentTypeProvider().TryGetContentType($".{x}", out var contentType) ? $"'{contentType}'" : null)
.Where(ft => !string.IsNullOrEmpty(ft))
.ToList();
allowedFileTypes = string.Join(", ", fileTypeList);
}
@* register CSS and JS *@
<link rel="stylesheet" href="~/lib_npm/filepond/filepond.min.css" />
<link rel="stylesheet" href="~/lib_npm/filepond-plugin-get-file/filepond-plugin-get-file.min.css" />
<script asp-exclude-from-bundle="true" src="~/lib_npm/filepond/filepond.min.js" asp-location="Footer"></script>
<script asp-exclude-from-bundle="true" src="~/lib_npm/filepond-plugin-file-validate-type/filepond-plugin-file-validate-type.min.js" asp-location="Footer"></script>
<script asp-exclude-from-bundle="true" src="~/lib_npm/filepond-plugin-get-file/filepond-plugin-get-file.min.js" asp-location="Footer"></script>
<div class="file-upload-container">
<div id="@(controlId + "element")" class="filepond"></div>
</div>
<input id="@(controlId)" name="@(controlId)" type="hidden" />
<script asp-location="Footer">
$(function () {
// Register the plugins
FilePond.registerPlugin(FilePondPluginFileValidateType, FilePondPluginGetFile);
// Create a FilePond instance
FilePond.create(document.querySelector('#@(controlId + "element")'), {
credits: false,
acceptedFileTypes: [@Html.Raw(allowedFileTypes)],
allowMultiple: false,
maxFiles: 1,
allowDownloadByUrl: true,
server: {
process: {
url: '@(Url.RouteUrl(NopRouteNames.Ajax.UPLOAD_FILE_PRODUCT_ATTRIBUTE, new {attributeId = attribute.Id}))',
onload: function(response) {
$("#@(controlId)").val(JSON.parse(response).downloadGuid);
}
},
revert: null,
},
onprocessfiles: (error) => {
if (error) {
alert(error);
}
},
labelIdle: '@T("Common.FileUploader.DropFiles") / <span class="filepond--label-action">@T("Common.FileUploader.Browse")</span>',
labelFileProcessing: '@T("Common.FileUploader.Processing")',
});
});
</script>
<nop-alert asp-alert-id="uploadFileProductAttributeFailed" />
}
break;
}
<div class="input-group-btn">
@if (attribute.IsRequired)
{
<nop-required />
}
</div>
</div>
</div>
</div>
}
@*generate change event script*@
@foreach (var attribute in Model)
{
var controlId = $"{NopCatalogDefaults.ProductAttributePrefix}{attribute.Id}";
switch (attribute.AttributeControlType)
{
case AttributeControlType.DropdownList:
{
attributeChangeScriptsBuilder.AppendFormat("$('#{0}').change(function(){{{1}();}});\n", controlId, attributeChangeHandlerFuncName);
}
break;
case AttributeControlType.RadioList:
case AttributeControlType.ColorSquares:
case AttributeControlType.ImageSquares:
{
foreach (var attributeValue in attribute.Values)
{
attributeChangeScriptsBuilder.AppendFormat("$('#{0}_{1}').click(function(){{{2}();}});\n", controlId, attributeValue.Id, attributeChangeHandlerFuncName);
}
}
break;
case AttributeControlType.Checkboxes:
case AttributeControlType.ReadonlyCheckboxes:
{
foreach (var attributeValue in attribute.Values)
{
attributeChangeScriptsBuilder.AppendFormat("$('#{0}_{1}').click(function(){{{2}();}});\n", controlId, attributeValue.Id, attributeChangeHandlerFuncName);
}
}
break;
default:
break;
}
foreach (var attributeValue in attribute.Values.Where(value => value.CustomerEntersQty))
{
attributeChangeScriptsBuilder.AppendFormat("$('#{0}_{1}_qty').on('input propertychange paste', function(){{{2}();}});\n", controlId, attributeValue.Id, attributeChangeHandlerFuncName);
}
}
@*render scripts*@
<script>
function @(attributeChangeHandlerFuncName)() {
$.ajax({
cache: false,
url: "@Html.Raw(Url.Action("productdetails_attributechange", "Order", new {productId = productId, validateAttributeConditions = attributesHaveConditions}))",
data: $('#product-details-form').serialize(),
type: "POST",
success: function (data, textStatus, jqXHR) {
if (data.enabledattributemappingids) {
for (var i = 0; i < data.enabledattributemappingids.length; i++) {
$('#product_attribute_row_' + data.enabledattributemappingids[i]).show();
}
}
if (data.disabledattributemappingids) {
for (var i = 0; i < data.disabledattributemappingids.length; i++) {
$('#product_attribute_row_' + data.disabledattributemappingids[i]).hide();
}
}
if (data.message) {
$('#productdetails_attributechangeMessage-info').text(data.message);
$("#productdetails_attributechangeMessage").trigger("click");
}
}
});
}
$(function() {
@(attributeChangeHandlerFuncName)();
@Html.Raw(attributeChangeScriptsBuilder.ToString())
});
</script>
<nop-alert asp-alert-id="productdetails_attributechangeMessage" />
</div>
<script>
function showHideDropdownQuantity(id) {
$('select[name=' + id + '] > option').each(function () {
$('#' + id + '_' + this.value + '_qty_box').hide();
});
$('#' + id + '_' + $('select[name=' + id + '] > option:selected').val() + '_qty_box').css('display', 'inline-block');
};
function showHideRadioQuantity(id) {
$('input[name=' + id + ']:radio').each(function () {
$('#' + $(this).attr('id') + '_qty_box').hide();
});
$('#' + id + '_' + $('input[name=' + id + ']:radio:checked').val() + '_qty_box').css('display', 'inline-block');
};
function showHideCheckboxQuantity(id) {
if ($('#' + id).is(':checked'))
$('#' + id + '_qty_box').css('display', 'inline-block');
else
$('#' + id + '_qty_box').hide();
};
</script>
</div>
}