gp_dev
3 months ago
commit
a383ef2fd2
@ -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,166 @@ |
|||||||
|
// 'use strict';
|
||||||
|
|
||||||
|
// // Глобальные переменные для управления состоянием
|
||||||
|
// let currentModalContent = null;
|
||||||
|
|
||||||
|
// function modalOpen(buttonElement, contentElement) {
|
||||||
|
// const modal = document.querySelector('.modal');
|
||||||
|
// const aside = document.querySelector('.modal__aside');
|
||||||
|
// const elements = document.querySelectorAll(buttonElement);
|
||||||
|
// const device = window.screen.width;
|
||||||
|
|
||||||
|
// // Обработчик закрытия по клику на оверлей
|
||||||
|
// modal.addEventListener('click', function(e) {
|
||||||
|
// if (e.target === modal && currentModalContent) {
|
||||||
|
// closeModal(currentModalContent);
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
// // Обработчик закрытия по Escape
|
||||||
|
// document.addEventListener('keydown', function(e) {
|
||||||
|
// if (e.key === 'Escape' && currentModalContent) {
|
||||||
|
// closeModal(currentModalContent);
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
// elements.forEach(e => {
|
||||||
|
// e.addEventListener('click', function() {
|
||||||
|
// const content = document.querySelector(contentElement);
|
||||||
|
// currentModalContent = content;
|
||||||
|
|
||||||
|
// // Сброс стилей перед открытием
|
||||||
|
// resetModalStyles();
|
||||||
|
|
||||||
|
// modal.classList.add('active');
|
||||||
|
// content.classList.add('active');
|
||||||
|
|
||||||
|
// const width = content.clientWidth;
|
||||||
|
|
||||||
|
// setTimeout(() => {
|
||||||
|
// if (device <= 720) {
|
||||||
|
// aside.style.width = `${device}px`;
|
||||||
|
// } else {
|
||||||
|
// aside.style.width = `${width}px`;
|
||||||
|
// }
|
||||||
|
// content.style.opacity = '1';
|
||||||
|
// content.style.filter = 'blur(0)';
|
||||||
|
// }, 10);
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// function modalClose(buttonElement) {
|
||||||
|
// const elements = document.querySelectorAll(buttonElement);
|
||||||
|
|
||||||
|
// elements.forEach(e => {
|
||||||
|
// e.addEventListener('click', function() {
|
||||||
|
// if (currentModalContent) {
|
||||||
|
// closeModal(currentModalContent);
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// function closeModal(contentElement) {
|
||||||
|
// const modal = document.querySelector('.modal');
|
||||||
|
// const aside = document.querySelector('.modal__aside');
|
||||||
|
|
||||||
|
// aside.style.width = '0';
|
||||||
|
// contentElement.style.opacity = '0';
|
||||||
|
// contentElement.style.filter = 'blur(10px)';
|
||||||
|
|
||||||
|
// setTimeout(() => {
|
||||||
|
// contentElement.classList.remove('active');
|
||||||
|
// modal.classList.remove('active');
|
||||||
|
// currentModalContent = null;
|
||||||
|
// }, 300);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// function resetModalStyles() {
|
||||||
|
// const allModals = document.querySelectorAll('.modal__item');
|
||||||
|
|
||||||
|
// allModals.forEach(modal => {
|
||||||
|
// modal.style.opacity = '';
|
||||||
|
// modal.style.filter = '';
|
||||||
|
// modal.classList.remove('active');
|
||||||
|
// });
|
||||||
|
|
||||||
|
// document.querySelector('.modal__aside').style.width = '';
|
||||||
|
// }
|
||||||
|
// 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 modalFormOpen(formOrNotification) {
|
||||||
|
// let buttons = document.querySelectorAll(formOrNotification),
|
||||||
|
// modal = document.querySelector('.modal');
|
||||||
|
|
||||||
|
// buttons.forEach(button => {
|
||||||
|
// button.onclick = function (eventButton) {
|
||||||
|
// let classOpenForm = button.dataset.form,
|
||||||
|
// form = modal.querySelector(`.${classOpenForm}`);
|
||||||
|
|
||||||
|
// form.classList.add('active');
|
||||||
|
// modal.classList.add('active');
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
// // function
|
||||||
@ -0,0 +1,8 @@ |
|||||||
|
<?php |
||||||
|
|
||||||
|
add_filter('woocommerce_get_script_data', 'add_custom_woocommerce_params', 10, 2); |
||||||
|
function add_custom_woocommerce_params($params, $handle) { |
||||||
|
// Добавляем только для скрипта корзины |
||||||
|
$params['i18n_restore_item'] = pll__('Восстановить'); |
||||||
|
return $params; |
||||||
|
} |
||||||
@ -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,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,29 @@ |
|||||||
|
<?php |
||||||
|
/** |
||||||
|
* Cart item data (when outputting non-flat) |
||||||
|
* |
||||||
|
* This template can be overridden by copying it to yourtheme/woocommerce/cart/cart-item-data.php. |
||||||
|
* |
||||||
|
* HOWEVER, on occasion WooCommerce will need to update template files and you |
||||||
|
* (the theme developer) will need to copy the new files to your theme to |
||||||
|
* maintain compatibility. We try to do this as little as possible, but it does |
||||||
|
* happen. When this occurs the version of the template file will be bumped and |
||||||
|
* the readme will list any important changes. |
||||||
|
* |
||||||
|
* @see https://docs.woocommerce.com/document/template-structure/ |
||||||
|
* @author WooThemes |
||||||
|
* @package WooCommerce/Templates |
||||||
|
* @version 2.4.0 |
||||||
|
*/ |
||||||
|
if ( ! defined( 'ABSPATH' ) ) { |
||||||
|
exit; |
||||||
|
} |
||||||
|
?> |
||||||
|
<ul class="variation"> |
||||||
|
<?php foreach ( $item_data as $data ) : ?> |
||||||
|
<li class="variation-<?php echo sanitize_html_class( $data['key'] ); ?>">
|
||||||
|
<span class="item-variation-name"><?php echo wp_kses_post( $data['key'] ); ?>:</span>
|
||||||
|
<span class="item-variation-value"><?php echo wp_kses_post( wpautop( $data['display'] ) ); ?></span>
|
||||||
|
</li> |
||||||
|
<?php endforeach; ?> |
||||||
|
</ul> |
||||||
@ -0,0 +1,236 @@ |
|||||||
|
<?php |
||||||
|
/** |
||||||
|
* Cart Page |
||||||
|
* |
||||||
|
* This template can be overridden by copying it to yourtheme/woocommerce/cart/cart.php. |
||||||
|
* |
||||||
|
* HOWEVER, on occasion WooCommerce will need to update template files and you |
||||||
|
* (the theme developer) will need to copy the new files to your theme to |
||||||
|
* maintain compatibility. We try to do this as little as possible, but it does |
||||||
|
* happen. When this occurs the version of the template file will be bumped and |
||||||
|
* the readme will list any important changes. |
||||||
|
* |
||||||
|
* @see https://docs.woocommerce.com/document/template-structure/ |
||||||
|
* @package WooCommerce/Templates |
||||||
|
* @version 7.9.0 |
||||||
|
*/ |
||||||
|
wp_enqueue_style( 'gp-cart', get_template_directory_uri() . '/gp-include/assets/front-page/css/gp-cart.css' ); |
||||||
|
defined( 'ABSPATH' ) || exit; |
||||||
|
|
||||||
|
$update_cart_btn_classes = ''; |
||||||
|
|
||||||
|
if ( function_exists( 'wc_wp_theme_get_element_class_name' ) ) { |
||||||
|
$update_cart_btn_classes .= ' ' . wc_wp_theme_get_element_class_name( 'button' ); |
||||||
|
} |
||||||
|
|
||||||
|
if ( woodmart_get_opt( 'update_cart_quantity_change' ) ) { |
||||||
|
$update_cart_btn_classes .= ' wd-hide'; |
||||||
|
} |
||||||
|
?> |
||||||
|
|
||||||
|
<div class="woocommerce cart-content-wrapper row"> |
||||||
|
|
||||||
|
<?php do_action( 'woocommerce_before_cart' ); ?> |
||||||
|
|
||||||
|
<form class="woocommerce-cart-form cart-data-form col-12 col-lg-7 col-xl-8" action="<?php echo esc_url( wc_get_cart_url() ); ?>" method="post">
|
||||||
|
<div class="cart-table-section"> |
||||||
|
|
||||||
|
<?php do_action( 'woocommerce_before_cart_table' ); ?> |
||||||
|
|
||||||
|
<table class="shop_table shop_table_responsive cart woocommerce-cart-form__contents" cellspacing="0"> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th class="product-remove"><span class="screen-reader-text"><?php esc_html_e( 'Remove item', 'woocommerce' ); ?></span></th>
|
||||||
|
<th class="product-thumbnail"><span class="screen-reader-text"><?php esc_html_e( 'Thumbnail image', 'woocommerce' ); ?></span>;</th>
|
||||||
|
<th class="product-name"><?php esc_html_e( 'Product', 'woocommerce' ); ?></th>
|
||||||
|
<?php if ( woodmart_get_opt( 'show_sku_in_cart' ) ) : ?> |
||||||
|
<th class="product-sku"><?php esc_html_e( 'SKU', 'woocommerce' ); ?></th>
|
||||||
|
<?php endif; ?> |
||||||
|
<th class="product-price"><?php esc_html_e( 'Price', 'woocommerce' ); ?></th>
|
||||||
|
<th class="product-quantity"><?php esc_html_e( 'Quantity', 'woocommerce' ); ?></th>
|
||||||
|
<th class="product-subtotal"><?php esc_html_e( 'Subtotal', 'woocommerce' ); ?></th>
|
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
<?php do_action( 'woocommerce_before_cart_contents' ); ?> |
||||||
|
|
||||||
|
<?php |
||||||
|
foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) { |
||||||
|
$_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key ); |
||||||
|
$product_id = apply_filters( 'woocommerce_cart_item_product_id', $cart_item['product_id'], $cart_item, $cart_item_key ); |
||||||
|
|
||||||
|
if ( $_product && $_product->exists() && $cart_item['quantity'] > 0 && apply_filters( 'woocommerce_cart_item_visible', true, $cart_item, $cart_item_key ) ) { |
||||||
|
$product_permalink = apply_filters( 'woocommerce_cart_item_permalink', $_product->is_visible() ? $_product->get_permalink( $cart_item ) : '', $cart_item, $cart_item_key ); |
||||||
|
$product_name = apply_filters( 'woocommerce_cart_item_name', $_product->get_name(), $cart_item, $cart_item_key ); |
||||||
|
?> |
||||||
|
|
||||||
|
<tr class="woocommerce-cart-form__cart-item <?php echo esc_attr( apply_filters( 'woocommerce_cart_item_class', 'cart_item', $cart_item, $cart_item_key ) ); ?>">
|
||||||
|
|
||||||
|
<td class="product-remove"> |
||||||
|
<?php |
||||||
|
echo apply_filters( // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped |
||||||
|
'woocommerce_cart_item_remove_link', |
||||||
|
sprintf( |
||||||
|
'<a href="%s" class="remove" aria-label="%s" data-product_id="%s" data-product_sku="%s">×</a>', |
||||||
|
esc_url( wc_get_cart_remove_url( $cart_item_key ) ), |
||||||
|
/* translators: %s is the product name */ |
||||||
|
esc_attr( sprintf( __( 'Remove %s from cart', 'woocommerce' ), wp_strip_all_tags( $product_name ) ) ), |
||||||
|
esc_attr( $product_id ), |
||||||
|
esc_attr( $_product->get_sku() ) |
||||||
|
), |
||||||
|
$cart_item_key |
||||||
|
); |
||||||
|
?> |
||||||
|
</td> |
||||||
|
|
||||||
|
<td class="product-thumbnail"> |
||||||
|
<?php |
||||||
|
if ( ! $product_permalink ) { |
||||||
|
echo apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image(), $cart_item, $cart_item_key ); |
||||||
|
} else { |
||||||
|
printf( '<a href="%s">%s</a>', esc_url( $product_permalink ), apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image(), $cart_item, $cart_item_key ) ); |
||||||
|
} |
||||||
|
?> |
||||||
|
</td> |
||||||
|
|
||||||
|
<td class="product-name" data-title="<?php esc_attr_e( 'Product', 'woocommerce' ); ?>">
|
||||||
|
<?php |
||||||
|
if ( ! $product_permalink ) { |
||||||
|
echo wp_kses_post( $product_name . ' ' ); |
||||||
|
} else { |
||||||
|
/** |
||||||
|
* This filter is documented above. |
||||||
|
* |
||||||
|
* @since 7.8.0 |
||||||
|
* @param string $product_url URL the product in the cart. |
||||||
|
*/ |
||||||
|
echo wp_kses_post( apply_filters( 'woocommerce_cart_item_name', sprintf( '<a href="%s">%s</a>', esc_url( $product_permalink ), $_product->get_name() ), $cart_item, $cart_item_key ) ); |
||||||
|
} |
||||||
|
|
||||||
|
do_action( 'woocommerce_after_cart_item_name', $cart_item, $cart_item_key ); |
||||||
|
|
||||||
|
// Meta data |
||||||
|
echo wc_get_formatted_cart_item_data( $cart_item ); |
||||||
|
|
||||||
|
// Backorder notification |
||||||
|
if ( $_product->backorders_require_notification() && $_product->is_on_backorder( $cart_item['quantity'] ) ) { |
||||||
|
echo wp_kses_post( apply_filters( 'woocommerce_cart_item_backorder_notification', '<p class="backorder_notification">' . esc_html__( 'Available on backorder', 'woocommerce' ) . '</p>', $product_id ) ); |
||||||
|
} |
||||||
|
?> |
||||||
|
</td> |
||||||
|
|
||||||
|
<?php if ( woodmart_get_opt( 'show_sku_in_cart' ) ) : ?> |
||||||
|
<td class="product-sku" data-title="<?php esc_attr_e( 'SKU', 'woocommerce' ); ?>">
|
||||||
|
<?php if ( $_product->get_sku() ) : ?> |
||||||
|
<?php echo esc_html( $_product->get_sku() ); ?> |
||||||
|
<?php else : ?> |
||||||
|
<?php esc_html_e( 'N/A', 'woocommerce' ); ?> |
||||||
|
<?php endif; ?> |
||||||
|
</td> |
||||||
|
<?php endif; ?> |
||||||
|
|
||||||
|
<td class="product-price" data-title="<?php esc_attr_e( 'Price', 'woocommerce' ); ?>">
|
||||||
|
<?php |
||||||
|
echo apply_filters( 'woocommerce_cart_item_price', WC()->cart->get_product_price( $_product ), $cart_item, $cart_item_key ); |
||||||
|
?> |
||||||
|
</td> |
||||||
|
|
||||||
|
<td class="product-quantity" data-title="<?php esc_attr_e( 'Quantity', 'woocommerce' ); ?>">
|
||||||
|
<?php |
||||||
|
if ( $_product->is_sold_individually() ) { |
||||||
|
$min_quantity = 1; |
||||||
|
$max_quantity = 1; |
||||||
|
} else { |
||||||
|
$min_quantity = 0; |
||||||
|
$max_quantity = $_product->get_max_purchase_quantity(); |
||||||
|
} |
||||||
|
|
||||||
|
$product_quantity = woocommerce_quantity_input( |
||||||
|
array( |
||||||
|
'input_name' => "cart[{$cart_item_key}][qty]", |
||||||
|
'input_value' => $cart_item['quantity'], |
||||||
|
'max_value' => $max_quantity, |
||||||
|
'min_value' => $min_quantity, |
||||||
|
'product_name' => $product_name, |
||||||
|
), |
||||||
|
$_product, |
||||||
|
false |
||||||
|
); |
||||||
|
|
||||||
|
echo apply_filters( 'woocommerce_cart_item_quantity', $product_quantity, $cart_item_key, $cart_item ); |
||||||
|
?> |
||||||
|
</td> |
||||||
|
|
||||||
|
<td class="product-subtotal" data-title="<?php esc_attr_e( 'Subtotal', 'woocommerce' ); ?>">
|
||||||
|
<?php |
||||||
|
echo apply_filters( 'woocommerce_cart_item_subtotal', WC()->cart->get_product_subtotal( $_product, $cart_item['quantity'] ), $cart_item, $cart_item_key ); |
||||||
|
?> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
|
||||||
|
<?php |
||||||
|
} |
||||||
|
} |
||||||
|
?> |
||||||
|
|
||||||
|
<?php do_action( 'woocommerce_cart_contents' ); ?> |
||||||
|
|
||||||
|
<?php do_action( 'woocommerce_after_cart_contents' ); ?> |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
|
||||||
|
<div class="row cart-actions"> |
||||||
|
<div class="col-12 order-last order-md-first col-md"> |
||||||
|
|
||||||
|
<?php if ( wc_coupons_enabled() ) { ?> |
||||||
|
<div class="coupon"> |
||||||
|
<label for="coupon_code" class="screen-reader-text"> |
||||||
|
<?php esc_html_e( 'Coupon:', 'woocommerce' ); ?> |
||||||
|
</label> |
||||||
|
<input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="<?php esc_attr_e( 'Coupon code', 'woocommerce' ); ?>" />
|
||||||
|
<button type="submit" class="button<?php echo esc_attr( function_exists( 'wc_wp_theme_get_element_class_name' ) && wc_wp_theme_get_element_class_name( 'button' ) ? ' ' . wc_wp_theme_get_element_class_name( 'button' ) : '' ); ?>" name="apply_coupon" value="<?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?>">
|
||||||
|
<?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?> |
||||||
|
</button> |
||||||
|
<?php do_action( 'woocommerce_cart_coupon' ); ?> |
||||||
|
</div> |
||||||
|
<?php } ?> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div class="col-12 order-first order-md-last col-md-auto"> |
||||||
|
<button type="submit" class="button<?php echo esc_attr( $update_cart_btn_classes ); ?>" name="update_cart" value="<?php esc_attr_e( 'Update cart', 'woocommerce' ); ?>">
|
||||||
|
<?php esc_html_e( 'Update cart', 'woocommerce' ); ?> |
||||||
|
</button> |
||||||
|
|
||||||
|
<?php do_action( 'woocommerce_cart_actions' ); ?> |
||||||
|
|
||||||
|
<?php wp_nonce_field( 'woocommerce-cart', 'woocommerce-cart-nonce' ); ?> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</form> |
||||||
|
|
||||||
|
<div class="cart-totals-section col-12 col-lg-5 col-xl-4 cart-collaterals"> |
||||||
|
<?php woocommerce_cart_totals(); ?> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<?php do_action( 'woocommerce_after_cart_table' ); ?> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="cart-collaterals"> |
||||||
|
|
||||||
|
<?php |
||||||
|
/** |
||||||
|
* Cart collaterals hook. |
||||||
|
* |
||||||
|
* @hooked woocommerce_cross_sell_display |
||||||
|
* @hooked woocommerce_cart_totals - 10 |
||||||
|
*/ |
||||||
|
do_action( 'woocommerce_cart_collaterals' ); |
||||||
|
?> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<?php do_action( 'woocommerce_after_cart' ); ?> |
||||||
@ -0,0 +1,57 @@ |
|||||||
|
<?php |
||||||
|
/** |
||||||
|
* Cross-sells |
||||||
|
* |
||||||
|
* This template can be overridden by copying it to yourtheme/woocommerce/cart/cross-sells.php. |
||||||
|
* |
||||||
|
* HOWEVER, on occasion WooCommerce will need to update template files and you |
||||||
|
* (the theme developer) will need to copy the new files to your theme to |
||||||
|
* maintain compatibility. We try to do this as little as possible, but it does |
||||||
|
* happen. When this occurs the version of the template file will be bumped and |
||||||
|
* the readme will list any important changes. |
||||||
|
* |
||||||
|
* @see https://docs.woocommerce.com/document/template-structure/ |
||||||
|
* @package WooCommerce/Templates |
||||||
|
* @version 4.4.0 |
||||||
|
*/ |
||||||
|
|
||||||
|
defined( 'ABSPATH' ) || exit; |
||||||
|
|
||||||
|
$heading = apply_filters( 'woocommerce_product_cross_sells_products_heading', __( 'You may be interested in…', 'woocommerce' ) ); |
||||||
|
|
||||||
|
if ( $cross_sells ) : ?> |
||||||
|
|
||||||
|
<div class="cross-sells"> |
||||||
|
|
||||||
|
<?php if ( $heading ) : ?> |
||||||
|
<h3 class="title slider-title"><span><?php echo esc_html( $heading ); ?></span></h3>
|
||||||
|
<?php endif; ?> |
||||||
|
|
||||||
|
<?php |
||||||
|
woodmart_enqueue_product_loop_styles( woodmart_get_opt( 'products_hover' ) ); |
||||||
|
|
||||||
|
$slider_args = array( |
||||||
|
'slides_per_view' => apply_filters( 'woodmart_cross_sells_products_per_view', 4 ), |
||||||
|
'hide_pagination_control' => true, |
||||||
|
'hide_prev_next_buttons' => true, |
||||||
|
'img_size' => 'woocommerce_thumbnail', |
||||||
|
'custom_sizes' => apply_filters( 'woodmart_cross_sells_custom_sizes', false ), |
||||||
|
'product_quantity' => woodmart_get_opt( 'product_quantity' ), |
||||||
|
'products_bordered_grid' => woodmart_get_opt( 'products_bordered_grid' ), |
||||||
|
'products_bordered_grid_style' => woodmart_get_opt( 'products_bordered_grid_style' ), |
||||||
|
'products_with_background' => woodmart_get_opt( 'products_with_background' ), |
||||||
|
'products_shadow' => woodmart_get_opt( 'products_shadow' ), |
||||||
|
'products_color_scheme' => woodmart_get_opt( 'products_color_scheme' ), |
||||||
|
); |
||||||
|
|
||||||
|
woodmart_set_loop_prop( 'products_view', 'carousel' ); |
||||||
|
|
||||||
|
echo woodmart_generate_posts_slider( $slider_args, false, $cross_sells ); |
||||||
|
|
||||||
|
?> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<?php endif; |
||||||
|
|
||||||
|
wp_reset_postdata(); |
||||||
@ -0,0 +1,167 @@ |
|||||||
|
<?php |
||||||
|
/** |
||||||
|
* Mini-cart |
||||||
|
* |
||||||
|
* Contains the markup for the mini-cart, used by the cart widget. |
||||||
|
* |
||||||
|
* This template can be overridden by copying it to yourtheme/woocommerce/cart/mini-cart.php. |
||||||
|
* |
||||||
|
* HOWEVER, on occasion WooCommerce will need to update template files and you |
||||||
|
* (the theme developer) will need to copy the new files to your theme to |
||||||
|
* maintain compatibility. We try to do this as little as possible, but it does |
||||||
|
* happen. When this occurs the version of the template file will be bumped and |
||||||
|
* the readme will list any important changes. |
||||||
|
* |
||||||
|
* @see https://docs.woocommerce.com/document/template-structure/ |
||||||
|
* @package WooCommerce\Templates |
||||||
|
* @version 7.9.0 |
||||||
|
*/ |
||||||
|
|
||||||
|
defined( 'ABSPATH' ) || exit; |
||||||
|
|
||||||
|
$items_to_show = apply_filters( 'woodmart_mini_cart_items_to_show', 30 ); |
||||||
|
|
||||||
|
do_action( 'woocommerce_before_mini_cart' ); ?> |
||||||
|
|
||||||
|
<div class="shopping-cart-widget-body wd-scroll"> |
||||||
|
<div class="wd-scroll-content"> |
||||||
|
|
||||||
|
<?php if ( ! WC()->cart->is_empty() ) : ?> |
||||||
|
|
||||||
|
<ul class="cart_list product_list_widget woocommerce-mini-cart <?php echo esc_attr( $args['list_class'] ); ?>">
|
||||||
|
|
||||||
|
<?php |
||||||
|
do_action( 'woocommerce_before_mini_cart_contents' ); |
||||||
|
|
||||||
|
$_i = 0; |
||||||
|
foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) { |
||||||
|
$_i++; |
||||||
|
if( $_i > $items_to_show ) break; |
||||||
|
|
||||||
|
$_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key ); |
||||||
|
$product_id = apply_filters( 'woocommerce_cart_item_product_id', $cart_item['product_id'], $cart_item, $cart_item_key ); |
||||||
|
|
||||||
|
if ( $_product && $_product->exists() && $cart_item['quantity'] > 0 && apply_filters( 'woocommerce_widget_cart_item_visible', true, $cart_item, $cart_item_key ) ) { |
||||||
|
/** |
||||||
|
* This filter is documented in woocommerce/templates/cart/cart.php. |
||||||
|
* |
||||||
|
* @param string $product_name Name of the product in the cart. |
||||||
|
*/ |
||||||
|
$product_name = apply_filters( 'woocommerce_cart_item_name', $_product->get_name(), $cart_item, $cart_item_key ); |
||||||
|
|
||||||
|
$product_price = apply_filters( 'woocommerce_cart_item_price', WC()->cart->get_product_price( $_product ), $cart_item, $cart_item_key ); |
||||||
|
$product_permalink = apply_filters( 'woocommerce_cart_item_permalink', $_product->is_visible() ? $_product->get_permalink( $cart_item ) : '', $cart_item, $cart_item_key ); |
||||||
|
?> |
||||||
|
<li class="woocommerce-mini-cart-item <?php echo esc_attr( apply_filters( 'woocommerce_mini_cart_item_class', 'mini_cart_item', $cart_item, $cart_item_key ) ); ?>" data-key="<?php echo esc_attr( $cart_item_key ); ?>">
|
||||||
|
<a href="<?php echo esc_url( $product_permalink ); ?>" class="cart-item-link wd-fill"><?php esc_html_e('Show', 'woocommerce'); ?></a>
|
||||||
|
<?php |
||||||
|
echo apply_filters( 'woocommerce_cart_item_remove_link', sprintf( |
||||||
|
'<a href="%s" class="remove remove_from_cart_button" aria-label="%s" data-product_id="%s" data-cart_item_key="%s" data-product_sku="%s">×</a>', |
||||||
|
esc_url( wc_get_cart_remove_url( $cart_item_key ) ), |
||||||
|
/* translators: %s is the product name */ |
||||||
|
esc_attr( sprintf( __( 'Remove %s from cart', 'woocommerce' ), wp_strip_all_tags( $product_name ) ) ), |
||||||
|
esc_attr( $product_id ), |
||||||
|
esc_attr( $cart_item_key ), |
||||||
|
esc_attr( $_product->get_sku() ) |
||||||
|
), $cart_item_key ); |
||||||
|
?> |
||||||
|
<?php if ( empty( $product_permalink ) ) : ?> |
||||||
|
<?php echo apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image(), $cart_item, $cart_item_key ); ?> |
||||||
|
<?php else : ?> |
||||||
|
<a href="<?php echo esc_url( $product_permalink ); ?>" class="cart-item-image">
|
||||||
|
<?php echo apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image(), $cart_item, $cart_item_key ); ?> |
||||||
|
</a> |
||||||
|
<?php endif; ?> |
||||||
|
|
||||||
|
<div class="cart-info"> |
||||||
|
<span class="wd-entities-title"> |
||||||
|
<?php echo $product_name; ?> |
||||||
|
</span> |
||||||
|
<?php if ( woodmart_get_opt( 'show_sku_in_mini_cart' ) ) : ?> |
||||||
|
<div class="wd-product-sku"> |
||||||
|
<span class="wd-label"> |
||||||
|
<?php esc_html_e( 'SKU:', 'woodmart' ); ?> |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
<?php if ( $_product->get_sku() ) : ?> |
||||||
|
<?php echo esc_html( $_product->get_sku() ); ?> |
||||||
|
<?php else : ?> |
||||||
|
<?php esc_html_e( 'N/A', 'woocommerce' ); ?> |
||||||
|
<?php endif; ?> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<?php endif; ?> |
||||||
|
<?php |
||||||
|
echo wc_get_formatted_cart_item_data( $cart_item ); |
||||||
|
?> |
||||||
|
|
||||||
|
<?php |
||||||
|
if ( ! $_product->is_sold_individually() && $_product->is_purchasable() && woodmart_get_opt( 'mini_cart_quantity' ) && apply_filters( 'woodmart_show_widget_cart_item_quantity', true, $cart_item_key ) ) { |
||||||
|
woocommerce_quantity_input( |
||||||
|
array( |
||||||
|
'input_value' => $cart_item['quantity'], |
||||||
|
'min_value' => 0, |
||||||
|
'max_value' => $_product->backorders_allowed() ? '' : $_product->get_stock_quantity(), |
||||||
|
), |
||||||
|
$_product |
||||||
|
); |
||||||
|
} |
||||||
|
?> |
||||||
|
|
||||||
|
<?php echo apply_filters( 'woocommerce_widget_cart_item_quantity', '<span class="quantity">' . sprintf( '%s × %s', $cart_item['quantity'], $product_price ) . '</span>', $cart_item, $cart_item_key ); ?> |
||||||
|
</div> |
||||||
|
|
||||||
|
</li> |
||||||
|
<?php |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
do_action( 'woocommerce_mini_cart_contents' ); |
||||||
|
|
||||||
|
?> |
||||||
|
</ul><!-- end product list --> |
||||||
|
|
||||||
|
<?php else : ?> |
||||||
|
|
||||||
|
<div class="wd-empty-mini-cart"> |
||||||
|
<p class="woocommerce-mini-cart__empty-message empty title"><?php esc_html_e( 'No products in the cart.', 'woocommerce' ); ?></p>
|
||||||
|
<?php if ( wc_get_page_id( 'shop' ) > 0 ) : ?> |
||||||
|
<a class="btn btn-size-small btn-color-primary wc-backward" href="<?php echo esc_url( apply_filters( 'woocommerce_return_to_shop_redirect', wc_get_page_permalink( 'shop' ) ) ); ?>">
|
||||||
|
<?php esc_html_e( 'Return To Shop', 'woodmart' ) ?> |
||||||
|
</a> |
||||||
|
<?php endif; ?> |
||||||
|
</div> |
||||||
|
|
||||||
|
<?php endif; ?> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="shopping-cart-widget-footer<?php echo ( WC()->cart->is_empty() ? ' wd-cart-empty' : '' ); ?>">
|
||||||
|
<?php if ( ! WC()->cart->is_empty() ) : ?> |
||||||
|
|
||||||
|
<?php if ( function_exists( 'WC' ) && version_compare( WC()->version, '3.7.0', '<' ) ) : ?> |
||||||
|
<p class="woocommerce-mini-cart__total total"><strong><?php esc_html_e( 'Subtotal', 'woocommerce' ); ?>:</strong> <?php echo WC()->cart->get_cart_subtotal(); ?></p>
|
||||||
|
<?php else : ?> |
||||||
|
<p class="woocommerce-mini-cart__total total"> |
||||||
|
<?php |
||||||
|
/** |
||||||
|
* Woocommerce_widget_shopping_cart_total hook. |
||||||
|
* |
||||||
|
* @hooked woocommerce_widget_shopping_cart_subtotal - 10 |
||||||
|
*/ |
||||||
|
do_action( 'woocommerce_widget_shopping_cart_total' ); |
||||||
|
?> |
||||||
|
</p> |
||||||
|
<?php endif; ?> |
||||||
|
|
||||||
|
<?php do_action( 'woocommerce_widget_shopping_cart_before_buttons' ); ?> |
||||||
|
|
||||||
|
<p class="woocommerce-mini-cart__buttons buttons"><?php do_action( 'woocommerce_widget_shopping_cart_buttons' ); ?></p>
|
||||||
|
|
||||||
|
<?php do_action( 'woocommerce_widget_shopping_cart_after_buttons' ); ?> |
||||||
|
|
||||||
|
<?php endif; ?> |
||||||
|
|
||||||
|
<?php do_action( 'woocommerce_after_mini_cart' ); ?> |
||||||
|
</div> |
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue