commit
f6e9fd547b
@ -1,5 +1,11 @@ |
|||||||
{ |
{ |
||||||
"require": { |
"require": { |
||||||
"timber/timber": "^2.1" |
"timber/timber": "^2.1", |
||||||
|
"mindkomm/timber-integration-woocommerce": "^1.0" |
||||||
|
}, |
||||||
|
"config": { |
||||||
|
"allow-plugins": { |
||||||
|
"composer/installers": true |
||||||
|
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@ -1,39 +1,76 @@ |
|||||||
<?php |
<?php |
||||||
|
|
||||||
// function get_blog_posts_data() { |
wp_enqueue_script( 'shop_scripts', get_template_directory_uri() . '/woocommerce/assets/js/gp-main.js', 'jquery', '', true); |
||||||
// // $args = array( |
wp_enqueue_style( 'shop_styles_core', get_template_directory_uri() . '/woocommerce/assets/css/gp-style-core.css'); |
||||||
// // 'post_type' => 'post', |
wp_enqueue_style( 'shop_styles_desktop', get_template_directory_uri() . '/woocommerce/assets/css/gp-style-desktop.css'); |
||||||
// // 'posts_per_page' => 6, |
wp_enqueue_style( 'shop_styles_tablet', get_template_directory_uri() . '/woocommerce/assets/css/gp-style-tablet.css'); |
||||||
// // ); |
wp_enqueue_style( 'shop_styles_mobile', get_template_directory_uri() . '/woocommerce/assets/css/gp-style-mobile.css'); |
||||||
|
wp_enqueue_style( 'shop_styles_order', get_template_directory_uri() . '/woocommerce/assets/css/gp-style-order.css'); |
||||||
// // $posts = new WP_Query($args); |
wp_enqueue_style( 'shop_styles_ultra', get_template_directory_uri() . '/woocommerce/assets/css/gp-style-ultra.css'); |
||||||
// $formatted_posts = array(); |
|
||||||
|
|
||||||
// if (have_posts()) { |
|
||||||
// while (have_posts()) { |
|
||||||
// the_post(); |
|
||||||
|
|
||||||
// $formatted_post = array( |
|
||||||
// 'title' => get_the_title(), |
|
||||||
// 'link' => get_permalink(), |
|
||||||
// 'excerpt' => get_the_excerpt(), |
|
||||||
// 'thumbnail' => has_post_thumbnail() |
|
||||||
// ? get_the_post_thumbnail_url(get_the_ID(), 'full') |
|
||||||
// : get_template_directory_uri() . "/static/front-page/img/blog_card-img.jpg" |
|
||||||
// ); |
|
||||||
|
|
||||||
// $formatted_posts[] = $formatted_post; |
|
||||||
// } |
|
||||||
// wp_reset_postdata(); |
|
||||||
// } |
|
||||||
|
|
||||||
// return $formatted_posts; |
|
||||||
// } |
|
||||||
|
|
||||||
$context = Timber::get_context(); |
|
||||||
$context['posts'] = Timber::get_posts(); |
|
||||||
|
|
||||||
|
$context = Timber::context(); |
||||||
|
//$context['posts'] = Timber::get_posts(); |
||||||
|
$context['criteria_for_new_product'] = date('Y-m-d', strtotime('-30 days')); |
||||||
|
|
||||||
|
// Задаем количество постов для подзагрузки Ajax |
||||||
|
$context['posts_per_page'] = 1; |
||||||
|
|
||||||
|
$queried_object = get_queried_object(); |
||||||
|
|
||||||
|
if (is_product_category() || is_tax()) { |
||||||
|
$term_id = $queried_object->term_id; |
||||||
|
$context['category_type'] = 'product_cat'; |
||||||
|
$context['category_id'] = $term_id; |
||||||
|
$context['category'] = get_term($term_id, 'product_cat'); |
||||||
|
$context['category_link'] = get_term_link($term_id, 'product_cat'); |
||||||
|
$context['category_title'] = single_term_title('', false); |
||||||
|
} |
||||||
|
|
||||||
|
if (is_tax()) { |
||||||
|
$context['category_type'] = $queried_object->taxonomy; |
||||||
|
$context['category'] = get_term($term_id, $context['category_type']); |
||||||
|
$context['category_link'] = get_term_link($term_id, $context['category_type']); |
||||||
|
$context['category_title'] = single_term_title('', false); |
||||||
|
} |
||||||
|
|
||||||
|
$args = array( |
||||||
|
'post_type' => 'product', |
||||||
|
'post_status' => 'publish', |
||||||
|
'posts_per_page' => $context['posts_per_page'], |
||||||
|
'paged' => 1, |
||||||
|
'has_password' => FALSE |
||||||
|
); |
||||||
|
|
||||||
|
$count_args = array( |
||||||
|
'post_type' => 'product', |
||||||
|
'post_status' => 'publish', |
||||||
|
'posts_per_page' => -1, |
||||||
|
'has_password' => FALSE |
||||||
|
); |
||||||
|
|
||||||
|
if ($context['category_id'] != NULL) { |
||||||
|
$categories = [ |
||||||
|
'tax_query' => array( |
||||||
|
array( |
||||||
|
'taxonomy' => $context['category_type'], |
||||||
|
'terms' => $context['category_id'], |
||||||
|
'operator' => 'IN' |
||||||
|
), |
||||||
|
array( |
||||||
|
'taxonomy' => 'product_visibility', |
||||||
|
'field' => 'slug', |
||||||
|
'terms' => 'exclude-from-catalog', |
||||||
|
'operator' => 'NOT IN' |
||||||
|
) |
||||||
|
) |
||||||
|
]; |
||||||
|
$args = array_merge($args, $categories); |
||||||
|
$count_args = array_merge($count_args, $categories); |
||||||
|
} |
||||||
|
|
||||||
|
$context['posts'] = Timber::get_posts($args); |
||||||
|
$context['count'] = count(Timber::get_posts($count_args)); |
||||||
|
$context['sidebar_filters'] = Timber::get_widgets('sidebar_filters'); |
||||||
|
|
||||||
Timber::render('archive-product/archive-product.twig', $context); |
Timber::render('archive-product/archive-product.twig', $context); |
||||||
|
|
||||||
|
|||||||
@ -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> |
||||||
@ -1,12 +1,72 @@ |
|||||||
{% set bodyClass = 'main-np' %} |
{% set bodyClass = 'bg-white' %} |
||||||
|
{% set mainClass = 'wrapper' %} |
||||||
{% extends 'layout.twig' %} |
{% extends 'layout.twig' %} |
||||||
|
|
||||||
|
|
||||||
{% block content %} |
{% block content %} |
||||||
|
|
||||||
{% for post in posts %} |
{#% do action('woocommerce_before_main_content') %}#} |
||||||
{{ post.title }} |
|
||||||
|
<div class="breadcrumbs"> |
||||||
|
<a href="/" class="breadcrumbs__item"> |
||||||
|
{{ function('pll_e', 'Главная') }} |
||||||
|
</a> |
||||||
|
<a href="/shop" class="breadcrumbs__item"> |
||||||
|
{{ function('pll_e', 'Продукция') }} |
||||||
|
</a> |
||||||
|
{% if category %} |
||||||
|
<a href="{{ category_link }}" class="breadcrumbs__item"> |
||||||
|
{{ category_title }} |
||||||
|
</a> |
||||||
|
{% endif %} |
||||||
|
</div> |
||||||
|
|
||||||
|
{#<div class="before-shop-loop""> |
||||||
|
{% do action('woocommerce_before_shop_loop') %} |
||||||
|
</div>#} |
||||||
|
|
||||||
|
<div class="product"> |
||||||
|
<div class="product__header"> |
||||||
|
<p class="product__title"> |
||||||
|
{% if category %} |
||||||
|
{{ category.name }} |
||||||
|
{% else %} |
||||||
|
{{ function('pll_e', 'Продукция') }} |
||||||
|
{% endif %} |
||||||
|
</p> |
||||||
|
|
||||||
|
<button class="button button--gradient button--high button--icon button--filter"> |
||||||
|
{{ function('pll_e', 'Фильтры') }} |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!--<div class="product__tag"> |
||||||
|
<button class="product-tag__item"> |
||||||
|
<div class="product-tag-item__content"> |
||||||
|
<p class="product-tag-item__text">Для собак</p> |
||||||
|
<div class="product-tag-iteИ m__button"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</button> |
||||||
|
</div>--> |
||||||
|
|
||||||
|
<div class="product__main"> |
||||||
|
{% for post in posts %} |
||||||
|
{% include '/woocommerce/archive-product/archive-product-tease.twig' with {post: post} %} |
||||||
|
{% endfor %} |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="product__footer product__footer--error"> |
||||||
|
{% if posts_per_page < count %} |
||||||
|
<button class="button button--white" id="load-more-products" data-category_id="{{ category_id }}" data-category_type="{{ category_type }}"> |
||||||
|
{{ function('pll_e', 'Загрузить еще') }} |
||||||
|
</button> |
||||||
|
{% endif %} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
{% endfor %} |
{#{% do action('woocommerce_after_shop_loop') %} |
||||||
|
{% do action('woocommerce_after_main_content') %}#} |
||||||
|
|
||||||
|
{% include '/woocommerce/archive-product/archive-product-modal.twig' %} |
||||||
|
|
||||||
{% endblock %} |
{% endblock %} |
||||||
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