/home/bdqbpbxa/demo-subdomains/paytech.goodface.com.ua/wp-content/themes/paytech/header.php
<?php
$template_directory = get_template_directory_uri();
$srcset = 'srcset="' . $template_directory . '/assets/images/lazyload.png"';
$products_posts = get_posts([
'numberposts' => -1,
'post_type' => 'products',
]);
$services_posts = get_posts([
'numberposts' => -1,
'post_type' => 'services',
]);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="canonical" href="<?php echo get_the_permalink(); ?>">
<!-- Mobile -->
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="google-site-verification" content="SAQ-kCwfkPOlv5rrrLWJ6BVfBgAmRFD4ijzn_6ywaNg" />
<title>
<?php echo wp_get_document_title(); ?>
</title>
<link rel="preload" href="<?php echo $template_directory;?>/assets/fonts/rotundaBold/webFonts/RotundaBold/font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="<?php echo $template_directory;?>/assets/fonts/rotundaMedium/webFonts/RotundaMedium/font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="<?php echo $template_directory;?>/assets/fonts/rotundaRegular/webFonts/RotundaRegular/font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<?php wp_head(); ?>
</head>
<body>
<?php
if (!_bot_detected() && !isCurrentPageVisited()) :
?>
<div class="preloader -visible">
<div class="preloader-img" id="preloader-img">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<script src="<?php echo $template_directory; ?>/assets/js/lib/anime.min.js"></script>
<script>
const staggerVisualizerEl = document.getElementById('preloader-img');
const grid = [11, 11];
const col = grid[0];
const row = grid[1];
let el = staggerVisualizerEl.children;
let staggersAnimation = createAnimation();
function createAnimation() {
return anime({
targets: el,
loop: true,
scale: [{
value: 1.5,
easing: 'easeInQuad',
duration: 1000,
},
{
value: 1,
easing: 'easeInQuad',
duration: 1000,
},
],
delay: anime.stagger(100, {
grid: [col, row],
from: 'center'
})
});
}
function startAnimation() {
if (!staggersAnimation) {
staggersAnimation = createAnimation();
}
staggersAnimation.play();
}
function stopAnimation() {
if (staggersAnimation) {
staggersAnimation.pause();
staggersAnimation = null;
}
}
</script>
</div>
<style>
.preloader {
position: fixed;
z-index: 9999999;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background: #ffffff;
overflow: hidden;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s;
}
.preloader.-visible {
opacity: 1;
pointer-events: auto;
}
.preloader-img {
display: grid;
grid-template-columns: repeat(11, 1fr);
gap: 6px;
width: 160px;
aspect-ratio: 1/1;
}
.preloader-img div {
border-radius: 50%;
background: #512CCC;
}
</style>
<?php
endif;
?>
<script>
// Allow animations if JS support is enabled
document.body.classList.add('-allow-animations');
// Don't show preloader again if the page was visited
let preloader = document.querySelector('.preloader');
// let fullPageUrl = window.location.href;
// let visitedPages = window.localStorage.getItem('visited-pages');
// let visitedPagesArr = visitedPages ? visitedPages.split(' ') : '';
// let isPreloaderLoaded = visitedPagesArr.includes(fullPageUrl);
// if (preloader && isPreloaderLoaded) {
// preloader.remove();
// } else if (preloader) {
// preloader.classList.add('-visible');
// }
</script>
<?php
$header = get_field('header', 'option');
?>
<header class="header <?php if (!is_front_page() && !is_singular(['position', 'products']) && !is_404()) echo '-light'; ?>">
<div class="container -bigger">
<div class="header__wrapper">
<a href="<?php echo get_home_url(); ?>" class="logo">
<?php if (!is_front_page() && !is_singular(['position', 'products']) && !is_404()) : ?>
<video src="<?php echo $template_directory; ?>/assets/images/animated-logo/color-on-white.mp4" muted playsinline autoplay preload loop></video>
<?php else : ?>
<video src="<?php echo $template_directory; ?>/assets/images/animated-logo/white-on-dark.mp4" muted playsinline autoplay preload loop></video>
<?php endif; ?>
</a>
<div class="header__right -hidden">
<div class="menu-open text-4 mob-text-3">
<?php
if (!wp_is_mobile()) {
echo $header['more_menu']['title'];
} else {
echo $header['mobile_menu_title'];
}
?>
<span class="icon">
<div><span></span><span></span></div>
<div><span></span><span></span></div>
</span>
</div>
<?php
$button = get_link_group_field($header['button']);
if ($button) :
?>
<a href="<?php echo $button['url']; ?>" <?php echo $button['target']; ?> class="default-button -smaller">
<?php echo $button['title']; ?>
</a>
<?php
endif;
?>
</div>
<?php
if (!wp_is_mobile()) :
?>
<div class="header__menu" data-custom-lazyload-trigger>
<?php
if ($header['products']['title']) :
?>
<div class="header__menu-item header-dropdown">
<span class="visible header-dropdown__visible text-4 mob-text-4"><?php echo $header['products']['title']; ?></span>
<div class="header-dropdown__hidden -products">
<div class="header-dropdown__inner">
<div class="triangle"></div>
<div class="col header-dropdown__menu-col">
<?php
foreach($products_posts as $post) :
$preview = get_field('preview', $post->ID);
$title = $preview['title'] ? $preview['title'] : $post->post_title;
$subtitle = $preview['description'];
?>
<a href="<?php echo get_the_permalink($post->ID); ?>" class="link" data-active-color="<?php echo $preview['product_color'] ?>">
<p class="title text-3 -medium">
<span class="img" style="background-color: <?php echo $preview['product_color'] ?>">
<img class="-lazyload" <?php echo $srcset; ?> src="<?php echo $template_directory; ?>/assets/images/icons/product-star.svg" alt="">
</span>
<?php echo $title; ?>
</p>
<?php
if ($subtitle) :
?>
<p class="text text-4 -regular">
<?php echo $subtitle; ?>
</p>
<?php
endif;
?>
</a>
<?php
endforeach;
?>
</div>
<div class="col header-dropdown__preview-col">
<?php
foreach($products_posts as $post) :
$preview = get_field('preview', $post->ID);
?>
<div class="img"><img class="-lazyload" <?php echo $srcset; ?> src="<?php echo $preview['preview_for_menu_in_header']['url']; ?>" alt="<?php echo $preview['preview_for_menu_in_header']['alt']; ?>"></div>
<?php
endforeach;
?>
<div class="dots_bg" data-active-color="#48494D" data-default-color="#48494D" data-custom-trigger data-row-dots="21, 0" data-col-dots="29, 0" ></div>
</div>
<div class="col header-dropdown__static-col">
<p class="title text-4">
<?php echo $header['products']['succes_stories_title']; ?>
</p>
<?php
$args = [];
$args['review_preview'] = true;
get_template_part('templates/cards/review', null, $args);
?>
<?php
$success_stories_link = get_link_group_field($header['products']['succes_stories_link']);
if ($success_stories_link) :
?>
<a href="<?php echo $success_stories_link['url'] ?>" <?php echo $success_stories_link['target'] ?> class="link text-4">
<?php echo $success_stories_link['title'] ?>
</a>
<?php
endif;
?>
</div>
</div>
</div>
</div>
<?php
endif;
?>
<?php
if ($header['services']['title']) :
?>
<div class="header__menu-item header-dropdown">
<span class="visible header-dropdown__visible text-4 mob-text-4"><?php echo $header['services']['title'];?></span>
<div class="header-dropdown__hidden -services">
<div class="header-dropdown__inner">
<div class="triangle"></div>
<div class="col header-dropdown__menu-col">
<?php
foreach($services_posts as $post) :
$title = $post->post_title;
$preview = get_field('preview', $post->ID);
?>
<a href="<?php echo get_the_permalink($post->ID); ?>" class="link">
<?php
if ($preview['icon']) :
?>
<div class="img">
<img class="-lazyload" <?php echo $srcset; ?> src="<?php echo $preview['icon']['url']; ?>" alt="<?php echo $preview['icon']['alt']; ?>">
</div>
<?php
endif;
?>
<p class="title text-3 -medium">
<?php echo $title; ?>
</p>
<?php
if ($preview['description']) :
?>
<p class="text text-4 -regular">
<?php
echo $preview['description'];
?>
</p>
<?php
endif;
?>
</a>
<?php
endforeach;
?>
</div>
<div class="col header-dropdown__preview-col">
<?php
foreach($services_posts as $post) :
$title = $post->post_title;
$preview = get_field('preview', $post->ID);
?>
<div class="img"><img class="-lazyload" <?php echo $srcset; ?> src="<?php echo $preview['preview']['url'] ?>" alt="<?php echo $preview['preview']['alt'] ?>"></div>
<?php
endforeach;
?>
</div>
</div>
</div>
</div>
<?php
endif;
?>
<?php
foreach($header['links'] as $link) :
$link = get_link_group_field($link);
if ($link) :
?>
<a class="header__menu-item text-4 mob-text-4" href="<?php echo $link['url']; ?>" <?php echo $link['target']; ?> ><?php echo $link['title']; ?></a>
<?php
endif;
endforeach;
?>
</div>
<?php
endif;
?>
<div class="header__right">
<div class="menu-wrapper">
<div class="menu-open text-4 mob-text-4">
<?php
if (!wp_is_mobile()) {
echo $header['more_menu']['title'];
} else {
echo $header['mobile_menu_title'];
}
?>
<span class="icon">
<div><span></span><span></span></div>
<div><span></span><span></span></div>
</span>
</div>
<?php
if (!wp_is_mobile()) :
?>
<div class="pages-menu" data-custom-lazyload-trigger>
<div class="menu text-3">
<?php
foreach($header['more_menu']['links'] as $link) :
$link = get_link_group_field($link);
if ($link) :
?>
<a href="<?php echo $link['url']; ?>" <?php echo $link['target']; ?> class="link">
<?php echo $link['title']; ?>
</a>
<?php
endif;
endforeach;
?>
</div>
<div class="preview-zone">
<?php
foreach($header['more_menu']['links'] as $item) :
if ($item['preview_type'] == 'custom') :
?>
<div class="preview">
<?php
if ($item['image_for_preview']) :
?>
<img class="-lazyload" <?php echo $srcset; ?> src="<?php echo $item['image_for_preview']['url']; ?>" alt="<?php echo $item['image_for_preview']['alt']; ?>">
<?php
endif;
?>
</div>
<?php
elseif ($item['preview_type'] == 'default') :
$args = [];
$args['page_id'] = $item['page']->ID;
get_template_part('templates/header-menu/pages-previews', null, $args);
endif;
endforeach;
?>
<div class="default-view">
<img class="-lazyload" <?php echo $srcset; ?> src="<?php echo $template_directory; ?>/assets/images/mega-menu/logo.svg" alt="">
</div>
</div>
</div>
<?php
endif;
?>
</div>
<?php
$button = get_link_group_field($header['button']);
if ($button) :
?>
<a href="<?php echo $button['url']; ?>" <?php echo $button['target']; ?> class="default-button -smaller">
<?php echo $button['title']; ?>
</a>
<?php
endif;
?>
</div>
</div>
</div>
<?php
if (wp_is_mobile()) :
?>
<div class="header-hidden-menu" data-custom-lazyload-trigger>
<div class="header-hidden-menu__wrapper">
<div class="header-hidden-menu__menu">
<?php
if ($header['products']['title']) :
?>
<div class="--accordion mobile-accordion -open" data-accordion-group="mobile-menu">
<div class="--accordion__open mobile-accordion__open link -bold">
<?php echo $header['products']['title']; ?>
</div>
<div class="--accordion__content-container mobile-accordion__container">
<div class="--accordion__content -higher mobile-accordion__content">
<?php
foreach($products_posts as $post) :
$preview = get_field('preview', $post->ID);
$title = $preview['title'] ? $preview['title'] : $post->post_title;
?>
<a href="<?php echo get_the_permalink($post->ID); ?>" class="link -product-link -medium">
<span class="star" style="background-color: <?php echo $preview['product_color'] ?>"></span>
<?php echo $title; ?>
</a>
<?php
endforeach;
?>
</div>
</div>
</div>
<?php
endif;
if ($header['services']['title']) :
?>
<div class="--accordion mobile-accordion" data-accordion-group="mobile-menu">
<div class="--accordion__open mobile-accordion__open link -bold">
<?php echo $header['services']['title']; ?>
</div>
<div class="--accordion__content-container mobile-accordion__container">
<div class="--accordion__content -higher mobile-accordion__content">
<?php
foreach($services_posts as $post) :
$preview = get_field('preview', $post->ID);
$title = $post->post_title;
?>
<a href="<?php echo get_the_permalink($post->ID); ?>" class="link -services-link -medium">
<?php
if ($preview['icon']) :
?>
<div class="img">
<img class="-lazyload" <?php echo $srcset; ?> src="<?php echo $preview['icon']['url']; ?>" alt="<?php echo $preview['icon']['alt']; ?>">
</div>
<?php
endif;
?>
<?php echo $title; ?>
</a>
<?php
endforeach;
?>
</div>
</div>
</div>
<?php
endif;
?>
<?php
foreach($header['links'] as $link) :
$link = get_link_group_field($link);
if ($link) :
?>
<a class="link -bold" href="<?php echo $link['url']; ?>" <?php echo $link['target']; ?> ><?php echo $link['title']; ?></a>
<?php
endif;
endforeach;
?>
<div class="--accordion mobile-accordion" data-accordion-group="mobile-menu">
<div class="--accordion__open mobile-accordion__open link -bold">
<?php echo $header['more_menu']['title']; ?>
</div>
<div class="--accordion__content-container mobile-accordion__container">
<div class="--accordion__content -higher mobile-accordion__content">
<?php
foreach($header['more_menu']['links'] as $link) :
$link = get_link_group_field($link);
if ($link) :
?>
<a href="<?php echo $link['url']; ?>" <?php echo $link['target']; ?> class="link -medium">
<?php echo $link['title']; ?>
</a>
<?php
endif;
endforeach;
?>
</div>
</div>
</div>
</div>
<?php
$button = get_link_group_field($header['button']);
if ($button) :
?>
<a href="<?php echo $button['url']; ?>" <?php echo $button['target']; ?> class="default-button -smaller">
<?php echo $button['title']; ?>
</a>
<?php
endif;
?>
</div>
</div>
<?php
endif;
wp_reset_postdata();
?>
</header>
