File: /home/fliyingp/public_html/wp-content/themes/ocean-theme/single-service.php
<?php
function enqueue_services_files() {
wp_enqueue_style('service-style', get_template_directory_uri() . '/service.css', array(), null, 'all');
wp_enqueue_style('hero-style', get_template_directory_uri() . '/template-parts/blocks/hero/style.css', array(), null, 'all');
wp_enqueue_style('about-style', get_template_directory_uri() . '/template-parts/blocks/about/style.css', array(), null, 'all');
wp_enqueue_script('about-js', get_template_directory_uri() . '/template-parts/blocks/about/script.js', array(), null, true);
wp_enqueue_style('consultation-style', get_template_directory_uri() . '/template-parts/blocks/consultation/style.css', array(), null, 'all');
wp_enqueue_script('consultation-js', get_template_directory_uri() . '/template-parts/blocks/consultation/script.js', array(), null, true);
wp_enqueue_style('projects-style', get_template_directory_uri() . '/template-parts/blocks/done-projects/style.css', array(), null, 'all');
};
add_action('wp_enqueue_scripts', 'enqueue_services_files');
?>
<?php get_header(); ?>
<div class="reveal-wrapper">
<main class="reveal-content">
<section class='hero'>
<div class='hero__content'>
<div class='container'>
<div class='hero__head'>
<div class='ocean-breadcrumbs'>
<a class='ocean-breadcrumbs__link' href="#" data-go-back>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.69594 12.0396L2.65234 7.99995L6.70706 3.94922L7.55778 4.79475L4.96151 7.39367H13.3606V8.60067H4.96151L7.54666 11.1858L6.69594 12.0396Z" fill="white"/>
</svg>
</a>
<div class='ocean-breadcrumbs__list'>
<a href='/'>
головна
</a>
<span class="separator">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.13392 12.0394L10.1847 7.98871L6.13392 3.93799L5.2832 4.79982L8.47209 7.98871L5.2832 11.1776L6.13392 12.0394Z" fill="#F0F2F5"/>
</svg>
</span>
<a href='/services/'>
послуги
</a>
<span class="separator current">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.13392 12.0394L10.1847 7.98871L6.13392 3.93799L5.2832 4.79982L8.47209 7.98871L5.2832 11.1776L6.13392 12.0394Z" fill="#F0F2F5"/>
</svg>
</span>
<span class="current">
<?php the_title(); ?>
</span>
</div>
</div>
<?php if(have_rows('social_media_list', 'option')) : ?>
<div class='sticky-social-mob'>
<?php while(have_rows('social_media_list', 'option')) : the_row(); ?>
<a href='<?php echo get_sub_field('link') ?>' class='sticky-social__item'><img src='<?php echo get_sub_field('image') ?>'></a>
<?php endwhile; ?>
</div>
<?php endif; ?>
<h1 class='hero__title'><?php echo get_field('service_title') ?></h1>
</div>
</div>
<!-- <div class='hero__body'>
<?php
$hero_video = get_field('service_video');
$hero_img = get_field('service_hero_img');
?>
<?php if ($hero_video) : ?>
<video class="hero__video" autoplay muted loop playsinline>
<source src="<?php echo esc_url($hero_video); ?>" type="video/mp4">
Ваш браузер не підтримує відео.
</video>
<?php elseif ($hero_img) : ?>
<img src="<?php echo esc_url($hero_img['url']); ?>"
alt="<?php echo esc_attr($hero_img['alt']); ?>">
<?php else : ?>
<img src="<?php echo get_the_post_thumbnail_url(get_the_ID(), 'full'); ?>" alt="">
<?php endif; ?>
</div> -->
<div class='hero__body'>
<?php
$hero_img = get_field('service_hero_img');
?>
<img src="<?php echo esc_url($hero_img['url']); ?>"
alt="<?php echo esc_attr($hero_img['alt']); ?>">
</div>
</section>
<section class='about'>
<div class='container'>
<div class='about__content'>
<div class='about__left'>
<div class='about__mini-title mini-title'>
<div class='circle'></div>
<h2><?php echo get_field('about_mini_title') ?></h2>
</div>
<?php
// Получаем поля
$video_file = get_field('about_video_file'); // локальный mp4
$video_url = get_field('about_video_url'); // YouTube ссылка
$video_poster = get_field('about_video_poster'); // постер для превью
// Проверка YouTube ссылки
$is_youtube = $video_url && (strpos($video_url, 'youtube.com') !== false || strpos($video_url, 'youtu.be') !== false);
// Есть ли видео
$has_video = $video_file || $is_youtube;
?>
<div class="about__video-wrapper d-l">
<?php if ($video_file && !$is_youtube): ?>
<!-- Локальное видео -->
<a href="<?php echo get_field('about_video_file') ?>" data-fancybox="about-video" class="about__video-lightbox" style="display: none;"></a>
<video class="about__video" muted loop playsinline
<?php if ($video_poster): ?> poster="<?php echo esc_url($video_poster); ?>"<?php endif; ?>>
<source src="<?php echo esc_url($video_file); ?>" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class='about__play-btn play'>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M8 5V19L19 12L8 5Z" fill="#fff"/>
</svg>
</div>
<div class='about__video-overlay play'></div>
<?php elseif ($is_youtube): ?>
<!-- YouTube через Fancybox -->
<a href="<?php echo esc_url($video_url); ?>"
data-fancybox="about-video-desktop"
data-type="iframe"
class="about__video-lightbox" style="display: none;"></a>
<div class="about__video-preview" style="background-image: url('<?php
if ($video_poster) {
echo esc_url($video_poster);
} else {
preg_match('/(?:v=|youtu\.be\/)([a-zA-Z0-9_-]+)/', $video_url, $matches);
$youtube_id = $matches[1] ?? '';
echo 'https://img.youtube.com/vi/' . $youtube_id . '/hqdefault.jpg';
}
?>');"></div>
<div class='about__play-btn play'>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M8 5V19L19 12L8 5Z" fill="#fff"/>
</svg>
</div>
<div class='about__video-overlay play'></div>
<?php else: ?>
<div class="about__video-preview">
<div style="padding:50px;text-align:center;color:#fff;font-size:18px;">Видео не загружено</div>
</div>
<?php endif; ?>
</div>
</div>
<div class='about__right'>
<div class='about__main-text'>
<?php echo get_field('about_text') ?>
</div>
<div class='about__sub-text-wrapper'>
<?php if (have_rows('about_sub_text_list')) : ?>
<?php while(have_rows('about_sub_text_list')) : the_row();?>
<?php if (get_sub_field('type') == 'text') : ?>
<div class='about__sub-text'>
<?php echo get_sub_field('text') ?>
</div>
<?php else : ?>
<a class='about__sub-link' href='<?php echo get_sub_field('link')['url'] ?>'>
<?php echo get_sub_field('link')['title'] ?>
<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.4124 8.78394L13.4644 8.83557C13.9671 9.36215 13.9745 10.1916 13.4812 10.7271L13.4303 10.7794L10.4596 13.6853L9.67297 12.8811L12.2833 10.3275H3.3573C2.13955 10.3274 1.1524 9.34031 1.15234 8.12256V4.51941C1.15244 3.30169 2.13958 2.31454 3.3573 2.31445H5.78198V3.43945H3.3573C2.7609 3.43954 2.27744 3.92301 2.27734 4.51941V8.12256C2.2774 8.719 2.76087 9.20242 3.3573 9.20251H12.2167L9.67993 6.80859L10.4523 5.99048L13.4124 8.78394Z" fill="#F0F2F5"/>
</svg>
</a>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
<div class="about__video-wrapper d-s">
<?php if ($video_file && !$is_youtube): ?>
<!-- Локальное видео -->
<a href="<?php echo get_field('about_video_file') ?>" data-fancybox="about-video" class="about__video-lightbox" style="display: none;"></a>
<video class="about__video" muted loop playsinline
<?php if ($video_poster): ?> poster="<?php echo esc_url($video_poster); ?>"<?php endif; ?>>
<source src="<?php echo esc_url($video_file); ?>" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class='about__play-btn play'>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M8 5V19L19 12L8 5Z" fill="#fff"/>
</svg>
</div>
<div class='about__video-overlay play'></div>
<?php elseif ($is_youtube): ?>
<!-- YouTube через Fancybox -->
<a href="<?php echo esc_url($video_url); ?>"
data-fancybox="about-video-mobil"
data-type="iframe"
class="about__video-lightbox" style="display: none;"></a>
<div class="about__video-preview" style="background-image: url('<?php
if ($video_poster) {
echo esc_url($video_poster);
} else {
preg_match('/(?:v=|youtu\.be\/)([a-zA-Z0-9_-]+)/', $video_url, $matches);
$youtube_id = $matches[1] ?? '';
echo 'https://img.youtube.com/vi/' . $youtube_id . '/hqdefault.jpg';
}
?>');"></div>
<div class='about__play-btn play'>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M8 5V19L19 12L8 5Z" fill="#fff"/>
</svg>
</div>
<div class='about__video-overlay play'></div>
<?php else: ?>
<div class="about__video-preview">
<div style="padding:50px;text-align:center;color:#fff;font-size:18px;">Видео не загружено</div>
</div>
<?php endif; ?>
</div>
</div>
</div>
</div>
</section>
<section class='our-services-block'>
<div class='our-services-block__content'>
<div class='our-services-block__head'>
<div class='container'>
<div class='our-services-block__mini-title mini-title'>
<div class='circle'></div>
<h2><?php echo get_field('our_services_mini_title') ?></h2>
</div>
<div class='our-services-block__title'>
<?php echo get_field('our_services_title') ?>
</div>
</div>
</div>
<div class='our-services-block__body'>
<?php $counter = 1; ?>
<?php while(have_rows('our_services_list')) : the_row();?>
<div class='container'>
<div class='our-services-block__item'>
<img src='<?php echo get_sub_field('image') ?>'>
<div class='our-services-block__item-info'>
<p class='our-services-block__digits'><?php echo str_pad($counter, 3, '0', STR_PAD_LEFT); ?></p>
<div class='our-services-block__data'>
<div class='our-services-block__data-top'>
<p><?php echo get_sub_field('title') ?></p>
<div class='our-services-block__button'>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.3068 8.83633L14.3623 8.89141C14.8986 9.4531 14.9065 10.3378 14.3803 10.909L14.326 10.9648L11.1572 14.0645L10.3182 13.2066L13.1025 10.4828H3.58145C2.28252 10.4827 1.22955 9.4298 1.22949 8.13086V4.2875C1.22959 2.9886 2.28254 1.93564 3.58145 1.93555H6.16777V3.13555H3.58145C2.94528 3.13564 2.42959 3.65134 2.42949 4.2875V8.13086C2.42955 8.76706 2.94526 9.28271 3.58145 9.28281H13.0314L10.3256 6.7293L11.1494 5.85664L14.3068 8.83633Z" fill="white"/>
</svg>
</div>
</div>
<div class='our-services-block__data-desc'><?php echo get_sub_field('description') ?></div>
</div>
</div>
</div>
</div>
<?php $counter++; ?>
<?php endwhile; ?>
</div>
</div>
</div>
</section>
<?php
$args = array(
'post_type' => 'case',
'posts_per_page' => 8,
'post_status' => 'publish',
'orderby' => 'menu_order',
'order' => 'ASC'
);
$query = new WP_Query($args);
$counter = 1;
?>
<section class='done-projects'>
<div class='container'>
<div class='done-projects__content'>
<div class='done-projects__head'>
<div class='done-projects__mini-title mini-title'>
<div class='circle'></div>
<h2><?php echo get_field('done_projects_mini_title') ?></h2>
</div>
<div class='done-projects__top-part'>
<div class='done-projects__title'>
<?php echo get_field('done_projects_title') ?>
</div>
<a class='done-projects__button' href='/cases/'>
<img src='<?php echo get_field('done_projects_link_image') ?>' class='done-projects__button-image' alt='link image'>
<p>Всі проекти</p>
<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.4124 8.78394L13.4644 8.83557C13.9671 9.36215 13.9745 10.1916 13.4812 10.7271L13.4303 10.7794L10.4596 13.6853L9.67297 12.8811L12.2833 10.3275H3.3573C2.13955 10.3274 1.1524 9.34031 1.15234 8.12256V4.51941C1.15244 3.30169 2.13958 2.31454 3.3573 2.31445H5.78198V3.43945H3.3573C2.7609 3.43954 2.27744 3.92301 2.27734 4.51941V8.12256C2.2774 8.719 2.76087 9.20242 3.3573 9.20251H12.2167L9.67993 6.80859L10.4523 5.99048L13.4124 8.78394Z" fill="#F0F2F5"/>
</svg>
</a>
</div>
</div>
<div class='done-projects__body'>
<div class="swiper done-projects__swiper">
<div class="swiper-wrapper">
<?php while ($query->have_posts()) : $query->the_post(); ?>
<div class="swiper-slide">
<a class="done-projects__item" href='<?php the_permalink(); ?>'>
<div class='done-projects__item-body'>
<img class='done-projects__item-image' src="<?php echo get_the_post_thumbnail_url(get_the_ID(), 'full'); ?>" alt="project image">
<div class='done-projects__overlay'></div>
<div class='done-projects__texting'>
<h3><?php the_title(); ?></h3>
<p><?php echo wp_trim_words(get_the_excerpt(), 20, '...'); ?></p>
</div>
</div>
<div class='done-projects__item-footer'>
<div class='done-projects__item-terms'>
<div class='done-projects__result-row-single-tags-city tag-item'>
<p><?php
$locations = get_the_terms($post, 'location');
if ($locations && !is_wp_error($locations)) {
echo esc_html($locations[0]->name);
}
?></p>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5188 7.73154L12.5674 7.77974C13.0366 8.27121 13.0435 9.04536 12.5831 9.54512L12.5356 9.59399L9.76294 12.3062L9.02876 11.5556L11.4651 9.17222H3.13413C1.99757 9.17213 1.07622 8.25083 1.07617 7.11426V3.75132C1.07626 2.61478 1.99759 1.69345 3.13413 1.69336H5.39717V2.74336H3.13413C2.57749 2.74345 2.12626 3.19468 2.12617 3.75132V7.11426C2.12622 7.67093 2.57747 8.12213 3.13413 8.12222H11.4029L9.03525 5.88789L9.7561 5.12432L12.5188 7.73154Z" fill="#001C36"/>
</svg>
</div>
<div class='done-projects__result-row-single-tags-type tag-item'>
<p><?php
$types = get_the_terms($post, 'service-type');
if ($types && !is_wp_error($types)) {
echo esc_html($types[0]->name);
}
?></p>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5188 7.73154L12.5674 7.77974C13.0366 8.27121 13.0435 9.04536 12.5831 9.54512L12.5356 9.59399L9.76294 12.3062L9.02876 11.5556L11.4651 9.17222H3.13413C1.99757 9.17213 1.07622 8.25083 1.07617 7.11426V3.75132C1.07626 2.61478 1.99759 1.69345 3.13413 1.69336H5.39717V2.74336H3.13413C2.57749 2.74345 2.12626 3.19468 2.12617 3.75132V7.11426C2.12622 7.67093 2.57747 8.12213 3.13413 8.12222H11.4029L9.03525 5.88789L9.7561 5.12432L12.5188 7.73154Z" fill="#001C36"/>
</svg>
</div>
</div>
<p class='done-projects__year'>
<?php $year = get_the_terms($post, 'years');
if ($year && !is_wp_error($year)) {
echo esc_html($year[0]->name);
}
?>
</p>
</div>
</div>
</a>
<?php endwhile; wp_reset_postdata(); ?>
</div>
<div class='done-projects__pagination'>
<div class='done-projects__pagination-buttons'>
<div class="done-projects__prev">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.70728 3.9829L7.55802 4.8366L4.9729 7.42179L13.334 7.42179V8.62879H4.9729L7.56913 11.2277L6.7184 12.0732L2.6637 8.02251L6.70728 3.9829Z" fill="#F0F2F5"/>
</svg>
</div>
<div class="done-projects__next">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.29272 12.0171L8.44198 11.1634L11.0271 8.57821H2.66602V7.37121H11.0271L8.43087 4.77229L9.2816 3.92676L13.3363 7.97749L9.29272 12.0171Z" fill="#F0F2F5"/>
</svg>
</div>
</div>
<div class="done-projects__bullets swiper-pagination"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class='consultation'>
<div class='container'>
<div class='consultation__content'>
<div class='consultation__head'>
<div class='consultation__mini-title mini-title'>
<div class='circle'></div>
<h2>контакти</h2>
</div>
<div class='consultation__title anim-title'>
<p>замовити <strong>консультацію</strong></p>
</div>
</div>
<div class='consultation__body'>
<div class='consultation__contacts'>
<div class='consultation__top-part'>
<?php if (have_rows('phone_numbers', 'options')) : ?>
<div class='consultation__phone'>
<?php while (have_rows('phone_numbers', 'options')) : the_row(); ?>
<a href='tel:<?php echo get_sub_field('number') ?>' class='consultation__phone-link'><?php echo get_sub_field('number') ?></a>
<?php break; ?>
<?php endwhile; ?>
</div>
<?php endif; ?>
<div class='consultation__messengers-list'>
<?php if (get_field('telegram_link', 'options')) : ?>
<a href='<?php echo get_field('telegram_link', 'options') ?>'>
<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.4124 8.78394L13.4644 8.83557C13.9671 9.36215 13.9745 10.1916 13.4812 10.7271L13.4303 10.7794L10.4596 13.6853L9.67297 12.8811L12.2833 10.3275H3.3573C2.13955 10.3274 1.1524 9.34031 1.15234 8.12256V4.51941C1.15244 3.30169 2.13958 2.31454 3.3573 2.31445H5.78198V3.43945H3.3573C2.7609 3.43954 2.27744 3.92301 2.27734 4.51941V8.12256C2.2774 8.719 2.76087 9.20242 3.3573 9.20251H12.2167L9.67993 6.80859L10.4523 5.99048L13.4124 8.78394Z" fill="#001C36"/>
</svg>
<p>Telegram</p>
</a>
<?php endif; ?>
<?php if (get_field('viber_link', 'options')) : ?>
<a href='<?php echo get_field('viber_link', 'options') ?>'>
<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.4124 8.78394L13.4644 8.83557C13.9671 9.36215 13.9745 10.1916 13.4812 10.7271L13.4303 10.7794L10.4596 13.6853L9.67297 12.8811L12.2833 10.3275H3.3573C2.13955 10.3274 1.1524 9.34031 1.15234 8.12256V4.51941C1.15244 3.30169 2.13958 2.31454 3.3573 2.31445H5.78198V3.43945H3.3573C2.7609 3.43954 2.27744 3.92301 2.27734 4.51941V8.12256C2.2774 8.719 2.76087 9.20242 3.3573 9.20251H12.2167L9.67993 6.80859L10.4523 5.99048L13.4124 8.78394Z" fill="#001C36"/>
</svg>
<p>Viber</p>
</a>
<?php endif; ?>
<?php if (get_field('whatsapp_link', 'options')) : ?>
<a href='<?php echo get_field('whatsapp_link', 'options') ?>'>
<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.4124 8.78394L13.4644 8.83557C13.9671 9.36215 13.9745 10.1916 13.4812 10.7271L13.4303 10.7794L10.4596 13.6853L9.67297 12.8811L12.2833 10.3275H3.3573C2.13955 10.3274 1.1524 9.34031 1.15234 8.12256V4.51941C1.15244 3.30169 2.13958 2.31454 3.3573 2.31445H5.78198V3.43945H3.3573C2.7609 3.43954 2.27744 3.92301 2.27734 4.51941V8.12256C2.2774 8.719 2.76087 9.20242 3.3573 9.20251H12.2167L9.67993 6.80859L10.4523 5.99048L13.4124 8.78394Z" fill="#001C36"/>
</svg>
<p>WhatsApp</p>
</a>
<?php endif; ?>
</div>
</div>
<a class='consultation__footer' href='/contacts/'>
<img src='<?php echo site_url() ?>/wp-content/uploads/2025/06/13.jpeg' class='consultation__footer-img'>
<p class='consultation__footer-title'>Контакти</p>
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.4617 13.7545L21.5449 13.8371C22.3493 14.6796 22.3612 16.0067 21.5719 16.8635L21.4904 16.9473L16.7373 21.5967L15.4787 20.31L19.6553 16.2242H5.37363C3.42524 16.2241 1.84579 14.6447 1.8457 12.6963V6.93125C1.84585 4.98289 3.42527 3.40347 5.37363 3.40332H9.25313V5.20332H5.37363C4.41939 5.20347 3.64585 5.97701 3.6457 6.93125V12.6963C3.64579 13.6506 4.41935 14.4241 5.37363 14.4242H19.5486L15.4898 10.5939L16.7256 9.28496L21.4617 13.7545Z" fill="#001C36"/>
</svg>
</a>
</div>
<div class='consultation__form-container'>
<?php echo do_shortcode('[contact-form-7 id="7dadd20" title="Консультація"]') ?>
</div>
</div>
</div>
</div>
</section>
<?php the_content(); ?>
</main>
<?php get_footer(); ?>