script var v_productChosen var v_productSizeChosen var onProductBought

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<script>
var v_productChosen;
var v_productSizeChosen;
var onProductBought;
function buyProductModal(product)
{
v_productChosen = product;
$('#buyProductButton').attr('disabled', true);
$('.modal-title').text(product.title);
$('#modal-img').attr('src', product.imagePath);
$('.price').text(product.price + '₽');
$('#productSizes').empty();
if (product.productSizes.length == 0)
$('#productSizes').append('<h5 style = "color: red;">Товар отсутствует на складе</h5>');
else
{
product.productSizes.forEach(function(size) {
$('#productSizes').append('<label class="btn btn-info" id="ps-' + size.id + '" onClick ="onProductSizeClicked(this)" ><input type="radio" name="options" autocomplete="off">' + size.title + '</label>');
});
}
$('#buyButton').click();
}
function onProductSizeClicked(sender)
{
v_productSizeChosen = $(sender).attr('id').split('-')[1];
$('#buyProductButton').attr('disabled', false);
}
function onProductBoughtClicked()
{
onProductBought(v_productChosen.id, v_productSizeChosen, v_productChosen.price);
$('#closeModalButton').click();
}
</script>
<button type="button" id ="buyButton" class="btn btn-primary" style ="display:none;" data-toggle="modal" data-target="#exampleModalCenter">
Launch modal
</button>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
</div>
<div class="modal-body">
<figure class="card card-product">
<div class="img-wrap" style ="float:left;">
<img id ="modal-img" src="">
</div>
<figcaption class="info-wrap">
<h4 class = "title">Доступные размеры: </h4>
<div class="action-wrap">
<div id = "productSizes" class="btn-group btn-group-toggle" data-toggle="buttons">
</div>
</div>
</figcaption>
</figure>
</div>
<div class="modal-footer">
<h4 class="price" style ="float:left;"></h4>
<button id ="closeModalButton" type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
<button id ="buyProductButton" onClick = "onProductBoughtClicked()" type="button" class="btn btn-primary" disabled>В корзину</button>
</div>
</div>
</div>
</div>