202 lines
9.6 KiB
Plaintext
202 lines
9.6 KiB
Plaintext
@page
|
||
@model WebApp.Pages.ProductPageModel
|
||
@{
|
||
ViewData["Title"] = "Product Page";
|
||
}
|
||
<!-- Шапка -->
|
||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||
<div class="container">
|
||
<a asp-page="Index" class="navbar-brand">Catalog</a>
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="container my-5">
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<img src="data:image/png;base64,@Convert.ToBase64String(Model.GetMediaByProduct(Model.productModel))" class="img-fluid" alt="@Model.productModel.Name">
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<h1 id="ProductName">@Model.productModel.Name</h1>
|
||
<div class="star-rating">
|
||
@for (int i = 0; i < (int)Math.Round(@Model.productModel.Rate); i++)
|
||
{
|
||
<span class="filled-star">★</span>
|
||
}
|
||
@for (int i = 0; i < 5 - (int)Math.Round(@Model.productModel.Rate); i++)
|
||
{
|
||
<span class="empty-star">★</span>
|
||
}
|
||
(@Model.productModel.Rate)
|
||
</div>
|
||
<p class="lead">
|
||
@if (Model.saleModel != null)
|
||
{
|
||
<span>Цена: <del>@Model.productModel.Price руб.</del> </span>
|
||
<span style="color:red;">@(Model.productModel.Price / 100 * (100 - @Model.saleModel.Value)) руб.</span>
|
||
}
|
||
else
|
||
{
|
||
<span>Цена: @Model.productModel.Price руб.</span>
|
||
}
|
||
</p>
|
||
<p>Количество товара на складе: @Model.productModel.Amount</p>
|
||
|
||
<div class="hero-unit">
|
||
<div class="container">
|
||
<div id="YMapsID"></div>
|
||
</div>
|
||
</div>
|
||
|
||
@if (User.Identity.IsAuthenticated)
|
||
{
|
||
<form method="post">
|
||
<div class="d-flex align-items-center mb-3">
|
||
<input type="hidden" name="productId" value="@Model.productModel.Id"></input>
|
||
<input type="hidden" name="productName" value="@Model.productModel.Name"></input>
|
||
<input type="number" name="count" name="count" min="1" max="@Model.productModel.Amount" value="1" class="form-control w-auto" />
|
||
<input type="hidden" name="price" value="@Model.productModel.ActualPrice"></input>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">В корзину</button>
|
||
</form>
|
||
}
|
||
else
|
||
{
|
||
<div class="d-flex align-items-center mb-3">
|
||
<label for="quantity" class="me-2">Количество:</label>
|
||
<input type="number" id="quantity" name="quantity" min="1" max="@Model.productModel.Amount" value="1" class="form-control w-auto">
|
||
</div>
|
||
<a asp-page="Login" asp-route-count=1 class="btn btn-primary" style="margin-top: 5px" data-toggle="modal" data-target="#loginPromptModal">В корзину</a>
|
||
}
|
||
|
||
<button type="button" class="btn btn-primary" style="margin-top: 5px" data-bs-toggle="modal" data-bs-target="#shareModal">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-share" viewBox="0 0 16 16">
|
||
<path d="M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.5 2.5 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5m-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3"></path>
|
||
</svg>
|
||
Поделиться
|
||
</button>
|
||
|
||
<div class="modal fade" id="shareModal" tabindex="-1" aria-labelledby="shareModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="shareModalLabel">Поделиться товаром</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p>Ссылка на товар:</p>
|
||
<input type="text" class="form-control" id="shareLink" value="https://localhost:7122/ProductPage?id=@Model.productModel.Id" readonly>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
|
||
<button type="button" class="btn btn-primary" onclick="copyLink()">Копировать ссылку <span class="button-share__icon"></span></button>
|
||
<button type="button" class="btn btn-primary" onclick="shareOnTelegram()">Поделиться в Telegram</button>
|
||
<button type="button" class="btn btn-primary" onclick="shareOnVK()">Поделиться в VK</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="row mt-5">
|
||
<div class="col">
|
||
<h2>Описание</h2>
|
||
<p>@Model.productModel.Description</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
@* СПЕРВА ВОЙДИТЕ В СИСТЕМУ ОКНО *@
|
||
<div class="modal fade" id="loginPromptModal" tabindex="-1" role="dialog" aria-labelledby="loginPromptModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="loginPromptModalLabel">Предупреждение</h5>
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
Сперва войдите в систему.
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<script type="text/javascript">
|
||
function copyLink() {
|
||
const shareLink = document.getElementById("shareLink");
|
||
shareLink.select();
|
||
shareLink.setSelectionRange(0, 99999);
|
||
document.execCommand("copy");
|
||
alert("Ссылка скопирована: " + shareLink.value);
|
||
}
|
||
|
||
function shareOnFacebook() {
|
||
const shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(window.location.href)}`;
|
||
window.open(shareUrl, '_blank');
|
||
}
|
||
|
||
function shareOnTwitter() {
|
||
const shareText = "Посмотрите этот товар:";
|
||
const shareUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(window.location.href)}`;
|
||
window.open(shareUrl, '_blank');
|
||
}
|
||
|
||
function shareOnTelegram() {
|
||
const name = document.getElementById("ProductName").innerText
|
||
const shareText = 'Посмотрите этот товар: ' + name;
|
||
const shareUrl = `https://t.me/share/url?url=${encodeURIComponent(window.location.href)}&text=${encodeURIComponent(shareText)}`;
|
||
window.open(shareUrl, '_blank');
|
||
}
|
||
|
||
function shareOnVK() {
|
||
const shareUrl = `https://vk.com/share.php?url=${encodeURIComponent(window.location.href)}`;
|
||
window.open(shareUrl, '_blank');
|
||
}
|
||
|
||
$(document).ready(function () {
|
||
if ($('#loginPromptModal').hasClass('show')) {
|
||
$('.btn-primary[data-toggle="modal"][data-target="#loginPromptModal"]').remove();
|
||
$('<a>', {
|
||
class: 'btn btn-primary',
|
||
href: '@Url.Page("Cart")',
|
||
text: 'В корзину'
|
||
}).appendTo('#cartButtonContainer');
|
||
}
|
||
});
|
||
|
||
ymaps.ready(function () {
|
||
var myMap = new ymaps.Map('YMapsID', {
|
||
center: [54.352498, 48.387667],
|
||
zoom: 16,
|
||
// Обратите внимание, что в API 2.1 по умолчанию карта создается с элементами управления.
|
||
// Если вам не нужно их добавлять на карту, в ее параметрах передайте пустой массив в поле controls.
|
||
controls: []
|
||
});
|
||
|
||
var myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
|
||
balloonContentBody: [
|
||
'<address>',
|
||
'<strong>Товары на складе в нашем офисе</strong>',
|
||
'<br/>',
|
||
'Адрес: 119021, Ульяновск, ул. Северный Венец, 32',
|
||
'<br/>',
|
||
'</address>'
|
||
].join('')
|
||
}, {
|
||
preset: 'islands#redDotIcon'
|
||
});
|
||
|
||
myMap.geoObjects.add(myPlacemark);
|
||
});
|
||
</script>
|