product.js
2.67 KB
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
var phoneInput = document.querySelector('#cardProduct [type="tel"]');
var counter = document.querySelector('#cardProduct .product-counter__input');
var price = 0;
if (phoneInput) {
phoneInput.addEventListener('input', phoneHandleInput);
}
$('#cardProduct').on('show.bs.modal', function (e) {
var button = $(e.relatedTarget);
price = button.data('price');
$('#cardProduct .product-counter__value').data('price', price);
var itemPrice = counter.parentElement.querySelector('.product-counter__value');
itemPrice.innerHTML = `${price} ${itemPrice.dataset.currency}`;
counter.querySelector('input').value = 1;
})
if(counter){
counterFunc(counter);
}
function phoneHandleInput(e) {
e.target.value = phoneMasks(e.target.value);
}
function phoneMasks(phone) {
return phone.replace(/\D/g, '')
.replace(/^(\d)/, '($1')
.replace(/^(\(\d{3})(\d)/, '$1) $2')
.replace(/(\d{3})(\d{1,7})/, '$1-$2')
.replace(/(-\d{2})(\d{1,7})/, '$1-$2')
.replace(/(-\d{2})\d+?$/, '$1');
}
function counterFunc(counter) {
var itemPrice = counter.parentElement.querySelector('.product-counter__value');
itemPrice.innerHTML = `${price} ${itemPrice.dataset.currency}`;
counter.querySelector('input').value = 1;
counter.addEventListener('input', counterHandleInput);
counter.addEventListener('change', counterHandleChange);
counter.querySelector('.product-counter__increment').addEventListener('click', increment);
counter.querySelector('.product-counter__decrement').addEventListener('click', decrement);
function counterHandleInput(e) {
e.target.value = e.target.value.replace(/\D/g, '');
updateSummary();
}
function counterHandleChange(e) {
var value = e.target.value.replace(/\D/g, '');
if (value == 0) {
e.target.value = 1;
}
updateSummary();
}
function increment(e) {
e.preventDefault();
var value = Number(counter.querySelector('input').value);
//console.log(value);
counter.querySelector('input').value = value + 1;
console.log(value);
updateSummary();
}
function decrement(e) {
e.preventDefault();
var value = Number(counter.querySelector('input').value);
if (value > 1) {
counter.querySelector('input').value = value - 1;
updateSummary();
}
}
function updateSummary() {
var amount = counter.querySelector('input').value;
if (amount >= 1) {
var oldSum = Number(price);
var newSum = String(oldSum * amount);
itemPrice.innerHTML = `${newSum} ${itemPrice.dataset.currency}`;
}
}
}