214 lines
8.9 KiB
PHP
214 lines
8.9 KiB
PHP
<?php
|
||
/**
|
||
* Блок с клубными картами
|
||
*/
|
||
|
||
$block_id = 'club-cards-' . $block['id'];
|
||
$class_name = 'club-cards-block';
|
||
if (!empty($block['className'])) {
|
||
$class_name .= ' ' . $block['className'];
|
||
}
|
||
if (!empty($block['align'])) {
|
||
$class_name .= ' align' . $block['align'];
|
||
}
|
||
|
||
if (!function_exists('get_club_cards_for_current_language')) {
|
||
function get_club_cards_for_current_language()
|
||
{
|
||
$current_lang = pll_current_language();
|
||
|
||
$args = array(
|
||
'post_type' => 'club-card',
|
||
'posts_per_page' => -1,
|
||
'lang' => $current_lang,
|
||
'post_status' => 'publish',
|
||
'sort' => 'menu_order',
|
||
'order' => 'ASC',
|
||
);
|
||
|
||
return get_posts($args);
|
||
}
|
||
}
|
||
|
||
$cards = get_club_cards_for_current_language();
|
||
$heading = get_field('heading', $block['id']);
|
||
|
||
$room = get_current_room();
|
||
|
||
if ($room === 'fitness') {
|
||
|
||
} else {
|
||
$section_classes = 'bg-cover bg-center bg-no-repeat';
|
||
$bg_image = get_template_directory_uri() . '/assets/images/hero-bg.png';
|
||
$style_attr = 'style="background-image: url(' . esc_url($bg_image) . ')"';
|
||
}
|
||
|
||
if (!function_exists('render_club_card')){
|
||
function render_club_card($card) {
|
||
$card_attribute = get_field('attr', $card->ID);
|
||
$card_image = get_field('image', $card->ID);
|
||
$card_heading = get_field('heading', $card->ID);
|
||
$card_description = get_field('description', $card->ID);
|
||
$card_price = get_field('price', $card->ID);
|
||
|
||
$card_prices = [];
|
||
if (have_rows('card_prices', $card->ID)) {
|
||
while (have_rows('card_prices', $card->ID)) {
|
||
the_row();
|
||
$periods = ['1_month', '3_month', '6_month', '12_month'];
|
||
foreach ($periods as $period) {
|
||
if (have_rows($period)) {
|
||
while (have_rows($period)) {
|
||
the_row();
|
||
$card_prices[$period] = [
|
||
'full' => get_sub_field('full'),
|
||
'day' => get_sub_field('day')
|
||
];
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
$card_time = [];
|
||
if (have_rows('time', $card->ID)) {
|
||
while (have_rows('time', $card->ID)) {
|
||
the_row();
|
||
$card_time[] = [
|
||
'normal_days' => get_sub_field('normal_days'),
|
||
'vacation_days' => get_sub_field('vacation_days')
|
||
];
|
||
}
|
||
}
|
||
?>
|
||
|
||
<div class="border border-transparent hover:border-[#e21e24] transition max-[1300px]:h-auto max-[1050px]:p-[20px] bg-[#ffffff] rounded-[12px] p-[28px] pb-[16px] h-[258px] shadow-[0_2px_32px_0_rgba(16,_15,_15,_0.03)]">
|
||
<div class="flex flex-col h-full relative">
|
||
<?php if ($card_attribute): ?>
|
||
<div class="max-[768px]:top-[-29px] absolute top-[-14px] right-[-14px] px-[12px] py-[4px] rounded-[32px] bg-[linear-gradient(90deg,_#ffd65a_39.42%,_#ffe595_92.9%)]">
|
||
<span class="font-[600] text-[14px] leading-[125%]">
|
||
<?php echo($card_attribute); ?>
|
||
</span>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<div class="flex gap-[16px] items-center">
|
||
<?php if ($card_image): ?>
|
||
<div class="overflow-hidden w-[32px] h-[32px]">
|
||
<img src="<?php echo esc_url($card_image['url']); ?>"
|
||
alt="<?php echo esc_attr($card_image['alt']); ?>"
|
||
class="w-full h-full object-cover"/>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<?php if ($card_heading): ?>
|
||
<h3 class="max-[768px]:text-[20px] text-[24px] font-[600] leading-[125%]">
|
||
<?php echo esc_html($card_heading); ?>
|
||
</h3>
|
||
<?php endif; ?>
|
||
</div>
|
||
|
||
<?php if ($card_description): ?>
|
||
<div class="max-[768px]:min-h-[70px] min-h-[47px] text-[16px] leading-[145%] font-[500] mt-[16px]">
|
||
<?php echo wp_kses_post($card_description); ?>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<div class="justify-end flex-row-reverse max-[1100px]:mt-[16px] flex mt-auto pt-[16px] border-t border-t-[#f1f1f1] items-center gap-[16px] flex-wrap">
|
||
<?php if ($card_price): ?>
|
||
<div class="flex items-center text-[20px] font-[600] leading-[125%]">
|
||
от
|
||
<div class="rounded-[32px] px-[12px] h-[36px] flex items-center bg-[linear-gradient(90deg,_rgba(43,_44,_53,_0.06)_39.42%,_rgba(110,_121,_150,_0.06)_92.9%)]">
|
||
<span class="max-[768px]:text-[20px] bg-[linear-gradient(90deg,_#2b2c35_67.31%,_#4f5870_92.9%)] text-[24px] flex items-center justify-center font-[600] bg-clip-text text-transparent">
|
||
<?php echo esc_html($card_price); ?> ₽
|
||
</span>
|
||
</div>
|
||
в день
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<div class="max-[1300px]:w-full">
|
||
<button
|
||
data-modal="club-card"
|
||
data-card-id="<?php echo $card->ID; ?>"
|
||
data-card-title="<?php echo esc_attr($card_heading); ?>"
|
||
data-card-prices='<?php echo esc_attr(json_encode($card_prices)); ?>'
|
||
data-card-time='<?php echo esc_attr(json_encode($card_time));?>'
|
||
data-card-attr='<?php echo esc_attr($card_attribute); ?>'
|
||
class="max-[1300px]:w-full max-[768px]:h-[53px] max-[768px]:text-[16px] red-gradient-hover cursor-pointer flex text-[#f8f8f8] text-[18px] text-[#fff] font-[600] justify-center h-[59px] w-[160px] rounded-[90px] flex items-center">
|
||
<?php echo 'Оформить' ?>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<?php
|
||
}
|
||
}
|
||
|
||
|
||
?>
|
||
|
||
<section data-scroll-section="prices" id="<?php echo esc_attr($block_id); ?>"
|
||
class="max-[768px]:py-[45px] py-[90px] <?php echo esc_attr($section_classes); ?>" <?php echo $style_attr; ?>>
|
||
<div class="container mx-auto">
|
||
<?php if ($cards): ?>
|
||
<!-- Заголовок для главной страницы -->
|
||
<?php if (is_front_page() && $heading): ?>
|
||
<div class="max-[1100px]:mt-0 flex flex-col gap-[16px] max-[768px]:[&>img]:w-[196px] mt-[28px] ">
|
||
<h2 class="max-[1050px]:text-[36px] max-[768px]:text-[24px] dark:text-[#fff] text-[40px] leading-[120%] font-[500]">
|
||
<?php echo esc_html($heading); ?>
|
||
</h2>
|
||
<?php display_icon(get_current_room() === 'gym' ? 'dark_logo_name' : 'light_logo_name'); ?>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
|
||
<div class="min-[768px]:block hidden mt-[24px]">
|
||
<div class="max-[1100px]:grid-cols-2 grid grid-cols-3 gap-[24px]">
|
||
<?php foreach ($cards as $card): ?>
|
||
<?php render_club_card($card); ?>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="max-[767px]:block hidden mt-[24px] px-[24px] mx-[-24px]">
|
||
<div class="!mx-[-24px] !px-[24px] swiper club-cards-swiper max-[768px]:!pt-[8px] max-[768px]:!mt-[-8px]">
|
||
<div class="swiper-wrapper">
|
||
<?php foreach ($cards as $card): ?>
|
||
<div class="swiper-slide">
|
||
<?php render_club_card($card); ?>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<div class="swiper-scrollbar [&_.swiper-scrollbar-drag]:dark:!bg-[#989597] !static !mx-auto !cursor-grab container mt-[24px] !w-full !p-0"></div>
|
||
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
</div>
|
||
</section>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
const clubCardsSwiper = new Swiper('.club-cards-swiper', {
|
||
slidesPerView: 1.2,
|
||
spaceBetween: 16,
|
||
grabCursor: true,
|
||
breakpoints: {
|
||
480: {
|
||
slidesPerView: 1.3,
|
||
},
|
||
640: {
|
||
slidesPerView: 1.5,
|
||
}
|
||
},
|
||
scrollbar: {
|
||
el: '.swiper-scrollbar',
|
||
draggable: true,
|
||
},
|
||
});
|
||
});
|
||
</script>
|