ec957aa4
 Volodymyr
product modal js
|
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
|
var phoneInput = document.querySelector('#cardProduct [type="tel"]');
var counter = document.querySelector('#cardProduct .product-counter__input');
if (phoneInput) {
phoneInput.addEventListener('input', phoneHandleInput);
}
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) {
let itemPrice = counter.parentElement.querySelector('.product-counter__value');
itemPrice.innerHTML = `${itemPrice.dataset.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) {
const value = e.target.value.replace(/\D/g, '');
if (value == 0) {
e.target.value = 1;
}
updateSummary();
}
function increment(e) {
e.preventDefault();
const value = Number(counter.querySelector('input').value);
counter.querySelector('input').value = value + 1;
updateSummary();
}
function decrement(e) {
e.preventDefault();
const value = Number(counter.querySelector('input').value);
if (value > 1) {
counter.querySelector('input').value = value - 1;
updateSummary();
}
}
function updateSummary() {
const amount = counter.querySelector('input').value;
if (amount >= 1) {
const oldSum = Number(itemPrice.dataset.price) * 10;
const newSum = String(oldSum * amount);
itemPrice.innerHTML = `${newSum.slice(0, -2)}.${newSum.slice(-2)} ${itemPrice.dataset.currency}`;
}
}
}
|
