Your Name
3 months ago
parent
12c4a0ca35
commit
8597dbc49d
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1 @@ |
|||||||
|
deny from all |
||||||
@ -0,0 +1 @@ |
|||||||
|
deny from all |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
<FilesMatch "\.(zip|gz)$"> |
||||||
|
Order allow,deny |
||||||
|
Deny from all |
||||||
|
</Files> |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
<?php |
||||||
|
|
||||||
|
add_filter('woocommerce_currency_symbol', 'change_aed_currency_symbol', 10, 2); |
||||||
|
|
||||||
|
function change_aed_currency_symbol($currency_symbol, $currency) { |
||||||
|
if ($currency == 'AED') { |
||||||
|
$currency_symbol = 'AED'; |
||||||
|
} |
||||||
|
return $currency_symbol; |
||||||
|
} |
||||||
|
|
||||||
|
add_filter('timber/context', function($context) { |
||||||
|
// Передаем все нужные константы в контекст Twig |
||||||
|
$context['CONSTANTS'] = [ |
||||||
|
'DOMAIN' => defined('SITE_DOMAIN') ? SITE_DOMAIN : null, |
||||||
|
]; |
||||||
|
|
||||||
|
return $context; |
||||||
|
}); |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="ru"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||||
|
<title></title> |
||||||
|
<meta name="description" content=""> |
||||||
|
|
||||||
|
<!-- Яндекс.Вебмастер + Google Search Console --> |
||||||
|
|
||||||
|
<!-- /Яндекс.Вебмастер + Google Search Console --> |
||||||
|
|
||||||
|
<!-- Yandex.Metrika counter --> |
||||||
|
|
||||||
|
<!-- /Yandex.Metrika counter --> |
||||||
|
{{ function('wp_head') }} |
||||||
|
</head> |
||||||
|
|
||||||
|
<body> |
||||||
|
|
||||||
|
|
||||||
|
{% if current_lang == 'en' %} |
||||||
|
{% include 'header/module.template_ENG.twig' %} |
||||||
|
{% elseif current_lang == 'fr' %} |
||||||
|
{% else %} |
||||||
|
{% include 'header/module.template_RU.twig' %} |
||||||
|
{% endif %} |
||||||
|
|
||||||
|
|
||||||
|
<main class="{{ bodyClass }}"> |
||||||
|
{% block content %} |
||||||
|
{% endblock %} |
||||||
|
</main> |
||||||
|
|
||||||
|
{% include 'footer/module.template.twig' %} |
||||||
|
</div> |
||||||
|
{{ function('wp_footer') }} |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,60 @@ |
|||||||
|
{% set current_path = template_path ~ '/modules/footer' %} |
||||||
|
<footer class="footer"> |
||||||
|
<div class="container"> |
||||||
|
<div class="footer-top"> |
||||||
|
<div class="footer-content__wrap"> |
||||||
|
<div class="footer-content"> |
||||||
|
<a href="/" class="logo"> |
||||||
|
<img src="{{ current_path }}/assets/img/logo-green.svg" alt=""> |
||||||
|
<span>сosmopet</span> |
||||||
|
</a> |
||||||
|
<p class="footer-content__address"> |
||||||
|
{{adres}} |
||||||
|
</p> |
||||||
|
<ul> |
||||||
|
{% for item in email_list %} |
||||||
|
<li> |
||||||
|
<p>{{item.name}}</p> |
||||||
|
<a href="mailto:{{item.email}}">{{item.email}}</a> |
||||||
|
</li> |
||||||
|
{% endfor %} |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
<div class="footer-top__link"> |
||||||
|
<a href="#" class="link-black">{{ function('pll_e', 'Чат бот с ветеринаром') }}</a> |
||||||
|
<a href="#" class="link-white">{{ function('pll_e', 'Калькулятор рациона') }}</a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<form class="footer-contact"> |
||||||
|
<h3 class="footer-contact__title">{{ function('pll_e', 'Форма обратной связи') }}</h3> |
||||||
|
<input type="text" placeholder="{{ function('pll_e', 'Ваше имя') }}" class="form-inp"> |
||||||
|
<input type="email" placeholder="{{ function('pll_e', 'Эл.почта') }}" class="form-inp"> |
||||||
|
<textarea class="form-textarea" name="" placeholder="{{ function('pll_e', 'Текст обращения') }}" id=""></textarea> |
||||||
|
<button class="footer-contact__submit" type="submit">{{ function('pll_e', 'Отправить') }}</button> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
<div class="footer-bottom"> |
||||||
|
<ul class="footer-network"> |
||||||
|
<li> |
||||||
|
<a href="#"> |
||||||
|
<img src="{{ current_path }}/assets/img/footer-network-1.svg" alt=""> |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="#"> |
||||||
|
<img src="{{ current_path }}/assets/img/footer-network-2.svg" alt=""> |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="#"> |
||||||
|
<img src="{{ current_path }}/assets/img/footer-network-3.svg" alt=""> |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
<a href="#">Соглашение о конфиденциальности</a> |
||||||
|
<a href="#">Декларация соответствия корма</a> |
||||||
|
<a href="#">Декларация соответствия лакомств</a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</footer> |
||||||
|
<!-- Footer end --> |
||||||
@ -0,0 +1,241 @@ |
|||||||
|
.order{ |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
.order__title{ |
||||||
|
font-family: var(--font-family); |
||||||
|
font-weight: 700; |
||||||
|
font-size: 24px; |
||||||
|
line-height: 117%; |
||||||
|
text-transform: uppercase; |
||||||
|
color: var(--text-black); |
||||||
|
} |
||||||
|
.order__contacts{ |
||||||
|
width: calc(50% - 0.5px); |
||||||
|
|
||||||
|
padding: 24px; |
||||||
|
|
||||||
|
border-right: 1px solid #121212; |
||||||
|
} |
||||||
|
.order-contacts__header{ |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.order-contacts__form{ |
||||||
|
margin-top: 24px; |
||||||
|
} |
||||||
|
.order-contacts__delivery{ |
||||||
|
margin-top: 47.5px; |
||||||
|
|
||||||
|
padding-top: 48px; |
||||||
|
|
||||||
|
border-top: 1px solid var(--background-grey); |
||||||
|
} |
||||||
|
|
||||||
|
.order-contacts-deliver__item{ |
||||||
|
margin-top: 24px; |
||||||
|
} |
||||||
|
.order-contacts-deliver__date{ |
||||||
|
padding: 8px; |
||||||
|
|
||||||
|
border-radius: 24px; |
||||||
|
|
||||||
|
background: var(--background-grey); |
||||||
|
} |
||||||
|
.order-contacts-deliver__date .form-input-radio__item{ |
||||||
|
margin-top: 24px; |
||||||
|
} |
||||||
|
.order-contacts-deliver__date .form-input-radio__item:first-child{ |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
.order__your{ |
||||||
|
width: calc(50% - 0.5px); |
||||||
|
|
||||||
|
padding: 24px 24px 24px 48px; |
||||||
|
|
||||||
|
background: var(--background-grey); |
||||||
|
} |
||||||
|
.order-your__products{ |
||||||
|
margin-top: 48px; |
||||||
|
} |
||||||
|
.order-your-products__item{ |
||||||
|
margin-top: 16px; |
||||||
|
|
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.order-your-products__left{ |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
.order-your-products__img{ |
||||||
|
width: 40px; |
||||||
|
aspect-ratio: 1; |
||||||
|
|
||||||
|
border-radius: 16px; |
||||||
|
} |
||||||
|
.order-your-products__content{ |
||||||
|
margin-left: 16px; |
||||||
|
} |
||||||
|
.order-your-products__name{ |
||||||
|
font-family: var(--font-family); |
||||||
|
font-weight: 500; |
||||||
|
font-size: 12px; |
||||||
|
line-height: 133%; |
||||||
|
color: var(--text-black); |
||||||
|
|
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
.order-your-products__description{ |
||||||
|
margin-top: 8px; |
||||||
|
|
||||||
|
font-family: var(--font-family); |
||||||
|
font-weight: 500; |
||||||
|
font-size: 12px; |
||||||
|
line-height: 133%; |
||||||
|
color: var(--text-6); |
||||||
|
} |
||||||
|
.order-your-products__description span{ |
||||||
|
font-weight: 700; |
||||||
|
} |
||||||
|
.order-your-products__description span::before{ |
||||||
|
margin-left: 3px; |
||||||
|
|
||||||
|
content: 'x '; |
||||||
|
} |
||||||
|
.order-your-products__right{ |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
.order-your-products__count{ |
||||||
|
font-family: var(--font-family); |
||||||
|
font-weight: 700; |
||||||
|
font-size: 12px; |
||||||
|
line-height: 133%; |
||||||
|
text-align: right; |
||||||
|
color: var(--text-6); |
||||||
|
} |
||||||
|
.order-your-products__count::before{ |
||||||
|
content: 'x'; |
||||||
|
} |
||||||
|
.order-your-products__price{ |
||||||
|
margin-left: 16px; |
||||||
|
|
||||||
|
font-family: var(--font-family); |
||||||
|
font-weight: 700; |
||||||
|
font-size: 12px; |
||||||
|
line-height: 133%; |
||||||
|
text-align: right; |
||||||
|
color: var(--text-black); |
||||||
|
} |
||||||
|
.order-your-products__price::after{ |
||||||
|
content: 'Р'; |
||||||
|
} |
||||||
|
.order-your__calculation{ |
||||||
|
margin-top: 48px; |
||||||
|
} |
||||||
|
.order-your__promo{ |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
.order-your-promo__button{ |
||||||
|
margin-left: 8px; |
||||||
|
} |
||||||
|
.order-your-calculation__item{ |
||||||
|
margin-top: 24px; |
||||||
|
|
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.order-your-calculation__title{ |
||||||
|
font-family: var(--font-family); |
||||||
|
font-weight: 500; |
||||||
|
font-size: 20px; |
||||||
|
line-height: 120%; |
||||||
|
color: var(--text-black); |
||||||
|
} |
||||||
|
.order-your-calculation__value{ |
||||||
|
font-family: var(--font-family); |
||||||
|
font-weight: 700; |
||||||
|
font-size: 20px; |
||||||
|
line-height: 200%; |
||||||
|
text-transform: uppercase; |
||||||
|
text-align: right; |
||||||
|
color: var(--text-black); |
||||||
|
} |
||||||
|
.order-your-calculation__value--price::after{ |
||||||
|
content: ' ₽'; |
||||||
|
} |
||||||
|
.order-your-calculation__value--discount{ |
||||||
|
background: var(--gradient-red); |
||||||
|
background-clip: text; |
||||||
|
-webkit-background-clip: text; |
||||||
|
-webkit-text-fill-color: transparent; |
||||||
|
} |
||||||
|
.order-your-calculation__value--discount::before{ |
||||||
|
content: '- '; |
||||||
|
} |
||||||
|
.order-your-calculation__description{ |
||||||
|
font-family: var(--font-family); |
||||||
|
font-weight: 500; |
||||||
|
font-size: 12px; |
||||||
|
line-height: 133%; |
||||||
|
text-align: right; |
||||||
|
color: var(--text-9); |
||||||
|
} |
||||||
|
.order-your-calculation__line{ |
||||||
|
margin-top: 23px; |
||||||
|
border: 1px solid var(--background-9); |
||||||
|
} |
||||||
|
.order-your-calculation__result{ |
||||||
|
font-family: var(--font-family); |
||||||
|
font-weight: 700; |
||||||
|
font-size: 24px; |
||||||
|
line-height: 117%; |
||||||
|
text-transform: uppercase; |
||||||
|
color: var(--text-black); |
||||||
|
} |
||||||
|
.order-your-calculation__submit{ |
||||||
|
margin-top: 48px; |
||||||
|
} |
||||||
|
|
||||||
|
@media only screen and (max-width: 1200px) { |
||||||
|
.order{ |
||||||
|
display: block; |
||||||
|
} |
||||||
|
.order__contacts, .order__your{ |
||||||
|
border: none; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media only screen and (max-width: 720px) { |
||||||
|
.order__title{ |
||||||
|
max-width: 181px; |
||||||
|
|
||||||
|
font-size: 20px; |
||||||
|
line-height: 120%; |
||||||
|
} |
||||||
|
.order__your{ |
||||||
|
margin-top: 16px; |
||||||
|
} |
||||||
|
.order__contacts{ |
||||||
|
padding: 24px 16px; |
||||||
|
} |
||||||
|
.order__your{ |
||||||
|
padding: 40px 16px 9px 16px; |
||||||
|
} |
||||||
|
.order-your__promo{ |
||||||
|
display: block; |
||||||
|
} |
||||||
|
.order-your-promo__button{ |
||||||
|
margin-left: 0; |
||||||
|
margin-top: 24px; |
||||||
|
|
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.order-your-products__content{ |
||||||
|
max-width: 164px; |
||||||
|
} |
||||||
|
.order-your-products__count, .order-your-products__price{ |
||||||
|
flex-shrink: 0; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
/* Стили для ультрашироких экранов */ |
||||||
|
@media only screen and (min-width: 1400px) { |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,129 @@ |
|||||||
|
jQuery(document).ready(function($) { |
||||||
|
// Инициализация слайдера для мобильной галереи
|
||||||
|
const mobileGallerySwiper = new Swiper('.detail__images-phone', { |
||||||
|
slidesPerView: 1, |
||||||
|
spaceBetween: 10, |
||||||
|
pagination: { |
||||||
|
el: '.swiper-pagination', |
||||||
|
clickable: true |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
// Инициализация слайдера для полноэкранной галереи
|
||||||
|
const gallerySwiper = new Swiper('.gallery__slider', { |
||||||
|
slidesPerView: 1, |
||||||
|
spaceBetween: 10, |
||||||
|
navigation: { |
||||||
|
nextEl: '.swiper-button-next', |
||||||
|
prevEl: '.swiper-button-prev', |
||||||
|
}, |
||||||
|
pagination: { |
||||||
|
el: '.swiper-pagination', |
||||||
|
clickable: true |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
// Инициализация слайдера для рекомендованных товаров
|
||||||
|
const recommendedSwiper = new Swiper('.detail__catalot .detail-catalot__content', { |
||||||
|
slidesPerView: 1, |
||||||
|
spaceBetween: 20, |
||||||
|
navigation: { |
||||||
|
nextEl: '.detail-catalot__control .next', |
||||||
|
prevEl: '.detail-catalot__control .prev', |
||||||
|
}, |
||||||
|
breakpoints: { |
||||||
|
768: { |
||||||
|
slidesPerView: 2, |
||||||
|
}, |
||||||
|
1024: { |
||||||
|
slidesPerView: 3, |
||||||
|
}, |
||||||
|
1280: { |
||||||
|
slidesPerView: 4, |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
// Обработка переключения веса продукта
|
||||||
|
$('.detail-block-form__item--radio button').on('click', function(e) { |
||||||
|
e.preventDefault(); |
||||||
|
const variationId = $(this).data('variation-id'); |
||||||
|
|
||||||
|
// Убираем активный класс у всех кнопок
|
||||||
|
$('.detail-block-form__item--radio button').removeClass('active'); |
||||||
|
// Добавляем активный класс текущей кнопке
|
||||||
|
$(this).addClass('active'); |
||||||
|
|
||||||
|
// Отправляем AJAX запрос для получения данных вариации
|
||||||
|
$.ajax({ |
||||||
|
url: '/wp-admin/admin-ajax.php', |
||||||
|
type: 'POST', |
||||||
|
data: { |
||||||
|
action: 'get_variation_data', |
||||||
|
variation_id: variationId |
||||||
|
}, |
||||||
|
success: function(response) { |
||||||
|
if (response.success) { |
||||||
|
// Обновляем цену
|
||||||
|
$('.detail-block-price__price').text(response.data.price); |
||||||
|
|
||||||
|
// Обновляем скидку если есть
|
||||||
|
if (response.data.regular_price !== response.data.price) { |
||||||
|
$('.detail-block-price__sale').html(` |
||||||
|
<p class="detail-block-price-sale__text">${response.data.regular_price}</p> |
||||||
|
<p class="detail-block-price-sale__perc">${response.data.discount_percentage}</p> |
||||||
|
`);
|
||||||
|
} else { |
||||||
|
$('.detail-block-price__sale').empty(); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
// Обработка открытия/закрытия аккордеона
|
||||||
|
$('.toggle__title').on('click', function() { |
||||||
|
const content = $(this).next('.toggle__block-content'); |
||||||
|
const isOpen = content.is(':visible'); |
||||||
|
|
||||||
|
// Закрываем все открытые блоки
|
||||||
|
$('.toggle__block-content').slideUp(); |
||||||
|
|
||||||
|
// Если текущий блок был закрыт, открываем его
|
||||||
|
if (!isOpen) { |
||||||
|
content.slideDown(); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
// Обработка открытия галереи
|
||||||
|
$('.detail__image').on('click', function() { |
||||||
|
const imageIndex = $(this).data('count-img'); |
||||||
|
|
||||||
|
// Открываем галерею
|
||||||
|
$('.gallery').addClass('active'); |
||||||
|
|
||||||
|
// Устанавливаем активный слайд
|
||||||
|
gallerySwiper.slideTo(imageIndex); |
||||||
|
|
||||||
|
// Добавляем активный класс соответствующей миниатюре
|
||||||
|
$('.gallery-pagination__item').removeClass('active'); |
||||||
|
$(`.gallery-pagination__item[data-count-img="${imageIndex}"]`).addClass('active'); |
||||||
|
}); |
||||||
|
|
||||||
|
// Обработка закрытия галереи
|
||||||
|
$('.gallery__close').on('click', function() { |
||||||
|
$('.gallery').removeClass('active'); |
||||||
|
}); |
||||||
|
|
||||||
|
// Обработка клика по миниатюрам в галерее
|
||||||
|
$('.gallery-pagination__item').on('click', function() { |
||||||
|
const imageIndex = $(this).data('count-img'); |
||||||
|
|
||||||
|
// Переключаем слайд
|
||||||
|
gallerySwiper.slideTo(imageIndex); |
||||||
|
|
||||||
|
// Обновляем активную миниатюру
|
||||||
|
$('.gallery-pagination__item').removeClass('active'); |
||||||
|
$(this).addClass('active'); |
||||||
|
}); |
||||||
|
});
|
||||||
@ -0,0 +1 @@ |
|||||||
|
123 |
||||||
@ -0,0 +1,221 @@ |
|||||||
|
<div class="modal"> |
||||||
|
<aside class="modal__aside"> |
||||||
|
<div class="modal__item modal__filter"> |
||||||
|
<button class="modal__close"> |
||||||
|
<img src="assets/img/svg/main/black-x.svg" alt=""> |
||||||
|
</button> |
||||||
|
|
||||||
|
<div class="modal__header"> |
||||||
|
<p class="modal__title">Фильтры</p> |
||||||
|
{{sidebar_filters}} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="modal__item modal__basket"> |
||||||
|
<button class="modal__close"> |
||||||
|
<img src="assets/img/svg/main/black-x.svg" alt=""> |
||||||
|
</button> |
||||||
|
<div class="modal__header"> |
||||||
|
<p class="modal__title">Корзина</p> |
||||||
|
<div class="modal__content"> |
||||||
|
<div class="modal-basket__item modal-basket__item--return"> |
||||||
|
<p class="modal-basket-item__title"> |
||||||
|
Удаление товра из корзины: 5с |
||||||
|
</p> |
||||||
|
|
||||||
|
<button class="modal-basket-item__return"> |
||||||
|
Восстановить |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
<div class="modal-basket__item"> |
||||||
|
<div class="modal-basket-item__block-image"> |
||||||
|
<img src="assets/img/product/image.png" alt="" class="modal-basket-item__image"> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="modal-basket-item__content"> |
||||||
|
<p class="modal-basket-item__title">Сухой корм, для крупны и средних пород</p> |
||||||
|
<p class="modal-basket-item__sub-title">Индейка, 2 кг</p> |
||||||
|
<div class="modal-basket-item__control"> |
||||||
|
<div class="counter counter--small"> |
||||||
|
<button class="counter__button minus"> |
||||||
|
<img src="assets/img/svg/main/minus.svg" alt=""> |
||||||
|
</button> |
||||||
|
<input type="text" class="counter__input" value="1"> |
||||||
|
<button class="counter__button plus"> |
||||||
|
<img src="assets/img/svg/main/plus.svg" alt=""> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
<p class="modal-basket-item__price">1280</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="modal-basket__item"> |
||||||
|
<div class="modal-basket-item__block-image"> |
||||||
|
<img src="assets/img/product/image.png" alt="" class="modal-basket-item__image"> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="modal-basket-item__content"> |
||||||
|
<p class="modal-basket-item__title">Сухой корм, для крупны и средних пород</p> |
||||||
|
<p class="modal-basket-item__sub-title">Индейка, 2 кг</p> |
||||||
|
<div class="modal-basket-item__control"> |
||||||
|
<div class="counter counter--small"> |
||||||
|
<button class="counter__button minus"> |
||||||
|
<img src="assets/img/svg/main/minus.svg" alt=""> |
||||||
|
</button> |
||||||
|
<input type="text" class="counter__input" value="1"> |
||||||
|
<button class="counter__button plus"> |
||||||
|
<img src="assets/img/svg/main/plus.svg" alt=""> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
<p class="modal-basket-item__price">1280</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="modal-basket__item"> |
||||||
|
<div class="modal-basket-item__block-image"> |
||||||
|
<img src="assets/img/product/image.png" alt="" class="modal-basket-item__image"> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="modal-basket-item__content"> |
||||||
|
<p class="modal-basket-item__title">Сухой корм, для крупны и средних пород</p> |
||||||
|
<p class="modal-basket-item__sub-title">Индейка, 2 кг</p> |
||||||
|
<div class="modal-basket-item__control"> |
||||||
|
<div class="counter counter--small"> |
||||||
|
<button class="counter__button minus"> |
||||||
|
<img src="assets/img/svg/main/minus.svg" alt=""> |
||||||
|
</button> |
||||||
|
<input type="text" class="counter__input" value="1"> |
||||||
|
<button class="counter__button plus"> |
||||||
|
<img src="assets/img/svg/main/plus.svg" alt=""> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
<p class="modal-basket-item__price">1280</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="modal-basket__item"> |
||||||
|
<div class="modal-basket-item__block-image"> |
||||||
|
<img src="assets/img/product/image.png" alt="" class="modal-basket-item__image"> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="modal-basket-item__content"> |
||||||
|
<p class="modal-basket-item__title">Сухой корм, для крупны и средних пород</p> |
||||||
|
<p class="modal-basket-item__sub-title">Индейка, 2 кг</p> |
||||||
|
<div class="modal-basket-item__control"> |
||||||
|
<div class="counter counter--small"> |
||||||
|
<button class="counter__button minus"> |
||||||
|
<img src="assets/img/svg/main/minus.svg" alt=""> |
||||||
|
</button> |
||||||
|
<input type="text" class="counter__input" value="1"> |
||||||
|
<button class="counter__button plus"> |
||||||
|
<img src="assets/img/svg/main/plus.svg" alt=""> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
<p class="modal-basket-item__price">1280</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="modal-basket__item"> |
||||||
|
<div class="modal-basket-item__block-image"> |
||||||
|
<img src="assets/img/product/image.png" alt="" class="modal-basket-item__image"> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="modal-basket-item__content"> |
||||||
|
<p class="modal-basket-item__title">Сухой корм, для крупны и средних пород</p> |
||||||
|
<p class="modal-basket-item__sub-title">Индейка, 2 кг</p> |
||||||
|
<div class="modal-basket-item__control"> |
||||||
|
<div class="counter counter--small"> |
||||||
|
<button class="counter__button minus"> |
||||||
|
<img src="assets/img/svg/main/minus.svg" alt=""> |
||||||
|
</button> |
||||||
|
<input type="text" class="counter__input" value="1"> |
||||||
|
<button class="counter__button plus"> |
||||||
|
<img src="assets/img/svg/main/plus.svg" alt=""> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
<p class="modal-basket-item__price">1280</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="modal__footer"> |
||||||
|
<div class="modal__block-price"> |
||||||
|
<p class="modal-block-price__title">Общая стоимость</p> |
||||||
|
<p class="modal-block-price__price"> |
||||||
|
8960 |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
<div class="modal__block-button"> |
||||||
|
<div class="modal__button"> |
||||||
|
<button class="button button--gradient button--high button--100-perc"> |
||||||
|
Перейти к оформлению |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
<div class="modal__button"> |
||||||
|
<button class="to-know button--100-perc to-know--background-none"> |
||||||
|
<p>Продолжить покупку</p> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="modal__item modal__to-know modal__item--no-title"> |
||||||
|
<button class="modal__close"> |
||||||
|
<img src="assets/img/svg/main/black-x.svg" alt=""> |
||||||
|
</button> |
||||||
|
<div class="modal__header"> |
||||||
|
<p class="modal__small-title">Узнать о поступлении</p> |
||||||
|
<p class="modal__text"> |
||||||
|
Оставьте свой e-mail, и мы оповестим вас, когда продукт появится |
||||||
|
</p> |
||||||
|
|
||||||
|
<form action="" class="modal__form-sub"> |
||||||
|
<div class="label"> |
||||||
|
<label for="mail" class="label__title"> |
||||||
|
mail |
||||||
|
</label> |
||||||
|
|
||||||
|
<div class="label__question"> |
||||||
|
text <br> |
||||||
|
re |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<input type="text" class="form__input" id="mail" placeholder="Email"> |
||||||
|
<div class="checkbox checkbox--small"> |
||||||
|
<div class="checkbox__state"></div> |
||||||
|
<input type="checkbox" name="" id="" class="checkbox__input"> |
||||||
|
<label for="" class="checkbox__label"> |
||||||
|
Я ознакомился с <a href="#">политикой обработки персональных данных</a> и <a href="#">пользовательским соглашением</a> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
|
||||||
|
<input type="submit" value="Оставить почту" class="button button--white button--red-48-px button--100-perc active modal-form-sub__submit"> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="modal__item modal__to-know-submit modal__item--no-title"> |
||||||
|
<button class="modal__close"> |
||||||
|
<img src="assets/img/svg/main/black-x.svg" alt=""> |
||||||
|
</button> |
||||||
|
<div class="modal__header"> |
||||||
|
<p class="modal__small-title">Подписка на товар оформлена</p> |
||||||
|
<p class="modal__text"> |
||||||
|
На ваш e-mail ivan.ivanov@gmail.com придет письмо, как только продукт появится в наличии. |
||||||
|
</p> |
||||||
|
<button class="button button--white button--red-48-px button--100-perc active modal-form-sub__submit"> |
||||||
|
Продолжить покупки |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</aside> |
||||||
|
</div> |
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,156 @@ |
|||||||
|
'use strict'; |
||||||
|
|
||||||
|
// function
|
||||||
|
export function modalOpen(buttonElement, contentElement){ |
||||||
|
let modal = document.querySelector('.modal'), |
||||||
|
aside = document.querySelector('.modal__aside'), |
||||||
|
elements = document.querySelectorAll(buttonElement), |
||||||
|
device = window.screen.width; |
||||||
|
|
||||||
|
elements.forEach(e => { |
||||||
|
let thisContentElement = document.querySelector(contentElement); |
||||||
|
|
||||||
|
e.onclick = function () { |
||||||
|
modal.classList.add('active'); |
||||||
|
thisContentElement.classList.add('active'); |
||||||
|
|
||||||
|
let width = thisContentElement.clientWidth; |
||||||
|
|
||||||
|
setTimeout(() => { |
||||||
|
if (device <= 720) { |
||||||
|
aside.style.width = `${device}px`; |
||||||
|
thisContentElement.style.opacity = 1; |
||||||
|
thisContentElement.style.filter = 'blur(0px)'; |
||||||
|
}else{ |
||||||
|
aside.style.width = `${width}px`; |
||||||
|
thisContentElement.style.opacity = 1; |
||||||
|
thisContentElement.style.filter = 'blur(0px)'; |
||||||
|
} |
||||||
|
}, 10); |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export function modalClose(buttonElement) { |
||||||
|
let modal = document.querySelector('.modal'), |
||||||
|
aside = document.querySelector('.modal__aside'), |
||||||
|
asideItems = document.querySelectorAll('.modal__item'), |
||||||
|
elements = document.querySelectorAll(buttonElement); |
||||||
|
|
||||||
|
elements.forEach(e => { |
||||||
|
e.onclick = function () {
|
||||||
|
aside.style.width = '0px'; |
||||||
|
|
||||||
|
asideItems.forEach(e => { |
||||||
|
if (e.classList.contains('active')) { |
||||||
|
e.style.filter = 'blur(10px)'; |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
setTimeout(() => { |
||||||
|
asideItems.forEach(e => { |
||||||
|
if (e.classList.contains('active')) { |
||||||
|
e.classList.remove('active'); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
modal.classList.remove('active'); |
||||||
|
}, 300); |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export function closeModalForm(close){ |
||||||
|
let buttons = document.querySelectorAll(close), |
||||||
|
modal = document.querySelector('.modal'); |
||||||
|
|
||||||
|
buttons.forEach(button => { |
||||||
|
button.onclick = function (buttonEvent) { |
||||||
|
modal.classList.remove('active'); |
||||||
|
|
||||||
|
if (!modal.querySelector('.modal-map.active')) { |
||||||
|
modal.querySelector('.modal-form.active').classList.remove('active'); |
||||||
|
}else{ |
||||||
|
modal.querySelector('.modal-map.active').classList.remove('active'); |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) { |
||||||
|
let elements = document.querySelectorAll(mainElement); |
||||||
|
|
||||||
|
elements.forEach(e => { |
||||||
|
let thisMainElement = e, |
||||||
|
thisButtonElement = e.querySelector(buttonElement), |
||||||
|
thisHeightElement = e.querySelector(heightElement), |
||||||
|
thisContentElement = e.querySelector(contentElement);
|
||||||
|
|
||||||
|
thisButtonElement.onclick = function (e) { |
||||||
|
let height = thisHeightElement.clientHeight; |
||||||
|
|
||||||
|
if (close == true && !thisMainElement.classList.contains('active')) { |
||||||
|
elements.forEach(e => { |
||||||
|
if (e.classList.contains('active')) { |
||||||
|
e.classList.remove('active'); |
||||||
|
e.querySelector(contentElement).style.height = null |
||||||
|
}
|
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
if (!thisMainElement.classList.contains('active')) { |
||||||
|
thisContentElement.style.height = `${height}px`; |
||||||
|
thisMainElement.classList.add('active'); |
||||||
|
}else{ |
||||||
|
thisContentElement.style.height = null; |
||||||
|
thisMainElement.classList.remove('active'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
export function toggleHeader(button, content, blockheight, removeBlock, removeClass) { |
||||||
|
let thisButton = document.querySelector(button),
|
||||||
|
thisContent = document.querySelector(content), |
||||||
|
thisRemoveBlock = document.querySelector(removeBlock) || '', |
||||||
|
thisBlockheight = document.querySelector(blockheight); |
||||||
|
|
||||||
|
thisButton.onclick = function () { |
||||||
|
let height = thisBlockheight.clientHeight; |
||||||
|
|
||||||
|
if (!thisContent.classList .contains('open')) { |
||||||
|
thisContent.style.height = `${height}px`; |
||||||
|
thisContent.classList .add('open'); |
||||||
|
|
||||||
|
if (removeBlock) { |
||||||
|
thisRemoveBlock.classList.remove(removeClass); |
||||||
|
} |
||||||
|
}else{ |
||||||
|
thisContent.style.height = null; |
||||||
|
thisContent.classList .remove('open'); |
||||||
|
|
||||||
|
if (removeBlock) { |
||||||
|
if (window.scrollY <= 25) { |
||||||
|
thisRemoveBlock.classList.add(removeClass); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export function modalFormOpen(formOrNotification) { |
||||||
|
let buttons = document.querySelectorAll(formOrNotification), |
||||||
|
modal = document.querySelector('.modal'); |
||||||
|
|
||||||
|
buttons.forEach(button => { |
||||||
|
button.onclick = function (eventButton) { |
||||||
|
let classOpenForm = button.dataset.form, |
||||||
|
form = modal.querySelector(`.${classOpenForm}`);
|
||||||
|
|
||||||
|
form.classList.add('active'); |
||||||
|
modal.classList.add('active'); |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
// function
|
||||||
@ -0,0 +1,110 @@ |
|||||||
|
'use strict'; |
||||||
|
|
||||||
|
// slider gallery modal
|
||||||
|
const gallery = new Swiper('.gallery__slider', { |
||||||
|
spaceBetween: 100, |
||||||
|
|
||||||
|
pagination: { |
||||||
|
el: '.swiper-pagination', |
||||||
|
}, |
||||||
|
|
||||||
|
navigation: { |
||||||
|
nextEl: '.swiper-button-next', |
||||||
|
prevEl: '.swiper-button-prev', |
||||||
|
}, |
||||||
|
|
||||||
|
scrollbar: { |
||||||
|
el: '.swiper-scrollbar', |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
let paginationButtons = document.querySelectorAll('.gallery-pagination__item'); |
||||||
|
|
||||||
|
paginationButtons.forEach(button => { |
||||||
|
let index = button.dataset.countImg; |
||||||
|
|
||||||
|
button.onclick = function () { |
||||||
|
gallery.slideTo(index); |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
// open gallery
|
||||||
|
let detailImage= document.querySelectorAll('.detail__image'); |
||||||
|
detailImage.forEach(button => { |
||||||
|
let index = button.dataset.countImg; |
||||||
|
|
||||||
|
button.onclick = function () { |
||||||
|
gallery.slideTo(index); |
||||||
|
|
||||||
|
document.querySelector('.gallery').classList.add('active'); |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
// close gallery
|
||||||
|
|
||||||
|
document.querySelector('.gallery__close').onclick = function () { |
||||||
|
document.querySelector('.gallery').classList.remove('active'); |
||||||
|
} |
||||||
|
// slider gallery modal
|
||||||
|
|
||||||
|
// slider gallery main phone
|
||||||
|
|
||||||
|
// createGalleryPhone('.detail__images', '.detail-images__wrapper', '.detail__image', 980);
|
||||||
|
|
||||||
|
const detailPhone = new Swiper('.detail__images-phone', { |
||||||
|
spaceBetween: 100, |
||||||
|
|
||||||
|
pagination: { |
||||||
|
el: '.swiper-pagination', |
||||||
|
}, |
||||||
|
|
||||||
|
navigation: { |
||||||
|
nextEl: '.swiper-button-next', |
||||||
|
prevEl: '.swiper-button-prev', |
||||||
|
}, |
||||||
|
|
||||||
|
scrollbar: { |
||||||
|
el: '.swiper-scrollbar', |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
let detailImagesPhones = document.querySelectorAll('.detail-images-phone__image-block'); |
||||||
|
|
||||||
|
detailImagesPhones.forEach(button => { |
||||||
|
button.onclick = function (e) { |
||||||
|
let index = button.dataset.countImg; |
||||||
|
|
||||||
|
gallery.slideTo(index); |
||||||
|
|
||||||
|
document.querySelector('.gallery').classList.add('active'); |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
// slider gallery main phone
|
||||||
|
|
||||||
|
// detail catalog
|
||||||
|
const detailCatalot = new Swiper('.detail__catalot', { |
||||||
|
// Navigation arrows
|
||||||
|
navigation: { |
||||||
|
nextEl: '.detail-catalot-control__button.next', |
||||||
|
prevEl: '.detail-catalot-control__button.prev', |
||||||
|
}, |
||||||
|
breakpoints: { |
||||||
|
1600: { |
||||||
|
slidesPerView: 4, |
||||||
|
}, |
||||||
|
1200: { |
||||||
|
slidesPerView: 3, |
||||||
|
}, |
||||||
|
780: { |
||||||
|
slidesPerView: 2, |
||||||
|
}, |
||||||
|
100: { |
||||||
|
slidesPerView: 1.1, |
||||||
|
spaceBetween: 20 |
||||||
|
}, |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
}); |
||||||
|
// detail catalog
|
||||||
@ -0,0 +1,67 @@ |
|||||||
|
'use strict'; |
||||||
|
|
||||||
|
import * as fun from './_gp-function.js'; |
||||||
|
|
||||||
|
let widthPhoneCabinet = 1200; |
||||||
|
|
||||||
|
fun.toggleOpenX('.cabinet-card__order', '.cabinet-card-order__open-detail', '.cabinet-card-order__detail', '.cabinet-card-order__block-detail'); |
||||||
|
fun.modalFormOpen('.form-open'); |
||||||
|
|
||||||
|
fun.closeModalForm('.modal-form__close'); |
||||||
|
fun.closeModalForm('.modal-form__button-close'); |
||||||
|
|
||||||
|
controlCabinet('.cabinet-control__button', '.cabinet', widthPhoneCabinet); |
||||||
|
|
||||||
|
function controlCabinet(buttons, main, minWidth){ |
||||||
|
let thisWidth = window.innerWidth; |
||||||
|
let thisMain = document.querySelector(main); |
||||||
|
|
||||||
|
let thisButtons = document.querySelectorAll(buttons); |
||||||
|
|
||||||
|
thisButtons.forEach(e => { |
||||||
|
e.onclick = function (element){ |
||||||
|
let thisContent = document.querySelector(`.cabinet__${e.dataset.cabinet}`); |
||||||
|
let newHeight = thisContent.clientHeight + 48; |
||||||
|
let thisButton = element.target; |
||||||
|
|
||||||
|
thisMain.style.height = `${newHeight}px` |
||||||
|
|
||||||
|
if (!thisContent.classList.contains('active')) { |
||||||
|
thisMain.querySelector('.active').classList.remove('active'); |
||||||
|
thisContent.classList.add('active'); |
||||||
|
|
||||||
|
setTimeout(() => { |
||||||
|
thisMain.style.height = 'auto'; |
||||||
|
|
||||||
|
if (thisMain.querySelector('.hide')) { |
||||||
|
thisMain.querySelector('.hide').classList.remove('hide'); |
||||||
|
} |
||||||
|
|
||||||
|
thisMain.querySelector('.active').classList.add('hide'); |
||||||
|
}, 200); |
||||||
|
} |
||||||
|
|
||||||
|
thisButtons.forEach(e => { |
||||||
|
e.classList.remove('active'); |
||||||
|
}) |
||||||
|
thisButton.classList.add('active'); |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
let modal = document.querySelector('.modal'); |
||||||
|
modal.onclick = function (eventModal) { |
||||||
|
let thisTarget = eventModal.target; |
||||||
|
|
||||||
|
if (thisTarget.classList.contains('modal')) { |
||||||
|
thisTarget.classList.remove('active'); |
||||||
|
|
||||||
|
if (!thisTarget.querySelector('.modal-map.active')) { |
||||||
|
thisTarget.querySelector('.modal-form.active').classList.remove('active'); |
||||||
|
}else{ |
||||||
|
thisTarget.querySelector('.modal-map.active').classList.remove('active'); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,284 @@ |
|||||||
|
'use strict'; |
||||||
|
|
||||||
|
|
||||||
|
inputPhone('.form-input__phone', '.form-input-phone__icon', '.form-input-phone__code', '.form-input-phone__input', '.form-input-phone__list', 'form-input-phone-list__item', '.form-input-phone-list-item__icon', '.form-input-phone-list-item__code', 'form-input-phone-list__search'); |
||||||
|
|
||||||
|
function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon, selectCode, searchInput) { |
||||||
|
let inputs = document.querySelectorAll(main); |
||||||
|
|
||||||
|
inputs.forEach(e => { |
||||||
|
let thisMainFlag = e.querySelector(mainFlag),
|
||||||
|
thisMainCode = e.querySelector(mainCode), |
||||||
|
thisInput = e.querySelector(input), |
||||||
|
thisList = e.querySelector(list), |
||||||
|
thisSelects = e.querySelectorAll(`.${selects}`), |
||||||
|
thisSearchInput = e.querySelector(`.${searchInput}`); |
||||||
|
|
||||||
|
thisInput.onblur = function (input) { |
||||||
|
if (!(input.relatedTarget != null && (input.relatedTarget.classList.contains(searchInput) || input.relatedTarget.classList.contains(selects)))) { |
||||||
|
thisList.classList.remove('active');
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
e.onclick = function (event) { |
||||||
|
if (!event.target.classList.contains(searchInput)) { |
||||||
|
if (thisList.classList.contains('active')) { |
||||||
|
thisList.classList.remove('active'); |
||||||
|
} |
||||||
|
|
||||||
|
thisInput.focus(); |
||||||
|
thisList.classList.add('active'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
thisSelects.forEach(e => { |
||||||
|
let newIcon = e.querySelector(selectIcon), |
||||||
|
newCode = e.querySelector(selectCode); |
||||||
|
|
||||||
|
e.onclick = function (event) { |
||||||
|
event.preventDefault(); |
||||||
|
thisMainFlag.style.cssText = `background-image:url("${newIcon.src}");`; |
||||||
|
thisMainCode.textContent = newCode.textContent; |
||||||
|
|
||||||
|
|
||||||
|
setTimeout(() => { |
||||||
|
thisList.classList.remove('active'); |
||||||
|
}, 0); |
||||||
|
} |
||||||
|
|
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
if (document.querySelector('.form-input-phone__input')) { |
||||||
|
checkPhone('.form-input-phone__input'); |
||||||
|
} |
||||||
|
|
||||||
|
function checkPhone(input) { |
||||||
|
document.querySelector(input).addEventListener('input', function(event) { |
||||||
|
let text = event.target.value; |
||||||
|
let length = text.length; |
||||||
|
let newSymbol = event.data; |
||||||
|
|
||||||
|
if (!(/^\d+$/.test(text.replaceAll(' ', '')))) { |
||||||
|
event.target.value = text.slice(0, -1); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if (length == 4 || length == 8) { |
||||||
|
if (newSymbol != null) { |
||||||
|
event.target.value = text.slice(0, -1) + ' ' + newSymbol; |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
inputTabs('.form-input__tabs', '.form-input-tabs__button'); |
||||||
|
inputTabs('.modal-map__control', '.modal-map-control__item'); |
||||||
|
|
||||||
|
function inputTabs(main, button) { |
||||||
|
let mains = document.querySelectorAll(main); |
||||||
|
|
||||||
|
mains.forEach(main => { |
||||||
|
let buttons = main.querySelectorAll(button); |
||||||
|
|
||||||
|
buttons.forEach(button => { |
||||||
|
button.onclick = function () { |
||||||
|
if (button.classList.contains('active')) { |
||||||
|
return ; |
||||||
|
} |
||||||
|
|
||||||
|
main.querySelector('.active').classList.remove('active'); |
||||||
|
|
||||||
|
button.classList.add('active'); |
||||||
|
|
||||||
|
button.querySelector('input').click(); |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
inputRadio('.form-input__radio', '.form-input-radio__item', '.form-input-radio__title', '.form-input-radio__input') |
||||||
|
|
||||||
|
function inputRadio(main ,item, textClass, input) { |
||||||
|
let inputRadios = document.querySelectorAll(main); |
||||||
|
|
||||||
|
inputRadios.forEach(inputRadio => { |
||||||
|
let items = inputRadio.querySelectorAll(item), |
||||||
|
thisInput = inputRadio.querySelector(input); |
||||||
|
|
||||||
|
items.forEach(radio => { |
||||||
|
let thisText = radio.querySelector(textClass).textContent; |
||||||
|
|
||||||
|
radio.onclick = function (event) { |
||||||
|
event.preventDefault(); |
||||||
|
|
||||||
|
if (inputRadio.querySelector(`${item}.active`)) { |
||||||
|
inputRadio.querySelector(`${item}.active`).classList.remove('active'); |
||||||
|
} |
||||||
|
thisInput.value = thisText; |
||||||
|
radio.classList.add('active'); |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
listInputRadio('.form-input__list' ,'.form-input-list__item', '.form-input-list-item__text', '.form-input-list__input', '.form-input-list__content', '.form-input-list__block-content'); |
||||||
|
|
||||||
|
function listInputRadio(main ,item, textClass, input, content, block) { |
||||||
|
let listInputRadios = document.querySelectorAll(main); |
||||||
|
|
||||||
|
listInputRadios.forEach(listInputRadio => { |
||||||
|
let thisInput = listInputRadio.querySelector(input), |
||||||
|
items = listInputRadio.querySelectorAll(item), |
||||||
|
thisContent = listInputRadio.querySelector(content), |
||||||
|
thisBlock = listInputRadio.querySelector(block); |
||||||
|
|
||||||
|
thisInput.onclick = function () { |
||||||
|
thisBlock.classList.add('active'); |
||||||
|
thisBlock.style.height = '192px'; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
thisInput.onblur = function(){ |
||||||
|
thisBlock.classList.remove('active'); |
||||||
|
thisBlock.style.height = '0px'; |
||||||
|
}; |
||||||
|
|
||||||
|
items.forEach(item => { |
||||||
|
item.onclick = function (event) { |
||||||
|
event.preventDefault(); |
||||||
|
let newText = item.querySelector(textClass).textContent; |
||||||
|
|
||||||
|
thisInput.value = newText; |
||||||
|
|
||||||
|
if (thisContent.querySelector('.active')) { |
||||||
|
thisContent.querySelector('.active').classList.remove('active'); |
||||||
|
} |
||||||
|
|
||||||
|
item.classList.add('active'); |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
remoteControl('.form-input__remote-control', '.form-input-tabs__button'); |
||||||
|
remoteControl('.modal-map__control', '.modal-map-control__item'); |
||||||
|
|
||||||
|
function remoteControl(main, button) { |
||||||
|
let mains = document.querySelectorAll(main); |
||||||
|
|
||||||
|
mains.forEach(main => { |
||||||
|
let subjectClass = main.dataset.content, |
||||||
|
subject = document.querySelector(`.${subjectClass}`), |
||||||
|
buttons = Array.from(main.querySelectorAll(button)); |
||||||
|
|
||||||
|
main.addEventListener('click', function (eventMain) { |
||||||
|
setTimeout(() => { |
||||||
|
let indexActive = buttons.findIndex((button, index) => { |
||||||
|
if (button.classList.contains('active')) { |
||||||
|
return true; |
||||||
|
} |
||||||
|
}); |
||||||
|
if(subject.children[indexActive].classList.contains('active')){ |
||||||
|
return ; |
||||||
|
} |
||||||
|
|
||||||
|
subject.querySelector('.remote-control__item.active').classList.remove('active'); |
||||||
|
subject.children[indexActive].classList.add('active'); |
||||||
|
|
||||||
|
let mandatorys = subject.querySelectorAll('.mandatory'); |
||||||
|
|
||||||
|
mandatorys.forEach(mandatory => { |
||||||
|
if (mandatory.required) { |
||||||
|
mandatory.required = false; |
||||||
|
}else{ |
||||||
|
mandatory.required = true; |
||||||
|
} |
||||||
|
}) |
||||||
|
}, 0); |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
formCheck('.modal-form__content', 'input[type=submit]'); |
||||||
|
formCheck('.modal-map__form', 'input[type=submit]'); |
||||||
|
|
||||||
|
function formCheck(form, submit) { |
||||||
|
let forms = document.querySelectorAll(form); |
||||||
|
|
||||||
|
forms.forEach(form => { |
||||||
|
let thisSubmit = form.querySelector(submit); |
||||||
|
|
||||||
|
thisSubmit.onclick = function () { |
||||||
|
form.classList.add('check') |
||||||
|
} |
||||||
|
|
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
inputPhoneNoFlag('.no-flag'); |
||||||
|
|
||||||
|
function inputPhoneNoFlag(input){ |
||||||
|
let inputs = document.querySelectorAll(input); |
||||||
|
|
||||||
|
inputs.forEach(input => { |
||||||
|
let code = '+' + input.dataset.code; |
||||||
|
|
||||||
|
input.onfocus = function () { |
||||||
|
if (input.value == '') { |
||||||
|
input.value = code; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
input.addEventListener('input', function(event) { |
||||||
|
let text = event.target.value; |
||||||
|
let length = text.length; |
||||||
|
let newSymbol = event.data; |
||||||
|
|
||||||
|
if (isNaN(event.data) || event.data == ' ') { |
||||||
|
event.target.value = text.slice(0, -1); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if (length == 3 || length == 7 || length == 11) { |
||||||
|
if (newSymbol != null) { |
||||||
|
event.target.value = text.slice(0, -1) + ' ' + newSymbol; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
inputCheck('.form-agreement__check'); |
||||||
|
|
||||||
|
function inputCheck(className) { |
||||||
|
let checks = document.querySelectorAll(className); |
||||||
|
|
||||||
|
checks.forEach(check => { |
||||||
|
let square = check.querySelector('.form-agreement__square'), |
||||||
|
input = check.querySelector('input'); |
||||||
|
|
||||||
|
square.onclick = function () { |
||||||
|
input.click();
|
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
inputRead('.input-read'); |
||||||
|
function inputRead(className) { |
||||||
|
let inputs = document.querySelectorAll(className); |
||||||
|
|
||||||
|
inputs.forEach(input => { |
||||||
|
input.addEventListener("input", function (event) { |
||||||
|
let text = event.target.value; |
||||||
|
|
||||||
|
event.target.value = text.slice(0, -1);
|
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
@ -0,0 +1,480 @@ |
|||||||
|
'use strict'; |
||||||
|
|
||||||
|
jQuery(document).ready(function ($) { |
||||||
|
// OVERLAY
|
||||||
|
$('.product__main').on('click', '.open-overlay', function () { |
||||||
|
let product = $(this).closest('.product__item'), |
||||||
|
overlay = product.find('.product-item__overlay'); |
||||||
|
|
||||||
|
$('.product__item').find('.product-item__overlay').css('top', '100%'); |
||||||
|
overlay.css('top', 0); |
||||||
|
}) |
||||||
|
// END OVERLAY
|
||||||
|
|
||||||
|
$('.product__main').on('click', '.state__button', function(evt) { |
||||||
|
evt.preventDefault(); |
||||||
|
let product = $(this).closest('.product__item'); |
||||||
|
let price = $(this).data('product_price'); |
||||||
|
let id = $(this).data('product_id'); |
||||||
|
let qty = product.find('.counter__input').val(); |
||||||
|
product.find('.product-item-overlay__price').html(price * qty + ' '); |
||||||
|
product.find('.select__state').data('product_price', price).data('product_id', id).val($(this).text().trim()); |
||||||
|
product.find('.state__block').removeClass('expanded').css('height', '0'); |
||||||
|
|
||||||
|
product.find('.add_to_cart_button').detach(); |
||||||
|
product.find('.product-item-overlay__button').prepend('<a href="?add-to-cart=' + id + '" class="ajax_add_to_cart add_to_cart_button button button--gradient button--base button--100-perc" data-product_id="'+id+'">Добавить в корзину</a>'); |
||||||
|
}) |
||||||
|
|
||||||
|
$('.product__main').on('click', '.counter__button', function(evt) { |
||||||
|
evt.preventDefault(); |
||||||
|
let product = $(this).closest('.product__item'); |
||||||
|
let price = parseFloat(product.find('.select__state').data('product_price')); |
||||||
|
let qty = product.find('.counter__input'); |
||||||
|
|
||||||
|
if ($(this).hasClass('minus') && parseInt(qty.val()) >= 2) { |
||||||
|
qty.val(parseInt(qty.val()) - 1); |
||||||
|
} else { |
||||||
|
if ($(this).hasClass('plus')) { |
||||||
|
qty.val(parseInt(qty.val()) + 1); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
product.find('.product-item-overlay__price').html(price * qty.val() + ' '); |
||||||
|
}) |
||||||
|
|
||||||
|
$('.product__main').on('click', '.select__state', function(evt) { |
||||||
|
evt.preventDefault(); |
||||||
|
let product = $(this).closest('.product__item'), |
||||||
|
listing = product.find('.state__block'); |
||||||
|
|
||||||
|
if (listing.hasClass('expanded')) { |
||||||
|
listing.removeClass('expanded').css('height', '0'); |
||||||
|
} else { |
||||||
|
listing.addClass('expanded').css('height', 'auto'); |
||||||
|
} |
||||||
|
|
||||||
|
product.find('.state__block').find('.state__button').removeClass('active'); |
||||||
|
product.find('.state__button').each(function () { |
||||||
|
if (product.find('.select__state').data('product_id') === $(this).data('product_id')) { |
||||||
|
$(this).addClass('active'); |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
let page = 1; |
||||||
|
|
||||||
|
jQuery('body').on('click', '#load-more-products', function(e) { |
||||||
|
e.preventDefault(); |
||||||
|
page++; |
||||||
|
|
||||||
|
let category = $(this).data('category_id'); |
||||||
|
let category_type = $(this).data('category_type'); |
||||||
|
|
||||||
|
$.ajax({ |
||||||
|
type: 'POST', |
||||||
|
url: '/wp-admin/admin-ajax.php', |
||||||
|
dataType: 'html', |
||||||
|
data: { |
||||||
|
'action' : 'get_products', |
||||||
|
'get_page' : page, |
||||||
|
'get_category' : category, |
||||||
|
'get_category_type' : category_type, |
||||||
|
}, |
||||||
|
success: function(data) { |
||||||
|
// if($('<div></div>').html(data).find('.archive__item.ended').size() > 0) $('#load-more-products').parents('.cta').remove();
|
||||||
|
// else $('#load-more-products').parents('.cta').show();
|
||||||
|
|
||||||
|
$('#load-more-products').detach(); |
||||||
|
$('.product__main').append(data); |
||||||
|
$('#load-more-products').prependTo('.product__footer'); |
||||||
|
}, |
||||||
|
error: function(data) { |
||||||
|
console.log(data); |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
$('.wpfMainWrapper').prepend('<div class="wpfFilters"></div>'); |
||||||
|
$('.wpfMainWrapper').find('.wpfFilterWrapper').appendTo($('.wpfFilters')); |
||||||
|
|
||||||
|
$('.wpfFilterWrapper').each(function () { |
||||||
|
if ($(this).data('filter-type') === 'wpfPrice') { |
||||||
|
$(this).find('.wpfFilterContent').append('<div class="wpfExpandablePart"></div>'); |
||||||
|
$(this).find('.wpfPriceFilterRange').appendTo('.wpfExpandablePart'); |
||||||
|
$(this).find('.wpfPriceInputs').appendTo('.wpfExpandablePart'); |
||||||
|
|
||||||
|
$(this).find('.wpfCurrencySymbol').detach(); |
||||||
|
$(this).find('.wpfFilterDelimeter').detach(); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
$('.wfpDescription').on('click', function () { |
||||||
|
$(this).closest('.wpfFilterWrapper').toggleClass('expanded').find('.wpfCheckboxHier').slideToggle(); |
||||||
|
$(this).parent().find('.wpfExpandablePart').slideToggle(); |
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// header
|
||||||
|
toggleOpenX('.lang', '.lang__open', '.lang__list', '.lang__content', false); |
||||||
|
toggleHeader('#pc-menu','.header__menu-block','.header__pc-menu', '.white', 'white'); |
||||||
|
toggleHeader('#phone-menu','.header__menu-block','.header__phone-menu', '.white', 'white'); |
||||||
|
// header
|
||||||
|
|
||||||
|
// modal
|
||||||
|
modalOpen('.button--filter', '.modal__filter'); |
||||||
|
modalOpen('.basket-open', '.modal__basket'); |
||||||
|
modalOpen('.open-to-know', '.modal__to-know'); |
||||||
|
modalClose('.modal__close'); |
||||||
|
|
||||||
|
let modal = document.querySelector('.modal'); |
||||||
|
|
||||||
|
modal.onclick = function (event) { |
||||||
|
let target = event.target; |
||||||
|
|
||||||
|
if (target.classList.contains('modal')) { |
||||||
|
let aside = target.querySelector('.modal__aside'), |
||||||
|
modalItem = target.querySelector('.modal__item.active'), |
||||||
|
body = document.querySelector('body'); |
||||||
|
|
||||||
|
aside.style.width = '0px'; |
||||||
|
body.classList.remove('overflow-hidden'); |
||||||
|
setTimeout(() => { |
||||||
|
modalItem.style.cssText = ''; |
||||||
|
modalItem.classList.remove('active'); |
||||||
|
target.classList.remove('active'); |
||||||
|
}, 300); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// modal
|
||||||
|
|
||||||
|
// toggle
|
||||||
|
toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true); |
||||||
|
// toggle
|
||||||
|
|
||||||
|
// radio-button
|
||||||
|
let radioButtons = document.querySelectorAll('.radio-button'); |
||||||
|
|
||||||
|
radioButtons.forEach(radioBlock => { |
||||||
|
let buttons = radioBlock.querySelectorAll('.button'); |
||||||
|
|
||||||
|
buttons.forEach(button => { |
||||||
|
let input = radioBlock.querySelector('.radio-button__input'); |
||||||
|
|
||||||
|
button.onclick = function (e) { |
||||||
|
e.preventDefault(); |
||||||
|
|
||||||
|
buttons.forEach(thisButton => { |
||||||
|
if (thisButton.classList.contains('active')) { |
||||||
|
thisButton.classList.remove('active') |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
let text = button.textContent.trim(); |
||||||
|
|
||||||
|
button.classList.toggle('active'); |
||||||
|
|
||||||
|
input.value = text;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}) |
||||||
|
// radio-button
|
||||||
|
|
||||||
|
// overlay
|
||||||
|
// let products = document.querySelectorAll('.product__item');
|
||||||
|
|
||||||
|
// products.forEach(productItem => {
|
||||||
|
// let button = productItem.querySelector('.open-overlay'),
|
||||||
|
// overlay = productItem.querySelector('.product-item__overlay');
|
||||||
|
|
||||||
|
|
||||||
|
// if (button) {
|
||||||
|
// button.onclick = function (e) {
|
||||||
|
// document.querySelectorAll('.product__item').forEach(e => {
|
||||||
|
// if (e.classList.contains('active')) {
|
||||||
|
// e.classList.remove('active');
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// document.querySelectorAll('.product-item__overlay').forEach(e => {
|
||||||
|
// if (e.classList.contains('active')) {
|
||||||
|
// e.classList.remove('active');
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
// productItem.classList.toggle('active');
|
||||||
|
// overlay.classList.toggle('active');
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// })
|
||||||
|
// overlay
|
||||||
|
|
||||||
|
|
||||||
|
// select
|
||||||
|
// toggleOpenX('.select', '.select__state' , '.state__content', '.state__block', true);
|
||||||
|
|
||||||
|
// let selects = document.querySelectorAll('.select');
|
||||||
|
|
||||||
|
// selects.forEach(select => {
|
||||||
|
// let state = select.querySelector('.select__state'),
|
||||||
|
// content = select.querySelector('.state__block'),
|
||||||
|
// buttons = select.querySelectorAll('.state__button');
|
||||||
|
|
||||||
|
// buttons.forEach(e => {
|
||||||
|
// let button = e;
|
||||||
|
|
||||||
|
// e.onclick = function (event) {
|
||||||
|
// event.preventDefault();
|
||||||
|
|
||||||
|
// buttons.forEach(element => {
|
||||||
|
// if (element.classList.contains('active')) {
|
||||||
|
// element.classList.remove('active');
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
|
||||||
|
// let text = e.textContent.trim();
|
||||||
|
// state.value = text;
|
||||||
|
|
||||||
|
// button.classList.add('active');
|
||||||
|
// content.style.height = 0;
|
||||||
|
// select.classList.remove('active');
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// })
|
||||||
|
|
||||||
|
|
||||||
|
// select
|
||||||
|
|
||||||
|
// counter
|
||||||
|
// let counters = document.querySelectorAll('.counter');
|
||||||
|
|
||||||
|
// counters.forEach(e => {
|
||||||
|
// let minus = e.querySelector('.minus'),
|
||||||
|
// plus = e.querySelector('.plus'),
|
||||||
|
// input = e.querySelector('.counter__input');
|
||||||
|
|
||||||
|
// minus.onclick = function (e) {
|
||||||
|
// e.preventDefault();
|
||||||
|
|
||||||
|
// let number = input.value;
|
||||||
|
|
||||||
|
// if (number >= 2){
|
||||||
|
// input.value = Number(number) - 1;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// plus.onclick = function (e) {
|
||||||
|
// e.preventDefault();
|
||||||
|
|
||||||
|
// let number = input.value;
|
||||||
|
|
||||||
|
// if (number <= 99) {
|
||||||
|
// input.value = Number(number) + 1;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// counter
|
||||||
|
|
||||||
|
// checkbox
|
||||||
|
let checkbox = document.querySelectorAll('.checkbox'); |
||||||
|
|
||||||
|
checkbox.forEach(e => { |
||||||
|
e.onclick = function (event) { |
||||||
|
let input = e.querySelector('.checkbox__input'); |
||||||
|
|
||||||
|
if (!e.classList.contains('active')) { |
||||||
|
input.checked = 1; |
||||||
|
}else{ |
||||||
|
input.checked = 0; |
||||||
|
} |
||||||
|
e.classList.toggle('active'); |
||||||
|
} |
||||||
|
}) |
||||||
|
// checkbox
|
||||||
|
|
||||||
|
|
||||||
|
// function
|
||||||
|
function modalOpen(buttonElement, contentElement){ |
||||||
|
let modal = document.querySelector('.modal'), |
||||||
|
aside = document.querySelector('.modal__aside'), |
||||||
|
elements = document.querySelectorAll(buttonElement), |
||||||
|
device = window.screen.width, |
||||||
|
body = document.querySelector('body'); |
||||||
|
|
||||||
|
elements.forEach(e => { |
||||||
|
let thisContentElement = document.querySelector(contentElement); |
||||||
|
|
||||||
|
e.onclick = function () { |
||||||
|
body.classList.add('overflow-hidden'); |
||||||
|
modal.classList.add('active'); |
||||||
|
thisContentElement.classList.add('active'); |
||||||
|
|
||||||
|
let width = thisContentElement.clientWidth; |
||||||
|
|
||||||
|
setTimeout(() => { |
||||||
|
if (device <= 720) { |
||||||
|
aside.style.width = `${device}px`; |
||||||
|
thisContentElement.style.opacity = 1; |
||||||
|
thisContentElement.style.filter = 'blur(0px)'; |
||||||
|
}else{ |
||||||
|
aside.style.width = `${width}px`; |
||||||
|
thisContentElement.style.opacity = 1; |
||||||
|
thisContentElement.style.filter = 'blur(0px)'; |
||||||
|
} |
||||||
|
}, 10); |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
function modalClose(buttonElement) { |
||||||
|
let modal = document.querySelector('.modal'), |
||||||
|
aside = document.querySelector('.modal__aside'), |
||||||
|
asideItems = document.querySelectorAll('.modal__item'), |
||||||
|
elements = document.querySelectorAll(buttonElement), |
||||||
|
body = document.querySelector('body'); |
||||||
|
|
||||||
|
elements.forEach(e => { |
||||||
|
e.onclick = function () {
|
||||||
|
body.classList.remove('overflow-hidden');
|
||||||
|
aside.style.width = '0px'; |
||||||
|
|
||||||
|
asideItems.forEach(e => { |
||||||
|
if (e.classList.contains('active')) { |
||||||
|
e.style.filter = 'blur(10px)'; |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
setTimeout(() => { |
||||||
|
asideItems.forEach(e => { |
||||||
|
if (e.classList.contains('active')) { |
||||||
|
e.classList.remove('active'); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
modal.classList.remove('active'); |
||||||
|
}, 300); |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) { |
||||||
|
let elements = document.querySelectorAll(mainElement); |
||||||
|
|
||||||
|
elements.forEach(e => { |
||||||
|
let thisMainElement = e, |
||||||
|
thisButtonElement = e.querySelector(buttonElement), |
||||||
|
thisHeightElement = e.querySelector(heightElement), |
||||||
|
thisContentElement = e.querySelector(contentElement);
|
||||||
|
|
||||||
|
thisButtonElement.onclick = function (e) { |
||||||
|
let height = thisHeightElement.clientHeight; |
||||||
|
|
||||||
|
if (close == true && !thisMainElement.classList.contains('active')) { |
||||||
|
elements.forEach(e => { |
||||||
|
if (e.classList.contains('active')) { |
||||||
|
e.classList.remove('active'); |
||||||
|
e.querySelector(contentElement).style.height = null |
||||||
|
}
|
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
if (!thisMainElement.classList.contains('active')) { |
||||||
|
thisContentElement.style.height = `${height}px`; |
||||||
|
thisMainElement.classList.add('active'); |
||||||
|
}else{ |
||||||
|
thisContentElement.style.height = null; |
||||||
|
thisMainElement.classList.remove('active'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function toggleHeader(button, content, blockheight, removeBlock, removeClass) { |
||||||
|
let thisButton = document.querySelector(button),
|
||||||
|
thisContent = document.querySelector(content), |
||||||
|
thisRemoveBlock = document.querySelector(removeBlock) || '', |
||||||
|
thisBlockheight = document.querySelector(blockheight); |
||||||
|
|
||||||
|
thisButton.onclick = function () { |
||||||
|
let height = thisBlockheight.clientHeight; |
||||||
|
|
||||||
|
if (!thisContent.classList .contains('open')) { |
||||||
|
thisContent.style.height = `${height}px`; |
||||||
|
thisContent.classList .add('open'); |
||||||
|
|
||||||
|
if (removeBlock) { |
||||||
|
thisRemoveBlock.classList.remove(removeClass); |
||||||
|
} |
||||||
|
}else{ |
||||||
|
thisContent.style.height = null; |
||||||
|
thisContent.classList .remove('open'); |
||||||
|
|
||||||
|
if (removeBlock) { |
||||||
|
if (window.scrollY <= 25) { |
||||||
|
thisRemoveBlock.classList.add(removeClass); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
// function
|
||||||
|
|
||||||
|
// resize
|
||||||
|
window.addEventListener('resize', (e) => { |
||||||
|
let width = window.screen.width; |
||||||
|
|
||||||
|
// media
|
||||||
|
modalOpen('.button--filter', '.modal__filter'); |
||||||
|
modalOpen('.basket-open', '.modal__basket'); |
||||||
|
modalOpen('.open-to-know', '.modal__to-know'); |
||||||
|
modalClose('.modal__close'); |
||||||
|
|
||||||
|
let modalItem = document.querySelectorAll('.modal__item'); |
||||||
|
|
||||||
|
// if (width <= 720) {
|
||||||
|
modalItem.forEach(modal => { |
||||||
|
if (modal.classList.contains('active')) { |
||||||
|
let aside = document.querySelector('.modal__aside'); |
||||||
|
|
||||||
|
if (width <= 720) { |
||||||
|
aside.style.width = `${width}px` |
||||||
|
}else{ |
||||||
|
let openAside = document.querySelector('.modal__item.active'), |
||||||
|
newWidth = openAside.clientWidth; |
||||||
|
|
||||||
|
aside.style.width = `${newWidth}px` |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
// }
|
||||||
|
}); |
||||||
|
// resize
|
||||||
|
|
||||||
|
// scroll
|
||||||
|
|
||||||
|
|
||||||
|
if (document.querySelector('.header').classList.contains('white')) { |
||||||
|
window.addEventListener("scroll", function (e) { |
||||||
|
let header = document.querySelector('.header'); |
||||||
|
let scroll = window.scrollY; |
||||||
|
|
||||||
|
if (scroll >= 25) { |
||||||
|
header.classList.remove('white') |
||||||
|
}else{ |
||||||
|
header.classList.add('white') |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
} |
||||||
|
// scroll
|
||||||
@ -0,0 +1,110 @@ |
|||||||
|
'use strict'; |
||||||
|
|
||||||
|
// slider gallery modal
|
||||||
|
const gallery = new Swiper('.gallery__slider', { |
||||||
|
spaceBetween: 100, |
||||||
|
|
||||||
|
pagination: { |
||||||
|
el: '.swiper-pagination', |
||||||
|
}, |
||||||
|
|
||||||
|
navigation: { |
||||||
|
nextEl: '.swiper-button-next', |
||||||
|
prevEl: '.swiper-button-prev', |
||||||
|
}, |
||||||
|
|
||||||
|
scrollbar: { |
||||||
|
el: '.swiper-scrollbar', |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
let paginationButtons = document.querySelectorAll('.gallery-pagination__item'); |
||||||
|
|
||||||
|
paginationButtons.forEach(button => { |
||||||
|
let index = button.dataset.countImg; |
||||||
|
|
||||||
|
button.onclick = function () { |
||||||
|
gallery.slideTo(index); |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
// open gallery
|
||||||
|
let detailImage= document.querySelectorAll('.detail__image'); |
||||||
|
detailImage.forEach(button => { |
||||||
|
let index = button.dataset.countImg; |
||||||
|
|
||||||
|
button.onclick = function () { |
||||||
|
gallery.slideTo(index); |
||||||
|
|
||||||
|
document.querySelector('.gallery').classList.add('active'); |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
// close gallery
|
||||||
|
|
||||||
|
document.querySelector('.gallery__close').onclick = function () { |
||||||
|
document.querySelector('.gallery').classList.remove('active'); |
||||||
|
} |
||||||
|
// slider gallery modal
|
||||||
|
|
||||||
|
// slider gallery main phone
|
||||||
|
|
||||||
|
// createGalleryPhone('.detail__images', '.detail-images__wrapper', '.detail__image', 980);
|
||||||
|
|
||||||
|
const detailPhone = new Swiper('.detail__images-phone', { |
||||||
|
spaceBetween: 100, |
||||||
|
|
||||||
|
pagination: { |
||||||
|
el: '.swiper-pagination', |
||||||
|
}, |
||||||
|
|
||||||
|
navigation: { |
||||||
|
nextEl: '.swiper-button-next', |
||||||
|
prevEl: '.swiper-button-prev', |
||||||
|
}, |
||||||
|
|
||||||
|
scrollbar: { |
||||||
|
el: '.swiper-scrollbar', |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
let detailImagesPhones = document.querySelectorAll('.detail-images-phone__image-block'); |
||||||
|
|
||||||
|
detailImagesPhones.forEach(button => { |
||||||
|
button.onclick = function (e) { |
||||||
|
let index = button.dataset.countImg; |
||||||
|
|
||||||
|
gallery.slideTo(index); |
||||||
|
|
||||||
|
document.querySelector('.gallery').classList.add('active'); |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
// slider gallery main phone
|
||||||
|
|
||||||
|
// detail catalog
|
||||||
|
const detailCatalot = new Swiper('.detail__catalot', { |
||||||
|
// Navigation arrows
|
||||||
|
navigation: { |
||||||
|
nextEl: '.detail-catalot-control__button.next', |
||||||
|
prevEl: '.detail-catalot-control__button.prev', |
||||||
|
}, |
||||||
|
breakpoints: { |
||||||
|
1600: { |
||||||
|
slidesPerView: 4, |
||||||
|
}, |
||||||
|
1200: { |
||||||
|
slidesPerView: 3, |
||||||
|
}, |
||||||
|
780: { |
||||||
|
slidesPerView: 2, |
||||||
|
}, |
||||||
|
100: { |
||||||
|
slidesPerView: 1.1, |
||||||
|
spaceBetween: 20 |
||||||
|
}, |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
}); |
||||||
|
// detail catalog
|
||||||
Loading…
Reference in new issue