<?php
//$srcset = $template_directory . '/assets/images/lazyload.png';
$socials = get_field('socials', 'option');
$template_directory = get_template_directory_uri();
$srcset = "srcset='{$template_directory}/assets/images/lazyload.png'";
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<title>
<?php echo wp_get_document_title(); ?>
</title>
<!-- TODO: Set absolute page URL -->
<link rel="canonical" href="<?php echo get_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 charset="UTF-8">
<?php wp_head(); ?>
</head>
<body>
<script>
// Allow animations if JS support is enabled
document.body.classList.add('-allow-animations');
</script>
<?php
$logo = get_field('logo', 'option');
$header = get_field("header", 'option');
$header_navigation = $header['header-navigation'];
$header_buttons = $header['header_buttons'];
$search_text = $header['search_text'];
?>
<header class="header" style="opacity: 0;">
<div class="container">
<div class="header__wrapper">
<div class="header-first-row">
<?php
if ($logo) :
if (is_front_page()) : ?>
<div class="logo">
<img src="<?php echo $logo['url']; ?>" alt="<?php echo $logo['alt']; ?>">
</div>
<?php else : ?>
<a href="<?php echo get_home_url(); ?>" class="logo" aria-label="Optoman">
<img src="<?php echo $logo['url']; ?>" alt="<?php echo $logo['alt']; ?>">
</a>
<?php endif;
endif; ?>
<div class="buttons -pc">
<?php if (!empty($header_buttons)) :
foreach ($header_buttons as $button) :?>
<?php echo get_button_group_field($button['button']); ?>
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
<div class="header-second-row">
<nav class="header__navigation -pc">
<?php
foreach ($header_navigation as $link) :
if ($link['add_submenu']) :?>
<div class="header__navigation-item -with-submenu">
<p class="button-2 default-link">
<?php echo $link['navigation_title']; ?>
</p>
<?php if ($link['submenu_type'] == 'product' && $link['add_submenu']) : ?>
<?php
function render_categories($parent_id = 0, $level = 0)
{
$template_directory = get_template_directory_uri();
$srcset = "srcset='{$template_directory}/assets/images/lazyload.png'";
$categories = get_terms([
'taxonomy' => 'product_cat',
'hide_empty' => false,
'parent' => $parent_id,
'exclude' => [1],
]);
if (!empty($categories) && !is_wp_error($categories)) {
$additional_class = ($level > 0) ? ' product-sub-category' : '';
echo '<div class="header__navigation-item-submenu header__navigation-item-submenu-' . $level . $additional_class . '" data-parent-id="' . $parent_id . '">';
if ($level == 0) {
$page_id = 1123;
$post_status = get_post_status($page_id);
$thumbnail = get_the_post_thumbnail($page_id, 'thumbnail');
$link = get_permalink($page_id);
$title = get_the_title($page_id);
echo '<a href="' . esc_url($link) . '" class="submenu-item">';
// Виведення мініатюри сторінки
if ($thumbnail) {
echo '<div class="image">' . $thumbnail . '</div>';
}
// Виведення назви сторінки або заголовка категорії, якщо custom_category_title не порожній
echo '<span>' . (!empty($custom_title) ? do_shortcode($custom_title) : esc_html($title)) . '</span>';
echo '</a>';
}
$count = 0;
foreach ($categories as $category) {
if ($category->slug !== 'uncategorized') {
if ($count === 5 && $level == 0) {
$header = get_field("header", 'option');
$header_navigation = $header['header-navigation'];
$filtered_navigation = array_filter($header_navigation, function ($item) {
return isset($item['add_submenu'], $item['submenu_type'])
&& $item['add_submenu'] === true
&& $item['submenu_type'] === 'product';
});
foreach ($filtered_navigation as $nav_item) {
if ($nav_item['add_additional_menu_items'] && !empty($nav_item['additional_menus'])) {
foreach ($nav_item['additional_menus'] as $additional_menu) {
if (!$additional_menu['add_submenu']) {
$id = strtolower(preg_replace('/[^a-z0-9\-]/', '', str_replace(' ', '-', $additional_menu['title'])));
$prepared_link = get_link_group_field($additional_menu['link']['link']);
echo '<a href="' . esc_url($prepared_link['url']) . '" class="submenu-item" data-category-id="' . $id . '">';
echo '<div class="image"><img src="' . $additional_menu['icon']['url'] . '" alt="' . $additional_menu['icon']['alt'] . '"></div>';
echo '<span>' . esc_html($additional_menu['title']) . '</span>';
echo '</a>';
} else {
$id = strtolower(preg_replace('/[^a-z0-9\-]/', '', str_replace(' ', '-', $additional_menu['title'])));
echo '<div class="submenu-item" data-category-id="' . $id . '">';
echo '<div class="image"><img src="' . $additional_menu['icon']['url'] . '" alt="' . $additional_menu['icon']['alt'] . '"></div>';
echo '<span>' . esc_html($additional_menu['title']) . '</span>';
echo '</div>';
}
}
}
}
}
$count++;
$products = wc_get_products([
'status' => 'publish',
'limit' => -1,
'category' => [$category->slug],
]);
if (count($products) === 1) {
// Якщо лише один товар
$product = $products[0];
$product_link = get_permalink($product->get_id());
$product_title = $product->get_name();
$product_thumbnail = $product->get_image('thumbnail');
$product_thumbnail = str_replace(
'<img',
'<img class="-lazyload" ' . $srcset,
$product_thumbnail
);
echo '<a href="' . esc_url($product_link) . '" class="submenu-item" data-category-id="' . $category->term_id . '">';
echo '<div class="image">' . $product_thumbnail . '</div>';
echo '<span>' . esc_html($product_title) . '</span>';
echo '</a>';
} else {
// Якщо більше одного товару
$thumbnail_id = get_term_meta($category->term_id, 'thumbnail_id', true);
$custom_title = get_term_meta($category->term_id, 'custom_category_title', true);
echo '<a href="' . get_term_link($category) . '" class="submenu-item" data-category-id="' . $category->term_id . '" data-parent-id="' . $parent_id . '">';
if ($thumbnail_id) {
echo '<div class="image">' .
wp_get_attachment_image(
$thumbnail_id,
'thumbnail',
false,
array(
'class' => '-lazyload',
'srcset' => "{$template_directory}/assets/images/lazyload.png",
'loading' => 'lazy',
)
) .
'</div>';
}
echo '<span>' . (!empty($custom_title) ? do_shortcode($custom_title) : esc_html($category->name)) . '</span>';
echo '</a>';
}
}
}
echo '</div>';
foreach ($categories as $category) {
render_categories($category->term_id, $level + 1);
}
}
}
render_categories();
$filtered_navigation = array_filter($header_navigation, function ($item) {
return isset($item['add_submenu'], $item['submenu_type'])
&& $item['add_submenu'] === true
&& $item['submenu_type'] === 'product';
});
foreach ($filtered_navigation as $nav_item) {
if ($nav_item['add_additional_menu_items'] && !empty($nav_item['additional_menus'])) {
foreach ($nav_item['additional_menus'] as $additional_menu) {
foreach ($filtered_navigation as $nav_item) {
if ($nav_item['add_additional_menu_items'] && !empty($nav_item['additional_menus'])) {
foreach ($nav_item['additional_menus'] as $additional_menu) {
if ($additional_menu['add_submenu'] && !empty($additional_menu['submenu_items'])) {
$id = strtolower(preg_replace('/[^a-z0-9\-]/', '', str_replace(' ', '-', $additional_menu['title'])));
echo '<div class="header__navigation-item-submenu header__navigation-item-submenu-1 product-sub-category" data-parent-id="' . $id . '">';
foreach ($additional_menu['submenu_items'] as $submenu) {
// var_dump($submenu['link']);
$prepared_link = get_link_group_field($submenu['link']);
echo '<a href="' . esc_url($prepared_link['url']) . '" class="submenu-item">';
echo '<div class="image"><img src="' . $submenu['icon']['url'] . '" alt="' . $submenu['icon']['alt'] . '"></div>';
echo '<span>' . esc_html($prepared_link['title']) . '</span>';
echo '</a>';
}
echo '</div>';
}
}
}
}
}
}
}
?>
<?php elseif (!empty($link['submenu_items']) && $link['add_submenu']) : ?>
<div class="header__navigation-item-submenu">
<?php foreach ($link['submenu_items'] as $submenu) :
$prepared_link = get_link_group_field($submenu['link']);
if ($prepared_link) :
?>
<a href="<?php echo esc_url($prepared_link['url']); ?>"
class="submenu-item" <?php echo $prepared_link['target']; ?>>
<?php if (!empty($submenu['icon'])) echo file_get_contents($submenu['icon']['url']) ?>
<?php if (!empty($prepared_link['title'])) : ?>
<span><?php echo $prepared_link['title']; ?></span>
<?php endif; ?>
</a>
<?php endif;
endforeach; ?>
<?php if ($link['add_view_all'] || !empty($link['view_all_link'])) : ?>
<?php $url = get_the_permalink($link['view_all_link']->ID); ?>
<a href="<?php echo $url; ?>"
class="button -outline -arrow">
View all
</a>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
<?php else: ?>
<?php if (!$link['add_submenu'] || !empty($link['navigation_link'])) :
$url = get_the_permalink($link['navigation_link']->ID);
?>
<a class="button-2 default-link" href="<?php echo $url; ?>">
<?php echo $link['navigation_title']; ?>
</a>
<?php else : ?>
<p class="button-2 default-link">
<?php echo $link['navigation_title']; ?>
</p>
<?php endif; ?>
<?php
endif;
endforeach;
?>
</nav>
<div class="buttons">
<button class="button -outline -small -img -search-open" aria-label="search">
<img src="<?php echo $template_directory ?>/assets/images/icons/search.svg" alt="">
</button>
<!-- <button class="button -outline -small -img">-->
<!-- <img src="-->
<?php //echo $template_directory ?><!--/assets/images/icons/user.svg" alt="">-->
<!-- </button>-->
<button class="button burger -outline -small -img -mobile" aria-label="menu">
<span></span>
<span></span>
<span></span>
</button>
</div>
<div class="header-search">
<form class="ajax-search-form" method="get" action="<?php echo home_url('/'); ?>">
<div class="search-input__wrapper">
<input class="button-2 search-input" type="text" name="s"
placeholder="<?php echo $search_text; ?>" autocomplete="off"/>
</div>
<div class="header-search-close">
<img src="<?php echo $template_directory ?>/assets/images/icons/close.svg" alt="">
</div>
</form>
<div class="search-results" style="display: none;">
<div class="search-info">
<p class="search-count body-5"></p>
<a class="view-all body-3" href="#" style="display: none;">View All</a>
</div>
<div class="header-search-no-result body-3" style="display: none;">
<p>No results could be found</p>
</div>
<ul class="results-list body-3"></ul>
</div>
</div>
</div>
</div>
</div>
<div class="mobile-menu -mobile">
<div class="container">
<div class="buttons">
<?php if (!empty($header_buttons)) :
foreach ($header_buttons as $button) :?>
<?php echo get_button_group_field($button['button']); ?>
<?php endforeach; ?>
<?php endif; ?>
</div>
<nav class="header__navigation">
<?php
foreach ($header_navigation as $link) :
if ($link['add_submenu']) : ?>
<div class="--accordion header-accordion" data-accordion-group="mobile_navigation-group">
<div class="--accordion__open --cursor-pointer">
<p class="button-2 default-link">
<?php echo $link['navigation_title']; ?>
</p>
</div>
<div class="--accordion__content-container">
<div class="--accordion__content">
<div class="header__navigation-item-submenu">
<?php if ($link['submenu_type'] == 'product') :
function display_categories_with_subcategories($parent_id = 0, $level = 0)
{
$template_directory = get_template_directory_uri();
$srcset = "srcset='{$template_directory}/assets/images/lazyload.png'";
$categories = get_terms([
'taxonomy' => 'product_cat',
'hide_empty' => false,
'parent' => $parent_id,
'exclude' => [1],
]);
if (!empty($categories) && !is_wp_error($categories)) {
if ($level == 0 && !wp_is_mobile()) {
$page_id = 1123;
$post_status = get_post_status($page_id);
if ($post_status === 'publish') {
$thumbnail = get_the_post_thumbnail($page_id, 'thumbnail');
$link = get_permalink($page_id);
$title = get_the_title($page_id);
echo '<a href="' . esc_url($link) . '" class="submenu-item">';
if ($thumbnail) {
echo '<div class="image">' . $thumbnail . '</div>';
}
echo '<span>' . (!empty($custom_title) ? do_shortcode($custom_title) : esc_html($title)) . '</span>';
echo '</a>';
}
}
$count_mobile = 0;
foreach ($categories as $category) {
if ($category->slug !== 'uncategorized') {
$thumbnail_id = get_term_meta($category->term_id, 'thumbnail_id', true);
$custom_title = get_term_meta($category->term_id, 'custom_category_title', true);
// Перевірка наявності дочірніх категорій
$child_categories = get_terms([
'taxonomy' => 'product_cat',
'hide_empty' => false,
'parent' => $category->term_id,
'exclude' => [1],
]);
// Отримуємо товари в категорії
$products = wc_get_products([
'status' => 'publish',
'limit' => -1,
'category' => [$category->slug],
]);
if ($count_mobile == 5 && $level == 0) {
$header = get_field("header", 'option');
$header_navigation = $header['header-navigation'];
$filtered_navigation = array_filter($header_navigation, function ($item) {
return isset($item['add_submenu'], $item['submenu_type'])
&& $item['add_submenu'] === true
&& $item['submenu_type'] === 'product';
});
foreach ($filtered_navigation as $nav_item) {
if ($nav_item['add_additional_menu_items'] && !empty($nav_item['additional_menus'])) {
foreach ($nav_item['additional_menus'] as $additional_menu) {
// echo var_dump($additional_menu);
if (!$additional_menu['add_submenu']) :
$prepared_link = get_link_group_field($additional_menu['link']['link']);
?>
<a href="<?php echo esc_url($prepared_link['url']); ?>"
class="submenu-item">
<div class="image"><img
src="<?php echo $additional_menu['icon']['url']; ?>"
alt="<?php echo $additional_menu['icon']['alt']; ?>">
</div>
<span><?php echo esc_html($additional_menu['title']); ?></span>
</a>
<?php else : ?>
<div class="--accordion"
data-accordion-group="level-1">
<div class="--accordion__open --cursor-pointer">
<div class="submenu-item">
<div class="image"><img
src="<?php echo $additional_menu['icon']['url']; ?>"
alt="<?php echo $additional_menu['icon']['alt']; ?>">
</div>
<span><?php echo esc_html($additional_menu['title']); ?></span>
</div>
</div>
<div class="--accordion__content-container">
<div class="--accordion__content">
<?php
if ($additional_menu['add_submenu'] && !empty($additional_menu['submenu_items'])) {
foreach ($additional_menu['submenu_items'] as $submenu) {
$prepared_link = get_link_group_field($submenu['link']);
echo '<a href="' . esc_url($prepared_link['url']) . '" class="submenu-item">';
echo '<div class="image"><img src="' . $submenu['icon']['url'] . '" alt="' . $submenu['icon']['alt'] . '"></div>';
echo '<span>' . esc_html($prepared_link['title']) . '</span>';
echo '</a>';
}
}
?>
</div>
</div>
</div>
<?php endif;
}
}
}
}
$count_mobile++;
if (count($products) === 1) {
// Якщо лише один товар, виводимо його
$product = $products[0];
$product_link = get_permalink($product->get_id());
$product_title = $product->get_name();
$product_thumbnail = $product->get_image('thumbnail');
$product_thumbnail = str_replace(
'<img',
'<img class="-lazyload" ' . $srcset,
$product_thumbnail
);
?>
<a href="<?php echo esc_url($product_link); ?>"
class="submenu-item submenu-level-<?php echo $level; ?>">
<div class="image"><?php echo $product_thumbnail; ?></div>
<span><?php echo esc_html($product_title); ?></span>
</a>
<?php
} elseif (!empty($child_categories) && !is_wp_error($child_categories)) {
// Якщо є дочірні категорії, використовуємо акардіон
?>
<div class="--accordion"
data-accordion-group="level-<?php echo $level; ?>">
<div class="--accordion__open --cursor-pointer">
<div class="submenu-item">
<?php
if ($thumbnail_id) {
echo '<div class="image">' .
wp_get_attachment_image(
$thumbnail_id,
'small',
false,
array(
'class' => '-lazyload',
'srcset' => "{$template_directory}/assets/images/lazyload.png",
'loading' => 'lazy'
)
) .
'</div>';
}
echo '<span>' . (!empty($custom_title) ? do_shortcode($custom_title) : esc_html($category->name)) . '</span>';
?>
</div>
</div>
<div class="--accordion__content-container">
<div class="--accordion__content">
<?php
// Рекурсивно викликаємо функцію для підкатегорій
display_categories_with_subcategories($category->term_id, $level + 1);
?>
</div>
</div>
</div>
<?php
} else {
?>
<a href="<?php echo get_term_link($category); ?>"
class="submenu-item submenu-level-<?php echo $level; ?>">
<?php
if ($thumbnail_id) {
echo '<div class="image">' .
wp_get_attachment_image(
$thumbnail_id,
'thumbnail',
false,
array(
'class' => '-lazyload',
'srcset' => "{$template_directory}/assets/images/lazyload.png",
'loading' => 'lazy',
)
) .
'</div>';
}
echo '<span>' . (!empty($custom_title) ? do_shortcode($custom_title) : esc_html($category->name)) . '</span>';
?>
</a>
<?php
}
}
}
}
}
// Виклик функції для відображення категорій
display_categories_with_subcategories();
?>
<?php else :
if (!empty($link['submenu_items'])) :
foreach ($link['submenu_items'] as $submenu) :
$prepared_link = get_link_group_field($submenu['link']);
if ($prepared_link) :
?>
<a href="<?php echo esc_url($prepared_link['url']); ?>"
class="submenu-item" <?php echo $prepared_link['target']; ?>>
<?php if (!empty($submenu['icon'])) echo file_get_contents($submenu['icon']['url']) ?>
<?php if (!empty($prepared_link['title'])) : ?>
<span><?php echo $prepared_link['title']; ?></span>
<?php endif; ?>
</a>
<?php endif;
endforeach; ?>
<?php if ($link['add_view_all'] || !empty($link['view_all_link'])) : ?>
<?php $url = get_the_permalink($link['view_all_link']->ID); ?>
<a href="<?php echo $url; ?>"
class="button -outline -arrow">
View all
</a>
<?php endif;
endif;
endif; ?>
</div>
</div>
</div>
</div>
<?php else: ?>
<?php if (!$link['add_submenu'] || !empty($link['navigation_link'])) :
$url = get_the_permalink($link['navigation_link']->ID);
?>
<a class="button-2 default-link" href="<?php echo $url; ?>">
<?php echo $link['navigation_title']; ?>
</a>
<?php else : ?>
<p class="button-2 default-link">
<?php echo $link['navigation_title']; ?>
</p>
<?php endif; ?>
<?php endif;
endforeach; ?>
</nav>
<div class="header__socials">
<?php if (!empty($socials)) : ?>
<?php foreach ($socials as $social) : ?>
<a href="<?php echo $social['link']['url']; ?>" class="footer-socials-item"
target="<?php echo $social['link']['target']; ?>">
<?php echo file_get_contents($social['image']['url']) ?>
</a>
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
</div>
</header>
