Hi,
I want to change the main picture on the Nopcomerce Product list Picture. How can I do that? Anyone have any suggestions?
@model int
@using Nop.Core;
@using Nop.Web.Framework.UI;
@{
int id = Convert.ToInt32(TempData["Resim"]);
Html.AddCssFileParts("~/Administration/Scripts/fineuploader/fineuploader-4.2.2.min.css");
Html.AddScriptParts("~/Administration/Scripts/fineuploader/jquery.fineuploader-4.2.2.min.js");
var random = CommonHelper.GenerateRandomInteger();
var clientId = "picture" + random;
var pictureService = EngineContext.Current.Resolve<Nop.Services.Media.IPictureService>();
var picture = pictureService.GetPictureById(id);
const int pictureSize = 100;
}
<div class="panel panel-default">
<div class="panel-heading">
Add a new picture
</div>
<div class="panel-body">
<script type="text/javascript">
$(document).ready(function () {
$('#addProductPicture').click(function () {
var pictureId = $("#AddPictureModel_PictureId").val();
var overrideAltAttribute = $("#AddPictureModel_OverrideAltAttribute").val();
var overrideTitleAttribute = $("#AddPictureModel_OverrideTitleAttribute").val();
var displayOrder = $("#AddPictureModel_DisplayOrder").val();
if (pictureId == 0) {
alert('Upload picture first');
return;
}
$('#addProductPicture').attr('disabled', true);
var postData = {
pictureId: pictureId,
displayOrder: displayOrder,
overrideAltAttribute: overrideAltAttribute,
overrideTitleAttribute: overrideTitleAttribute,
productId: 89951
};
addAntiForgeryToken(postData);
$.ajax({
cache: false,
type: "POST",
url: "/Admin/Product/ProductPictureAdd",
data: postData,
success: function (data) {
var grid = $("#productpictures-grid");
grid.data('kendoGrid').dataSource.read();
$('#addProductPicture').attr('disabled', false);
},
error: function (xhr, ajaxOptions, thrownError) {
alert('Failed to add product picture.');
$('#addProductPicture').attr('disabled', false);
}
});
});
});
</script>
<div class="form-group">
<div class="col-md-3">
<div class="label-wrapper"><label class="control-label" for="AddPictureModel_PictureId" title="">Picture</label><div class="ico-help" title="Choose a picture to upload. If the picture size exceeds your stores max image size setting, it will be automatically resized."><i class="fa fa-question-circle"></i></div></div>
</div>
<div class="col-md-9">
<div id="@(clientId + "value")">
@Html.HiddenFor(x => x)
</div>
<div class="row">
<div class="col-md-12">
@*fine uploader container*@
<div id="@clientId" class="upload-image-button pull-left margin-t-5">
<noscript>
<p>Please enable JavaScript to use file uploader.</p>
</noscript>
</div>
<div class="remove-image-button pull-left margin-t-5">
@if (picture != null)
{
<span id="@(clientId + "remove")" class="btn bg-red">@T("Admin.Picture.RemovePicture")</span>
}
else
{
<span id="@(clientId + "remove")" class="btn bg-red" style="display: none;">@T("Admin.Picture.RemovePicture")</span>
}
</div>
</div>
</div>
@*fine uploader template (keep it synchronized to \Content\fineuploader\templates\default.html)*@
<script type="text/template" id="@(clientId)-qq-template">
<div class="qq-uploader-selector qq-uploader">
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<span>@T("Common.FileUploader.DropFiles")</span>
</div>
<div class="qq-upload-button-selector qq-upload-button">
<div>@T("Common.FileUploader.Upload")</div>
</div>
<span class="qq-drop-processing-selector qq-drop-processing">
<span>@T("Common.FileUploader.Processing")</span>
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
</span>
<ul class="qq-upload-list-selector qq-upload-list">
<li>
<div class="qq-progress-bar-container-selector">
<div class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span>
<span class="qq-upload-file-selector qq-upload-file"></span>
<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
<span class="qq-upload-size-selector qq-upload-size"></span>
<a class="qq-upload-cancel-selector qq-upload-cancel" href="#">@T("Common.FileUploader.Cancel")</a>
<a class="qq-upload-retry-selector qq-upload-retry" href="#">@T("Common.FileUploader.Retry")</a>
<a class="qq-upload-delete-selector qq-upload-delete" href="#">@T("Common.FileUploader.Delete")</a>
<span class="qq-upload-status-text-selector qq-upload-status-text"></span>
</li>
</ul>
</div>
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#@(clientId)").fineUploader({
request: {
endpoint: '@(Url.Content("~/Admin/Picture/AsyncUpload"))'
},
template: "@(clientId)-qq-template",
multiple: false
}).on("complete", function(event, id, name, responseJSON, xhr) {
if (responseJSON.success) {
$("#@(clientId + "image")").html("<img src='" + responseJSON.imageUrl + "'/>");
$("#@(clientId + "value") input").val(responseJSON.pictureId);
$("#@(clientId + "remove")").show();
}
});
$("#@(clientId + "remove")").click(function(e) {
$("#@(clientId + "image")").html("<img src='@pictureService.GetDefaultPictureUrl(pictureSize)'/>");
$("#@(clientId + "value") input").val(0);
$(this).hide();
});
});
</script>
<span class="field-validation-valid" data-valmsg-for="AddPictureModel.PictureId" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<div class="label-wrapper"><label class="control-label" for="AddPictureModel_OverrideAltAttribute" title="">Alt</label><div class="ico-help" title="Override "alt" attribute for "img" HTML element. If empty, then a default rule will be used (e.g. product name)."><i class="fa fa-question-circle"></i></div></div>
</div>
<div class="col-md-9">
<input class="form-control text-box single-line" id="AddPictureModel_OverrideAltAttribute" name="AddPictureModel.OverrideAltAttribute" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="AddPictureModel.OverrideAltAttribute" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<div class="label-wrapper"><label class="control-label" for="AddPictureModel_OverrideTitleAttribute" title="">Title</label><div class="ico-help" title="Override "title" attribute for "img" HTML element. If empty, then a default rule will be used (e.g. product name)."><i class="fa fa-question-circle"></i></div></div>
</div>
<div class="col-md-9">
<input class="form-control text-box single-line" id="AddPictureModel_OverrideTitleAttribute" name="AddPictureModel.OverrideTitleAttribute" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="AddPictureModel.OverrideTitleAttribute" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<div class="label-wrapper"><label class="control-label" for="AddPictureModel_DisplayOrder" title="">Display order</label><div class="ico-help" title="Display order of the picture. 1 represents the top of the list."><i class="fa fa-question-circle"></i></div></div>
</div>
<div class="col-md-9">
<span class="k-widget k-numerictextbox" style=""><span class="k-numeric-wrap k-state-default"><input type="text" class="k-formatted-value k-input" tabindex="0" aria-disabled="false" aria-readonly="false" style="display: inline-block;"><input data-val="true" data-val-number="The field Display order must be a number." id="AddPictureModel_DisplayOrder" name="AddPictureModel.DisplayOrder" type="text" value="0" data-role="numerictextbox" role="spinbutton" style="display: none;" class="k-input" aria-valuenow="0" aria-disabled="false" aria-readonly="false"><span class="k-select"><span unselectable="on" class="k-link"><span unselectable="on" class="k-icon k-i-arrow-n" title="Increase value">Increase value</span></span><span unselectable="on" class="k-link"><span unselectable="on" class="k-icon k-i-arrow-s" title="Decrease value">Decrease value</span></span></span></span></span>
<script type="text/javascript">
$(document).ready(function () {
$("#AddPictureModel_DisplayOrder").kendoNumericTextBox({
format: "#",
decimals: 0
});
});
</script>
<span class="field-validation-valid" data-valmsg-for="AddPictureModel.DisplayOrder" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-9 col-md-offset-3">
<button type="button" id="addProductPicture" class="btn btn-primary">Add product picture</button>
</div>
</div>
</div>
</div>
