gp_dev
3 months ago
commit
face9b0291
@ -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 |
@ -1,62 +1,89 @@ |
|||||||
{% extends 'layout.twig' %} |
{% extends 'layout.twig' %} |
||||||
|
|
||||||
|
|
||||||
{% block content %} |
{% block content %} |
||||||
|
|
||||||
<!-- Breadcrumb --> |
|
||||||
<section class="breadcrumb"> |
|
||||||
<div class="container"> |
|
||||||
<a href="{{ site.url }}">{{ function('pll_e', 'Главная') }}</a> / |
|
||||||
<a href="{{ site.url }}">{{ function('pll_e', 'Блог') }}</a> / |
|
||||||
<a href="{{ post.link }}">{{ post.name }}</a> |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
<!-- Breadcrumb end --> |
|
||||||
|
|
||||||
<!-- Article home --> |
<!-- Breadcrumb --> |
||||||
<section class="article-home"> |
<section class="breadcrumb"> |
||||||
<div class="container"> |
<div class="container"> |
||||||
<h1>{{post.name}}</h1> |
<a href="{{ site.url }}">{{ function('pll_e', 'Главная') }}</a> / |
||||||
<div class="article-home__data"> |
<a href="{{ site.url }}">{{ function('pll_e', 'Блог') }}</a> / |
||||||
<ul class="article-home__data-alerts"> |
<a href="{{ post.link }}">{{ post.name }}</a> |
||||||
{% for category in post.categories %} |
</div> |
||||||
<li> |
</section> |
||||||
<a href="{{ category.link }}">{{ category.name }}</a> |
<!-- Breadcrumb end --> |
||||||
</li> |
|
||||||
{% endfor %} |
|
||||||
</ul> |
|
||||||
<p>{{post.date}}</p> |
|
||||||
<p>{{ function('pll_e', 'время чтения') }}: {{post.reading_time}}</p> |
|
||||||
|
|
||||||
{% if post.get_author_name %} |
|
||||||
<div class="user"> |
|
||||||
<img src="{{post.get_author_img}}"> |
|
||||||
<span>{{post.get_author_name}}</span> |
|
||||||
|
|
||||||
|
<!-- Article home --> |
||||||
|
<section class="article-home"> |
||||||
|
<div class="container"> |
||||||
|
<h1>{{post.name}}</h1> |
||||||
|
<div class="article-home__data"> |
||||||
|
<ul class="article-home__data-alerts"> |
||||||
|
{% for category in post.categories %} |
||||||
|
<li> |
||||||
|
<a href="{{ category.link }}">{{ category.name }}</a> |
||||||
|
</li> |
||||||
|
{% endfor %} |
||||||
|
</ul> |
||||||
|
<p>{{post.date}}</p> |
||||||
|
<p>{{ function('pll_e', 'время чтения') }}: {{post.reading_time}}</p> |
||||||
|
|
||||||
|
{% if post.get_author_name %} |
||||||
|
<div class="user"> |
||||||
|
<a href="{{ post.get_author_link }}"> |
||||||
|
<img src="{{post.get_author_img}}"> |
||||||
|
<span>{{post.get_author_name}}</span> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
{% endif %} |
||||||
|
</div> |
||||||
|
<div class="article-home__card"> |
||||||
|
<img src="{{post.thumbnail.src}}" alt="{{post.thumbnail.alt}}"> |
||||||
</div> |
</div> |
||||||
{% endif %} |
|
||||||
</div> |
</div> |
||||||
<div class="article-home__card"> |
</section> |
||||||
<img src="{{post.thumbnail.src}}" alt="{{post.thumbnail.alt}}"> |
|
||||||
|
<!-- Article home end --> |
||||||
|
|
||||||
|
<!-- Article content --> |
||||||
|
<div class="article-content"> |
||||||
|
<div class="article-container"> |
||||||
|
{{post.content}} |
||||||
</div> |
</div> |
||||||
|
<!-- Комментарии --> |
||||||
|
<section class="comment"> |
||||||
|
<div class="container"> |
||||||
|
<div class="comment-btn"> |
||||||
|
<button {% if function('is_user_liked_post', post.ID) %}class="active"{% endif %} data-post-id="{{ post.ID }}"> |
||||||
|
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"> |
||||||
|
<path d="M17.7859 4.66406C14.7135 4.66406 13.3546 6.89752 13.0591 8.01424C12.8425 6.89752 11.5348 4.66406 8.03702 4.66406C3.66481 4.66406 1.71504 10.267 5.55549 15.0612C8.62786 18.8966 11.8381 20.3945 13.0591 20.6641C14.4181 20.4138 17.8686 18.8619 20.7991 14.6568C24.4623 9.40052 21.6263 4.66406 17.7859 4.66406Z" {% if function('is_user_liked_post', post.ID) %}fill="rgba(255, 0, 0, 0.7)" stroke="#ff0000"{% else %}fill="#121212"{% endif %}></path> |
||||||
|
</svg> |
||||||
|
Нравится |
||||||
|
</button> |
||||||
|
<span> |
||||||
|
{{ function('get_post_likes_count', post.ID) }} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="comment-in"> |
||||||
|
<h3 class="comment-title"> |
||||||
|
{{ function('pll_e', 'КОММЕНТАРИИ') }} ({{ function('get_comments_number', post.ID) }}) |
||||||
|
</h3> |
||||||
|
{{ function('comments_template') }} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
<!-- Комментарии end --> |
||||||
</div> |
</div> |
||||||
</section> |
<!-- Article content end --> |
||||||
|
|
||||||
<!-- Article home end --> |
|
||||||
|
|
||||||
<!-- Article content --> |
<section class="home other-home"> |
||||||
<div class="article-content"> |
<div class="container"> |
||||||
<div class="article-container"> |
{% include '/blog/featured-slider.twig' %} |
||||||
{{post.content}} |
</div> |
||||||
</div> |
</section> |
||||||
</div> |
|
||||||
<!-- Article content end --> |
|
||||||
<section class="home other-home"> |
|
||||||
<div class="container"> |
|
||||||
{% include '/blog/featured-slider.twig' %} |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{% endblock %} |
{% endblock %} |
||||||
@ -1,30 +1,40 @@ |
|||||||
{% for post in posts %} |
{% set current_path = template_path ~ '/modules/blog/components/news-list' %} |
||||||
|
|
||||||
<li class="anons-best__card light"> |
|
||||||
<ul class="anons-best__card-alerts"> |
{% for post in posts %} |
||||||
{% for category in post.categories %} |
|
||||||
<li> |
<li class="anons-best__card light"> |
||||||
<a href="{{ category.link }}">{{ category.name }}</a> |
<ul class="anons-best__card-alerts"> |
||||||
</li> |
{% for category in post.categories %} |
||||||
{% endfor %} |
<li> |
||||||
</ul> |
<a href="{{ category.link }}">{{ category.name }}</a> |
||||||
<a href="{{post.link}}" class="main-img"> |
</li> |
||||||
<img src="{{post.thumbnail.src}}" alt="{{post.thumbnail.alt}}"> |
{% endfor %} |
||||||
</a> |
</ul> |
||||||
<div class="anons-best__card-body"> |
<a href="{{post.link}}" class="main-img"> |
||||||
<a href="{{post.link}}" class="anons-best__card-body__title">{{post.title}}</a> |
<img src="{{post.thumbnail.src}}" alt="{{post.thumbnail.alt}}"> |
||||||
<div class="anons-best__card-body__datas"> |
</a> |
||||||
<p>{{post.date}}</p> |
<div class="anons-best__card-body"> |
||||||
<p>{{ function('pll_e', 'время чтения') }}: {{post.reading_time}}</p> |
<a href="{{post.link}}" class="anons-best__card-body__title">{{post.title}}</a> |
||||||
<ul> |
<div class="anons-best__card-body__datas"> |
||||||
{% if post.get_author_name %} |
<p>{{post.date}}</p> |
||||||
<li class="logo"> |
<p>{{ function('pll_e', 'время чтения') }}: {{post.reading_time}}</p> |
||||||
<img src="{{post.get_author_img}}" alt=""> |
<ul> |
||||||
</li> |
<li> |
||||||
|
<img src="{{ current_path }}/assets/img/heart-grey.svg" alt=""> |
||||||
{% endif %} |
<span>{{ function('get_post_likes_count', post.ID) }}</span> |
||||||
</ul> |
</li> |
||||||
|
<li> |
||||||
|
<img src="{{ current_path }}/assets/img/msg-grey.svg" alt=""> |
||||||
|
<span>{{ post.comment_count }}</span> |
||||||
|
</li> |
||||||
|
{% if post.get_author_name %} |
||||||
|
<li class="logo"> |
||||||
|
<img src="{{post.get_author_img}}" alt=""> |
||||||
|
</li> |
||||||
|
{% endif %} |
||||||
|
</ul> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
</div> |
</li> |
||||||
</li> |
{% endfor %} |
||||||
{% endfor %} |
|
||||||
@ -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); |
||||||
|
} |
||||||
@ -1,115 +1,117 @@ |
|||||||
{% set cur_product = fn('wc_get_product', product.id) %} |
{% if post.id is defined and post.id %} |
||||||
{% set attrs = post.product.get_attributes() %} |
{% set cur_product = fn('wc_get_product', post.id) %} |
||||||
{% set cur_weight = function('get_product_info', post.id, 'weight') %} |
{% set attrs = post.product.get_attributes() %} |
||||||
|
{% set cur_weight = function('get_product_info', post.id, 'weight') %} |
||||||
|
|
||||||
<div class="product__item"> |
<div class="product__item"> |
||||||
<div class="product-item__label"> |
<div class="product-item__label"> |
||||||
{% if post.date('Y-m-d') >= criteria_for_new_product %} |
{% if post.date('Y-m-d') >= criteria_for_new_product %} |
||||||
<span href="#" class="product-item-label__tag product-item-label__tag--new"> |
<span href="#" class="product-item-label__tag product-item-label__tag--new"> |
||||||
{{ function('pll_e', 'Новинка') }} |
{{ function('pll_e', 'Новинка') }} |
||||||
</span> |
</span> |
||||||
{% endif %} |
{% endif %} |
||||||
|
|
||||||
{% if post._sale_price %} |
{% if post._sale_price %} |
||||||
<span href="#" class="product-item-label__tag product-item-label__tag--sale"> |
<span href="#" class="product-item-label__tag product-item-label__tag--sale"> |
||||||
{{ function('pll_e', 'Распродажа %') }} |
{{ function('pll_e', 'Распродажа %') }} |
||||||
</span> |
</span> |
||||||
{% endif %} |
{% endif %} |
||||||
</div> |
|
||||||
<a href="{{ post.link }}" class="product-item__product-card"> |
|
||||||
<img src="{{ post.thumbnail.src('shop_single') }}" alt="{{ post.title }}" class="product-item__images"> |
|
||||||
</a> |
|
||||||
<div class="product-item__content-card"> |
|
||||||
<div class="compound"> |
|
||||||
{% set compound = fn('wc_get_product_terms', post.id, 'pa_compound') %} |
|
||||||
{% for option in compound %} |
|
||||||
|
|
||||||
{% set term = get_term(option) %} |
|
||||||
<a href="/compound/{{ term.slug }}" class="compound__item">{{ term.name }}</a> |
|
||||||
{% endfor %} |
|
||||||
</div> |
|
||||||
<a href="#" class="product-item__title">{{ post.title }}</a> |
|
||||||
<div class="product-item__price"> |
|
||||||
<p>{{ post._price() }}</p> |
|
||||||
</div> |
</div> |
||||||
<div class="product-item__bye"> |
<a href="{{ post.link }}" class="product-item__product-card"> |
||||||
<button class="button button--white button--100-perc open-overlay"> |
<img src="{{ post.thumbnail.src('shop_single') }}" alt="{{ post.title }}" class="product-item__images"> |
||||||
{{ function('pll_e', 'Купить') }} |
</a> |
||||||
</button> |
<div class="product-item__content-card"> |
||||||
</div> |
<div class="compound"> |
||||||
</div> |
{% set compound = fn('wc_get_product_terms', post.id, 'pa_compound') %} |
||||||
<div class="product-item__overlay"> |
{% for option in compound %} |
||||||
<div class="product-item-overlay__header"> |
|
||||||
<a href="#" class="product-item__title">{{ post.title }}</a> |
|
||||||
<ul class="product-item-overlay__tags"> |
|
||||||
{% set features = fn('wc_get_product_terms', post.id, 'pa_features') %} |
|
||||||
{% for option in features %} |
|
||||||
{% set term = get_term(option) %} |
{% set term = get_term(option) %} |
||||||
<li>{{ term.name }}</li> |
<a href="/compound/{{ term.slug }}" class="compound__item">{{ term.name }}</a> |
||||||
{% endfor %} |
{% endfor %} |
||||||
</ul> |
</div> |
||||||
|
<a href="#" class="product-item__title">{{ post.title }}</a> |
||||||
|
<div class="product-item__price"> |
||||||
|
<p>{{ post._price() }}</p> |
||||||
|
</div> |
||||||
|
<div class="product-item__bye"> |
||||||
|
<button class="button button--white button--100-perc open-overlay"> |
||||||
|
{{ function('pll_e', 'Купить') }} |
||||||
|
</button> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
|
<div class="product-item__overlay"> |
||||||
<form class="product-item__form" method="post" action="/send-telegram.php"> |
<div class="product-item-overlay__header"> |
||||||
<div class="product-item-overlay__input-block"> |
<a href="#" class="product-item__title">{{ post.title }}</a> |
||||||
<div class="product-item-overlay__field"> |
<ul class="product-item-overlay__tags"> |
||||||
<p class="product-item-overlay-field__title">Объем</p> |
{% 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"> |
<div class="select"> |
||||||
<input type="text" class="select__state" value="{{ cur_weight }}" readonly data-product_id="{{post.id}}" data-product_price="{{ post._price() }}"> |
<input type="text" class="select__state" value="{{ cur_weight }}" readonly data-product_id="{{post.id}}" data-product_price="{{ post._price() }}"> |
||||||
<div class="state__block"> |
<div class="state__block"> |
||||||
<ul class="state__content"> |
<ul class="state__content"> |
||||||
{% set collection = fn('wc_get_product_terms', post.id, 'pa_collection') %} |
{% set collection = fn('wc_get_product_terms', post.id, 'pa_collection') %} |
||||||
{% for option in collection %} |
{% for option in collection %} |
||||||
{% set term = get_term(option) %} |
{% set term = get_term(option) %} |
||||||
{% set siblings = function('get_collection_siblings' , term.id) %} |
{% set siblings = function('get_collection_siblings' , term.id) %} |
||||||
|
|
||||||
{% for sibling in siblings %} |
{% for sibling in siblings %} |
||||||
|
|
||||||
{% set weight = function('get_product_info', sibling.ID, 'weight') %} |
{% set weight = function('get_product_info', sibling.ID, 'weight') %} |
||||||
|
|
||||||
{% set class = '' %} |
{% set class = '' %} |
||||||
{% if weight == cur_weight %} |
{% if weight == cur_weight %} |
||||||
{% set class = 'active' %} |
{% set class = 'active' %} |
||||||
{% endif %} |
{% endif %} |
||||||
<li> |
<li> |
||||||
<button class="state__button {{ class }}" data-product_id="{{sibling.ID}}" data-product_price="{{ function('get_product_info', sibling.ID, 'price') }}"> |
<button class="state__button {{ class }}" data-product_id="{{sibling.ID}}" data-product_price="{{ function('get_product_info', sibling.ID, 'price') }}"> |
||||||
{{ weight }} |
{{ weight }} |
||||||
</button> |
</button> |
||||||
</li> |
</li> |
||||||
|
{% endfor %} |
||||||
{% endfor %} |
{% endfor %} |
||||||
{% endfor %} |
</ul> |
||||||
</ul> |
</div> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
</div> |
<div class="product-item-overlay__field"> |
||||||
<div class="product-item-overlay__field"> |
<p class="product-item-overlay-field__title">Количество</p> |
||||||
<p class="product-item-overlay-field__title">Количество</p> |
|
||||||
|
|
||||||
<div class="counter"> |
<div class="counter"> |
||||||
<button class="counter__button minus"> |
<button class="counter__button minus"> |
||||||
<img src="{{ theme.link }}/woocommerce/assets/img/svg/main/minus.svg" alt=""> |
<img src="{{ theme.link }}/woocommerce/assets/img/svg/main/minus.svg" alt=""> |
||||||
</button> |
</button> |
||||||
<input type="text" class="counter__input" value="1"> |
<input type="text" class="counter__input" value="1"> |
||||||
<button class="counter__button plus"> |
<button class="counter__button plus"> |
||||||
<img src="{{ theme.link }}/woocommerce/assets/img/svg/main/plus.svg" alt=""> |
<img src="{{ theme.link }}/woocommerce/assets/img/svg/main/plus.svg" alt=""> |
||||||
</button> |
</button> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
</div> |
<p class="product-item-overlay__price"> |
||||||
<p class="product-item-overlay__price"> |
{{ post._price() }} |
||||||
{{ post._price() }} |
</p> |
||||||
</p> |
<div class="product-item-overlay__block-button"> |
||||||
<div class="product-item-overlay__block-button"> |
<div class="product-item-overlay__button"> |
||||||
<div class="product-item-overlay__button"> |
{{ function('get_add_to_cart_button', post.id) }} |
||||||
{{ function('get_add_to_cart_button', post.id) }} |
</div> |
||||||
</div> |
<div class="product-item-overlay__more_button"> |
||||||
<div class="product-item-overlay__more_button"> |
<a class="to-know button--100-perc" href="{{ post.link }}"> |
||||||
<a class="to-know button--100-perc" href="{{ post.link }}"> |
<p>{{ function('pll_e', 'Подробнее') }}</p> |
||||||
<p>{{ function('pll_e', 'Подробнее') }}</p> |
</a> |
||||||
</a> |
</div> |
||||||
</div> |
</div> |
||||||
</div> |
</form> |
||||||
</form> |
</div> |
||||||
</div> |
</div> |
||||||
</div> |
{% endif %} |
||||||
@ -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