task_4097 comments and likes #12
Merged
web_95
merged 5 commits from task_4097 into master 3 months ago
@ -0,0 +1,6 @@ |
||||
<?php |
||||
|
||||
include_module('author'); |
||||
include_component('author', 'author-archive'); |
||||
|
||||
?> |
||||
@ -0,0 +1,211 @@ |
||||
<?php |
||||
if (!defined('ABSPATH')) { |
||||
exit; |
||||
} |
||||
|
||||
function count_nested_replies($comment_id) { |
||||
$count = 0; |
||||
$replies = get_comments(array( |
||||
'post_id' => get_the_ID(), |
||||
'status' => 'approve', |
||||
'parent' => $comment_id, |
||||
'order' => 'ASC' |
||||
)); |
||||
|
||||
if ($replies) { |
||||
$count += count($replies); |
||||
foreach ($replies as $reply) { |
||||
$count += count_nested_replies($reply->comment_ID); |
||||
} |
||||
} |
||||
|
||||
return $count; |
||||
} |
||||
|
||||
if (post_password_required()) { |
||||
return; |
||||
} |
||||
|
||||
if (!is_user_logged_in()) { |
||||
?> |
||||
<div class="comment-block"> |
||||
<p class="comment-block_text"> |
||||
<a href="#modal"><?php pll_e('Войдите'); ?></a>, <?php pll_e('чтобы оставлять комментарии'); ?> |
||||
</p> |
||||
</div> |
||||
<?php |
||||
} |
||||
|
||||
$top_level_comments = get_comments(array( |
||||
'post_id' => get_the_ID(), |
||||
'status' => 'approve', |
||||
'parent' => 0, |
||||
'order' => 'ASC' |
||||
)); |
||||
|
||||
if ($top_level_comments) { |
||||
echo '<div class="comment-block_wrapper">'; |
||||
|
||||
foreach ($top_level_comments as $comment) { |
||||
?> |
||||
<div class="comment-block" id="comment-<?php echo $comment->comment_ID; ?>">
|
||||
<div class="comment-user"> |
||||
<?php echo get_avatar($comment, 50); ?> |
||||
<div class="comment-user_text"> |
||||
<h6><?php echo get_comment_author($comment); ?></h6>
|
||||
<span><?php echo get_comment_date('d F Y', $comment); ?></span>
|
||||
</div> |
||||
</div> |
||||
<p><?php echo get_comment_text($comment); ?></p>
|
||||
<div class="comment-btns"> |
||||
<button class="reply-to-comment" data-comment-id="<?php echo $comment->comment_ID; ?>" data-post-id="<?php echo get_the_ID(); ?>" data-reply-to="<?php echo esc_attr(get_comment_author($comment)); ?>">
|
||||
<svg width="11" height="8" viewBox="0 0 11 8" fill="none" xmlns="http://www.w3.org/2000/svg"> |
||||
<path d="M9.5 3H3.25C2.00736 3 1 4.00736 1 5.25V5.25C1 6.49264 2.00736 7.5 3.25 7.5H3.5" stroke="#666666"></path> |
||||
<path d="M7 0.5L9.5 3L7 5.5" stroke="#666666"></path> |
||||
</svg> |
||||
<?php pll_e('Ответить'); ?> |
||||
</button> |
||||
<button class="comment-like-btn<?php echo is_user_liked_comment($comment->comment_ID) ? ' active' : ''; ?>" data-comment-id="<?php echo $comment->comment_ID; ?>">
|
||||
<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg"> |
||||
<path d="M10.7745 1C8.67239 1 7.7426 2.5355 7.54047 3.30325C7.39224 2.5355 6.49748 1 4.10427 1C1.11276 1 -0.221288 4.85199 2.40639 8.14801C4.50853 10.7848 6.705 11.8147 7.54047 12C8.47026 11.8279 10.8311 10.761 12.8363 7.87004C15.3427 4.25632 13.4022 1 10.7745 1Z" <?php echo is_user_liked_comment($comment->comment_ID) ? 'stroke="#ff0000" fill="rgba(255, 0, 0, 0.7)"' : 'stroke="#666666"'; ?>></path>
|
||||
</svg> |
||||
<?php echo get_comment_likes_count($comment->comment_ID); ?> |
||||
</button> |
||||
<?php |
||||
comment_reply_link(array( |
||||
'reply_text' => pll__('Ответить'), |
||||
'depth' => 1, |
||||
'max_depth' => get_option('thread_comments_depth'), |
||||
'before' => '<span style="display:none;">', |
||||
'after' => '</span>', |
||||
), $comment->comment_ID, get_the_ID()); |
||||
?> |
||||
</div> |
||||
<div class="reply-form-container" id="reply-form-<?php echo $comment->comment_ID; ?>" style="display: none;"></div>
|
||||
</div> |
||||
<?php |
||||
|
||||
$all_nested_replies = get_all_nested_replies($comment->comment_ID); |
||||
|
||||
if (!empty($all_nested_replies)) { |
||||
$total_reply_count = count($all_nested_replies); |
||||
?> |
||||
<button class="answer-btn"> |
||||
<svg width="15" height="10" viewBox="0 0 15 10" fill="none" xmlns="http://www.w3.org/2000/svg"> |
||||
<path d="M14 1.41406L7.5 7.91406L1 1.41406" stroke="#76CE75" stroke-width="2"></path> |
||||
</svg> |
||||
<?php echo $total_reply_count; ?> |
||||
<span> |
||||
<?php echo ($total_reply_count == 1) ? pll__('ответ') : pll__('ответа'); ?> |
||||
</span> |
||||
</button> |
||||
<?php |
||||
|
||||
foreach ($all_nested_replies as $reply) { |
||||
?> |
||||
<div class="comment-block answer-block" id="comment-<?php echo $reply->comment_ID; ?>">
|
||||
<div class="comment-user"> |
||||
<?php echo get_avatar($reply, 50); ?> |
||||
<div class="comment-user_text"> |
||||
<h6><?php echo get_comment_author($reply); ?></h6>
|
||||
<span><?php echo get_comment_date('d F Y', $reply); ?></span>
|
||||
</div> |
||||
</div> |
||||
<p><?php echo get_comment_text($reply); ?></p>
|
||||
<div class="comment-btns"> |
||||
<button class="reply-to-comment" data-comment-id="<?php echo $reply->comment_ID; ?>" data-post-id="<?php echo get_the_ID(); ?>" data-reply-to="<?php echo esc_attr(get_comment_author($reply)); ?>">
|
||||
<svg width="11" height="8" viewBox="0 0 11 8" fill="none" xmlns="http://www.w3.org/2000/svg"> |
||||
<path d="M9.5 3H3.25C2.00736 3 1 4.00736 1 5.25V5.25C1 6.49264 2.00736 7.5 3.25 7.5H3.5" stroke="#666666"></path> |
||||
<path d="M7 0.5L9.5 3L7 5.5" stroke="#666666"></path> |
||||
</svg> |
||||
<?php pll_e('Ответить'); ?> |
||||
</button> |
||||
<button class="comment-like-btn<?php echo is_user_liked_comment($reply->comment_ID) ? ' active' : ''; ?>" data-comment-id="<?php echo $reply->comment_ID; ?>">
|
||||
<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg"> |
||||
<path d="M10.7745 1C8.67239 1 7.7426 2.5355 7.54047 3.30325C7.39224 2.5355 6.49748 1 4.10427 1C1.11276 1 -0.221288 4.85199 2.40639 8.14801C4.50853 10.7848 6.705 11.8147 7.54047 12C8.47026 11.8279 10.8311 10.761 12.8363 7.87004C15.3427 4.25632 13.4022 1 10.7745 1Z" <?php echo is_user_liked_comment($reply->comment_ID) ? 'stroke="#ff0000" fill="rgba(255, 0, 0, 0.7)"' : 'stroke="#666666"'; ?>></path>
|
||||
</svg> |
||||
<?php echo get_comment_likes_count($reply->comment_ID); ?> |
||||
</button> |
||||
<?php |
||||
comment_reply_link(array( |
||||
'reply_text' => pll__('Ответить'), |
||||
'depth' => 2, |
||||
'max_depth' => get_option('thread_comments_depth'), |
||||
'before' => '<span style="display:none;">', |
||||
'after' => '</span>', |
||||
), $reply->comment_ID, get_the_ID()); |
||||
?> |
||||
</div> |
||||
<div class="reply-form-container" id="reply-form-<?php echo $reply->comment_ID; ?>" style="display: none;"></div>
|
||||
</div> |
||||
<?php |
||||
} |
||||
} |
||||
} |
||||
|
||||
echo '</div>'; |
||||
} |
||||
|
||||
function get_all_nested_replies($comment_id) { |
||||
$all_replies = array(); |
||||
|
||||
$direct_replies = get_comments(array( |
||||
'post_id' => get_the_ID(), |
||||
'status' => 'approve', |
||||
'parent' => $comment_id, |
||||
'order' => 'ASC' |
||||
)); |
||||
|
||||
$all_replies = array_merge($all_replies, $direct_replies); |
||||
|
||||
foreach ($direct_replies as $reply) { |
||||
$deeper_replies = get_all_nested_replies_recursive($reply->comment_ID); |
||||
$all_replies = array_merge($all_replies, $deeper_replies); |
||||
} |
||||
|
||||
return $all_replies; |
||||
} |
||||
|
||||
function get_all_nested_replies_recursive($comment_id) { |
||||
$replies = get_comments(array( |
||||
'post_id' => get_the_ID(), |
||||
'status' => 'approve', |
||||
'parent' => $comment_id, |
||||
'order' => 'ASC' |
||||
)); |
||||
|
||||
$all_replies = $replies; |
||||
|
||||
foreach ($replies as $reply) { |
||||
$deeper_replies = get_all_nested_replies_recursive($reply->comment_ID); |
||||
$all_replies = array_merge($all_replies, $deeper_replies); |
||||
} |
||||
|
||||
return $all_replies; |
||||
} |
||||
|
||||
if (is_user_logged_in()) { |
||||
$commenter = wp_get_current_commenter(); |
||||
$args = array( |
||||
'fields' => array( |
||||
'author' => '', |
||||
'email' => '', |
||||
'url' => '', |
||||
'cookies' => '', |
||||
), |
||||
'comment_field' => '<div class="comment-form-comment"><textarea id="comment" name="comment" placeholder="' . pll__('Ваш комментарий') . '" required></textarea></div>', |
||||
'title_reply' => pll__('Оставить комментарий'), |
||||
'title_reply_to' => pll__('Ответить %s'), |
||||
'class_submit' => 'comment-submit-btn', |
||||
'submit_button' => '<button name="%1$s" type="submit" id="%2$s" class="%3$s">%4$s</button>', |
||||
'submit_field' => '<div class="form-submit">%1$s %2$s</div>', |
||||
'cancel_reply_link' => pll__('Отменить'), |
||||
'id_form' => 'commentform', |
||||
'id_submit' => 'submit', |
||||
'title_reply_before' => '<h3 id="reply-title" class="comment-reply-title">', |
||||
'title_reply_after' => '</h3>', |
||||
); |
||||
|
||||
comment_form($args); |
||||
} |
||||
?> |
||||
@ -0,0 +1,732 @@ |
||||
|
||||
|
||||
/* Where home */ |
||||
.where-home { |
||||
padding: 162px 0 37px; |
||||
color: var(--background); |
||||
} |
||||
|
||||
.authors h1{ |
||||
font-size: 82px; |
||||
font-weight: bold; |
||||
line-height: 96px; |
||||
color:#fff; |
||||
margin-bottom: 41px; |
||||
text-transform: uppercase; |
||||
} |
||||
|
||||
.where-home h1 { |
||||
font-size: 82px; |
||||
font-weight: bold; |
||||
line-height: 96px; |
||||
margin-bottom: 41px; |
||||
text-transform: uppercase; |
||||
} |
||||
|
||||
.where-home p { |
||||
max-width: 928px; |
||||
color: #FFF; |
||||
font-size: 36px; |
||||
font-weight: bold; |
||||
line-height: 40px; |
||||
text-transform: uppercase; |
||||
} |
||||
/* Where home end */ |
||||
|
||||
/* Find us */ |
||||
.find-us { |
||||
color: var(--background); |
||||
padding-bottom: 24px; |
||||
} |
||||
|
||||
.find-us h2 { |
||||
padding: 10px 0; |
||||
font-size: 36px; |
||||
font-weight: bold; |
||||
line-height: 40px; |
||||
text-transform: uppercase; |
||||
margin-bottom: 24px; |
||||
} |
||||
|
||||
.find-us ul { |
||||
display: grid; |
||||
grid-template-columns: repeat(2, minmax(0, 1fr)); |
||||
gap: 36px; |
||||
} |
||||
|
||||
.find-us h3 { |
||||
font-size: 24px; |
||||
font-weight: bold; |
||||
line-height: 28px; |
||||
margin-bottom: 8px; |
||||
text-transform: uppercase; |
||||
} |
||||
|
||||
.find-us p { |
||||
font-size: 24px; |
||||
font-weight: 500; |
||||
line-height: 32px; |
||||
} |
||||
/* Find us end */ |
||||
|
||||
/* Location */ |
||||
.location { |
||||
padding-bottom: 35px; |
||||
} |
||||
|
||||
.location h2 { |
||||
padding: 10px 0; |
||||
margin-bottom: 37px; |
||||
text-align: right; |
||||
font-size: 36px; |
||||
font-weight: bold; |
||||
line-height: 40px; |
||||
text-transform: uppercase; |
||||
color: var(--main_white); |
||||
} |
||||
|
||||
.location iframe { |
||||
height: 783px; |
||||
width: 100%; |
||||
border-radius: 64px; |
||||
} |
||||
/* Location end */ |
||||
|
||||
/* Sell form */ |
||||
.sell-form { |
||||
padding-bottom: 31px; |
||||
} |
||||
|
||||
.sell-form__container { |
||||
background: var(--main_white); |
||||
border-radius: 64px; |
||||
padding: 64px 105px 38px; |
||||
color: var(--grey-black); |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 48px; |
||||
} |
||||
|
||||
.sell-form h2 { |
||||
font-size: 36px; |
||||
font-weight: bold; |
||||
line-height: 40px; |
||||
text-transform: uppercase; |
||||
} |
||||
|
||||
.sell-form p { |
||||
text-transform: uppercase; |
||||
font-size: 24px; |
||||
font-weight: bold; |
||||
line-height: 28px; |
||||
} |
||||
|
||||
.sell-form form { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
gap: 16px; |
||||
} |
||||
|
||||
.sell-form form button { |
||||
background: var(--main_black); |
||||
padding: 11px 70px; |
||||
color: var(--main_white); |
||||
text-transform: uppercase; |
||||
border-radius: 16px; |
||||
font-size: 20px; |
||||
font-weight: 600; |
||||
line-height: 24px; |
||||
border: 1px solid var(--main_black); |
||||
} |
||||
|
||||
.sell-form form button:hover { |
||||
background: var(--main_white); |
||||
color: var(--main_black); |
||||
} |
||||
/* Sell form end */ |
||||
|
||||
/* Breadcrumb */ |
||||
.breadcrumb { |
||||
padding: 20px 0 24px; |
||||
} |
||||
|
||||
.breadcrumb .container { |
||||
color: var(--main_white); |
||||
font-size: 14px; |
||||
font-weight: 500; |
||||
line-height: 16px; |
||||
} |
||||
|
||||
.breadcrumb a { |
||||
display: inline; |
||||
} |
||||
/* Breadcrumb end */ |
||||
|
||||
/* Authors */ |
||||
.authors { |
||||
padding-bottom: 120px; |
||||
} |
||||
|
||||
.authors h2 { |
||||
font-weight: bold; |
||||
font-size: 64px; |
||||
line-height: 120%; |
||||
color: white; |
||||
text-transform: uppercase; |
||||
margin-bottom: 36px; |
||||
} |
||||
|
||||
.authors ul { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
align-items: stretch; |
||||
justify-content: center; |
||||
gap: 24px; |
||||
} |
||||
|
||||
.authors li { |
||||
background: #F5F5F5; |
||||
border-radius: 48px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
text-align: center; |
||||
width: calc(100% / 3 - 16px); |
||||
} |
||||
|
||||
.authors a { |
||||
padding: 52px 17px 57px; |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
} |
||||
|
||||
.authors .main-img { |
||||
width: 200px; |
||||
height: 200px; |
||||
border-radius: 50%; |
||||
overflow: hidden; |
||||
flex-shrink: 0; |
||||
margin-bottom: 31px; |
||||
} |
||||
|
||||
.authors .main-img img { |
||||
width: 100%; |
||||
height: 100%; |
||||
object-fit: cover; |
||||
} |
||||
|
||||
.authors-name { |
||||
font-size: 24px; |
||||
font-weight: bold; |
||||
text-transform: uppercase; |
||||
line-height: 28px; |
||||
color: #121212; |
||||
margin-bottom: 5px; |
||||
} |
||||
|
||||
.authors-type { |
||||
color: #121212; |
||||
font-size: 24px; |
||||
font-weight: 500; |
||||
line-height: 32px; |
||||
margin-bottom: 31px; |
||||
} |
||||
|
||||
.authors p { |
||||
color: #666666; |
||||
font-weight: 500; |
||||
font-size: 20px; |
||||
line-height: 24px; |
||||
} |
||||
/* Authors end */ |
||||
|
||||
/* author-head */ |
||||
.author-head { |
||||
padding-bottom: 36px; |
||||
} |
||||
|
||||
.author-head-content { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 31px; |
||||
margin-bottom: 17.5px; |
||||
} |
||||
|
||||
.author-head .main-img { |
||||
width: 278px; |
||||
height: 278px; |
||||
flex-shrink: 0; |
||||
border-radius: 48px; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.author-head .main-img img { |
||||
width: 100%; |
||||
height: 100%; |
||||
object-fit: cover; |
||||
} |
||||
|
||||
.author-name { |
||||
font-size: 24px; |
||||
font-weight: bold; |
||||
line-height: 28px; |
||||
color: white; |
||||
margin-bottom: 5px; |
||||
text-transform: uppercase; |
||||
} |
||||
|
||||
.author-type { |
||||
font-size: 24px; |
||||
font-weight: 500; |
||||
line-height: 32px; |
||||
color: white; |
||||
margin-bottom: 5px; |
||||
} |
||||
|
||||
.author-description { |
||||
font-size: 24px; |
||||
font-weight: 500; |
||||
line-height: 32px; |
||||
color: white; |
||||
margin-bottom: 45px; |
||||
} |
||||
|
||||
.author-head p { |
||||
font-size: 20px; |
||||
font-weight: 500; |
||||
line-height: 24px; |
||||
color: white; |
||||
} |
||||
|
||||
.author-head h2 { |
||||
font-size: 64px; |
||||
font-weight: bold; |
||||
line-height: 120%; |
||||
color: white; |
||||
} |
||||
/* author-head end */ |
||||
|
||||
|
||||
|
||||
|
||||
/* Home */ |
||||
.home { |
||||
padding: 140px 0 68px; |
||||
} |
||||
|
||||
.home-title { |
||||
font-size: 82px; |
||||
font-weight: bold; |
||||
line-height: 96px; |
||||
color: var(--main_white); |
||||
margin-bottom: 16px; |
||||
} |
||||
|
||||
.home-description { |
||||
font-size: 32px; |
||||
font-weight: bold; |
||||
line-height: 40px; |
||||
color: var(--main_white); |
||||
text-transform: uppercase; |
||||
margin-bottom: 68px; |
||||
} |
||||
|
||||
.home-swp { |
||||
position: relative; |
||||
} |
||||
|
||||
.home-swp__btn { |
||||
position: absolute; |
||||
bottom: 22px; |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
z-index: 2; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 24px; |
||||
} |
||||
|
||||
.home-swp__btn button { |
||||
border: 1px solid var(--main_black); |
||||
background: var(--main_white); |
||||
width: 56px; |
||||
height: 56px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
border-radius: 20px; |
||||
} |
||||
|
||||
.home-swp .swiper-slide:not(.swiper-slide-active) { |
||||
height: 0; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.home-card { |
||||
border-radius: 60px; |
||||
overflow: hidden; |
||||
display: flex; |
||||
align-items: flex-start; |
||||
gap: 24px; |
||||
position: relative; |
||||
} |
||||
|
||||
.home-card.bg-yellow { |
||||
background: var(--orange_80); |
||||
} |
||||
|
||||
.home-card.bg-green { |
||||
background: var(--green_90); |
||||
} |
||||
|
||||
.home-card.bg-violet { |
||||
background: var(--violet_90); |
||||
} |
||||
|
||||
.home-card__img { |
||||
width: 395px; |
||||
border-radius: 60px; |
||||
overflow: hidden; |
||||
height: 393px; |
||||
flex-shrink: 0; |
||||
} |
||||
|
||||
.home-card__img img { |
||||
width: 100%; |
||||
height: 100%; |
||||
object-fit: cover; |
||||
} |
||||
|
||||
.home-card__content { |
||||
padding: 32px 79px 0 0; |
||||
} |
||||
|
||||
.home-card__content-title { |
||||
font-size: 36px; |
||||
font-weight: bold; |
||||
line-height: 40px; |
||||
text-transform: uppercase; |
||||
max-width: 660px; |
||||
margin-bottom: 10px; |
||||
color: var(--interface_title); |
||||
} |
||||
|
||||
.home-card__content-description { |
||||
color: var(--interface_title); |
||||
margin-bottom: 10px; |
||||
font-size: 20px; |
||||
font-weight: 500; |
||||
line-height: 24px; |
||||
display: -webkit-box; |
||||
-webkit-line-clamp: 3; |
||||
-webkit-box-orient: vertical; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
} |
||||
|
||||
.home-card__content-body { |
||||
display: flex; |
||||
align-items: center; |
||||
flex-wrap: wrap; |
||||
gap: 12px; |
||||
} |
||||
|
||||
.home-card__content-body__alerts { |
||||
display: flex; |
||||
align-items: center; |
||||
flex-wrap: wrap; |
||||
gap: 12px; |
||||
} |
||||
|
||||
.home-card__content-body__alerts li { |
||||
background: var(--interface_hover); |
||||
color: var(--background); |
||||
border-radius: 16px; |
||||
padding: 6px 8px; |
||||
font-size: 16px; |
||||
font-weight: 500; |
||||
line-height: 20px; |
||||
} |
||||
|
||||
.home-card__content-body__day { |
||||
color: var(--interface_hover); |
||||
font-size: 14px; |
||||
font-weight: 500; |
||||
line-height: 16px; |
||||
} |
||||
|
||||
.home-card__content-body__time { |
||||
font-size: 14px; |
||||
font-weight: 500; |
||||
line-height: 16px; |
||||
color: var(--interface_hover); |
||||
} |
||||
|
||||
.home-card__content-body__data { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 12px; |
||||
} |
||||
|
||||
.home-card__content-body__data>div { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 4px; |
||||
font-size: 14px; |
||||
font-weight: 500; |
||||
line-height: 16px; |
||||
color: var(--interface_hover); |
||||
} |
||||
|
||||
.home-card__content-body__data>div .main-img { |
||||
width: 32px; |
||||
height: 32px; |
||||
border-radius: 50%; |
||||
object-fit: cover; |
||||
} |
||||
|
||||
.home-card__content-body__link { |
||||
border: 1px solid #000000; |
||||
border-radius: 28px; |
||||
background: var(--main_white); |
||||
position: absolute; |
||||
right: 37px; |
||||
bottom: 26px; |
||||
padding: 8.5px 16px 12.5px; |
||||
font-style: 20px; |
||||
font-weight: 500; |
||||
line-height: 24px; |
||||
} |
||||
/* Home end */ |
||||
|
||||
|
||||
/* Anons */ |
||||
.anons { |
||||
background: var(--main_white); |
||||
border-radius: 60px; |
||||
padding: 51px 0; |
||||
} |
||||
|
||||
.anons-theme__title { |
||||
color: var(--main_black); |
||||
font-size: 24px; |
||||
font-weight: bold; |
||||
line-height: 28px; |
||||
text-transform: uppercase; |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.anons-theme { |
||||
margin-bottom: 60px; |
||||
} |
||||
|
||||
.anons-theme ul { |
||||
max-width: 1022px; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
gap: 12px; |
||||
} |
||||
|
||||
.anons-theme ul a { |
||||
font-size: 20px; |
||||
font-weight: 600; |
||||
line-height: 24px; |
||||
color: var(--main_black); |
||||
padding: 4px 24px; |
||||
border: 1px solid #000; |
||||
border-radius: 20px; |
||||
} |
||||
|
||||
.anons-theme ul a:hover, |
||||
.anons-theme ul a.active { |
||||
background: var(--main_black); |
||||
color: var(--main_white); |
||||
} |
||||
|
||||
.anons-best { |
||||
margin-bottom: 60px; |
||||
} |
||||
|
||||
.anons-best__title { |
||||
font-size: 36px; |
||||
line-height: 40px; |
||||
font-weight: bold; |
||||
color: var(--main_black); |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.anons-best__card-wrap { |
||||
display: grid; |
||||
grid-template-columns: repeat(3, minmax(0, 1fr)); |
||||
gap: 24px; |
||||
} |
||||
|
||||
.anons-best__card { |
||||
padding-top: 293px; |
||||
border-radius: 48px; |
||||
overflow: hidden; |
||||
position: relative; |
||||
z-index: 1; |
||||
} |
||||
|
||||
.anons-best__card.light { |
||||
padding-top: 0; |
||||
border-radius: 0; |
||||
} |
||||
|
||||
.anons-best__card .main-img { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 360px; |
||||
z-index: -1; |
||||
} |
||||
|
||||
.anons-best__card .main-img img { |
||||
width: 100%; |
||||
height: 100%; |
||||
object-fit: cover; |
||||
} |
||||
|
||||
.anons-best__card.light .main-img { |
||||
position: static; |
||||
height: 265px; |
||||
} |
||||
.anons-best__card.light .main-img img { |
||||
border-radius: 30px; |
||||
} |
||||
|
||||
.anons-best__card-alerts { |
||||
position: absolute; |
||||
top: 21px; |
||||
left: 17px; |
||||
width: calc(100% - 34px); |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
gap: 7px; |
||||
z-index: 1; |
||||
} |
||||
|
||||
.anons-best__card-alerts li { |
||||
padding: 6px 8px; |
||||
font-size: 16px; |
||||
line-height: 20px; |
||||
font-weight: 500; |
||||
color: var(--background); |
||||
background: var(--main_black); |
||||
border-radius: 30px; |
||||
} |
||||
|
||||
.anons-best__card-body { |
||||
background: var(--accent-1); |
||||
padding: 30px 17px 22px; |
||||
border-radius: 48px 48px 0 0; |
||||
color: var(--main_white); |
||||
position: relative; |
||||
height: 100%; |
||||
} |
||||
|
||||
.anons-best__card.light .anons-best__card-body { |
||||
background: transparent; |
||||
color: var(--main_black); |
||||
padding: 12px 0 34px; |
||||
} |
||||
|
||||
.anons-best__card-body__title { |
||||
font-size: 28px; |
||||
font-weight: bold; |
||||
line-height: 32px; |
||||
text-transform: uppercase; |
||||
margin-bottom: 14px; |
||||
} |
||||
|
||||
.anons-best__card.light .anons-best__card-body__title { |
||||
font-size: 26px; |
||||
} |
||||
|
||||
.anons-best__card-body__datas { |
||||
display: flex; |
||||
align-items: center; |
||||
flex-wrap: wrap; |
||||
gap: 6px 10px; |
||||
max-width: 264px; |
||||
} |
||||
|
||||
.anons-best__card.light .anons-best__card-body__datas { |
||||
color: var(--placeholder); |
||||
} |
||||
|
||||
.anons-best__card-body__datas p { |
||||
font-size: 14px; |
||||
line-height: 16px; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
.anons-best__card-body__datas ul { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 10px; |
||||
} |
||||
|
||||
.anons-best__card-body__datas ul li { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 4px; |
||||
font-size: 14px; |
||||
line-height: 16px; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
.anons-best__card-body__datas ul .logo img { |
||||
width: 24px; |
||||
height: 24px; |
||||
border-radius: 50%; |
||||
object-fit: cover; |
||||
} |
||||
|
||||
.anons-article { |
||||
margin-bottom: 40px; |
||||
} |
||||
|
||||
.anons-article__title { |
||||
font-size: 36px; |
||||
line-height: 40px; |
||||
font-weight: bold; |
||||
color: var(--main_black); |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.anons-article__card-wrap { |
||||
display: grid; |
||||
grid-template-columns: repeat(3, minmax(0, 1fr)); |
||||
gap: 40px 25px; |
||||
} |
||||
|
||||
.anons-article__more-link { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
|
||||
.anons-article__more-link a { |
||||
background: var(--accent-3); |
||||
color: var(--main_white); |
||||
border-radius: 20px; |
||||
border: 1px solid var(--main_white); |
||||
padding: 16px 24px; |
||||
font-size: 20px; |
||||
font-weight: 600; |
||||
line-height: 24px; |
||||
text-transform: uppercase; |
||||
} |
||||
/* Anons end */ |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,120 @@ |
||||
/* Стили для мобильных устройств */ |
||||
@media only screen and (max-width: 576px) { |
||||
.anons-best__title { |
||||
font-size: 26px; |
||||
line-height: 32px; |
||||
margin-bottom: 12px; |
||||
} |
||||
|
||||
.anons-best__card { |
||||
padding-top: 205px; |
||||
} |
||||
|
||||
.anons-best__card .main-img { |
||||
height: 300px; |
||||
} |
||||
|
||||
.anons-best__card-body { |
||||
padding: 20px 17px; |
||||
} |
||||
|
||||
.anons-best__card-body__title { |
||||
font-size: 20px; |
||||
line-height: 24px; |
||||
margin-bottom: 16px; |
||||
} |
||||
|
||||
.anons-best__card.light .main-img { |
||||
height: 197px; |
||||
} |
||||
|
||||
.anons-best__card.light .anons-best__card-body__title { |
||||
font-size: 20px; |
||||
line-height: 24px; |
||||
} |
||||
|
||||
|
||||
|
||||
.authors { |
||||
padding-bottom: 138px; |
||||
} |
||||
|
||||
.authors h2 { |
||||
font-size: 32px; |
||||
line-height: 38px; |
||||
margin-bottom: 15px; |
||||
} |
||||
|
||||
.authors li { |
||||
border-radius: 24px; |
||||
width: 100%; |
||||
} |
||||
|
||||
.authors a { |
||||
padding: 32px 17px 52px; |
||||
} |
||||
|
||||
.authors .main-img { |
||||
width: 180px; |
||||
height: 180px; |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.authors-name { |
||||
font-size: 20px; |
||||
line-height: 24px; |
||||
} |
||||
|
||||
.authors-type { |
||||
font-size: 18px; |
||||
line-height: 24px; |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.authors p { |
||||
font-size: 16px; |
||||
line-height: 20px; |
||||
} |
||||
|
||||
.author-head { |
||||
padding-bottom: 15px; |
||||
} |
||||
|
||||
.author-head-content { |
||||
margin-bottom: 23px; |
||||
} |
||||
|
||||
.author-head .main-img { |
||||
width: 100%; |
||||
} |
||||
|
||||
.author-head h2 { |
||||
font-size: 32px; |
||||
line-height: 38px; |
||||
} |
||||
|
||||
.author-name { |
||||
font-size: 20px; |
||||
line-height: 24px; |
||||
} |
||||
|
||||
.author-type { |
||||
font-size: 18px; |
||||
line-height: 24px; |
||||
} |
||||
|
||||
.author-description { |
||||
font-size: 18px; |
||||
line-height: 24px; |
||||
margin-bottom: 24px; |
||||
} |
||||
|
||||
.author-head p { |
||||
font-size: 16px; |
||||
line-height: 20px; |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,44 @@ |
||||
/* Стили для планшетов */ |
||||
@media only screen and (max-width: 992px) { |
||||
|
||||
.authors h2 { |
||||
font-size: 48px; |
||||
margin-bottom: 24px; |
||||
} |
||||
|
||||
.authors li { |
||||
border-radius: 32px; |
||||
width: calc(50% - 12px); |
||||
} |
||||
|
||||
.authors .main-img { |
||||
margin-bottom: 24px; |
||||
} |
||||
|
||||
.author { |
||||
padding-bottom: 24px; |
||||
} |
||||
|
||||
.author h2 { |
||||
font-size: 48px; |
||||
} |
||||
|
||||
.author-head-content { |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
/* Стили для планшетов */ |
||||
@media only screen and (max-width: 992px) { |
||||
|
||||
.author { |
||||
padding: 188px 0 36px; |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
} |
||||
|
After Width: | Height: | Size: 225 B |
|
After Width: | Height: | Size: 216 KiB |
|
After Width: | Height: | Size: 167 KiB |
|
After Width: | Height: | Size: 261 KiB |
|
After Width: | Height: | Size: 261 KiB |
|
After Width: | Height: | Size: 247 KiB |
|
After Width: | Height: | Size: 429 KiB |
|
After Width: | Height: | Size: 458 B |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 190 KiB |
|
After Width: | Height: | Size: 911 B |
|
After Width: | Height: | Size: 676 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 439 B |
|
After Width: | Height: | Size: 391 B |
|
After Width: | Height: | Size: 389 B |
|
After Width: | Height: | Size: 391 B |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 246 B |
|
After Width: | Height: | Size: 929 B |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 246 B |
|
After Width: | Height: | Size: 244 B |
|
After Width: | Height: | Size: 246 B |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 458 B |
|
After Width: | Height: | Size: 460 B |
|
After Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1,46 @@ |
||||
jQuery(document).ready(function ($) { |
||||
$('#ajax-load-author').on('submit', function (e) { |
||||
e.preventDefault(); |
||||
var form = $(this); |
||||
var currentPage = parseInt($('#page_num').val()); |
||||
var totalPosts = parseInt(form.data('total')); |
||||
var postsPerPage = 9; |
||||
|
||||
console.log('Current page before load:', currentPage); |
||||
console.log('Total posts:', totalPosts); |
||||
console.log('Posts loaded before request:', postsPerPage); |
||||
|
||||
var data = { |
||||
action: 'get_author_posts', |
||||
page_num: currentPage, |
||||
author_id: form.data('author') |
||||
}; |
||||
|
||||
console.log('Sending AJAX request with data:', data); |
||||
|
||||
$.ajax({ |
||||
url: '/wp-admin/admin-ajax.php', |
||||
type: 'POST', |
||||
data: data, |
||||
success: function (response) { |
||||
console.log('AJAX response received'); |
||||
$(".anons-article__card-wrap").append(response); |
||||
|
||||
$('#page_num').val(currentPage + 1); |
||||
console.log('New page number:', currentPage + 1); |
||||
|
||||
// Считаем общее количество загруженных постов
|
||||
var currentlyDisplayed = $('.anons-article__card-wrap .anons-best__card').length; |
||||
console.log('Actually displayed posts:', currentlyDisplayed); |
||||
|
||||
if (currentlyDisplayed >= totalPosts) { |
||||
console.log('Hiding load more button - all posts loaded'); |
||||
form.hide(); |
||||
} |
||||
}, |
||||
error: function (error) { |
||||
console.error('AJAX error:', error); |
||||
} |
||||
}); |
||||
}); |
||||
});
|
||||
@ -0,0 +1,48 @@ |
||||
// const homeSwp = new Swiper('.home-swp .swiper', {
|
||||
// slidesPerView: 1,
|
||||
// spaceBetween: 0,
|
||||
// effect: 'fade',
|
||||
// loop: true,
|
||||
// navigation: {
|
||||
// nextEl: '.home-swp__btn-next',
|
||||
// prevEl: '.home-swp__btn-prev',
|
||||
// }
|
||||
// })
|
||||
|
||||
// const textsSwp = new Swiper('.texts-swp .swiper', {
|
||||
// slidesPerView: 1,
|
||||
// spaceBetween: 0,
|
||||
// loop: true,
|
||||
// effect: 'fade',
|
||||
// navigation: {
|
||||
// nextEl: '.texts-swp__next',
|
||||
// prevEl: '.texts-swp__prev'
|
||||
// },
|
||||
// pagination: {
|
||||
// el: ".texts-swp__pagination",
|
||||
// clickable: true,
|
||||
// }
|
||||
// })
|
||||
|
||||
// comment
|
||||
// let answerbtns = document.querySelectorAll('.answer-btn');
|
||||
// let answerbtnicons = document.querySelectorAll('.answer-btn svg');
|
||||
// let answerblocks = document.querySelectorAll('.answer-block');
|
||||
|
||||
// answerbtns.forEach((answerbtn, index) => {
|
||||
// answerbtn.addEventListener('click', () => {
|
||||
// let answerbtnicon = answerbtnicons[index];
|
||||
// let answerblock = answerblocks[index];
|
||||
|
||||
// answerblock.classList.toggle('active');
|
||||
// answerbtnicon.classList.toggle('active');
|
||||
|
||||
// let buttonText = answerbtn.querySelector('span');
|
||||
// if (buttonText.textContent === 'Ответ') {
|
||||
// buttonText.textContent = 'Свернуть';
|
||||
// } else {
|
||||
// buttonText.textContent = 'ответ';
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
// comment
|
||||
@ -0,0 +1,54 @@ |
||||
<?php |
||||
|
||||
include_component('blog', 'featured-slider'); |
||||
include_module('forms'); |
||||
include_component('forms', 'discount'); |
||||
|
||||
$context = Timber::context(); |
||||
|
||||
$context['blog_title'] = get_field('blog_title', 'options'); |
||||
$context['blog_desc'] = get_field('blog_desc', 'options'); |
||||
$context['post_count'] = wp_count_posts()->publish; |
||||
$context['total_pages'] = ceil($context['post_count'] / get_option('posts_per_page')); |
||||
|
||||
$context['sub_title'] = get_field('sub_title', 383); |
||||
$context['sub_text'] = get_field('sub_text', 383); |
||||
|
||||
$authors = Timber::get_posts([ |
||||
'post_type' => 'blog_author', |
||||
'posts_per_page' => -1, |
||||
'orderby' => 'menu_order', |
||||
'order' => 'ASC', |
||||
]); |
||||
|
||||
$authors_arr = iterator_to_array($authors); |
||||
foreach ($authors_arr as $author) { |
||||
$author_id = $author->ID; |
||||
$query = new WP_Query([ |
||||
'post_type' => 'post', |
||||
'posts_per_page' => -1, |
||||
'meta_query' => [ |
||||
[ |
||||
'key' => 'post_author', |
||||
'value' => $author_id, |
||||
'compare' => '=' |
||||
] |
||||
] |
||||
]); |
||||
$author->post_count = $query->found_posts; |
||||
$author->position = get_field('post', $author_id); |
||||
$author->posts = Timber::get_posts([ |
||||
'post_type' => 'post', |
||||
'posts_per_page' => -1, |
||||
'meta_query' => [ |
||||
[ |
||||
'key' => 'post_author', |
||||
'value' => $author_id, |
||||
'compare' => '=' |
||||
] |
||||
] |
||||
]); |
||||
} |
||||
$context['authors'] = $authors_arr; |
||||
|
||||
Timber::render('blog_author/author-archive.twig', $context); |
||||
@ -0,0 +1,41 @@ |
||||
<?php |
||||
|
||||
$context = Timber::get_context(); |
||||
|
||||
$author = Timber::get_post(); |
||||
$author_id = $author->ID; |
||||
|
||||
|
||||
$author->position = get_field('post', $author_id); |
||||
|
||||
$count_query = new WP_Query([ |
||||
'post_type' => 'post', |
||||
'post_status' => 'publish', |
||||
'posts_per_page' => -1, |
||||
'meta_query' => [ |
||||
[ |
||||
'key' => 'post_author', |
||||
'value' => $author_id, |
||||
'compare' => '=' |
||||
] |
||||
] |
||||
]); |
||||
$author->post_count = $count_query->found_posts; |
||||
|
||||
$author->posts = Timber::get_posts([ |
||||
'post_type' => 'post', |
||||
'post_status' => 'publish', |
||||
'posts_per_page' => 9, |
||||
'meta_query' => [ |
||||
[ |
||||
'key' => 'post_author', |
||||
'value' => $author_id, |
||||
'compare' => '=' |
||||
] |
||||
] |
||||
]); |
||||
|
||||
$context['author'] = $author; |
||||
$context['total_pages'] = ceil($author->post_count / 9); |
||||
|
||||
Timber::render('blog_author/author-single.twig', $context); |
||||
@ -0,0 +1,35 @@ |
||||
<?php |
||||
|
||||
include_module('author'); |
||||
|
||||
function get_author_posts() { |
||||
$author_id = isset($_POST['author_id']) ? sanitize_text_field($_POST['author_id']) : ''; |
||||
|
||||
$all_posts = Timber::get_posts([ |
||||
'post_type' => 'post', |
||||
'post_status' => 'publish', |
||||
'posts_per_page' => -1, |
||||
'meta_query' => [ |
||||
[ |
||||
'key' => 'post_author', |
||||
'value' => $author_id, |
||||
'compare' => '=' |
||||
] |
||||
] |
||||
]); |
||||
|
||||
if ($all_posts instanceof \Timber\PostQuery || $all_posts instanceof \Timber\PostCollection) { |
||||
$all_posts = $all_posts->get_posts(); |
||||
} |
||||
|
||||
$remaining_posts = array_slice($all_posts, 9); |
||||
|
||||
$context = Timber::context(); |
||||
$context['posts'] = $remaining_posts; |
||||
|
||||
Timber::render('blog_author/author-posts-list.twig', $context); |
||||
wp_die(); |
||||
} |
||||
|
||||
add_action('wp_ajax_get_author_posts', 'get_author_posts'); |
||||
add_action('wp_ajax_nopriv_get_author_posts', 'get_author_posts'); |
||||
@ -0,0 +1,198 @@ |
||||
// comment
|
||||
let answerbtns = document.querySelectorAll('.answer-btn'); |
||||
let answerbtnicons = document.querySelectorAll('.answer-btn svg'); |
||||
|
||||
// При загрузке страницы проверяем активные кнопки
|
||||
document.addEventListener('DOMContentLoaded', function() { |
||||
// Для каждой кнопки ответов
|
||||
answerbtns.forEach((answerbtn) => { |
||||
// Находим родительский контейнер, чтобы искать ответы только для этого комментария
|
||||
const buttonParent = answerbtn.parentElement; |
||||
|
||||
// Находим все блоки ответов для этого комментария (после текущей кнопки)
|
||||
const answerBlocks = getRelatedAnswerBlocks(answerbtn); |
||||
if (answerBlocks.length === 0) return; |
||||
|
||||
// Проверяем, должны ли быть ответы развернуты (если у кнопки или любого ответа есть класс active)
|
||||
const shouldBeActive = answerbtn.querySelector('svg').classList.contains('active') ||
|
||||
Array.from(answerBlocks).some(block => block.classList.contains('active')); |
||||
|
||||
if (shouldBeActive) { |
||||
// Активируем все ответы только для этого комментария
|
||||
answerBlocks.forEach(block => { |
||||
block.classList.add('active'); |
||||
}); |
||||
|
||||
// Обновляем состояние кнопки
|
||||
answerbtn.querySelector('svg').classList.add('active'); |
||||
|
||||
// Обновляем текст кнопки
|
||||
let buttonText = answerbtn.querySelector('span'); |
||||
if (buttonText) { |
||||
buttonText.textContent = 'Свернуть'; |
||||
} |
||||
} else { |
||||
// Скрываем все ответы
|
||||
answerBlocks.forEach(block => { |
||||
block.classList.remove('active'); |
||||
}); |
||||
|
||||
// Обновляем состояние кнопки
|
||||
answerbtn.querySelector('svg').classList.remove('active'); |
||||
|
||||
// Обновляем текст кнопки в зависимости от количества ответов
|
||||
let buttonText = answerbtn.querySelector('span'); |
||||
if (buttonText) { |
||||
const count = answerBlocks.length; |
||||
buttonText.textContent = count === 1 ? 'ответ' : 'ответа'; |
||||
} |
||||
} |
||||
}); |
||||
}); |
||||
|
||||
// Функция для получения блоков ответов, связанных с данной кнопкой
|
||||
function getRelatedAnswerBlocks(answerBtn) { |
||||
// Получаем следующий блок комментариев (если он есть)
|
||||
let currentElement = answerBtn; |
||||
let answerBlocks = []; |
||||
|
||||
// Собираем все блоки ответов до следующего основного комментария или кнопки ответов
|
||||
while ((currentElement = currentElement.nextElementSibling) !== null) { |
||||
if (currentElement.classList.contains('comment-block') && !currentElement.classList.contains('answer-block')) { |
||||
// Достигли следующего основного комментария, прерываем сбор
|
||||
break; |
||||
} else if (currentElement.classList.contains('answer-btn')) { |
||||
// Достигли следующей кнопки ответов, прерываем сбор
|
||||
break; |
||||
} else if (currentElement.classList.contains('answer-block')) { |
||||
// Это блок ответа, добавляем в коллекцию
|
||||
answerBlocks.push(currentElement); |
||||
} |
||||
} |
||||
|
||||
return answerBlocks; |
||||
} |
||||
|
||||
// Обработчики нажатия на кнопки ответов
|
||||
answerbtns.forEach((answerbtn) => { |
||||
answerbtn.addEventListener('click', () => { |
||||
// Получаем все блоки ответов для этого комментария
|
||||
const answerBlocks = getRelatedAnswerBlocks(answerbtn); |
||||
if (answerBlocks.length === 0) return; |
||||
|
||||
// Определяем, развернуты ли ответы сейчас
|
||||
const isCurrentlyActive = answerbtn.querySelector('svg').classList.contains('active'); |
||||
|
||||
// Переключаем состояние
|
||||
if (isCurrentlyActive) { |
||||
// Скрываем все ответы
|
||||
answerBlocks.forEach(block => { |
||||
block.classList.remove('active'); |
||||
}); |
||||
|
||||
// Обновляем состояние кнопки
|
||||
answerbtn.querySelector('svg').classList.remove('active'); |
||||
|
||||
// Обновляем текст кнопки
|
||||
let buttonText = answerbtn.querySelector('span'); |
||||
if (buttonText) { |
||||
const count = answerBlocks.length; |
||||
buttonText.textContent = count === 1 ? 'ответ' : 'ответа'; |
||||
} |
||||
} else { |
||||
// Показываем все ответы
|
||||
answerBlocks.forEach(block => { |
||||
block.classList.add('active'); |
||||
}); |
||||
|
||||
// Обновляем состояние кнопки
|
||||
answerbtn.querySelector('svg').classList.add('active'); |
||||
|
||||
// Обновляем текст кнопки
|
||||
let buttonText = answerbtn.querySelector('span'); |
||||
if (buttonText) { |
||||
buttonText.textContent = 'Свернуть'; |
||||
} |
||||
} |
||||
}); |
||||
}); |
||||
|
||||
// Обработка нажатия на кнопку "Ответить" на комментарий
|
||||
document.addEventListener('DOMContentLoaded', function() { |
||||
// Получаем все кнопки "Ответить" на странице
|
||||
const replyButtons = document.querySelectorAll('.reply-to-comment'); |
||||
|
||||
// Добавляем обработчик на каждую кнопку
|
||||
replyButtons.forEach(button => { |
||||
button.addEventListener('click', function() { |
||||
// Получаем ID комментария, на который отвечаем
|
||||
const commentId = this.getAttribute('data-comment-id'); |
||||
const postId = this.getAttribute('data-post-id'); |
||||
const replyToName = this.getAttribute('data-reply-to'); |
||||
|
||||
// Получаем контейнер для формы ответа
|
||||
const replyFormContainer = document.getElementById('reply-form-' + commentId); |
||||
|
||||
// Если форма уже открыта, скрываем её
|
||||
if (replyFormContainer.style.display !== 'none') { |
||||
replyFormContainer.style.display = 'none'; |
||||
return; |
||||
} |
||||
|
||||
// Скрываем все открытые формы ответов
|
||||
document.querySelectorAll('.reply-form-container').forEach(container => { |
||||
container.style.display = 'none'; |
||||
}); |
||||
|
||||
// Клонируем основную форму комментариев
|
||||
const originalForm = document.getElementById('commentform'); |
||||
if (originalForm) { |
||||
const clonedForm = originalForm.cloneNode(true); |
||||
|
||||
// Изменяем атрибуты формы для ответа
|
||||
clonedForm.id = 'commentform-reply-' + commentId; |
||||
|
||||
// Добавляем скрытое поле с ID родительского комментария
|
||||
const hiddenInput = document.createElement('input'); |
||||
hiddenInput.type = 'hidden'; |
||||
hiddenInput.name = 'comment_parent'; |
||||
hiddenInput.value = commentId; |
||||
clonedForm.appendChild(hiddenInput); |
||||
|
||||
// Изменяем заголовок формы
|
||||
const formTitle = clonedForm.querySelector('.comment-reply-title'); |
||||
if (formTitle) { |
||||
formTitle.textContent = 'Ответить ' + replyToName; |
||||
} |
||||
|
||||
// Добавляем кнопку отмены
|
||||
const cancelButton = document.createElement('button'); |
||||
cancelButton.type = 'button'; |
||||
cancelButton.className = 'cancel-reply-btn'; |
||||
cancelButton.textContent = 'Отменить'; |
||||
cancelButton.addEventListener('click', function() { |
||||
replyFormContainer.style.display = 'none'; |
||||
}); |
||||
|
||||
// Добавляем кнопку отмены в форму
|
||||
const submitContainer = clonedForm.querySelector('.form-submit'); |
||||
if (submitContainer) { |
||||
submitContainer.appendChild(cancelButton); |
||||
} |
||||
|
||||
// Очищаем контейнер и добавляем клонированную форму
|
||||
replyFormContainer.innerHTML = ''; |
||||
replyFormContainer.appendChild(clonedForm); |
||||
|
||||
// Показываем форму
|
||||
replyFormContainer.style.display = 'block'; |
||||
|
||||
// Фокусируемся на текстовой области
|
||||
const textarea = clonedForm.querySelector('textarea'); |
||||
if (textarea) { |
||||
textarea.focus(); |
||||
} |
||||
} |
||||
}); |
||||
}); |
||||
}); |
||||
|
After Width: | Height: | Size: 439 B |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 391 B |
|
After Width: | Height: | Size: 246 B |
|
After Width: | Height: | Size: 389 B |
|
After Width: | Height: | Size: 244 B |
|
After Width: | Height: | Size: 391 B |
|
After Width: | Height: | Size: 246 B |
@ -0,0 +1,147 @@ |
||||
jQuery(document).ready(function ($) { |
||||
$(".comment-btn button").on("click", function () { |
||||
var postId = $(this).data("post-id"); |
||||
var $button = $(this); |
||||
|
||||
$.ajax({ |
||||
url: "/wp-admin/admin-ajax.php", |
||||
type: "POST", |
||||
data: { |
||||
action: "add_post_like", |
||||
post_id: postId, |
||||
}, |
||||
success: function (response) { |
||||
if (response.error) { |
||||
alert(response.error); |
||||
window.location.href = "/wp-login.php"; |
||||
return; |
||||
} |
||||
|
||||
$(".comment-btn span").text(response.count); |
||||
|
||||
if (response.is_liked) { |
||||
$button.addClass("active"); |
||||
|
||||
$button.find("svg path").attr({ |
||||
fill: "rgba(255, 0, 0, 0.7)", |
||||
stroke: "#ff0000", |
||||
}); |
||||
} else { |
||||
$button.removeClass("active"); |
||||
|
||||
$button.find("svg path").attr({ |
||||
fill: "rgb(18, 18, 18)", |
||||
stroke: "#666666", |
||||
}); |
||||
} |
||||
}, |
||||
error: function (error) { |
||||
if (error.responseJSON && error.responseJSON.data) { |
||||
alert(error.responseJSON.data); |
||||
window.location.href = "/wp-login.php"; |
||||
} |
||||
}, |
||||
}); |
||||
}); |
||||
|
||||
$(document).on("click", ".comment-like-btn", function () { |
||||
var commentId = $(this).data("comment-id"); |
||||
var $button = $(this); |
||||
|
||||
$.ajax({ |
||||
url: "/wp-admin/admin-ajax.php", |
||||
type: "POST", |
||||
data: { |
||||
action: "add_comment_like", |
||||
comment_id: commentId, |
||||
}, |
||||
success: function (response) { |
||||
if (response.error) { |
||||
alert(response.error); |
||||
window.location.href = "/wp-login.php"; |
||||
return; |
||||
} |
||||
|
||||
if (response.is_liked) { |
||||
$button |
||||
.empty() |
||||
.append( |
||||
$( |
||||
'<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.7745 1C8.67239 1 7.7426 2.5355 7.54047 3.30325C7.39224 2.5355 6.49748 1 4.10427 1C1.11276 1 -0.221288 4.85199 2.40639 8.14801C4.50853 10.7848 6.705 11.8147 7.54047 12C8.47026 11.8279 10.8311 10.761 12.8363 7.87004C15.3427 4.25632 13.4022 1 10.7745 1Z" stroke="#ff0000" fill="rgba(255, 0, 0, 0.7)"></path></svg>' |
||||
) |
||||
) |
||||
.append(response.count); |
||||
$button.addClass("active"); |
||||
} else { |
||||
$button |
||||
.empty() |
||||
.append( |
||||
$( |
||||
'<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.7745 1C8.67239 1 7.7426 2.5355 7.54047 3.30325C7.39224 2.5355 6.49748 1 4.10427 1C1.11276 1 -0.221288 4.85199 2.40639 8.14801C4.50853 10.7848 6.705 11.8147 7.54047 12C8.47026 11.8279 10.8311 10.761 12.8363 7.87004C15.3427 4.25632 13.4022 1 10.7745 1Z" stroke="#666666" fill="none"></path></svg>' |
||||
) |
||||
) |
||||
.append(response.count); |
||||
$button.removeClass("active"); |
||||
} |
||||
}, |
||||
error: function (error) { |
||||
if (error.responseJSON && error.responseJSON.data) { |
||||
alert(error.responseJSON.data); |
||||
window.location.href = "/wp-login.php"; |
||||
} |
||||
}, |
||||
}); |
||||
}); |
||||
|
||||
function checkLikedPosts() { |
||||
if (!document.body.classList.contains("logged-in")) { |
||||
return; |
||||
} |
||||
|
||||
$.ajax({ |
||||
url: "/wp-admin/admin-ajax.php", |
||||
type: "POST", |
||||
data: { |
||||
action: "check_user_likes", |
||||
}, |
||||
success: function (response) { |
||||
if (response.error) { |
||||
return; |
||||
} |
||||
|
||||
try { |
||||
var data = JSON.parse(response); |
||||
|
||||
if (data.posts && data.posts.length > 0) { |
||||
for (var i = 0; i < data.posts.length; i++) { |
||||
var $button = $('.comment-btn button[data-post-id="' + data.posts[i] + '"]'); |
||||
$button.addClass("active"); |
||||
$button.find("svg path").attr({ |
||||
fill: "rgba(255, 0, 0, 0.7)", |
||||
stroke: "#ff0000", |
||||
}); |
||||
} |
||||
} |
||||
|
||||
if (data.comments && data.comments.length > 0) { |
||||
for (var j = 0; j < data.comments.length; j++) { |
||||
var $commentButton = $('.comment-like-btn[data-comment-id="' + data.comments[j] + '"]'); |
||||
$commentButton.addClass("active"); |
||||
|
||||
$commentButton.find("svg path").attr({ |
||||
fill: "rgba(255, 0, 0, 0.7)", |
||||
stroke: "#ff0000", |
||||
}); |
||||
} |
||||
} |
||||
} catch (e) {} |
||||
}, |
||||
error: function (error) {}, |
||||
}); |
||||
} |
||||
|
||||
if (document.body.classList.contains("logged-in")) { |
||||
checkLikedPosts(); |
||||
} |
||||
}); |
||||
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,552 @@ |
||||
*{ |
||||
margin: 0; |
||||
padding: 0; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
/* Переменные, шрифты, UI kit */ |
||||
|
||||
/* |
||||
700 - Bold |
||||
600 - SemiBold / Demi |
||||
500 - Medium |
||||
400 - Regular |
||||
*/ |
||||
|
||||
a{ |
||||
cursor: pointer; |
||||
} |
||||
|
||||
/* Craftwork Grotesk */ |
||||
@font-face { |
||||
font-family: "Craftwork Grotesk"; |
||||
src: local("Craftwork Grotesk Bold"), |
||||
url("../fonts/craftwork/CraftworkGrotesk-SemiBold.woff2") format("woff2"), |
||||
url("../fonts/craftwork/CraftworkGrotesk-Bold.woff") format("woff"), |
||||
url("../fonts/craftwork/craftwork-grotesk-bold.ttf") format("ttf"); |
||||
font-weight: 700; |
||||
} |
||||
@font-face { |
||||
font-family: "Craftwork Grotesk"; |
||||
src: local("Craftwork Grotesk SemiBold"), |
||||
url("../fonts/craftwork/CraftworkGrotesk-SemiBold.woff2") format("woff2"), |
||||
url("../fonts/craftwork/CraftworkGrotesk-SemiBold.woff") format("woff"), |
||||
url("../fonts/craftwork/craftwork-grotesk-semi-bold.ttf") format("ttf"); |
||||
font-weight: 600; |
||||
} |
||||
@font-face { |
||||
font-family: "Craftwork Grotesk"; |
||||
src: local("Craftwork Grotesk Medium"), |
||||
url("../fonts/craftwork/CraftworkGrotesk-Medium.woff2") format("woff2"), |
||||
url("../fonts/craftwork/CraftworkGrotesk-Medium.woff") format("woff"), |
||||
url("../fonts/craftwork/craftwork-grotesk-medium.ttf") format("ttf"); |
||||
font-weight: 500; |
||||
} |
||||
@font-face { |
||||
font-family: "Craftwork Grotesk"; |
||||
src: local("Craftwork Grotesk Regular"), |
||||
url("../fonts/craftwork/CraftworkGrotesk-Regular.woff2") format("woff2"), |
||||
url("../fonts/craftwork/CraftworkGrotesk-Regular.woff") format("woff"), |
||||
url("../fonts/craftwork/craftwork-grotesk-regular.ttf") format("ttf"); |
||||
font-weight: 400; |
||||
} |
||||
/* Craftwork Grotesk */ |
||||
|
||||
/* din 2014 */ |
||||
@font-face { |
||||
font-family: "DIN 2014 Rounded"; |
||||
src: local("DIN 2014 Rounded Demi"), |
||||
url("../fonts/din-2014/din-2014-rounded-demi.woff2") format("woff2"), |
||||
url("../fonts/din-2014/din-2014-rounded-demi.woff") format("woff"), |
||||
url("../fonts/din-2014/din-2014-rounded-demi.ttf") format("ttf"); |
||||
font-weight: 600; |
||||
} |
||||
@font-face { |
||||
font-family: "DIN 2014 Rounded"; |
||||
src: local("DIN 2014 Rounded Regular"), |
||||
url("../fonts/din-2014/din-2014-rounded-regular.woff2") format("woff2"), |
||||
url("../fonts/din-2014/din-2014-rounded-regular.woff") format("woff"), |
||||
url("../fonts/din-2014/din-2014-rounded-regular.ttf") format("ttf"); |
||||
font-weight: 400; |
||||
} |
||||
/* din 2014 */ |
||||
|
||||
/* roboto */ |
||||
@font-face { |
||||
font-family: "Roboto"; |
||||
src: local("Roboto Medium"), |
||||
url("../fonts/roboto/Roboto-Medium.woff2") format("woff2"), |
||||
url("../fonts/roboto/Roboto-Medium.woff") format("woff"), |
||||
url("../fonts/roboto/roboto-medium.ttf") format("ttf"); |
||||
font-weight: 500; |
||||
} |
||||
@font-face { |
||||
font-family: "Roboto"; |
||||
src: local("Roboto Regular"), |
||||
url("../fonts/roboto/Roboto-Regular.woff2") format("woff2"), |
||||
url("../fonts/roboto/Roboto-Regular.woff") format("woff"), |
||||
url("../fonts/roboto/roboto-medium.ttf") format("ttf"); |
||||
font-weight: 400; |
||||
} |
||||
/* roboto */ |
||||
|
||||
/* Глобальные переменные: */ |
||||
|
||||
:root { |
||||
/* fonts */ |
||||
--font-family: "Craftwork Grotesk", sans-serif; |
||||
--second-family: "DIN 2014 Rounded", sans-serif; |
||||
--third-family: "Roboto", sans-serif; |
||||
|
||||
/* color */ |
||||
/* text */ |
||||
--text-white: #fff; |
||||
--text-black: #121212; |
||||
--text-dark: #2b2b3b; |
||||
--text-grey: #999; |
||||
--text-red: #fa0505; |
||||
--text-green: #2ED15D; |
||||
--text-0: #000; |
||||
--text-3: #333; |
||||
--text-6: #666; |
||||
--text-9: #999; |
||||
|
||||
/* background */ |
||||
--background-white: #fff; |
||||
--background-black: #121212; |
||||
--background-grey: #f2f2f2; |
||||
--background-green: #2ED15D; |
||||
--background-green-white: #f4fff0; |
||||
--background-9: #999; |
||||
|
||||
|
||||
/* gradient */ |
||||
--gradient-blue: radial-gradient(346.57% 244.17% at 149.73% -58.39%, rgb(15, 88, 129) 0%, rgb(30, 164, 156) 51.21689438819885%, rgb(118, 206, 117) 80.70731163024902%, rgb(236, 243, 159) 91.14583134651184%); |
||||
--gradient-turquoise: radial-gradient(346.57% 244.17% at 149.73% -58.39%, rgb(117, 196, 240) 0%, rgb(126, 231, 225) 51.21689438819885%, rgb(181, 228, 180) 80.70731163024902%, rgb(237, 244, 164) 91.14583134651184%); |
||||
--gradient-red: linear-gradient(22deg, #f44242 0%, #569ef0 100%); |
||||
} |
||||
|
||||
|
||||
/* общие */ |
||||
button{ |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.wrapper{ |
||||
margin: 0 auto; |
||||
|
||||
max-width: 1600px; |
||||
} |
||||
|
||||
/* компоненты */ |
||||
|
||||
/* lang*/ |
||||
/* lang */ |
||||
|
||||
|
||||
/* mini-profile */ |
||||
/* mini-profile */ |
||||
|
||||
|
||||
/* main-menu */ |
||||
/* main-menu */ |
||||
|
||||
|
||||
/* form */ |
||||
/* .form-input-radio__ */ |
||||
/* form */ |
||||
|
||||
|
||||
/* social media */ |
||||
/* social media */ |
||||
|
||||
|
||||
/* breadcrumbs */ |
||||
.breadcrumbs{ |
||||
margin: 24px; |
||||
|
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.breadcrumbs__item{ |
||||
display: block; |
||||
|
||||
padding: 0px 16px; |
||||
|
||||
|
||||
font-weight: 700; |
||||
font-size: 16px; |
||||
line-height: 125%; |
||||
color: var(--text-6); |
||||
|
||||
text-decoration: none; |
||||
|
||||
position: relative; |
||||
} |
||||
.breadcrumbs__item:first-child{ |
||||
padding-left: 0; |
||||
} |
||||
/* breadcrumbs */ |
||||
|
||||
/* compound */ |
||||
.compound{ |
||||
margin: -5px; |
||||
|
||||
min-height: 33.95px; |
||||
|
||||
display: flex; |
||||
align-items: start; |
||||
} |
||||
.compound__item{ |
||||
margin: 5px; |
||||
|
||||
padding: 4px 8px; |
||||
|
||||
|
||||
font-weight: 700; |
||||
font-size: 12px; |
||||
line-height: 133%; |
||||
color: var(--text-black); |
||||
|
||||
border-radius: 16px; |
||||
background-color: var(--background-white); |
||||
|
||||
display: block; |
||||
text-decoration: none; |
||||
} |
||||
.compound__item:first-child{ |
||||
margin-left: 0; |
||||
} |
||||
/* compound */ |
||||
|
||||
/* button */ |
||||
.button{ |
||||
|
||||
font-weight: 600; |
||||
font-size: 20px; |
||||
line-height: 120%; |
||||
color: var(--text-black); |
||||
|
||||
border-radius: 20px; |
||||
|
||||
cursor: pointer; |
||||
} |
||||
.button--100-perc{ |
||||
width: 100%; |
||||
} |
||||
.button--white{ |
||||
padding: 11px 24px; |
||||
|
||||
text-align: center; |
||||
|
||||
background-color: var(--background-white); |
||||
border: 1px solid var(--background-black); |
||||
|
||||
transition: opacity .2s ease-out; |
||||
} |
||||
.button--white:hover{ |
||||
opacity: .8; |
||||
} |
||||
.button--gradient{ |
||||
background: var(--gradient-turquoise); |
||||
border: none; |
||||
|
||||
transition: opacity .2s ease-out; |
||||
} |
||||
.button--gradient:hover{ |
||||
opacity: .8; |
||||
} |
||||
.button--high{ |
||||
height: 56px; |
||||
|
||||
padding: 16px 24px 24px 24px; |
||||
|
||||
font-weight: 700; |
||||
text-align: center; |
||||
|
||||
position: relative; |
||||
} |
||||
.button--red-48-px{ |
||||
border-radius: 48px; |
||||
} |
||||
.to-know{ |
||||
/* width: 100%; */ |
||||
|
||||
padding: 12px 24px 7px 24px; |
||||
|
||||
display: flex; |
||||
justify-content: center; |
||||
|
||||
border: none; |
||||
|
||||
transition: opacity .2s ease-out; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
.to-know:hover{ |
||||
opacity: .8; |
||||
} |
||||
.to-know p{ |
||||
padding-bottom: 4px; |
||||
|
||||
|
||||
font-weight: 700; |
||||
font-size: 20px; |
||||
line-height: 120%; |
||||
color: var(--text-black); |
||||
|
||||
border-bottom: 1px var(--text-black) solid; |
||||
|
||||
cursor: pointer; |
||||
} |
||||
.back{ |
||||
margin-top: 16px; |
||||
margin-left: 16px; |
||||
|
||||
padding: 8px; |
||||
padding-left: 32px; |
||||
|
||||
background: none; |
||||
border: none; |
||||
|
||||
|
||||
font-weight: 600; |
||||
font-size: 20px; |
||||
line-height: 120%; |
||||
color: var(--text-black); |
||||
|
||||
text-decoration: none; |
||||
|
||||
position: relative; |
||||
} |
||||
.back::before{ |
||||
content: ''; |
||||
|
||||
position: absolute; |
||||
top: 8px; |
||||
left: 0; |
||||
|
||||
margin-right: 8px; |
||||
|
||||
width: 24px; |
||||
height: 24px; |
||||
|
||||
background-image: url(../img/svg/main/arrow-back.svg); |
||||
} |
||||
|
||||
.back::after{ |
||||
content: ''; |
||||
|
||||
position: absolute; |
||||
bottom: 6px; |
||||
left: 0; |
||||
|
||||
width: calc(100% - 8px); |
||||
height: 1px; |
||||
|
||||
background: var(--text-black); |
||||
} |
||||
/* button */ |
||||
|
||||
/* select */ |
||||
.select{ |
||||
max-width: 144px; |
||||
|
||||
position: relative; |
||||
} |
||||
.select__state{ |
||||
width: 100%; |
||||
|
||||
padding: 11px 47px 11px 13px; |
||||
|
||||
/* pointer-events:none; */ |
||||
|
||||
border: 1px solid var(--background-black); |
||||
border-radius: 20px; |
||||
|
||||
|
||||
font-weight: 400; |
||||
font-size: 20px; |
||||
line-height: 120%; |
||||
color: var(--text-black); |
||||
|
||||
cursor: pointer; |
||||
|
||||
position: relative; |
||||
|
||||
transition: opacity .2s ease-out; |
||||
} |
||||
.select:hover .select__state{ |
||||
opacity: .8; |
||||
} |
||||
.select::after{ |
||||
content: ''; |
||||
|
||||
position: absolute; |
||||
top: 20.5px; |
||||
right: 21.5px; |
||||
|
||||
width: 17px; |
||||
height: 10px; |
||||
|
||||
background-image: url(../img/svg/main/arrow-black.svg); |
||||
background-repeat: no-repeat; |
||||
background-size: contain; |
||||
|
||||
pointer-events: none; |
||||
} |
||||
.state__block{ |
||||
position: absolute; |
||||
top: 48px; |
||||
left: 0; |
||||
|
||||
width: 100%; |
||||
|
||||
height: 0; |
||||
overflow: hidden; |
||||
|
||||
transition: height .2s ease-out; |
||||
} |
||||
.state__content{ |
||||
padding: 8px; |
||||
|
||||
border-radius: 6px; |
||||
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.2); |
||||
background-color: var(--background-white); |
||||
|
||||
list-style-type: none; |
||||
} |
||||
.state__content li{ |
||||
margin-top: 8px; |
||||
} |
||||
.state__content li:first-child{ |
||||
margin-top: 0; |
||||
} |
||||
.state__button{ |
||||
width: 100%; |
||||
|
||||
padding: 4px 32px 4px 4px; |
||||
|
||||
background: none; |
||||
border: none; |
||||
|
||||
|
||||
font-weight: 400; |
||||
font-size: 20px; |
||||
line-height: 120%; |
||||
color: var(--text-dark); |
||||
text-align: start; |
||||
|
||||
border-radius: 6px; |
||||
|
||||
transition: background-color .2s ease-out; |
||||
|
||||
position: relative; |
||||
} |
||||
.state__button:hover{ |
||||
background-color: var(--background-grey); |
||||
} |
||||
|
||||
/* select */ |
||||
|
||||
/* counter */ |
||||
.counter{ |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.counter__input{ |
||||
width: 48px; |
||||
|
||||
|
||||
font-weight: 600; |
||||
font-size: 20px; |
||||
line-height: 120%; |
||||
text-align: center; |
||||
color: var(--text-black); |
||||
|
||||
pointer-events: none; |
||||
|
||||
background: none; |
||||
border: none; |
||||
} |
||||
.counter__button{ |
||||
width: 48px; |
||||
height: 48px; |
||||
|
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
border: 1px solid var(--text-3); |
||||
border-radius: 24px; |
||||
|
||||
background: var(--background-white); |
||||
|
||||
transition: opacity .2s ease-out; |
||||
} |
||||
.counter__button:hover{ |
||||
opacity: .8; |
||||
} |
||||
/* counter */ |
||||
|
||||
/* modal */ |
||||
/* modal */ |
||||
|
||||
/* toggle */ |
||||
.toggle{ |
||||
padding-top: 26px; |
||||
padding-bottom: 25px; |
||||
|
||||
border-bottom: 1px solid var(--text-3); |
||||
|
||||
position: relative; |
||||
} |
||||
.toggle::after{ |
||||
content: ''; |
||||
|
||||
position: absolute; |
||||
top: 24px; |
||||
right: 0; |
||||
|
||||
width: 24px; |
||||
aspect-ratio: 1; |
||||
|
||||
background-image: url(../img/svg/main/black-x.svg); |
||||
transform: rotate(45deg); |
||||
transition: transform .2s; |
||||
pointer-events: none; |
||||
} |
||||
.toggle__title{ |
||||
padding-right: 30px; |
||||
|
||||
|
||||
font-weight: 700; |
||||
font-size: 16px; |
||||
line-height: 125%; |
||||
color: var(--text-black); |
||||
|
||||
cursor: pointer; |
||||
} |
||||
.toggle__block-content{ |
||||
height: 0; |
||||
overflow: hidden; |
||||
|
||||
transition: height .2s ease-out; |
||||
} |
||||
.toggle__content{ |
||||
padding-top: 24px; |
||||
} |
||||
.toggle__text{ |
||||
|
||||
font-weight: 400; |
||||
font-size: 20px; |
||||
line-height: 120%; |
||||
color: var(--text-black); |
||||
} |
||||
/* toggle */ |
||||
|
||||
/* checkbox */ |
||||
/* checkbox */ |
||||
|
||||
/* radio */ |
||||
/* radio */ |
||||
@ -0,0 +1,722 @@ |
||||
/* Основные стили для компьютера */ |
||||
|
||||
/* header start */ |
||||
|
||||
.detail-block-form__item a{ |
||||
display: block; |
||||
} |
||||
|
||||
.detail-block-form__items{ |
||||
margin-top: 12px; |
||||
} |
||||
|
||||
.detail-block-form__item a { |
||||
margin: 8px; |
||||
} |
||||
/* header end */ |
||||
|
||||
/* product */ |
||||
.product__item{ |
||||
margin: 12px; |
||||
|
||||
width: calc(25% - 24px); |
||||
|
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
|
||||
background-color: var(--background-grey); |
||||
border-radius: 24px; |
||||
|
||||
overflow: hidden; |
||||
|
||||
position: relative; |
||||
} |
||||
.product__item::before{ |
||||
content: ''; |
||||
|
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
|
||||
width: calc(100% - 2px); |
||||
height: calc(100% - 2px); |
||||
|
||||
border: 1px solid #000; |
||||
border-radius: 24px; |
||||
|
||||
pointer-events: none; |
||||
transition: opacity .2s ease-out; |
||||
|
||||
opacity: 0; |
||||
} |
||||
.product__item:hover::before{ |
||||
opacity: 1; |
||||
} |
||||
.product-item__label{ |
||||
position: absolute; |
||||
top: 16px; |
||||
left: 16px; |
||||
|
||||
margin: -2px; |
||||
|
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
z-index: 10; |
||||
} |
||||
.product-item-label__tag{ |
||||
margin: 2px; |
||||
|
||||
padding: 4px 8px; |
||||
|
||||
|
||||
font-weight: 700; |
||||
font-size: 12px; |
||||
line-height: 133%; |
||||
color: #f4f1f0; |
||||
|
||||
border-radius: 16px; |
||||
display: block; |
||||
|
||||
text-decoration: none; |
||||
} |
||||
.product-item-label__tag--new{ |
||||
background: var(--gradient-blue); |
||||
} |
||||
.product-item-label__tag--sale{ |
||||
background: var(--gradient-red); |
||||
} |
||||
.product-item-label__tag--black{ |
||||
background: var(--background-black); |
||||
color: var(--text-white); |
||||
} |
||||
.product-item-label__tag--title{ |
||||
padding: 4px 2px; |
||||
|
||||
font-size: 16px; |
||||
line-height: 125%; |
||||
color: var(--text-black); |
||||
|
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.product-item__product-card{ |
||||
height: 274px; |
||||
|
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
.product-item__images{ |
||||
height: 242px; |
||||
object-fit: contain; |
||||
} |
||||
.product-item__content-card{ |
||||
padding: 15.5px; |
||||
} |
||||
.product-item__title{ |
||||
margin-top: 8px; |
||||
|
||||
|
||||
font-weight: 500; |
||||
font-size: 20px; |
||||
line-height: 120%; |
||||
color: var(--text-black); |
||||
|
||||
text-decoration: none; |
||||
display: block; |
||||
} |
||||
.product-item__title:first-child{ |
||||
margin-top: 0; |
||||
} |
||||
.product-item__price{ |
||||
margin-top: 8px; |
||||
|
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.product-item__price p{ |
||||
|
||||
font-weight: 700; |
||||
font-size: 20px; |
||||
line-height: 200%; |
||||
text-transform: uppercase; |
||||
color: var(--text-black); |
||||
} |
||||
.product-item__price p::after{ |
||||
content: '₽'; |
||||
padding-left: 5px; |
||||
} |
||||
.product-item__bye{ |
||||
margin-top: 8px; |
||||
} |
||||
.product-item__overlay{ |
||||
position: absolute; |
||||
top: 100%; |
||||
left: 0; |
||||
|
||||
width: 100%; |
||||
height: 100%; |
||||
|
||||
padding: 24px; |
||||
|
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
|
||||
border-radius: 24px; |
||||
backdrop-filter: blur(25px); |
||||
background-color: rgba(242, 242, 242, 0.8); |
||||
|
||||
z-index: 10; |
||||
|
||||
transition: top .4s ease-out; |
||||
} |
||||
.product-item-overlay__header{} |
||||
.product-item-overlay__tags{ |
||||
margin: 4px -6px -6px -6px; |
||||
|
||||
|
||||
font-weight: 500; |
||||
font-size: 12px; |
||||
line-height: 133%; |
||||
color: var(--text-3); |
||||
|
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
|
||||
list-style-type: none; |
||||
} |
||||
.product-item-overlay__tags li{ |
||||
margin: 4px 6px; |
||||
|
||||
position: relative; |
||||
} |
||||
.product-item-overlay__tags li:nth-child(n+1)::after{ |
||||
content: ''; |
||||
|
||||
position: absolute; |
||||
top: 6px; |
||||
right: -8px; |
||||
|
||||
width: 4px; |
||||
aspect-ratio: 1; |
||||
|
||||
background-color: var(--text-3); |
||||
border-radius: 50%; |
||||
} |
||||
.product-item-overlay__tags li:last-child::after, |
||||
.product-item-overlay__tags li:last-child::before{ |
||||
display: none; |
||||
} |
||||
.product-item-overlay__price{ |
||||
margin-top: 32px; |
||||
|
||||
|
||||
font-weight: 700; |
||||
font-size: 24px; |
||||
line-height: 100%; |
||||
text-transform: uppercase; |
||||
text-align: right; |
||||
color: var(--text-black); |
||||
} |
||||
.product-item-overlay__price::after{ |
||||
content: '₽'; |
||||
} |
||||
.product-item-overlay__block-button{ |
||||
margin-top: 32px; |
||||
} |
||||
.product-item-overlay__button{ |
||||
margin-top: 16px; |
||||
} |
||||
.product-item-overlay__button:first-child{ |
||||
margin-top: 0; |
||||
} |
||||
.product-item-overlay__input-block{ |
||||
|
||||
} |
||||
.product-item-overlay__field{ |
||||
margin-top: 24px; |
||||
|
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
.product-item-overlay__field:first-child{ |
||||
margin-top: 0; |
||||
} |
||||
.product-item-overlay-field__title{ |
||||
|
||||
font-weight: 700; |
||||
font-size: 16px; |
||||
line-height: 125%; |
||||
color: var(--text-0); |
||||
} |
||||
.product-item__form{ |
||||
|
||||
} |
||||
/* product */ |
||||
|
||||
/* modal */ |
||||
/* .modal__button .to-know{ |
||||
display: none; |
||||
} */ |
||||
/* modal */ |
||||
|
||||
/* footer */ |
||||
/* footer */ |
||||
|
||||
/* detail */ |
||||
.detail{ |
||||
margin: 48px 24px 24px 24px; |
||||
|
||||
display: flex; |
||||
align-items: start; |
||||
flex-wrap: wrap; |
||||
} |
||||
.detail__images{ |
||||
margin: -12px; |
||||
width: calc(50% - 24px); |
||||
|
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
} |
||||
.detail__image{ |
||||
margin: 12px; |
||||
|
||||
border-radius: 24px; |
||||
|
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
|
||||
background: var(--background-grey); |
||||
cursor: pointer; |
||||
} |
||||
.detail__content{ |
||||
margin-left: 48px; |
||||
width: calc(50% - 24px); |
||||
|
||||
} |
||||
.detail__label{ |
||||
margin: -2px; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.detail__label .product-item-label__tag:last-child{ |
||||
margin-left: auto; |
||||
} |
||||
.detail__label .product-item-label__tag:first-child{ |
||||
margin-left: 0; |
||||
} |
||||
.detail__title{ |
||||
margin-top: 8px; |
||||
|
||||
|
||||
font-weight: 700; |
||||
font-size: 36px; |
||||
line-height: 111%; |
||||
text-transform: uppercase; |
||||
color: var(--text-black); |
||||
} |
||||
.detail__block-price{ |
||||
margin-top: 24px; |
||||
|
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.detail-block-price__price{ |
||||
|
||||
font-weight: 700; |
||||
font-size: 36px; |
||||
line-height: 111%; |
||||
text-transform: uppercase; |
||||
} |
||||
.detail-block-price__price::after{ |
||||
content: '₽'; |
||||
} |
||||
.detail-block-price__sale{ |
||||
margin-left: 22px; |
||||
|
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.detail-block-price-sale__text{ |
||||
|
||||
font-weight: 700; |
||||
font-size: 20px; |
||||
line-height: 120%; |
||||
text-transform: uppercase; |
||||
text-decoration: line-through; |
||||
color: var(--text-6); |
||||
} |
||||
.detail-block-price-sale__text::after{ |
||||
content: '₽'; |
||||
} |
||||
.detail-block-price-sale__perc{ |
||||
margin-left: 9px; |
||||
|
||||
|
||||
font-weight: 500; |
||||
font-size: 12px; |
||||
line-height: 133%; |
||||
color: var(--text-red); |
||||
} |
||||
.detail-block-price-sale__perc::before{ |
||||
content: '-'; |
||||
} |
||||
.detail-block-price-sale__perc::after{ |
||||
content: '%'; |
||||
} |
||||
.detail-block__form{ |
||||
margin-top: 48px; |
||||
|
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
.detail-block-form__item{ |
||||
margin-top: 24px; |
||||
|
||||
min-width: 345.89px; |
||||
|
||||
display: flex; |
||||
align-items: center; |
||||
flex-wrap: wrap; |
||||
} |
||||
.detail-block-form__item--radio{ |
||||
margin: 16px -8px -8px -8px; |
||||
} |
||||
.detail-block-form__item:first-child{ |
||||
margin-top: 0; |
||||
} |
||||
.detail-block-form__submit{ |
||||
min-width: 345.89px; |
||||
} |
||||
.detail__warning{ |
||||
padding: 3px; |
||||
|
||||
border-radius: 24px; |
||||
|
||||
background: var(--gradient-turquoise); |
||||
} |
||||
.detail-warning__content{ |
||||
padding: 26px; |
||||
|
||||
border-radius: 22px; |
||||
|
||||
background: var(--background-white); |
||||
} |
||||
.detail-warning__title{ |
||||
|
||||
font-weight: 700; |
||||
font-size: 24px; |
||||
line-height: 100%; |
||||
text-transform: uppercase; |
||||
color: var(--text-black); |
||||
} |
||||
.detail-warning__text{ |
||||
margin-top: 16px; |
||||
|
||||
|
||||
font-weight: 400; |
||||
font-size: 20px; |
||||
line-height: 120%; |
||||
color: var(--text-black); |
||||
} |
||||
.detail__toggle{ |
||||
margin-top: 48px; |
||||
margin-bottom: 48px; |
||||
} |
||||
.detail__wrapper-catalot{ |
||||
margin-top: 64px; |
||||
|
||||
width: calc(100% + 16px); |
||||
|
||||
overflow: hidden; |
||||
|
||||
position: relative; |
||||
} |
||||
.detail__catalot{ |
||||
|
||||
} |
||||
.detail-catalot__header{ |
||||
padding-right: 16px; |
||||
|
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
.detail-catalot__control{ |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.detail-catalot-control__button{ |
||||
margin-left: 24px; |
||||
|
||||
width: 48px; |
||||
aspect-ratio: 1; |
||||
|
||||
border-radius: 50%; |
||||
border: 1px solid var(--background-black); |
||||
background: none; |
||||
|
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
.detail-catalot__title{ |
||||
|
||||
font-weight: 700; |
||||
font-size: 24px; |
||||
line-height: 100%; |
||||
text-transform: uppercase; |
||||
text-align: start; |
||||
color: var(--text-0); |
||||
} |
||||
.detail-catalot__content{ |
||||
margin: 12px -12px -12px -12px; |
||||
|
||||
width: 100%; |
||||
|
||||
display: flex; |
||||
} |
||||
.detail__catalot .product__item{ |
||||
width: calc(100% - 24px); |
||||
} |
||||
.detail__images-phone{ |
||||
display: none; |
||||
} |
||||
.back-detail{ |
||||
display: none; |
||||
} |
||||
.toggle__table{ |
||||
margin-top: 32px; |
||||
|
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
} |
||||
.toggle__table:first-child{ |
||||
margin-top: 0; |
||||
} |
||||
.toggle__table--three .toggle-table__block:nth-child(1){ |
||||
width: 40%; |
||||
} |
||||
.toggle__table--three .toggle-table__block:nth-child(2){ |
||||
width: 40%; |
||||
} |
||||
.toggle__table--three .toggle-table__block:nth-child(3){ |
||||
width: 20%; |
||||
} |
||||
.toggle__table--two .toggle-table__block{ |
||||
width: calc(50% - 20px); |
||||
} |
||||
.toggle__table--two .toggle-table__block:nth-child(even){ |
||||
margin-left: 40px; |
||||
} |
||||
.toggle-table__block{ |
||||
|
||||
} |
||||
.toggle-table__item{ |
||||
margin-top: 8px; |
||||
|
||||
width: 100%; |
||||
|
||||
display: flex; |
||||
justify-content: space-between; |
||||
} |
||||
.toggle-table__item p{ |
||||
display: block; |
||||
|
||||
|
||||
font-weight: 400; |
||||
font-size: 20px; |
||||
line-height: 120%; |
||||
color: var(--text-black); |
||||
|
||||
flex-shrink: 0; |
||||
} |
||||
.toggle-table__item .warning{ |
||||
width: 100%; |
||||
} |
||||
.toggle-table__item .warning p{ |
||||
|
||||
font-weight: 600; |
||||
font-size: 20px; |
||||
line-height: 120%; |
||||
text-align: center; |
||||
} |
||||
.toggle-table__title{ |
||||
margin-bottom: 16px; |
||||
|
||||
|
||||
font-weight: 700; |
||||
font-size: 16px; |
||||
line-height: 125%; |
||||
color: var(--text-black); |
||||
} |
||||
.toggle-table__title--center{ |
||||
text-align: center; |
||||
} |
||||
.toggle-table-item__line{ |
||||
margin: 23px 8px 0 8px; |
||||
|
||||
width: 100%; |
||||
|
||||
height: 1px; |
||||
background: linear-gradient(to right, transparent 50%, #fff 50%), linear-gradient(to right, #333, #333); |
||||
background-size: 4px 2px, 100% 2px; |
||||
|
||||
opacity: .6; |
||||
} |
||||
|
||||
.radio-button{ |
||||
} |
||||
.radio-button__input{ |
||||
display: none; |
||||
} |
||||
/* detail */ |
||||
|
||||
/* gallery */ |
||||
.gallery{ |
||||
position: fixed; |
||||
top: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
left: 0; |
||||
|
||||
padding: 24px; |
||||
|
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
background: var(--background-white); |
||||
|
||||
pointer-events: none; |
||||
opacity: 0; |
||||
transition: opacity .2s ease-out; |
||||
|
||||
z-index: 300; |
||||
} |
||||
.gallery__close{ |
||||
position: absolute; |
||||
top: 24px; |
||||
right: 24px; |
||||
|
||||
z-index: 10; |
||||
} |
||||
.gallery__pagination{ |
||||
margin: -12px; |
||||
} |
||||
.gallery-pagination__item{ |
||||
margin: 12px; |
||||
|
||||
width: 134px; |
||||
height: 136px; |
||||
|
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
border: none; |
||||
border-radius: 16px; |
||||
background: var(--background-grey); |
||||
} |
||||
.gallery-pagination__item img{ |
||||
width: 90%; |
||||
max-height: 90%; |
||||
|
||||
object-fit: contain; |
||||
} |
||||
.gallery__slider{ |
||||
margin-left: 48px; |
||||
|
||||
padding: 100px; |
||||
} |
||||
.gallery__slider{ |
||||
width: 100%; |
||||
} |
||||
.gallery__slider .swiper-pagination{ |
||||
display: none; |
||||
} |
||||
.gallery__slider .swiper-button-next::after, |
||||
.gallery__slider .swiper-button-prev::after{ |
||||
display: none; |
||||
} |
||||
.gallery-button{ |
||||
width: 48px; |
||||
height: 48px; |
||||
|
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
border: 1px solid var(--background-black); |
||||
border-radius: 20px; |
||||
|
||||
background: none; |
||||
} |
||||
.gallery__slider .swiper-slide{ |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
.gallery__block{ |
||||
width: 600px; |
||||
height: 774px; |
||||
|
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
background: var(--background-grey); |
||||
border-radius: 24px; |
||||
} |
||||
.gallery__block img{ |
||||
width: 90%; |
||||
max-height: 90%; |
||||
|
||||
object-fit: contain; |
||||
} |
||||
.gallery__wrapper{ |
||||
margin: 0 auto; |
||||
max-width: 1600px; |
||||
|
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
/* .swiper { |
||||
width: 600px; |
||||
height: 300px; |
||||
} */ |
||||
|
||||
/* gallery */ |
||||
|
||||
|
||||
/* cabinet */ |
||||
/* .cabinet-card-no-orders__ */ |
||||
/* cabinet */ |
||||
|
||||
@media only screen and (max-width: 1600px) { |
||||
|
||||
.wrapper{ |
||||
max-width: 1280px; |
||||
} |
||||
|
||||
.product__item{ |
||||
margin: 12px; |
||||
|
||||
width: calc(33.3% - 24px); |
||||
} |
||||
|
||||
.gallery__wrapper{ |
||||
max-width: 1280px; |
||||
} |
||||
} |
||||
|
||||
@media only screen and (max-width: 1365px) { |
||||
.gallery__wrapper{ |
||||
max-width: 100%; |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,38 @@ |
||||
/* Стили для мобильных устройств */ |
||||
@media only screen and (max-width: 720px) { |
||||
/* product */ |
||||
.product__item{ |
||||
width: calc(100% - 24px); |
||||
} |
||||
/* product */ |
||||
|
||||
} |
||||
/* 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 */ |
||||
|
||||
@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 */ |
||||
|
||||
} |
||||
@ -0,0 +1,348 @@ |
||||
/* Стили для планшетов */ |
||||
@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__orders--no-cab .cabinet-card:nth-child(2){ |
||||
margin-top: 32px; |
||||
} |
||||
/* 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-card-order__link{ |
||||
margin-top: 144px; |
||||
} |
||||
/* cabinet */ |
||||
} |
||||
|
After Width: | Height: | Size: 481 B |
|
After Width: | Height: | Size: 456 B |
|
After Width: | Height: | Size: 458 B |
|
After Width: | Height: | Size: 455 B |
@ -0,0 +1,348 @@ |
||||
'use strict'; |
||||
|
||||
// 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'); |
||||
|
||||
aside.style.width = '0px'; |
||||
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; |
||||
|
||||
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); |
||||
} |
||||
}) |
||||
} |
||||
|
||||
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); |
||||
} |
||||
}) |
||||
} |
||||
|
||||
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
|
||||
@ -0,0 +1,67 @@ |
||||
const rootSelectorTabs = '[data-js-tabs]'; |
||||
|
||||
class Tabs{ |
||||
// элементы для поиска
|
||||
selectors = { |
||||
root: rootSelectorTabs, |
||||
button: '[data-js-tabs-button]', |
||||
content: '[data-js-tabs-content]', |
||||
} |
||||
// класс отображения состояния
|
||||
stateClasses = { |
||||
isActive: 'active', |
||||
} |
||||
|
||||
constructor(rootElement){ |
||||
this.rootElement = rootElement; |
||||
this.buttonElements = this.rootElement.querySelectorAll(this.selectors.button); |
||||
this.contentElements = this.rootElement.querySelectorAll(this.selectors.content); |
||||
this.state = { |
||||
activeMenuIndex: [...this.buttonElements] |
||||
.findIndex((buttonElement) => buttonElement.classList.contains(this.stateClasses.isActive)), |
||||
}; |
||||
this.limitTabsIndex = this.buttonElements.length - 1; |
||||
this.bindEvents(); |
||||
} |
||||
|
||||
updateUI(){ |
||||
const { activeMenuIndex } = this.state; |
||||
|
||||
this.buttonElements.forEach((buttonElement, index) => { |
||||
const isActive = index === activeMenuIndex; |
||||
|
||||
buttonElement.classList.toggle(this.stateClasses.isActive, isActive); |
||||
}) |
||||
|
||||
this.contentElements.forEach((contentElement, index) => { |
||||
const isActive = index === activeMenuIndex; |
||||
|
||||
contentElement.classList.toggle(this.stateClasses.isActive, isActive); |
||||
}) |
||||
} |
||||
|
||||
onButtonClick(buttonIndex){ |
||||
this.state.activeMenuIndex = buttonIndex; |
||||
this.updateUI(); |
||||
} |
||||
|
||||
bindEvents(){ |
||||
this.buttonElements.forEach((buttonElement, index) => { |
||||
buttonElement.addEventListener('click', () => this.onButtonClick(index)) |
||||
}) |
||||
} |
||||
} |
||||
|
||||
class TabsCollection { |
||||
constructor(){ |
||||
this.init(); |
||||
} |
||||
|
||||
init(){ |
||||
document.querySelectorAll(rootSelectorTabs).forEach((element) => { |
||||
new Tabs(element); |
||||
}); |
||||
} |
||||
} |
||||
|
||||
export default TabsCollection; |
||||
@ -0,0 +1,89 @@ |
||||
const rootSelectorToggles = '[data-js-toggle]'; |
||||
|
||||
class Toggle{ |
||||
// элементы для поиска
|
||||
selectors = { |
||||
root: rootSelectorToggles, |
||||
button: '[data-js-toggle-button]', |
||||
wrapper: '[data-js-toggle-wrapper]', |
||||
content: '[data-js-toggle-content]', |
||||
} |
||||
// класс отображения состояния
|
||||
stateClasses = { |
||||
isActive: 'active', |
||||
} |
||||
|
||||
constructor(rootElement){ |
||||
this.rootElement = rootElement; |
||||
this.buttonElements = this.rootElement.querySelectorAll(this.selectors.button); |
||||
this.wrapperElements = this.rootElement.querySelectorAll(this.selectors.wrapper); |
||||
this.contentElements = this.rootElement.querySelectorAll(this.selectors.content); |
||||
this.state = { |
||||
activeToggleIndex: [...this.buttonElements] |
||||
.findIndex((buttonElement) => buttonElement.classList.contains(this.stateClasses.isActive)), |
||||
}; |
||||
this.bindEvents(); |
||||
} |
||||
|
||||
updateUI(newHeight){ |
||||
const { activeToggleIndex } = this.state; |
||||
|
||||
this.buttonElements.forEach((buttonElement, index) => { |
||||
const isActive = index === activeToggleIndex; |
||||
|
||||
buttonElement.classList.toggle(this.stateClasses.isActive, isActive); |
||||
}) |
||||
|
||||
this.wrapperElements.forEach((wrapperElement, index) => { |
||||
const isActive = index === activeToggleIndex, |
||||
newHeight = this.contentElements[index].offsetHeight; |
||||
|
||||
wrapperElement.classList.toggle(this.stateClasses.isActive, isActive); |
||||
|
||||
if (isActive) { |
||||
wrapperElement.style.height = `${newHeight}px`; |
||||
|
||||
setTimeout(() => { |
||||
if (wrapperElement.classList.contains('active')) { |
||||
wrapperElement.style.height = `auto`; |
||||
} |
||||
}, 300); |
||||
}else{ |
||||
wrapperElement.style.height = `${newHeight}px`; |
||||
|
||||
setTimeout(() => { |
||||
if (!wrapperElement.classList.contains('active')) { |
||||
wrapperElement.style.height = `${0}px`; |
||||
} |
||||
}, 10); |
||||
} |
||||
}) |
||||
|
||||
} |
||||
|
||||
onButtonClick(buttonIndex){ |
||||
this.state.activeToggleIndex = (buttonIndex === this.state.activeToggleIndex) ? -1 : buttonIndex; |
||||
|
||||
this.updateUI(); |
||||
} |
||||
|
||||
bindEvents(){ |
||||
this.buttonElements.forEach((buttonElement, index) => { |
||||
buttonElement.addEventListener('click', () => this.onButtonClick(index)) |
||||
}) |
||||
} |
||||
} |
||||
|
||||
class TogglesCollection{
|
||||
constructor(){ |
||||
this.init(); |
||||
} |
||||
|
||||
init(){ |
||||
document.querySelectorAll(rootSelectorToggles).forEach((element) => { |
||||
new Toggle(element); |
||||
}); |
||||
} |
||||
} |
||||
|
||||
export default TogglesCollection; |
||||
@ -0,0 +1,74 @@ |
||||
<?php |
||||
|
||||
|
||||
add_filter('timber/context', function($context) { |
||||
if (function_exists('is_product') && is_product()) { |
||||
$product_id = get_the_ID(); |
||||
$product = wc_get_product($product_id); |
||||
|
||||
if ($product) { |
||||
$attributes = []; |
||||
$product_attributes = $product->get_attributes(); |
||||
|
||||
if (!empty($product_attributes)) { |
||||
foreach ($product_attributes as $taxonomy => $attribute) { |
||||
if ($attribute->is_taxonomy()) { |
||||
$terms = wc_get_product_terms($product_id, $taxonomy, ['fields' => 'all']); |
||||
if (!empty($terms)) { |
||||
$attr_values = []; |
||||
foreach ($terms as $term) { |
||||
$attr_values[] = [ |
||||
'name' => $term->name, |
||||
'slug' => $term->slug, |
||||
'term_id' => $term->term_id, |
||||
'link' => get_term_link($term->term_id, $taxonomy), |
||||
]; |
||||
} |
||||
$attributes[wc_attribute_label($taxonomy)] = $attr_values; |
||||
} |
||||
} else { |
||||
$attributes[wc_attribute_label($taxonomy)] = $attribute->get_options(); |
||||
} |
||||
} |
||||
} |
||||
|
||||
$context['product_attributes'] = $attributes; |
||||
|
||||
if ($product->is_type('variable')) { |
||||
$available_variations = $product->get_available_variations(); |
||||
$variations_data = []; |
||||
|
||||
foreach ($available_variations as $variation) { |
||||
$variation_id = $variation['variation_id']; |
||||
$variation_obj = wc_get_product($variation_id); |
||||
|
||||
$variations_data[] = [ |
||||
'variation_id' => $variation_id, |
||||
'price' => $variation_obj->get_price(), |
||||
'regular_price' => $variation_obj->get_regular_price(), |
||||
'sale_price' => $variation_obj->get_sale_price(), |
||||
'attributes' => $variation['attributes'] |
||||
]; |
||||
} |
||||
|
||||
$context['variations'] = $variations_data; |
||||
} |
||||
|
||||
$meta_fields = [ |
||||
'composition' => get_post_meta($product_id, '_composition', true), |
||||
'feeding_recommendations' => get_post_meta($product_id, '_feeding_recommendations', true), |
||||
'feeding_recommendations_table' => get_field('feeding_recommendations_table', $product_id), |
||||
|
||||
'nutritional_value' => get_post_meta($product_id, '_nutritional_value', true), |
||||
'vitamins' => get_post_meta($product_id, '_vitamins', true), |
||||
'additives' => get_post_meta($product_id, '_additives', true), |
||||
'energy_value' => get_post_meta($product_id, '_energy_value', true), |
||||
'important' => get_post_meta($product_id, '_important', true), |
||||
]; |
||||
|
||||
$context['product_meta'] = $meta_fields; |
||||
} |
||||
} |
||||
|
||||
return $context; |
||||
}); |
||||
@ -0,0 +1,447 @@ |
||||
|
||||
|
||||
{% set bodyClass = 'bg-white' %} |
||||
|
||||
{% set mainClass = 'wrapper' %} |
||||
|
||||
{% extends 'layout.twig' %} |
||||
|
||||
{% block content %} |
||||
<div class="wrapper"> |
||||
<div class="breadcrumbs"> |
||||
{% if wc_breadcrumbs %} |
||||
{% for crumb in wc_breadcrumbs %} |
||||
<a href="{{ crumb.url }}" class="breadcrumbs__item"> |
||||
{{ crumb.text }} |
||||
</a> |
||||
{% endfor %} |
||||
{% endif %} |
||||
</div> |
||||
|
||||
<a href="{{ fn('get_permalink', fn('wc_get_page_id', 'shop')) }}" class="back back-detail"> |
||||
{{ function('pll_e', 'к каталогу') }} |
||||
</a> |
||||
|
||||
<div class="detail"> |
||||
<div class="detail__images"> |
||||
{% for image in gallery_images %} |
||||
<div class="detail__image detail__image--width-perc-{% if loop.index == 1 or loop.index == 4 %}100{% else %}50{% endif %}" data-count-img="{{ loop.index0 }}"> |
||||
<img src="{{ image.src }}" alt="{{ image.alt }}" class=""> |
||||
</div> |
||||
{% endfor %} |
||||
<div class="swiper-pagination"></div> |
||||
</div> |
||||
|
||||
<div class="detail__content"> |
||||
<div class="detail__label"> |
||||
{% if product_attributes.Flavor is defined and product_attributes.Flavor|length > 0 %} |
||||
<div class="product-item-label__tag product-item-label__tag--black"> |
||||
{{ product_attributes.Flavor[0].name }} |
||||
</div> |
||||
{% endif %} |
||||
{% if product_attributes.Вкус is defined and product_attributes.Вкус|length > 0 %} |
||||
<div class="product-item-label__tag product-item-label__tag--black"> |
||||
<a href="{{ product_attributes.Вкус[0].link }}">{{ product_attributes.Вкус[0].name }}</a> |
||||
</div> |
||||
{% endif %} |
||||
|
||||
{% if product_attributes.Тег is defined and product_attributes.Тег|length > 0 %} |
||||
<div class="product-item-label__tag product-item-label__tag--title"> |
||||
<a href="{{ product_attributes.Тег[0].link }}">{{ product_attributes.Тег[0].name }}</a> |
||||
</div> |
||||
{% endif %} |
||||
{% if product.is_on_sale() %} |
||||
<div class="product-item-label__tag product-item-label__tag--sale"> |
||||
{{ function('pll_e', 'Распродажа') }} % |
||||
</div> |
||||
{% endif %} |
||||
</div> |
||||
<p class="detail__title"> |
||||
{{ product.get_title }} |
||||
</p> |
||||
|
||||
<div class="detail__images-phone"> |
||||
<div class="swiper-wrapper"> |
||||
{% for image in gallery_images %} |
||||
<div class="swiper-slide"> |
||||
<div class="detail-images-phone__image-block" data-count-img="{{ loop.index0 }}"> |
||||
<img src="{{ image.src }}" alt="{{ image.alt }}"> |
||||
</div> |
||||
</div> |
||||
{% endfor %} |
||||
</div> |
||||
<div class="swiper-pagination"></div> |
||||
</div> |
||||
|
||||
<div class="detail__block-price"> |
||||
<p class="detail-block-price__price"> |
||||
{{ product.get_price }} |
||||
</p> |
||||
|
||||
{% if product.is_on_sale() %} |
||||
<div class="detail-block-price__sale"> |
||||
<p class="detail-block-price-sale__text"> |
||||
{{ product.get_regular_price }} |
||||
</p> |
||||
<p class="detail-block-price-sale__perc"> |
||||
{{ ((product.get_regular_price - product.get_price) / product.get_regular_price * 100)|round }} |
||||
</p> |
||||
</div> |
||||
{% endif %} |
||||
</div> |
||||
<form action="" class="detail-block__form" data-product-id="{{ product.id }}"> |
||||
{% set collection = fn('wc_get_product_terms', product.id, 'pa_collection') %} |
||||
{% if collection %} |
||||
{% set siblings = function('get_collection_siblings', collection[0].term_id) %} |
||||
{% if siblings %} |
||||
<div class="detail-block-form__item detail-block-form__item--radio radio-button"> |
||||
{% for sibling in siblings %} |
||||
{% set weight = sibling.post_title|split(', ')|last %} |
||||
{% set current_weight = function('get_product_info', product.id, 'weight') %} |
||||
{% set class = weight == current_weight ? 'active' : '' %} |
||||
<a href="{{ function('get_permalink', sibling.ID) }}" class="button button--white button--red-48-px {{ class }}" data-product_id="{{ sibling.ID }}" data-product_price="{{ function('get_product_info', sibling.ID, 'price') }}"> |
||||
{{ weight|upper }} |
||||
</a> |
||||
{% endfor %} |
||||
<input type="text" class="radio-button__input" value="{{ current_weight|upper }}" readonly> |
||||
</div> |
||||
{% endif %} |
||||
{% endif %} |
||||
|
||||
|
||||
|
||||
<div class="detail-block-form__items"> |
||||
<input type="submit" value="{{ function('pll_e', 'Добавить в корзину') }}" class="button button--gradient button--high detail-block-form__submit"> |
||||
</div> |
||||
</form> |
||||
|
||||
<div class="detail__toggle"> |
||||
<div class="toggle"> |
||||
<p class="toggle__title"> |
||||
{{ function('pll_e', 'ОПИСАНИЕ') }} |
||||
</p> |
||||
<div class="toggle__block-content"> |
||||
<div class="toggle__content"> |
||||
<p class="toggle__text"> |
||||
{{ product.get_description() }} |
||||
</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
{% if product_meta.composition %} |
||||
<div class="toggle"> |
||||
<p class="toggle__title"> |
||||
{{ function('pll_e', 'СОСТАВ') }} |
||||
</p> |
||||
<div class="toggle__block-content"> |
||||
<div class="toggle__content"> |
||||
<p class="toggle__text"> |
||||
{{ product_meta.composition }} |
||||
</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
{% endif %} |
||||
|
||||
{% if product_meta.feeding_recommendations_table %} |
||||
<div class="toggle"> |
||||
<p class="toggle__title"> |
||||
{{ function('pll_e', 'РЕКОМЕНДАЦИИ ПО КОРМЛЕНИЮ') }} |
||||
</p> |
||||
<div class="toggle__block-content"> |
||||
<div class="toggle__content"> |
||||
<div class="toggle__table toggle__table--three"> |
||||
{% if product_meta.feeding_recommendations_table.header %} |
||||
<div class="toggle-table__block"> |
||||
<p class="toggle-table__title">{{ product_meta.feeding_recommendations_table.header.0 is iterable ? product_meta.feeding_recommendations_table.header.0|join(', ') : product_meta.feeding_recommendations_table.header.0 }}</p> |
||||
{% for row in product_meta.feeding_recommendations_table.body %} |
||||
<div class="toggle-table__item"> |
||||
<p>{{ row.0 is iterable ? row.0|join(', ') : row.0 }}</p> |
||||
<div class="toggle-table-item__line"></div> |
||||
</div> |
||||
{% endfor %} |
||||
</div> |
||||
<div class="toggle-table__block"> |
||||
<p class="toggle-table__title">{{ product_meta.feeding_recommendations_table.header.1 is iterable ? product_meta.feeding_recommendations_table.header.1|join(', ') : product_meta.feeding_recommendations_table.header.1 }}</p> |
||||
{% for row in product_meta.feeding_recommendations_table.body %} |
||||
<div class="toggle-table__item"> |
||||
<p>{{ row.1 is iterable ? row.1|join(', ') : row.1 }}</p> |
||||
<div class="toggle-table-item__line"></div> |
||||
</div> |
||||
{% endfor %} |
||||
</div> |
||||
<div class="toggle-table__block"> |
||||
<p class="toggle-table__title">{{ product_meta.feeding_recommendations_table.header.2 is iterable ? product_meta.feeding_recommendations_table.header.2|join(', ') : product_meta.feeding_recommendations_table.header.2 }}</p> |
||||
{% for row in product_meta.feeding_recommendations_table.body %} |
||||
<div class="toggle-table__item"> |
||||
<p>{{ row.2 is iterable ? row.2|join(', ') : row.2 }}</p> |
||||
</div> |
||||
{% endfor %} |
||||
</div> |
||||
{% endif %} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
{% elseif product_meta.feeding_recommendations %} |
||||
<div class="toggle"> |
||||
<p class="toggle__title"> |
||||
{{ function('pll_e', 'РЕКОМЕНДАЦИИ ПО КОРМЛЕНИЮ') }} |
||||
</p> |
||||
<div class="toggle__block-content"> |
||||
<div class="toggle__content"> |
||||
{{ product_meta.feeding_recommendations }} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
{% endif %} |
||||
|
||||
{% if product_meta.nutritional_value or product_meta.vitamins or product_meta.additives or product_meta.energy_value %} |
||||
<div class="toggle"> |
||||
<p class="toggle__title"> |
||||
{{ function('pll_e', 'ПИЩЕВАЯ ЦЕННОСТЬ') }} |
||||
</p> |
||||
<div class="toggle__block-content"> |
||||
<div class="toggle__content"> |
||||
{% if product_meta.nutritional_value and product_meta.vitamins %} |
||||
<div class="toggle__table toggle__table--two"> |
||||
<div class="toggle-table__block "> |
||||
<p class="toggle-table__title toggle-table__title--center">{{ function('pll_e', 'ПИЩЕВАЯ ЦЕННОСТЬ') }}</p> |
||||
{{ product_meta.nutritional_value }} |
||||
</div> |
||||
<div class="toggle-table__block "> |
||||
<p class="toggle-table__title toggle-table__title--center">{{ function('pll_e', 'ВИТАМИНЫ НА КГ') }}</p> |
||||
{{ product_meta.vitamins }} |
||||
</div> |
||||
</div> |
||||
{% endif %} |
||||
|
||||
{% if product_meta.additives or product_meta.energy_value %} |
||||
<div class="toggle__table toggle__table--two"> |
||||
{% if product_meta.additives %} |
||||
<div class="toggle-table__block "> |
||||
<p class="toggle-table__title toggle-table__title--center">{{ function('pll_e', 'ПИТАТЕЛЬНЫЕ ДОБАВКИ НА КГ') }}</p> |
||||
{{ product_meta.additives }} |
||||
</div> |
||||
{% endif %} |
||||
|
||||
{% if product_meta.energy_value %} |
||||
<div class="toggle-table__block "> |
||||
<p class="toggle-table__title toggle-table__title--center">{{ function('pll_e', 'ЭНЕРГЕТИЧЕСКАЯ ЦЕННОСТЬ НА 100 ГРАММ') }}</p> |
||||
<div class="toggle-table__item"> |
||||
<div class="detail__warning warning"> |
||||
<div class="detail-warning__content"> |
||||
<p class="detail-warning__title">{{ product_meta.energy_value }}</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
{% endif %} |
||||
</div> |
||||
{% endif %} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
{% endif %} |
||||
|
||||
|
||||
</div> |
||||
|
||||
|
||||
<div class="detail__warning"> |
||||
<div class="detail-warning__content"> |
||||
<p class="detail-warning__title">{{ function('pll_e', 'Важно') }}</p> |
||||
<p class="detail-warning__text"> |
||||
{{ product_meta.important }} |
||||
</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
{% set recommended_products = function('get_field', 'recommended_products', product.id) %} |
||||
{% set related_products = recommended_products ? recommended_products : function('wc_get_related_products', product.id, 4) %} |
||||
{% if related_products %} |
||||
<div class="detail__wrapper-catalot"> |
||||
<div class="detail__catalot"> |
||||
<div class="detail-catalot__header"> |
||||
<p class="detail-catalot__title"> |
||||
{{ function('pll_e', 'вашему питомцу может понравиться') }} |
||||
</p> |
||||
|
||||
<div class="detail-catalot__control"> |
||||
<button class="detail-catalot-control__button prev"> |
||||
<img src="{{ theme.uri }}/static/shop/img/svg/main/arrow-left.svg" alt=""> |
||||
</button> |
||||
|
||||
<button class="detail-catalot-control__button next"> |
||||
<img src="{{ theme.uri }}/static/shop/img/svg/main/arrow-right.svg" alt=""> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
<div class="detail-catalot__content swiper-wrapper"> |
||||
{% for related_product in related_products %} |
||||
<div class="swiper-slide"> |
||||
{% set post_id = related_product.ID is defined ? related_product.ID : related_product %} |
||||
{% set wc_product = fn('wc_get_product', post_id) %} |
||||
{% if wc_product %} |
||||
<div class="product__item"> |
||||
<div class="product-item__label"> |
||||
{% if wc_product.get_date_created|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 wc_product.is_on_sale() %} |
||||
<span href="#" class="product-item-label__tag product-item-label__tag--sale"> |
||||
{{ function('pll_e', 'Распродажа %') }} |
||||
</span> |
||||
{% endif %} |
||||
</div> |
||||
<a href="{{ wc_product.get_permalink() }}" class="product-item__product-card"> |
||||
<img src="{{ fn('wp_get_attachment_url', wc_product.get_image_id()) }}" alt="{{ wc_product.get_name() }}" 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="{{ wc_product.get_permalink() }}" class="product-item__title">{{ wc_product.get_name() }}</a> |
||||
<div class="product-item__price"> |
||||
<p>{{ wc_product.get_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="{{ wc_product.get_permalink() }}" class="product-item__title">{{ wc_product.get_name() }}</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"> |
||||
{% set cur_weight = function('get_product_info', post_id, 'weight') %} |
||||
<input type="text" class="select__state" value="{{ cur_weight }}" readonly data-product_id="{{ post_id }}" data-product_price="{{ wc_product.get_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) %} |
||||
{% if term %} |
||||
{% set siblings = function('get_collection_siblings', term.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 %} |
||||
{% endif %} |
||||
{% 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.uri }}/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.uri }}/woocommerce/assets/img/svg/main/plus.svg" alt=""> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<p class="product-item-overlay__price"> |
||||
{{ wc_product.get_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="{{ wc_product.get_permalink() }}"> |
||||
<p>{{ function('pll_e', 'Подробнее') }}</p> |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
</div> |
||||
{% endif %} |
||||
</div> |
||||
{% endfor %} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
{% endif %} |
||||
</div> |
||||
|
||||
<div class="gallery"> |
||||
<button class="gallery__close gallery-button"> |
||||
<img src="{{ theme.uri }}/static/shop/img/svg/main/black-x.svg" alt=""> |
||||
</button> |
||||
|
||||
<div class="gallery__wrapper"> |
||||
<div class="gallery__pagination"> |
||||
{% for image in gallery_images %} |
||||
<button class="gallery-pagination__item" data-count-img="{{ loop.index0 }}"> |
||||
<img src="{{ image.src }}" alt="{{ image.alt }}"> |
||||
</button> |
||||
{% endfor %} |
||||
</div> |
||||
|
||||
<div class="gallery__slider swiper"> |
||||
<div class="swiper-wrapper"> |
||||
{% for image in gallery_images %} |
||||
<div class="swiper-slide"> |
||||
<div class="gallery__block"> |
||||
<img src="{{ image.src }}" alt="{{ image.alt }}"> |
||||
</div> |
||||
</div> |
||||
{% endfor %} |
||||
</div> |
||||
|
||||
<div class="swiper-pagination"></div> |
||||
|
||||
<div class="swiper-button-prev gallery-button"> |
||||
<img src="{{ theme.uri }}/static/shop/img/svg/main/arrow-left.svg" alt=""> |
||||
</div> |
||||
<div class="swiper-button-next gallery-button"> |
||||
<img src="{{ theme.uri }}/static/shop/img/svg/main/arrow-right.svg" alt=""> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
{% endblock %} |
||||
@ -0,0 +1,56 @@ |
||||
<?php |
||||
|
||||
add_filter('timber/context', function($context) { |
||||
if (function_exists('is_product') && is_product()) { |
||||
$product_id = get_the_ID(); |
||||
$product = wc_get_product($product_id); |
||||
|
||||
if ($product) { |
||||
$context['product'] = $product; |
||||
$context['product_id'] = $product_id; |
||||
|
||||
|
||||
$terms = get_the_terms($product_id, 'product_cat'); |
||||
if ($terms && !is_wp_error($terms)) { |
||||
$context['product_categories'] = $terms; |
||||
} |
||||
|
||||
|
||||
$attachment_ids = $product->get_gallery_image_ids(); |
||||
$gallery_images = []; |
||||
|
||||
$main_image_id = $product->get_image_id(); |
||||
if ($main_image_id) { |
||||
$gallery_images[] = [ |
||||
'id' => $main_image_id, |
||||
'src' => wp_get_attachment_image_url($main_image_id, 'full'), |
||||
'alt' => get_post_meta($main_image_id, '_wp_attachment_image_alt', true) |
||||
]; |
||||
} |
||||
|
||||
foreach ($attachment_ids as $attachment_id) { |
||||
$gallery_images[] = [ |
||||
'id' => $attachment_id, |
||||
'src' => wp_get_attachment_image_url($attachment_id, 'full'), |
||||
'alt' => get_post_meta($attachment_id, '_wp_attachment_image_alt', true) |
||||
]; |
||||
} |
||||
|
||||
$context['gallery_images'] = $gallery_images; |
||||
|
||||
$related_products_ids = wc_get_related_products($product_id, 5); |
||||
if (!empty($related_products_ids)) { |
||||
$related_products = []; |
||||
foreach ($related_products_ids as $related_id) { |
||||
$related_product = wc_get_product($related_id); |
||||
if ($related_product) { |
||||
$related_products[] = $related_product; |
||||
} |
||||
} |
||||
$context['related_products'] = $related_products; |
||||
} |
||||
} |
||||
} |
||||
|
||||
return $context; |
||||
}); |
||||
@ -0,0 +1,6 @@ |
||||
<?php |
||||
|
||||
include_module('author'); |
||||
include_component('author', 'author-single'); |
||||
|
||||
?> |
||||
@ -0,0 +1,60 @@ |
||||
<?php |
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) { |
||||
exit; |
||||
} |
||||
|
||||
if (is_product()) { |
||||
|
||||
include_module('shop'); |
||||
include_component('shop', 'single-product'); |
||||
|
||||
$context = Timber::get_context(); |
||||
$post = Timber::get_post(); |
||||
$context['post'] = $post; |
||||
|
||||
$context['wc_breadcrumbs'] = array(); |
||||
|
||||
if (function_exists('woocommerce_breadcrumb')) { |
||||
$args = array( |
||||
'delimiter' => '', |
||||
'wrap_before' => '', |
||||
'wrap_after' => '', |
||||
'before' => '', |
||||
'after' => '', |
||||
'home' => _x('Home', 'breadcrumb', 'woocommerce'), |
||||
); |
||||
|
||||
$breadcrumbs = new WC_Breadcrumb(); |
||||
$breadcrumbs->generate(); |
||||
|
||||
$formatted_breadcrumbs = array(); |
||||
foreach ($breadcrumbs->get_breadcrumb() as $crumb) { |
||||
$formatted_breadcrumbs[] = array( |
||||
'text' => $crumb[0], |
||||
'url' => $crumb[1] |
||||
); |
||||
} |
||||
|
||||
$context['wc_breadcrumbs'] = $formatted_breadcrumbs; |
||||
} |
||||
|
||||
$product_id = get_the_ID(); |
||||
$product = wc_get_product($product_id); |
||||
|
||||
$context['product'] = $product; |
||||
|
||||
$context['related_products'] = array(); |
||||
$related_products_ids = wc_get_related_products($product_id, 5); |
||||
|
||||
if ($related_products_ids) { |
||||
foreach ($related_products_ids as $related_id) { |
||||
$related_product = wc_get_product($related_id); |
||||
if ($related_product) { |
||||
$context['related_products'][] = $related_product; |
||||
} |
||||
} |
||||
} |
||||
|
||||
Timber::render('modules/shop/components/single-product/component-template.twig', $context); |
||||
} |
||||
|
After Width: | Height: | Size: 456 B |
|
After Width: | Height: | Size: 458 B |
|
After Width: | Height: | Size: 455 B |
@ -0,0 +1,60 @@ |
||||
{% extends 'layout.twig' %} |
||||
|
||||
|
||||
{% block content %} |
||||
|
||||
{% set current_path = template_path ~ '/modules/author/' %} |
||||
|
||||
|
||||
|
||||
|
||||
<!-- Breadcrumb --> |
||||
<section class="breadcrumb"> |
||||
<div class="container"> |
||||
<a href="/">{{ function('pll_e', 'Главная') }}</a> / |
||||
<a href="/blog/">{{ function('pll_e', 'Блог') }}</a> / |
||||
<a href="/blog_author/">{{ function('pll_e', 'Наши авторы') }}</a> |
||||
</div> |
||||
</section> |
||||
<!-- Breadcrumb end --> |
||||
|
||||
<!-- Authors block --> |
||||
<section class="authors"> |
||||
<div class="container"> |
||||
<h1>{{ function('pll_e', 'Все авторы') }}</h1> |
||||
<ul> |
||||
{% for author in authors %} |
||||
<li> |
||||
<a href="{{ author.link }}"> |
||||
<div class="main-img"> |
||||
<img src="{{ author.thumbnail.src|default(author.thumbnail|default('https://via.placeholder.com/150')) }}" alt="{{ author.title }}"> |
||||
</div> |
||||
<div class="authors-name">{{ author.title }}</div> |
||||
<div class="authors-type">{{ author.position|default(author.meta('position')) }}</div> |
||||
<p>{{ function('pll_e', 'статей:') }} {{ author.post_count|default(0) }}</p> |
||||
</a> |
||||
</li> |
||||
{% else %} |
||||
<li>{{ function('pll_e', 'Нет авторов для отображения.') }}</li> |
||||
{% endfor %} |
||||
</ul> |
||||
</div> |
||||
|
||||
|
||||
</section> |
||||
|
||||
{% include 'forms/discount.twig' %} |
||||
<section class="blog-home other-home"> |
||||
<div class="container"> |
||||
<!-- Authors block end --> |
||||
{% include '/blog/featured-slider.twig' %} |
||||
</div> |
||||
</section> |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% endblock %} |
||||
@ -0,0 +1,36 @@ |
||||
{% for post in posts %} |
||||
<li class="anons-best__card light"> |
||||
<ul class="anons-best__card-alerts"> |
||||
{% for category in post.categories %} |
||||
<li> |
||||
<a href="{{ category.link }}">{{ category.name }}</a> |
||||
</li> |
||||
{% endfor %} |
||||
</ul> |
||||
<a href="{{ post.link }}" class="main-img"> |
||||
<img src="{{ post.thumbnail.src|default('https://via.placeholder.com/150') }}" alt="{{ post.thumbnail.alt }}"> |
||||
</a> |
||||
<div class="anons-best__card-body"> |
||||
<a href="{{ post.link }}" class="anons-best__card-body__title">{{ post.title }}</a> |
||||
<div class="anons-best__card-body__datas"> |
||||
<p>{{ post.date|date('d.m.Y') }}</p> |
||||
<p>{{ function('pll_e', 'время чтения:') }} {{ post.reading_time|default(function('pll_e', '5 мин.')) }}</p> |
||||
<ul> |
||||
{% if post.get_author_img %} |
||||
<li class="logo"> |
||||
<img src="{{ post.get_author_img }}" alt="{{ post.get_author_name }}"> |
||||
</li> |
||||
{% endif %} |
||||
<li> |
||||
<img src="{{ current_path }}/assets/img/heart-grey.svg" alt=""> |
||||
<span>{{ function('get_post_likes_count', post.ID) }}</span> |
||||
</li> |
||||
<li> |
||||
<img src="{{ current_path }}/assets/img/msg-grey.svg" alt=""> |
||||
<span>{{ post.comment_count }}</span> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</li> |
||||
{% endfor %} |
||||
@ -0,0 +1,92 @@ |
||||
{% set current_path = template_path ~ '/modules/blog/components/news-list' %} |
||||
|
||||
{% extends 'layout.twig' %} |
||||
|
||||
{% block content %} |
||||
<main> |
||||
<!-- Breadcrumb --> |
||||
<section class="breadcrumb"> |
||||
<div class="container"> |
||||
<a href="/">{{ function('pll_e', 'Главная') }}</a> / |
||||
<a href="/blog">{{ function('pll_e', 'Блог') }}</a> / |
||||
<a href="#">{{ author.title }}</a> |
||||
</div> |
||||
</section> |
||||
<!-- Breadcrumb end --> |
||||
|
||||
<!-- Authors block --> |
||||
<section class="author-head"> |
||||
<div class="container"> |
||||
<div class="author-head-content"> |
||||
<div class="main-img"> |
||||
<img src="{{ author.thumbnail.src|default('https://via.placeholder.com/150') }}" alt="{{ author.title }}"> |
||||
</div> |
||||
<div> |
||||
<div class="author-name">{{ author.title }}</div> |
||||
<div class="author-type">{{ author.position }}</div> |
||||
<div class="author-description">{{ author.content|striptags }}</div> |
||||
<p>{{ function('pll_e', 'статей:') }} {{ author.post_count }}</p> |
||||
</div> |
||||
</div> |
||||
<h2>{{ author.meta('headline')|default(function('pll_e', 'Посты автора')) }}</h2> |
||||
</div> |
||||
</section> |
||||
|
||||
<section class="anons"> |
||||
<div class="container"> |
||||
<div class="anons-article"> |
||||
<ul class="anons-article__card-wrap"> |
||||
{% for post in author.posts %} |
||||
<li class="anons-best__card light"> |
||||
<ul class="anons-best__card-alerts"> |
||||
{% for category in post.categories %} |
||||
<li> |
||||
<a href="{{ category.link }}">{{ category.name }}</a> |
||||
</li> |
||||
{% endfor %} |
||||
</ul> |
||||
<a href="{{ post.link }}" class="main-img"> |
||||
<img src="{{ post.thumbnail.src|default('https://via.placeholder.com/150') }}" alt="{{ post.thumbnail.alt }}"> |
||||
</a> |
||||
<div class="anons-best__card-body"> |
||||
<a href="{{ post.link }}" class="anons-best__card-body__title">{{ post.title }}</a> |
||||
<div class="anons-best__card-body__datas"> |
||||
<p>{{ post.date|date('d.m.Y') }}</p> |
||||
<p>{{ function('pll_e', 'время чтения:') }} {{ post.reading_time|default(function('pll_e', '5 мин.')) }}</p> |
||||
<ul> |
||||
{% if post.get_author_img %} |
||||
<li class="logo"> |
||||
<img src="{{ post.get_author_img }}" alt="{{ post.get_author_name }}"> |
||||
</li> |
||||
{% endif %} |
||||
<li> |
||||
<img src="{{ current_path }}/assets/img/heart-grey.svg" alt=""> |
||||
<span>{{ function('get_post_likes_count', post.ID) }}</span> |
||||
</li> |
||||
<li> |
||||
<img src="{{ current_path }}/assets/img/msg-grey.svg" alt=""> |
||||
<span>{{ post.comment_count }}</span> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</li> |
||||
{% else %} |
||||
<li>{{ function('pll_e', 'Нет постов') }}</li> |
||||
{% endfor %} |
||||
</ul> |
||||
{% if total_pages > 1 %} |
||||
<form id="ajax-load-author" data-total="{{ total_pages }}" data-author="{{ author.ID }}"> |
||||
<input type="hidden" name="page_num" id="page_num" value="1"> |
||||
<input type="hidden" name="action" value="get_author_posts"> |
||||
<button class="anons-article__more-link"> |
||||
{{ function('pll_e', 'ПОКАЗАТЬ ЕЩЁ') }} |
||||
</button> |
||||
</form> |
||||
{% endif %} |
||||
</div> |
||||
</div> |
||||
</section> |
||||
<!-- Authors block end --> |
||||
</main> |
||||
{% endblock %} |
||||
@ -0,0 +1,32 @@ |
||||
<div class="comment-block"> |
||||
<div class="comment-user"> |
||||
<img src="{{ comment.avatar ?? function('get_avatar_url', comment.author.id)|default('') }}" alt="{{ comment.author.name }}"> |
||||
<div class="comment-user_text"> |
||||
<h6> |
||||
{{ comment.author.name }} |
||||
</h6> |
||||
<span> |
||||
{{ comment.date }} |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<p> |
||||
{{ comment.content }} |
||||
</p> |
||||
<div class="comment-btns"> |
||||
<button class="reply-comment-btn" data-comment-id="{{ comment.ID }}"> |
||||
<svg width="11" height="8" viewBox="0 0 11 8" fill="none" xmlns="http://www.w3.org/2000/svg"> |
||||
<path d="M9.5 3H3.25C2.00736 3 1 4.00736 1 5.25V5.25C1 6.49264 2.00736 7.5 3.25 7.5H3.5" stroke="#666666"></path> |
||||
<path d="M7 0.5L9.5 3L7 5.5" stroke="#666666"></path> |
||||
</svg> |
||||
{{ function('pll_e', 'Ответить') }} |
||||
</button> |
||||
<button class="like-comment-btn" data-comment-id="{{ comment.ID }}"> |
||||
<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg"> |
||||
<path d="M10.7745 1C8.67239 1 7.7426 2.5355 7.54047 3.30325C7.39224 2.5355 6.49748 1 4.10427 1C1.11276 1 -0.221288 4.85199 2.40639 8.14801C4.50853 10.7848 6.705 11.8147 7.54047 12C8.47026 11.8279 10.8311 10.761 12.8363 7.87004C15.3427 4.25632 13.4022 1 10.7745 1Z" stroke="#666666"></path> |
||||
</svg> |
||||
{{ comment.like_count|default('0') }} |
||||
</button> |
||||
</div> |
||||
<div class="reply-form-container" id="reply-form-{{ comment.ID }}" style="display: none;"></div> |
||||
</div> |
||||
@ -0,0 +1,36 @@ |
||||
<section class="discount__sale sec-bf"> |
||||
<div class="container"> |
||||
<div class="discount_top"> |
||||
<h3 class="discount_title">{{sub_title}}</span> |
||||
</h3> |
||||
<div class="discount_top-imgs"> |
||||
<img class="dicount_dog-img img--desktop" |
||||
src="{{ theme.link }}/static/front-page/img/dicsount-sale.png" |
||||
alt=""> |
||||
<img class="dicount_dog-img img--mobile" |
||||
src="{{ theme.link }}/static/front-page/img/dicsount-sale-mob.png" |
||||
alt=""> |
||||
</div> |
||||
</div> |
||||
<div class="dicsount__body"> |
||||
|
||||
<div class="" id="" lang="ru-RU" dir="ltr"> |
||||
<div class="screen-reader-response"><p role="status" aria-live="polite" aria-atomic="true"></p> <ul></ul></div> |
||||
<form class="form-process" action="subscribe_form" method="post" class="" aria-label="Контактная форма" novalidate="novalidate" data-status="init"> |
||||
|
||||
<div class="discount_form "> |
||||
<span class="" data-name="subscriber"><input size="40" class="discount_form-inp" aria-required="true" aria-invalid="false" placeholder="{{ function('pll_e', 'Эл.почта') }}" value="" type="email" name="subscriber"></span> |
||||
<img src="/wp-content/themes/cosmopet/static/front-page/img/discount-line-w.svg" data-src="https://cosmopet.shop/wp-content/themes/woodmart/images/svg/discount-line-w.svg" decoding="async" class=" lazyloaded"><noscript><img src="https://cosmopet.shop/wp-content/themes/woodmart/images/svg/discount-line-w.svg" data-eio="l"></noscript> |
||||
|
||||
<input type="hidden" name="from_url" value="{{ current_url }}"> |
||||
<input type="hidden" name="form_name" value="Subscribtion form"> |
||||
<button class="discount_form-btn main_link" type="submit">{{ function('pll_e', 'подписаться') }}</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
<p class="discount_form-text"> |
||||
{{ function('pll_e', 'Подписываясь на рассылку, я даю согласие на обработку персональных данных, на получение рекламных сообщений и новостей о товарах и услугах') }}</p> |
||||
<p class="discount_text">{{sub_text}}</p> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
@ -0,0 +1,63 @@ |
||||
<?php |
||||
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) { |
||||
exit; |
||||
} |
||||
|
||||
if (is_product()) { |
||||
|
||||
include_module('shop'); |
||||
include_component('shop', 'single-product'); |
||||
|
||||
$context = Timber::get_context(); |
||||
$post = Timber::get_post(); |
||||
$context['post'] = $post; |
||||
|
||||
|
||||
$context['wc_breadcrumbs'] = array(); |
||||
|
||||
if (function_exists('woocommerce_breadcrumb')) { |
||||
$args = array( |
||||
'delimiter' => '', |
||||
'wrap_before' => '', |
||||
'wrap_after' => '', |
||||
'before' => '', |
||||
'after' => '', |
||||
'home' => _x('Home', 'breadcrumb', 'woocommerce'), |
||||
); |
||||
|
||||
$breadcrumbs = new WC_Breadcrumb(); |
||||
$breadcrumbs->generate(); |
||||
|
||||
$formatted_breadcrumbs = array(); |
||||
foreach ($breadcrumbs->get_breadcrumb() as $crumb) { |
||||
$formatted_breadcrumbs[] = array( |
||||
'text' => $crumb[0], |
||||
'url' => $crumb[1] |
||||
); |
||||
} |
||||
|
||||
$context['wc_breadcrumbs'] = $formatted_breadcrumbs; |
||||
} |
||||
|
||||
|
||||
$product_id = get_the_ID(); |
||||
$product = wc_get_product($product_id); |
||||
|
||||
$context['product'] = $product; |
||||
|
||||
$context['related_products'] = array(); |
||||
$related_products_ids = wc_get_related_products($product_id, 5); |
||||
|
||||
if ($related_products_ids) { |
||||
foreach ($related_products_ids as $related_id) { |
||||
$related_product = wc_get_product($related_id); |
||||
if ($related_product) { |
||||
$context['related_products'][] = $related_product; |
||||
} |
||||
} |
||||
} |
||||
|
||||
Timber::render('modules/shop/components/single-product/component-template.twig', $context); |
||||
} |
||||
@ -0,0 +1,19 @@ |
||||
<?php |
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) { |
||||
exit; |
||||
} |
||||
|
||||
get_header(); |
||||
|
||||
$template_path = 'templates/shop/single-product.php'; |
||||
if (file_exists(get_template_directory() . '/' . $template_path)) { |
||||
include_once get_template_directory() . '/' . $template_path; |
||||
} else { |
||||
|
||||
while (have_posts()) : the_post(); |
||||
wc_get_template_part('content', 'single-product'); |
||||
endwhile; |
||||
} |
||||
|
||||
get_footer(); |
||||
Loading…
Reference in new issue