Merge branch 'master' of https://git.good-production.xyz/Good-Production/cosmopet-architecture
GP_DV
4 months ago
commit
262e747d2e
File diff suppressed because one or more lines are too long
@ -0,0 +1,9 @@ |
||||
{% for post in posts %} |
||||
{% include '/woocommerce/archive-product/archive-product-tease.twig' with {post: post} %} |
||||
{% endfor %} |
||||
|
||||
{% if not ended %} |
||||
<button class="button button--white" id="load-more-products" data-category_id="{{ get_category }}" data-category_type="{{ get_category_type }}"> |
||||
{{ function('pll_e', 'Загрузить еще') }} |
||||
</button> |
||||
{% endif %} |
||||
@ -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> |
||||
@ -0,0 +1,115 @@ |
||||
{% set cur_product = fn('wc_get_product', product.id) %} |
||||
{% set attrs = post.product.get_attributes() %} |
||||
{% set cur_weight = function('get_product_info', post.id, 'weight') %} |
||||
|
||||
<div class="product__item"> |
||||
<div class="product-item__label"> |
||||
{% if post.date('Y-m-d') >= criteria_for_new_product %} |
||||
<span href="#" class="product-item-label__tag product-item-label__tag--new"> |
||||
{{ function('pll_e', 'Новинка') }} |
||||
</span> |
||||
{% endif %} |
||||
|
||||
{% if post._sale_price %} |
||||
<span href="#" class="product-item-label__tag product-item-label__tag--sale"> |
||||
{{ function('pll_e', 'Распродажа %') }} |
||||
</span> |
||||
{% endif %} |
||||
</div> |
||||
<a href="{{ post.link }}" class="product-item__product-card"> |
||||
<img src="{{ post.thumbnail.src('shop_single') }}" alt="{{ post.title }}" class="product-item__images"> |
||||
</a> |
||||
<div class="product-item__content-card"> |
||||
<div class="compound"> |
||||
{% set compound = fn('wc_get_product_terms', post.id, 'pa_compound') %} |
||||
{% for option in compound %} |
||||
|
||||
{% set term = get_term(option) %} |
||||
<a href="/compound/{{ term.slug }}" class="compound__item">{{ term.name }}</a> |
||||
{% endfor %} |
||||
</div> |
||||
<a href="#" class="product-item__title">{{ post.title }}</a> |
||||
<div class="product-item__price"> |
||||
<p>{{ post._price() }}</p> |
||||
</div> |
||||
<div class="product-item__bye"> |
||||
<button class="button button--white button--100-perc open-overlay"> |
||||
{{ function('pll_e', 'Купить') }} |
||||
</button> |
||||
</div> |
||||
</div> |
||||
<div class="product-item__overlay"> |
||||
<div class="product-item-overlay__header"> |
||||
<a href="#" class="product-item__title">{{ post.title }}</a> |
||||
<ul class="product-item-overlay__tags"> |
||||
{% set features = fn('wc_get_product_terms', post.id, 'pa_features') %} |
||||
{% for option in features %} |
||||
{% set term = get_term(option) %} |
||||
<li>{{ term.name }}</li> |
||||
{% endfor %} |
||||
</ul> |
||||
</div> |
||||
|
||||
<form class="product-item__form" method="post" action="/send-telegram.php"> |
||||
<div class="product-item-overlay__input-block"> |
||||
<div class="product-item-overlay__field"> |
||||
<p class="product-item-overlay-field__title">Объем</p> |
||||
|
||||
<div class="select"> |
||||
<input type="text" class="select__state" value="{{ cur_weight }}" readonly data-product_id="{{post.id}}" data-product_price="{{ post._price() }}"> |
||||
<div class="state__block"> |
||||
<ul class="state__content"> |
||||
{% set collection = fn('wc_get_product_terms', post.id, 'pa_collection') %} |
||||
{% for option in collection %} |
||||
{% set term = get_term(option) %} |
||||
{% set siblings = function('get_collection_siblings' , term.id) %} |
||||
|
||||
{% for sibling in siblings %} |
||||
|
||||
{% set weight = function('get_product_info', sibling.ID, 'weight') %} |
||||
|
||||
{% set class = '' %} |
||||
{% if weight == cur_weight %} |
||||
{% set class = 'active' %} |
||||
{% endif %} |
||||
<li> |
||||
<button class="state__button {{ class }}" data-product_id="{{sibling.ID}}" data-product_price="{{ function('get_product_info', sibling.ID, 'price') }}"> |
||||
{{ weight }} |
||||
</button> |
||||
</li> |
||||
{% endfor %} |
||||
{% endfor %} |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="product-item-overlay__field"> |
||||
<p class="product-item-overlay-field__title">Количество</p> |
||||
|
||||
<div class="counter"> |
||||
<button class="counter__button minus"> |
||||
<img src="{{ theme.link }}/woocommerce/assets/img/svg/main/minus.svg" alt=""> |
||||
</button> |
||||
<input type="text" class="counter__input" value="1"> |
||||
<button class="counter__button plus"> |
||||
<img src="{{ theme.link }}/woocommerce/assets/img/svg/main/plus.svg" alt=""> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<p class="product-item-overlay__price"> |
||||
{{ post._price() }} |
||||
</p> |
||||
<div class="product-item-overlay__block-button"> |
||||
<div class="product-item-overlay__button"> |
||||
{{ function('get_add_to_cart_button', post.id) }} |
||||
</div> |
||||
<div class="product-item-overlay__more_button"> |
||||
<a class="to-know button--100-perc" href="{{ post.link }}"> |
||||
<p>{{ function('pll_e', 'Подробнее') }}</p> |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
</div> |
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,270 @@ |
||||
/* Стили для мобильных устройств */ |
||||
@media only screen and (max-width: 720px) { |
||||
/* product */ |
||||
.product__item{ |
||||
width: calc(100% - 24px); |
||||
} |
||||
/* product */ |
||||
|
||||
/* modal */ |
||||
.modal__basket{ |
||||
width: 100%; |
||||
} |
||||
.modal__filter{ |
||||
width: 100%; |
||||
} |
||||
.modal__to-know, |
||||
.modal__to-know-submit{ |
||||
width: 100%; |
||||
} |
||||
.modal__button .to-know{ |
||||
display: flex; |
||||
|
||||
background: none; |
||||
} |
||||
.modal__basket .modal__header { |
||||
height: calc(100% - 156px); |
||||
margin-bottom: -36px; |
||||
} |
||||
.modal-basket-item__block-image{ |
||||
position: absolute; |
||||
width: 80px; |
||||
} |
||||
.modal-basket-item__image{ |
||||
width: 48px; |
||||
} |
||||
.modal-basket-item__content{ |
||||
margin-left: 0; |
||||
|
||||
padding-left: 96px; |
||||
} |
||||
.modal-basket-item__control{ |
||||
margin-left: -80px; |
||||
} |
||||
.modal-basket-item__title{ |
||||
min-height: 40px; |
||||
|
||||
font-size: 16px; |
||||
} |
||||
.modal-basket__item--return{ |
||||
flex-direction: column; |
||||
align-items: start; |
||||
} |
||||
.modal-basket__item--return .modal-basket-item__title{ |
||||
margin-right: auto; |
||||
} |
||||
.notification--width-584{ |
||||
width: 100%; |
||||
} |
||||
.notification__title{ |
||||
font-size: 20px; |
||||
} |
||||
.notification__text--center-pc{ |
||||
text-align: start; |
||||
} |
||||
.notification__img{ |
||||
height: 360px; |
||||
} |
||||
.notification__title{ |
||||
padding-right: 96px; |
||||
} |
||||
.modal-form__buttons--two{ |
||||
flex-wrap: wrap; |
||||
} |
||||
.modal-form__buttons--two button, .modal-form__buttons--two input{ |
||||
margin-top: 24px; |
||||
width: 100%; |
||||
} |
||||
.modal-form__buttons--two button:first-child, .modal-form__buttons--two input:first-child{ |
||||
margin-top: 0; |
||||
} |
||||
.modal-map__control{ |
||||
flex-wrap: wrap; |
||||
} |
||||
.modal-map-control__item{ |
||||
width: calc(100% - 24px); |
||||
} |
||||
.form__full-mobile{ |
||||
width: 100%; |
||||
border-radius: 0; |
||||
border: none; |
||||
} |
||||
|
||||
.modal-form-content__line--three .modal-form-content-line__element:nth-child(1){ |
||||
width: 69px; |
||||
} |
||||
.modal-form-content__line--three .modal-form-content-line__element:nth-child(2){ |
||||
|
||||
} |
||||
.modal-form-content__line--three .modal-form-content-line__element:nth-child(3){ |
||||
width: 82px; |
||||
} |
||||
.form__input{ |
||||
padding: 12px 14px; |
||||
} |
||||
.modal-form--height-100-phone{ |
||||
min-height: 100%; |
||||
} |
||||
/* modal */ |
||||
|
||||
/* footer */ |
||||
.footer__about{ |
||||
display: none; |
||||
} |
||||
.footer__wrapper{ |
||||
flex-direction: column; |
||||
} |
||||
.footer__content{ |
||||
width: 100%; |
||||
} |
||||
.footer__form{ |
||||
margin-top: 24px; |
||||
margin-left: 0; |
||||
|
||||
width: 100%; |
||||
} |
||||
.footer__social-media{ |
||||
display: block; |
||||
|
||||
margin-top: 24px; |
||||
} |
||||
.footer-about__text{ |
||||
padding-top: 35px; |
||||
display: block; |
||||
text-align: left; |
||||
} |
||||
.footer__list{ |
||||
margin-top: 20px; |
||||
} |
||||
/* footer */ |
||||
|
||||
/* detail */ |
||||
.toggle__table--two .toggle-table__block{ |
||||
width: 100%; |
||||
} |
||||
.toggle__table--two .toggle-table__block:nth-child(even){ |
||||
margin-top: 32px; |
||||
margin-left: 0; |
||||
} |
||||
.toggle__table--three .toggle-table__block:nth-child(1){ |
||||
width: 31%; |
||||
} |
||||
/* detail */ |
||||
|
||||
/* cabinet */ |
||||
.cabinet-card__title{ |
||||
font-size: 20px; |
||||
} |
||||
.cabinet-card__no-orders{ |
||||
margin-top: 16px; |
||||
} |
||||
.cabinet-card-order__header{ |
||||
flex-direction: column; |
||||
} |
||||
.cabinet-card-order__payment{ |
||||
margin-top: 16px; |
||||
} |
||||
.cabinet-card-order-detail__main{ |
||||
flex-direction: column; |
||||
} |
||||
.cabinet-card-order-detail-main__links{ |
||||
margin-top: 24px; |
||||
|
||||
align-items: start; |
||||
} |
||||
.cabinet-card-order-detail-main-product__img{ |
||||
width: 70px; |
||||
height: 70px; |
||||
} |
||||
.cabinet-card-order-detail-main__product{ |
||||
margin-top: 16px; |
||||
|
||||
align-items: start; |
||||
} |
||||
.cabinet-card-order-detail-main-product__content{ |
||||
margin-left: 16px; |
||||
|
||||
flex-wrap: wrap; |
||||
|
||||
position: relative; |
||||
} |
||||
.cabinet-card-order-detail-main-product__description{ |
||||
width: 100%; |
||||
} |
||||
.cabinet-card-order-detail-main-product__count{ |
||||
position: absolute; |
||||
left: 116px; |
||||
bottom: 0; |
||||
} |
||||
.cabinet-card-order-detail-main-product__price{ |
||||
position: absolute; |
||||
left: 153px; |
||||
bottom: 0; |
||||
} |
||||
.cabinet-card__content{ |
||||
padding-right: 19px; |
||||
} |
||||
|
||||
/* .cabinet-card__order.active */ |
||||
/* .cabinet-card__order.active */ |
||||
/* cabinet */ |
||||
} |
||||
|
||||
@media only screen and (max-width: 576px) { |
||||
/* header */ |
||||
|
||||
/* header */ |
||||
|
||||
/* product */ |
||||
.product__header{ |
||||
flex-direction: column; |
||||
align-items: start; |
||||
} |
||||
.product__header .button{ |
||||
margin-top: 48px; |
||||
} |
||||
/* product */ |
||||
|
||||
/* modal */ |
||||
.modal__aside{ |
||||
left: 0; |
||||
} |
||||
.form-input-radio__title span{ |
||||
display: block; |
||||
width: 100%; |
||||
|
||||
color: var(--text-grey); |
||||
} |
||||
.modal-form__title{ |
||||
font-size: 20px; |
||||
} |
||||
/* modal */ |
||||
|
||||
/* detail */ |
||||
.detail-block-form__item, |
||||
.detail-block-form__submit{ |
||||
min-width: 100%; |
||||
} |
||||
/* detail */ |
||||
|
||||
/* cabinet */ |
||||
|
||||
.cabinet-card-order-detail-main-product__img{ |
||||
width: 40px; |
||||
height: 40px; |
||||
} |
||||
|
||||
.cabinet-card-order-detail-main-product__count{ |
||||
left: auto; |
||||
right: 71px; |
||||
} |
||||
.cabinet-card-order-detail-main-product__price{ |
||||
left: auto; |
||||
right: 0; |
||||
} |
||||
.cabinet-card-order__detail-short{ |
||||
transition-delay: 0; |
||||
transition-duration: 0; |
||||
} |
||||
/* cabinet */ |
||||
} |
||||
@ -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,342 @@ |
||||
/* Стили для планшетов */ |
||||
@media only screen and (max-width: 1200px) { |
||||
/* header */ |
||||
main{ |
||||
padding-top: 64px; |
||||
} |
||||
.main-menu{ |
||||
display: none; |
||||
} |
||||
.header__open-menu{ |
||||
display: block; |
||||
} |
||||
.lang{ |
||||
display: none; |
||||
} |
||||
.header__logo{ |
||||
width: 136px; |
||||
height: 29px; |
||||
} |
||||
.header__content{ |
||||
height: auto; |
||||
|
||||
padding: 8px 16px; |
||||
} |
||||
.mini-profile__item:nth-child(2){ |
||||
margin-left: 0; |
||||
} |
||||
.header::after{ |
||||
left: 0; |
||||
|
||||
width: 100%; |
||||
} |
||||
.header__pc-menu{ |
||||
display: none; |
||||
} |
||||
.header__phone-menu{ |
||||
display: block; |
||||
} |
||||
.header__menu-block{ |
||||
top: 56px; |
||||
} |
||||
.header__content::after{ |
||||
left: 0; |
||||
right: 0; |
||||
width: 100%; |
||||
} |
||||
/* header */ |
||||
|
||||
/* footer */ |
||||
.footer{ |
||||
margin-top: 0; |
||||
|
||||
padding: 24px 16px; |
||||
} |
||||
/* footer */ |
||||
|
||||
/* breadcrumbs */ |
||||
.breadcrumbs{ |
||||
display: none; |
||||
} |
||||
/* breadcrumbs */ |
||||
|
||||
/* product */ |
||||
.product{ |
||||
padding: 12px; |
||||
padding-top: 20px; |
||||
} |
||||
.product__title{ |
||||
font-weight: 700; |
||||
font-size: 26px; |
||||
line-height: 123%; |
||||
text-transform: uppercase; |
||||
} |
||||
.to-know p { |
||||
font-size: 18px; |
||||
} |
||||
.toggle-table__title{ |
||||
font-weight: 700; |
||||
font-size: 12px; |
||||
line-height: 133%; |
||||
} |
||||
.toggle-table__item p{ |
||||
font-weight: 500; |
||||
font-size: 12px; |
||||
line-height: 133%; |
||||
} |
||||
.toggle-table-item__line{ |
||||
margin-top: 12px; |
||||
} |
||||
.detail{ |
||||
margin: 24px 16px; |
||||
} |
||||
.back-detail{ |
||||
display: inline; |
||||
} |
||||
.detail-catalot__title{ |
||||
font-size: 22px; |
||||
} |
||||
.product__footer--error{ |
||||
margin: 48px 0px 24px; |
||||
} |
||||
/* product */ |
||||
|
||||
/* modal */ |
||||
.modal{ |
||||
padding: 0; |
||||
} |
||||
.modal__text{ |
||||
padding-right: 0; |
||||
} |
||||
.form__button-pc{ |
||||
display: none; |
||||
} |
||||
.form__button-mobile{ |
||||
display: block; |
||||
} |
||||
.modal-form{ |
||||
/* min-height: 100%; |
||||
width: 100%; |
||||
|
||||
border-radius: 0; |
||||
border: none; */ |
||||
} |
||||
.modal__notification{ |
||||
margin: 24px; |
||||
} |
||||
.form-input-phone__list{ |
||||
left: 0; |
||||
} |
||||
|
||||
.modal-form-content__line--two{ |
||||
flex-wrap: wrap; |
||||
} |
||||
.modal-form-content__line--two .modal-form-content-line__element{ |
||||
margin-top: 24px; |
||||
|
||||
width: 100%; |
||||
} |
||||
.modal-form-content__line--two .modal-form-content-line__element:first-child{ |
||||
margin-top: 0; |
||||
} |
||||
.modal-map{ |
||||
width: 100%; |
||||
|
||||
flex-direction: column; |
||||
|
||||
border-radius: 0; |
||||
} |
||||
.modal-map__left, .modal-map__right{ |
||||
width: 100%; |
||||
} |
||||
.modal-map__map iframe { |
||||
width: 100%; |
||||
height: 528px; |
||||
} |
||||
.modal-map-form__button{ |
||||
display: none; |
||||
} |
||||
.modal-map-form__sub-button{ |
||||
margin-top: 64px; |
||||
|
||||
padding: 0 24px; |
||||
|
||||
display: flex; |
||||
} |
||||
/* modal */ |
||||
|
||||
/* cabinet */ |
||||
.cabinet{ |
||||
flex-direction: column; |
||||
|
||||
position: relative; |
||||
} |
||||
.cabinet__control{ |
||||
display: flex; |
||||
|
||||
position: relative; |
||||
} |
||||
.cabinet__orders, .cabinet__profile{ |
||||
width: calc(100% - 48px); |
||||
} |
||||
.cabinet__orders, .cabinet__profile{ |
||||
position: absolute; |
||||
opacity: 0; |
||||
|
||||
transition: opacity .2s ease-out; |
||||
} |
||||
.cabinet-content{ |
||||
pointer-events:none; |
||||
} |
||||
.cabinet__orders.active, .cabinet__profile.active{ |
||||
opacity: 1; |
||||
} |
||||
.cabinet__orders.hide, .cabinet__profile.hide{ |
||||
position: static; |
||||
display: block; |
||||
pointer-events:auto; |
||||
|
||||
width: 100%; |
||||
} |
||||
.cabinet__subscription-pc{ |
||||
display: none; |
||||
} |
||||
.cabinet__subscription-mobile{ |
||||
display: block; |
||||
|
||||
margin: 24px 24px 0 24px; |
||||
} |
||||
.cabinet__orders .cabinet-card:nth-child(2){ |
||||
margin-top: 0; |
||||
} |
||||
/* cabinet */ |
||||
} |
||||
|
||||
@media only screen and (max-width: 980px) { |
||||
/* product */ |
||||
.product__item{ |
||||
width: calc(50% - 24px); |
||||
} |
||||
/* product */ |
||||
|
||||
|
||||
/* detail */ |
||||
.detail{ |
||||
flex-direction: column; |
||||
} |
||||
.detail__images{ |
||||
display: none; |
||||
} |
||||
.detail__content{ |
||||
width: 100%; |
||||
} |
||||
.detail__content{ |
||||
margin-left: 0; |
||||
} |
||||
|
||||
.detail__images-phone{ |
||||
display: block; |
||||
|
||||
margin-top: 48px; |
||||
margin-bottom: 48px; |
||||
|
||||
position: relative; |
||||
|
||||
overflow: hidden; |
||||
} |
||||
.detail__images-phone .swiper-slide{ |
||||
display: flex; |
||||
justify-content: center; |
||||
} |
||||
.detail-images-phone__image-block{ |
||||
width: 100%; |
||||
aspect-ratio: 1; |
||||
max-width: 500px; |
||||
|
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
background: var(--background-grey); |
||||
border-radius: 16px; |
||||
} |
||||
|
||||
.detail__images-phone .swiper-pagination-bullet{ |
||||
width: 8px; |
||||
height: 8px; |
||||
|
||||
border-radius: 50%; |
||||
|
||||
border: 1px solid #666; |
||||
background-color: #666; |
||||
|
||||
opacity: 1; |
||||
} |
||||
.detail__images-phone .swiper-pagination-bullet.swiper-pagination-bullet-active{ |
||||
background-color: var(--background-white); |
||||
} |
||||
|
||||
.detail__images-phone .swiper-pagination{ |
||||
margin-bottom: 19px; |
||||
} |
||||
.detail__title{ |
||||
font-size: 26px; |
||||
line-height: 123%; |
||||
} |
||||
.gallery__slider .swiper-pagination { |
||||
display: block; |
||||
} |
||||
.gallery__pagination{ |
||||
display: none; |
||||
} |
||||
|
||||
.gallery__slider .swiper-pagination-bullet{ |
||||
width: 8px; |
||||
height: 8px; |
||||
border-radius: 50%; |
||||
border: 1px solid #666; |
||||
background-color: #666; |
||||
opacity: 1; |
||||
} |
||||
.gallery__wrapper .gallery-button{ |
||||
display: none; |
||||
} |
||||
|
||||
.gallery__slider .swiper-pagination-bullet.swiper-pagination-bullet-active{ |
||||
background-color: var(--background-white); |
||||
} |
||||
|
||||
.gallery__slider{ |
||||
margin-left:0; |
||||
padding: 0px 0px 50px 0px; |
||||
/* padding: 40px; */ |
||||
} |
||||
.gallery__block { |
||||
width: 100%; |
||||
aspect-ratio: 1; |
||||
height: auto; |
||||
} |
||||
/* detail */ |
||||
} |
||||
|
||||
@media only screen and (max-width: 750px) { |
||||
/* cabinet */ |
||||
.cabinet-card-order__open-detail{ |
||||
margin-top: 144px; |
||||
} |
||||
.cabinet-card-order__detail-short{ |
||||
right: auto; |
||||
left: 0; |
||||
bottom: 48px; |
||||
} |
||||
.cabinet-card-order-detail-short__item{ |
||||
margin-left: -27px; |
||||
} |
||||
.cabinet-card-order-detail-short__item:first-child{ |
||||
margin-left: 0; |
||||
} |
||||
.cabinet-card__order.active .cabinet-card-order__open-detail{ |
||||
margin-top: 24px; |
||||
} |
||||
/* cabinet */ |
||||
} |
||||
@ -0,0 +1,4 @@ |
||||
/* Стили для ультрашироких экранов */ |
||||
@media only screen and (min-width: 1400px) { |
||||
|
||||
} |
||||
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.
|
After Width: | Height: | Size: 502 B |
|
After Width: | Height: | Size: 615 B |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 8.5 KiB |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 459 B |
|
After Width: | Height: | Size: 493 B |
|
After Width: | Height: | Size: 491 B |
|
After Width: | Height: | Size: 481 B |
|
After Width: | Height: | Size: 456 B |
|
After Width: | Height: | Size: 458 B |
|
After Width: | Height: | Size: 458 B |
|
After Width: | Height: | Size: 495 B |
|
After Width: | Height: | Size: 954 B |
|
After Width: | Height: | Size: 983 B |
|
After Width: | Height: | Size: 455 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 349 B |
|
After Width: | Height: | Size: 455 B |
|
After Width: | Height: | Size: 453 B |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 168 B |
|
After Width: | Height: | Size: 584 B |
|
After Width: | Height: | Size: 695 B |
|
After Width: | Height: | Size: 442 B |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 623 B |
|
After Width: | Height: | Size: 855 B |
|
After Width: | Height: | Size: 1.4 KiB |
@ -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