Good-Production/la-components-wp
7
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
GP_DEV
2025-06-01 12:38:35 +03:00
commit 54eb8e266f
21 changed files with 2178 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
blocks/club-cards-block/club-cards-block.php Normal file
View File

@@ -0,0 +1,68 @@
<?php
/**
* Блок с клубными картами
*/
// Получение полей ACF
$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'];
}
// Получение карт для текущего языка
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'
);
return get_posts($args);
}
$cards = get_club_cards_for_current_language();
?>
<div id="<?php echo esc_attr($block_id); ?>" class="container mx-auto <?php echo esc_attr($class_name); ?>">
<?php if ($cards): ?>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[24px]">
<?php foreach ($cards as $card): ?>
<div class="club-card rounded-[8px] overflow-hidden hover:shadow-xl transition-shadow duration-[300ms]">
<?php if (has_post_thumbnail($card->ID)): ?>
<div class="aspect-video overflow-hidden">
<?php echo get_the_post_thumbnail($card->ID, 'medium', ['class' => 'w-full h-full object-cover']); ?>
</div>
<?php endif; ?>
<div class="p-[24px]">
<h3 class="text-[20px] font-semibold mb-[12px]">
<?php echo get_the_title($card->ID); ?>
</h3>
<?php if (get_the_excerpt($card->ID)): ?>
<div class="text-gray-600 mb-[16px]">
<?php echo get_the_excerpt($card->ID); ?>
</div>
<?php endif; ?>
<div class="text-center">
<button data-modal="club-card"
data-card-id="<?php echo $card->ID; ?>"
class="inline-block px-[24px] py-[12px] bg-blue-500 text-white rounded-[6px] hover:bg-blue-600 transition-colors duration-[300ms]">
Подробнее
</button>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>

110
blocks/contacts-block/contacts-block.js Normal file
View File

@@ -0,0 +1,110 @@
ymaps.ready(function () {
var buildingCoordinates = [55.832659, 37.576118];
//Смещение карты, чтобы иконка была визуально по центру
var offsetCoefficient = 0.001;
var mapCenter = [
buildingCoordinates[0],
buildingCoordinates[1] - offsetCoefficient
];
var myMap = new ymaps.Map('map', {
center: mapCenter,
zoom: 17,
controls: []
});
// Отключаем все взаимодействия с картой
myMap.behaviors.disable(['scrollZoom', 'drag', 'multiTouch', 'dblClickZoom']);
var svgIcon = '<svg width="146" height="175" viewBox="0 0 146 175" fill="none" xmlns="http://www.w3.org/2000/svg">' +
'<path d="M73 174.328L48.4669 131.836H97.5331L73 174.328Z" fill="#FA4241" />' +
'<circle cx="71.9104" cy="73" r="73" fill="url(#paint0_linear_150_2453)" />' +
'<path d="M58.0581 42.549C50.1523 47.1076 43.6824 50.8665 43.6985 50.9305C43.7469 51.0424 52.3304 56.0169 52.4756 56.0169C52.524 56.0169 57.0094 53.4577 62.4628 50.3386C67.9162 47.2196 72.4339 44.6444 72.5145 44.6284C72.5952 44.5964 77.1612 47.1556 82.6631 50.3067L92.6825 56.0429L96.942 53.6117C99.2656 52.2841 101.266 51.1004 101.379 51.0044C101.525 50.8765 98.0553 48.8131 87.2614 42.639C79.3878 38.1444 72.8372 34.4175 72.7081 34.3855C72.5791 34.3375 65.9801 38.0164 58.0581 42.549Z" fill="white" />' +
'<path d="M38.5032 73.2768V92.7908L42.0043 90.7755C43.9405 89.6718 45.9734 88.5201 46.5381 88.2002L47.5384 87.6244V78.2993C47.5384 73.1648 47.5707 68.9741 47.603 68.9741C47.6352 68.9741 53.2661 72.1891 60.1232 76.1079C66.9642 80.0267 72.6597 83.1938 72.7565 83.1458C72.8694 83.0978 78.5003 79.8828 85.2929 75.98L97.6357 68.8941L97.7164 78.3153L97.7971 87.7204L102.234 90.2636L106.67 92.8068L106.719 73.2408C106.735 62.54 106.719 53.7587 106.687 53.7267C106.655 53.6947 98.9746 58.0614 89.6008 63.4358L72.5629 73.2088L55.896 63.6757C46.7317 58.4133 39.0679 54.0306 38.8743 53.9027L38.5032 53.6787V73.2768Z" fill="white" />' +
'<path d="M47.9893 93.0937C45.6014 94.4692 43.6653 95.6209 43.6653 95.6849C43.6653 95.8288 72.449 112.24 72.6588 112.224C72.9008 112.192 101.587 95.7968 101.587 95.6849C101.587 95.6369 99.5867 94.4692 97.1508 93.0777L92.6977 90.5344L82.6782 96.2767C77.1603 99.4277 72.5781 101.987 72.5136 101.955C72.4329 101.939 67.8991 99.3637 62.4618 96.2447C57.0084 93.1256 52.4908 90.5664 52.4262 90.5824C52.3456 90.5984 50.361 91.7181 47.9893 93.0937Z" fill="white" />' +
'<defs>' +
'<linearGradient id="paint0_linear_150_2453" x1="2.4683" y1="6.137" x2="115.196" y2="71.48" gradientUnits="userSpaceOnUse">' +
'<stop stop-color="#F41C1B" />' +
'<stop offset="0.435" stop-color="#F72D2C" />' +
'<stop offset="1" stop-color="#FA4242" />' +
'</linearGradient>' +
'</defs>' +
'</svg>';
var iconSize;
var iconOffset;
if (window.innerWidth <= 768) {
iconSize = [73, 88];
iconOffset = [-36, -87];
} else {
iconSize = [146, 175];
iconOffset = [-73, -174];
}
var myPlacemark = new ymaps.Placemark(
buildingCoordinates,
{hintContent: '', balloonContent: ''},
{
iconLayout: 'default#imageWithContent',
iconImageHref: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svgIcon),
iconImageSize: iconSize,
iconImageOffset: iconOffset,
hideIconOnBalloonOpen: false
}
);
myMap.panes.get('ground').getElement().style.filter = 'grayscale(100%)';
myMap.geoObjects.add(myPlacemark);
var isMapInteractive = false;
var mapElement = document.getElementById('map');
function activateMap(e) {
if (!isMapInteractive) {
myMap.behaviors.enable(['scrollZoom', 'drag', 'multiTouch', 'dblClickZoom']);
isMapInteractive = true;
setTimeout(function () {
document.addEventListener('click', deactivateMap);
document.addEventListener('touchend', deactivateMap);
}, 100);
e.stopPropagation();
}
}
function deactivateMap(e) {
var target = e.target;
if (e.type === 'touchend' || e.changedTouches || e.changedTouches[0]) {
var touch = e.changedTouches[0];
target = document.elementFromPoint(touch.clientX, touch.clientY);
}
if (!mapElement.contains(target)) {
myMap.behaviors.disable(['scrollZoom', 'drag', 'multiTouch', 'dblClickZoom']);
isMapInteractive = false;
document.removeEventListener('click', deactivateMap);
document.removeEventListener('touchend', deactivateMap);
}
}
mapElement.addEventListener('click', activateMap);
mapElement.addEventListener('touchstart', activateMap);
});

131
blocks/contacts-block/contacts-block.php Normal file
View File

@@ -0,0 +1,131 @@
<?php
/**
* Шаблон для блока преимуществ
*/
$blocks = parse_blocks(get_the_content());
$is_first_block = false;
if (!empty($blocks) && isset($blocks[0]['blockName']) && $blocks[0]['blockName'] === 'acf/contacts-block') {
$is_first_block = true;
}
$section_padding = $is_first_block ? "pt-[65px] max-[768px]:pt-[35px]" : "pt-[120px] max-[768px]:pt-[70px]";
?>
<style>
/* Скрываем, но лучше не нужно по копирайту */
.ymaps-2-1-79-copyright, .ymaps-2-1-79-gototech, .ymaps-2-1-79-gototaxi, .ymaps-2-1-79-gotoymaps,
.ymaps-2-1-79-map-copyrights-promo, .ymaps-2-1-79-copyright__wrap, .ymaps-2-1-79-copyright__content-cell,
[class*="ymaps-2"][class*="copyright"], [class*="ymaps-2"][class*="gototech"],
[class*="ymaps-2"][class*="gototaxi"], [class*="ymaps-2"][class*="gotoymaps"] {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
</style>
<section class="<?php echo $section_padding ?> full-layout">
<div class="max-[1200px]:max-w-[640px] max-[768px]:max-w-[340px] hidden max-[1200px]:block mx-auto mb-[-120px] bg-white w-full max-w-[378px] simple-shadow rounded-[25px] relative z-10">
<div class="max-[768px]:pl-[30px] max-[768px]:pt-[30px] max-[768px]:rounded-[20px] pl-[45px] pt-[40px] pb-[40px] relative rounded-[25px] overflow-hidden">
<svg class="absolute bottom-[-55px] right-[-65px]" width="126" height="129" viewBox="0 0 126 129"
fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="60.8145" width="82.2698" height="98.6297" transform="rotate(38.0681 60.8145 0)"
fill="url(#paint0_linear_2001_4983)"/>
<defs>
<linearGradient id="paint0_linear_2001_4983" x1="62.7686" y1="4.14594" x2="131.553" y2="37.4035"
gradientUnits="userSpaceOnUse">
<stop stop-color="#F41C1B"/>
<stop offset="0.435" stop-color="#F72D2C"/>
<stop offset="1" stop-color="#FA4242"/>
</linearGradient>
</defs>
</svg>
<div class="py-[10px] px-[25px] w-full max-w-fit gap-[19px] border border-[#dedede] rounded-[1111px] flex items-center justify-center">
<?php
display_icon('dot');
?>
<span class="font-light text-[14px] leading-[140%] text-[#565656]">Связь с нами</span>
</div>
<div class="max-[768px]:max-w-[240px] flex flex-col gap-[20px]">
<h2 class="max-[768px]:text-[28px] font-bold mt-[25px] text-[45px] leading-[130%] text-[#3f3f3f]">
Контакты</h2>
<div class="max-[768px]:text-[24px] flex flex-col font-semibold text-[28px] leading-[165%] text-[#3f3f3f]">
<p class="max-[768px]:text-[15px] font-light text-[18px] text-[#828282]">Номер телефона:</p>
<a target="_blank" href="tel:<?php echo get_field('phones', 'options')['main_phone'] ?>"
class="hover:text-[#f62322] !decoration-transparent skip-ink transition-colors"
href="tel:+7(800)302-11-85"><?php echo get_field('phones', 'options')['main_phone'] ?></a>
<a target="_blank" href="tel:<?php echo get_field('phones', 'options')['phone'] ?>"
class="hover:text-[#f62322] !decoration-transparent skip-ink transition-colors"
href="tel:+7(911)098-59-77"><?php echo get_field('phones', 'options')['phone'] ?></a>
</div>
<div class="flex flex-col gap-[10px]">
<p class="max-[768px]:text-[15px] font-light text-[18px] text-[#828282]">Головной офис:</p>
<div class="max-[768px]:text-[19px] font-normal text-[23px] leading-[137%] text-[#3f3f3f]">
<?php echo get_field('address', 'options') ?>
</div>
</div>
<div class="flex flex-col gap-[10px]">
<p class="max-[768px]:text-[15px] font-light text-[18px] text-[#828282]">E-mail:</p>
<a class="max-[768px]:text-[19px] hover:text-[#f62322] !decoration-transparent skip-ink transition-colors font-normal text-[23px] leading-[137%] text-[#3f3f3f]"
href="mailto:info@mylogistika2010.ru"><?php echo get_field('email', 'options') ?></a>
</div>
</div>
</div>
</div>
<div id="map-container"
class="max-[1200px]:p-0 max-[1200px]:h-[600px] pt-[90px] pl-[62px] pb-[89px] rounded-[35px] relative">
<div id="map" class="absolute top-0 left-0 w-full h-full rounded-[35px] overflow-hidden z-0"></div>
<div class="max-[1200px]:hidden bg-white w-full max-w-[378px] simple-shadow rounded-[25px] relative z-10">
<div class=" pl-[45px] pt-[40px] pb-[40px] relative rounded-[25px] overflow-hidden">
<svg class="absolute bottom-[-55px] right-[-65px]" width="126" height="129" viewBox="0 0 126 129"
fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="60.8145" width="82.2698" height="98.6297" transform="rotate(38.0681 60.8145 0)"
fill="url(#paint0_linear_2001_4983)"/>
<defs>
<linearGradient id="paint0_linear_2001_4983" x1="62.7686" y1="4.14594" x2="131.553" y2="37.4035"
gradientUnits="userSpaceOnUse">
<stop stop-color="#F41C1B"/>
<stop offset="0.435" stop-color="#F72D2C"/>
<stop offset="1" stop-color="#FA4242"/>
</linearGradient>
</defs>
</svg>
<div class="py-[10px] px-[25px] w-full max-w-fit gap-[19px] border border-[#dedede] rounded-[1111px] flex items-center justify-center">
<?php
display_icon('dot');
?>
<span class="font-light text-[14px] leading-[140%] text-[#565656]">Свяжитесь с нами</span>
</div>
<div class="flex flex-col gap-[20px]">
<h2 class="max-[768px]:text-[28px] max-[1200px]:mb-[20px] font-bold mt-[25px] text-[45px] leading-[130%] text-[#3f3f3f]">
Контакты</h2>
<div class="flex flex-col font-semibold text-[28px] leading-[165%] text-[#3f3f3f]">
<p class=" font-light text-[18px] text-[#828282]">Номер телефона:</p>
<a target="_blank" href="tel:<?php echo get_field('phones', 'options')['main_phone'] ?>"
class="hover:text-[#f62322] !decoration-transparent skip-ink transition-colors"
href="tel:+7(800)302-11-85"><?php echo get_field('phones', 'options')['main_phone'] ?></a>
<a target="_blank" href="tel:<?php echo get_field('phones', 'options')['phone'] ?>"
class="hover:text-[#f62322] !decoration-transparent skip-ink transition-colors"
href="tel:+7(911)098-59-77"><?php echo get_field('phones', 'options')['phone'] ?></a>
</div>
<div class="flex flex-col gap-[10px]">
<p class="font-light text-[18px] text-[#828282]">Головной офис:</p>
<div class="font-normal text-[23px] leading-[137%] text-[#3f3f3f]">
<?php echo get_field('address', 'options') ?>
</div>
</div>
<div class="flex flex-col gap-[10px]">
<p class="font-light text-[18px] text-[#828282]">E-mail:</p>
<a class="hover:text-[#f62322] !decoration-transparent skip-ink transition-colors font-normal text-[23px] leading-[137%] text-[#3f3f3f]"
href="mailto:info@mylogistika2010.ru"><?php echo get_field('email', 'options') ?></a>
</div>
</div>
</div>
</div>
</div>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=03df01cd-1a4b-4cb2-9ae5-d32d62590767"
type="text/javascript"></script>
</section>

110
blocks/gallery-tabs/gallery-tabs.js Normal file
View File

@@ -0,0 +1,110 @@
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.gallery-block').forEach(function(block) {
const blockId = block.getAttribute('data-gallery-id');
initGalleryBlock(blockId);
});
});
function initGalleryBlock(blockId) {
const container = document.getElementById(blockId);
if (!container) return;
const swipers = {};
let lightbox;
function initSwiper(tabId) {
if (swipers[tabId]) {
swipers[tabId].destroy(true, true);
}
swipers[tabId] = new Swiper(`#${blockId} #swiper-${tabId}`, {
slidesPerView: 1.5,
spaceBetween: 20,
loop: true,
centeredSlides: true,
navigation: {
nextEl: `#${blockId} #swiper-${tabId} .swiper-button-next`,
prevEl: `#${blockId} #swiper-${tabId} .swiper-button-prev`,
},
on: {
slideChange: function() {
updateThumbnails(tabId, this.realIndex);
}
}
});
}
function initLightbox(tabId) {
if (lightbox) {
lightbox.destroy();
}
lightbox = GLightbox({
selector: `#${blockId} #tab-${tabId} .glightbox`
});
}
function updateThumbnails(tabId, activeIndex) {
const thumbnails = container.querySelectorAll(`#tab-${tabId} .thumbnail`);
thumbnails.forEach((thumb, index) => {
if (index === activeIndex) {
thumb.classList.add('active', '!border-blue-500');
thumb.classList.remove('border-transparent');
} else {
thumb.classList.remove('active', '!border-blue-500');
thumb.classList.add('border-transparent');
}
});
}
// Табы
container.querySelectorAll('.tab-button').forEach(button => {
button.addEventListener('click', () => {
const tabId = button.getAttribute('data-tab');
container.querySelectorAll('.tab-button').forEach(btn => {
btn.classList.remove('active', 'underline');
btn.classList.add('bg-gray-100');
});
button.classList.add('active', 'underline');
button.classList.remove('bg-gray-100');
container.querySelectorAll('.tab-content').forEach(content => {
content.classList.remove('block');
content.classList.add('hidden');
});
container.querySelector(`#tab-${tabId}`).classList.remove('hidden');
container.querySelector(`#tab-${tabId}`).classList.add('block');
setTimeout(() => {
initSwiper(tabId);
initLightbox(tabId);
}, 100);
});
});
// Thumbnails
container.addEventListener('click', (e) => {
if (e.target.closest('.thumbnail')) {
const thumbnail = e.target.closest('.thumbnail');
const index = parseInt(thumbnail.getAttribute('data-index'));
const activeTab = container.querySelector('.tab-content.block');
const tabId = activeTab.id.replace('tab-', '');
if (swipers[tabId]) {
swipers[tabId].slideToLoop(index);
}
updateThumbnails(tabId, index);
}
});
const firstTab = container.querySelector('.tab-button.active');
if (firstTab) {
const tabId = firstTab.getAttribute('data-tab');
setTimeout(() => {
initSwiper(tabId);
initLightbox(tabId);
}, 100);
}
}

136
blocks/gallery-tabs/gallery-tabs.php Normal file
View File

@@ -0,0 +1,136 @@
<?php
// Моковые данные (потом заменить на ACF поля)
$galleryData = [
'reception' => [
'title' => 'Зона ресепшен',
'images' => [
[
'src' => 'https://placehold.co/800x600/4a5568/ffffff?text=Ресепшен+1',
'thumb' => 'https://placehold.co/150x100/4a5568/ffffff?text=Р1',
'alt' => 'Ресепшен 1'
],
[
'src' => 'https://placehold.co/800x600/2d3748/ffffff?text=Ресепшен+2',
'thumb' => 'https://placehold.co/150x100/2d3748/ffffff?text=Р2',
'alt' => 'Ресепшен 2'
],
[
'src' => 'https://placehold.co/800x600/1a202c/ffffff?text=Ресепшен+3',
'thumb' => 'https://placehold.co/150x100/1a202c/ffffff?text=Р3',
'alt' => 'Ресепшен 3'
],
[
'src' => 'https://placehold.co/800x600/718096/ffffff?text=Ресепшен+4',
'thumb' => 'https://placehold.co/150x100/718096/ffffff?text=Р4',
'alt' => 'Ресепшен 4'
]
]
],
'gym' => [
'title' => 'Зона тренажерного зала',
'images' => [
[
'src' => 'https://placehold.co/800x600/dc2626/ffffff?text=Тренажёрный+1',
'thumb' => 'https://placehold.co/150x100/dc2626/ffffff?text=Т1',
'alt' => 'Тренажерный зал 1'
],
[
'src' => 'https://placehold.co/800x600/b91c1c/ffffff?text=Тренажёрный+2',
'thumb' => 'https://placehold.co/150x100/b91c1c/ffffff?text=Т2',
'alt' => 'Тренажерный зал 2'
],
[
'src' => 'https://placehold.co/800x600/991b1b/ffffff?text=Тренажёрный+3',
'thumb' => 'https://placehold.co/150x100/991b1b/ffffff?text=Т3',
'alt' => 'Тренажерный зал 3'
],
[
'src' => 'https://placehold.co/800x600/7f1d1d/ffffff?text=Тренажёрный+4',
'thumb' => 'https://placehold.co/150x100/7f1d1d/ffffff?text=Т4',
'alt' => 'Тренажерный зал 4'
],
[
'src' => 'https://placehold.co/800x600/ef4444/ffffff?text=Тренажёрный+5',
'thumb' => 'https://placehold.co/150x100/ef4444/ffffff?text=Т5',
'alt' => 'Тренажерный зал 5'
]
]
],
'group' => [
'title' => 'Залы для групповых тренировок',
'images' => [
[
'src' => 'https://placehold.co/800x600/059669/ffffff?text=Групповые+1',
'thumb' => 'https://placehold.co/150x100/059669/ffffff?text=Г1',
'alt' => 'Групповые тренировки 1'
],
[
'src' => 'https://placehold.co/800x600/047857/ffffff?text=Групповые+2',
'thumb' => 'https://placehold.co/150x100/047857/ffffff?text=Г2',
'alt' => 'Групповые тренировки 2'
],
[
'src' => 'https://placehold.co/800x600/065f46/ffffff?text=Групповые+3',
'thumb' => 'https://placehold.co/150x100/065f46/ffffff?text=Г3',
'alt' => 'Групповые тренировки 3'
]
]
]
];
$block_id = 'gallery-' . $block['id'];
?>
<div class="gallery-block"
id="<?php echo $block_id; ?>"
data-gallery-id="<?php echo $block_id; ?>">
<div class="container mx-auto">
<h2 class="text-[32px] font-bold mb-[30px]">Галерея</h2>
<div class="flex gap-[10px] mb-[30px]">
<?php foreach ($galleryData as $index => $tab): ?>
<button class="tab-button px-[24px] py-[12px] border-0 rounded-[25px] cursor-pointer transition-all <?php echo $index === 'reception' ? 'active underline' : ''; ?>"
data-tab="<?php echo $index; ?>">
<?php echo esc_html($tab['title']); ?>
</button>
<?php endforeach; ?>
</div>
</div>
<?php foreach ($galleryData as $tab_id => $tab_data): ?>
<div class="tab-content <?php echo $tab_id === 'reception' ? 'block' : 'hidden'; ?>"
id="tab-<?php echo $tab_id; ?>">
<div class="swiper gallery-swiper mb-[20px] h-[440px]" id="swiper-<?php echo $tab_id; ?>">
<div class="swiper-wrapper">
<?php foreach ($tab_data['images'] as $image): ?>
<div class="swiper-slide cursor-pointer min-h-[440px]">
<a href="<?php echo esc_url($image['src']); ?>"
class="glightbox block w-full h-full"
data-gallery="gallery-<?php echo $tab_id; ?>">
<img src="<?php echo esc_url($image['src']); ?>"
alt="<?php echo esc_attr($image['alt']); ?>"
class="w-full h-full object-cover">
</a>
</div>
<?php endforeach; ?>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="flex gap-[8px] overflow-x-auto">
<?php foreach ($tab_data['images'] as $thumb_index => $image): ?>
<div class="thumbnail flex-shrink-0 w-[80px] h-[60px] rounded-[5px] overflow-hidden cursor-pointer border-2 border-transparent <?php echo $thumb_index === 0 ? 'active !border-blue-500' : ''; ?>"
data-index="<?php echo $thumb_index; ?>">
<img src="<?php echo esc_url($image['thumb']); ?>"
alt="<?php echo esc_attr($image['alt']); ?>"
class="w-full h-full object-cover">
</div>
<?php endforeach; ?>
</div>
</div>
<?php endforeach; ?>
</div>

26
blocks/hero-block/hero-block.css Normal file
View File

@@ -0,0 +1,26 @@
.inverted-radius-wrapper:before {
content: '';
display: block;
width: 40px;
height: 25px;
background-color: transparent;
border-radius: 0 0 0 25px;
box-shadow: calc(15px * -0.5) calc(15px * 0.5) 0 0 #f9f9f9;
position: absolute;
z-index: -1;
left: -1px;
bottom: 100%;
}
.inverted-radius-wrapper:after {
content: '';
display: block;
width: 40px;
height: 25px;
background-color: transparent;
border-radius: 0 0 0 25px;
box-shadow: calc(15px * -0.5) calc(15px * 0.5) 0 0 #f9f9f9;
position: absolute;
z-index: -1;
left: calc(100% - 1px);
bottom: 0;
}

45
blocks/hero-block/hero-block.js Normal file
View File

@@ -0,0 +1,45 @@
document.addEventListener('DOMContentLoaded', function() {
const heroBlocks = document.querySelectorAll('.hero-block');
heroBlocks.forEach(function(block) {
const swiperContainer = block.querySelector('.swiper');
if (!swiperContainer) return;
const swiper = new Swiper(swiperContainer, {
slidesPerView: 1,
loop: true,
grabCursor: true,
on: {
slideChange: function () {
const realIndex = this.realIndex;
const paginationItems = block.querySelectorAll('.pagination-item');
paginationItems.forEach((item, index) => {
const line = item.querySelector('.pagination-line');
const text = item.querySelector('.slide-text');
if (index === realIndex) {
item.className = 'pagination-item flex-[2] cursor-pointer transition-all ';
line.className = 'pagination-line bg-[#222] h-[2px] rounded-[30px] transition-colors ';
text.className = 'slide-text mt-[10px] text-[14px] text-[#222] font-[600] opacity-100 transition-opacity ';
} else {
item.className = 'pagination-item flex-1 cursor-pointer transition-all ';
line.className = 'pagination-line bg-[#e0e0e0] h-[2px] rounded-[30px] transition-colors ';
text.className = 'slide-text mt-[10px] text-[14px] text-[#222] font-[600] opacity-0 transition-opacity ';
}
});
}
}
});
// Навигация
block.querySelector('.custom-prev')?.addEventListener('click', () => swiper.slidePrev());
block.querySelector('.custom-next')?.addEventListener('click', () => swiper.slideNext());
// Пагинация
block.querySelectorAll('.pagination-item').forEach((item, index) => {
item.addEventListener('click', () => swiper.slideToLoop(index));
});
});
});

170
blocks/hero-block/hero-block.php Normal file
View File

@@ -0,0 +1,170 @@
<?php
/**
* Заглавный блок с ACF полями
*/
$id = 'hero-' . $block['id'];
if (!empty($block['anchor'])) {
$id = $block['anchor'];
}
$className = 'hero-block';
if (!empty($block['className'])) {
$className .= ' ' . $block['className'];
}
if (!empty($block['align'])) {
$className .= ' align' . $block['align'];
}
// Получаем данные из ACF полей
$slider_data = get_field('slider') ?: [];
$text_data = get_field('text') ?: [];
$heading = $text_data['heading'] ?? '';
$heading_text = $text_data['heading_text'] ?? '';
$address = $text_data['adress'] ?? '';
$address_extra = $text_data['adress_extra'] ?? '';
$slides = [];
if (!empty($slider_data) && is_array($slider_data)) {
foreach ($slider_data as $index => $slide) {
$image_url = '';
if (!empty($slide['image']) && is_array($slide['image'])) {
$image_url = $slide['image']['url'] ?? '';
}
$slides[] = [
'number' => sprintf('%02d', $index + 1),
'title' => $slide['text'] ?? '',
'img' => $image_url
];
}
}
?>
<section class="container mx-auto hero-block">
<div class="flex justify-between gap-[24px]">
<div class="flex flex-col w-full mt-[26px]">
<?php display_icon('logo_fitness') ?>
<h1 class="font-[500] leading-[110%] text-[48px] mt-[20px]">
<?php if (!empty($heading)): ?>
<?php echo wp_kses_post($heading); ?>
<?php endif; ?>
</h1>
<p class="text-[24px] font-[500] mt-[20px]">
<?php echo !empty($heading_text) ? esc_html($heading_text) : 'Зал для тех, кто ценит комфорт и сервис'; ?>
</p>
<div class="flex gap-[12px] mt-[40px]">
<a class="!no-underline text-[#f8f8f8] text-[18px] font-[600] justify-center h-[75px] w-full max-w-[281px] rounded-[90px] flex items-center gap-[12px] red-gradient-hover"
href="#">
Пробная тренировка
<?php display_icon('button_arrow_up') ?>
</a>
<a class="!no-underline text-[#f8f8f8] text-[18px] font-[600] justify-center h-[75px] w-full max-w-[210px] rounded-[90px] flex items-center gap-[12px] grey-gradient-hover"
href="/цены">Смотреть цены</a>
</div>
<div class="flex items-center gap-[12px] mt-[50px]">
<?php display_icon('location') ?>
<div>
<p>
<b><?php echo !empty($address) ? esc_html($address) : 'Красноармейская, 120 — 2ой этаж'; ?></b>
</p>
<p>
<?php echo !empty($address_extra) ? esc_html($address_extra) : 'Главный вход со стороны ул. Косарева'; ?>
</p>
</div>
</div>
</div>
<div class="w-full max-w-[648px] h-[575px] relative">
<div class="swiper rounded-[25px] w-full h-full">
<div class="swiper-wrapper">
<?php foreach ($slides as $index => $slide): ?>
<div class="swiper-slide [&>_img]:max-w-none">
<?php if (!empty($slide['img'])): ?>
<img src="<?php echo esc_url($slide['img']); ?>" alt="<?php echo esc_attr($slide['title']); ?>">
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
</div>
<div class="inverted-radius-wrapper absolute z-[1] pt-[15px] pr-[15px] rounded-[25px] rounded-bl-none rounded-br-none rounded-tl-none flex items-center gap-[4px] bg-[#f9f9f9] left-0 bottom-0">
<button class="group custom-prev cursor-pointer">
<?php display_icon('slider-prev') ?>
</button>
<button class="group custom-next cursor-pointer">
<?php display_icon('slider-next') ?>
</button>
</div>
</div>
</div>
<div class="flex gap-[24px] mt-[44px]">
<?php foreach ($slides as $index => $slide): ?>
<div class="pagination-item <?php echo $index === 0 ? 'flex-[2]' : 'flex-1' ?> cursor-pointer transition-all"
data-slide="<?php echo $index ?>">
<div class="pagination-line <?php echo $index === 0 ? 'bg-[#222]' : 'bg-gray-[#e0e0e0]' ?> h-[2px] rounded-[30px] transition-colors"></div>
<div class="slide-text <?php echo $index === 0 ? 'opacity-100' : 'opacity-0' ?> transition-opacity">
<span class="slide-number"><?php echo esc_html($slide['number']); ?>.</span>
<span class="slide-title"><?php echo esc_html($slide['title']); ?></span>
</div>
</div>
<?php endforeach; ?>
</div>
</section>
<?php if (is_admin()): ?>
<script>
function initAdminSwiper() {
const selectors = [
'#hero-<?php echo $block['id']; ?> .swiper',
'[data-block="<?php echo $block['id']; ?>"] .swiper',
'.hero-block[data-slides] .swiper',
'.swiper'
];
let swiperContainer = null;
for (let selector of selectors) {
swiperContainer = document.querySelector(selector);
console.log(`🔍 Checking selector "${selector}":`, swiperContainer);
if (swiperContainer) break;
}
try {
const swiper = new Swiper(swiperContainer, {
slidesPerView: 1,
loop: true,
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
navigation: {
nextEl: '.custom-next',
prevEl: '.custom-prev',
}
});
} catch (error) {
}
}
if (typeof wp !== 'undefined' && wp.domReady) {
wp.domReady(function() {
setTimeout(initAdminSwiper, 300);
});
}
</script>
<?php endif; ?>

104
blocks/reviews-block/reviews-block.js Normal file
View File

@@ -0,0 +1,104 @@
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.reviews-block').forEach(function(block) {
const blockId = block.getAttribute('data-reviews-id');
initReviewsBlock(blockId);
});
});
function initReviewsBlock(blockId) {
const container = document.getElementById(blockId);
if (!container) return;
const swipers = {};
let lightbox;
function initSwiper(tabId) {
if (swipers[tabId]) {
swipers[tabId].destroy(true, true);
}
swipers[tabId] = new Swiper(`#${blockId} #swiper-${tabId}`, {
slidesPerView: 3,
spaceBetween: 20,
loop: true,
centeredSlides: true,
});
}
function initLightbox(tabId) {
if (lightbox) {
lightbox.destroy();
}
lightbox = GLightbox({
selector: `#${blockId} #tab-${tabId} .glightbox`,
touchNavigation: true,
loop: true,
autoplayVideos: false,
videosWidth: '90vw',
videosHeight: '80vh',
plyr: {
css: 'https://cdn.plyr.io/3.7.8/plyr.css',
js: 'https://cdn.plyr.io/3.7.8/plyr.js',
config: {
ratio: '16:9',
fullscreen: { enabled: true, fallback: true, iosNative: true },
controls: [
'play-large',
'play',
'progress',
'current-time',
'duration',
'mute',
'volume',
'fullscreen'
]
}
},
onOpen: () => {
console.log('видео открыли');
},
onClose: () => {
console.log('видео закрыли');
}
});
}
// Табы
container.querySelectorAll('.tab-button').forEach(button => {
button.addEventListener('click', () => {
const tabId = button.getAttribute('data-tab');
container.querySelectorAll('.tab-button').forEach(btn => {
btn.classList.remove('active', 'underline');
btn.classList.add('bg-gray-100');
});
button.classList.add('active', 'underline');
button.classList.remove('bg-gray-100');
container.querySelectorAll('.tab-content').forEach(content => {
content.classList.remove('block');
content.classList.add('hidden');
});
container.querySelector(`#tab-${tabId}`).classList.remove('hidden');
container.querySelector(`#tab-${tabId}`).classList.add('block');
setTimeout(() => {
initSwiper(tabId);
initLightbox(tabId);
}, 100);
});
});
const firstTab = container.querySelector('.tab-button.active');
if (firstTab) {
const tabId = firstTab.getAttribute('data-tab');
setTimeout(() => {
initSwiper(tabId);
initLightbox(tabId);
}, 100);
}
}

136
blocks/reviews-block/reviews-block.php Normal file
View File

@@ -0,0 +1,136 @@
<?php
// Моковые данные отзывов (потом заменить на ACF поля)
$reviewsData = [
'google' => [
'title' => 'Отзывы Google',
'reviews' => [
[
'src' => 'https://placehold.co/800x600/4f46e5/ffffff?text=Отзыв+Google+1',
'thumb' => 'https://placehold.co/300x200/4f46e5/ffffff?text=G1',
'alt' => 'Отзыв Google 1'
],
[
'src' => 'https://placehold.co/800x600/7c3aed/ffffff?text=Отзыв+Google+2',
'thumb' => 'https://placehold.co/300x200/7c3aed/ffffff?text=G2',
'alt' => 'Отзыв Google 2'
],
[
'src' => 'https://placehold.co/800x600/8b5cf6/ffffff?text=Отзыв+Google+3',
'thumb' => 'https://placehold.co/300x200/8b5cf6/ffffff?text=G3',
'alt' => 'Отзыв Google 3'
],
[
'src' => 'https://placehold.co/800x600/a855f7/ffffff?text=Отзыв+Google+4',
'thumb' => 'https://placehold.co/300x200/a855f7/ffffff?text=G4',
'alt' => 'Отзыв Google 4'
]
]
],
'yandex' => [
'title' => 'Отзывы Яндекс',
'reviews' => [
[
'src' => 'https://placehold.co/800x600/f59e0b/ffffff?text=Отзыв+Яндекс+1',
'thumb' => 'https://placehold.co/300x200/f59e0b/ffffff?text=Я1',
'alt' => 'Отзыв Яндекс 1'
],
[
'src' => 'https://placehold.co/800x600/d97706/ffffff?text=Отзыв+Яндекс+2',
'thumb' => 'https://placehold.co/300x200/d97706/ffffff?text=Я2',
'alt' => 'Отзыв Яндекс 2'
],
[
'src' => 'https://placehold.co/800x600/b45309/ffffff?text=Отзыв+Яндекс+3',
'thumb' => 'https://placehold.co/300x200/b45309/ffffff?text=Я3',
'alt' => 'Отзыв Яндекс 3'
]
]
],
'video' => [
'title' => 'Видеоотзывы',
'reviews' => [
[
'src' => '/path/to/video1.mp4', // Путь к видеофайлу
'thumb' => 'https://placehold.co/300x200/b45309/ffffff?text=В1',
'alt' => 'Видеоотзыв 1',
'type' => 'video',
'video_type' => 'mp4' // Тип видео
],
[
'src' => '/path/to/video2.webm',
'thumb' => 'https://placehold.co/300x200/b45309/ffffff?text=В2',
'alt' => 'Видеоотзыв 2',
'type' => 'video',
'video_type' => 'webm'
],
[
'src' => '/path/to/video3.mov',
'thumb' => 'https://placehold.co/300x200/b45309/ffffff?text=В3',
'alt' => 'Видеоотзыв 3',
'type' => 'video',
'video_type' => 'mov'
]
]
]
];
$block_id = 'reviews-' . $block['id'];
?>
<div class="reviews-block container mx-auto"
id="<?php echo $block_id; ?>"
data-reviews-id="<?php echo $block_id; ?>">
<div>
<h2 class="text-[32px] font-bold mb-[30px]">Отзывы клиентов</h2>
<!-- Табы -->
<div class="flex gap-[10px] mb-[30px]">
<?php foreach ($reviewsData as $index => $tab): ?>
<button class="tab-button px-[24px] py-[12px] border-0 rounded-[25px] cursor-pointer transition-all <?php echo $index === 'google' ? 'active underline' : ''; ?>"
data-tab="<?php echo $index; ?>">
<?php echo esc_html($tab['title']); ?>
</button>
<?php endforeach; ?>
</div>
</div>
<!-- Контент табов -->
<?php foreach ($reviewsData as $tab_id => $tab_data): ?>
<div class="tab-content <?php echo $tab_id === 'google' ? 'block' : 'hidden'; ?>"
id="tab-<?php echo $tab_id; ?>">
<!-- Swiper для отзывов -->
<div class="swiper reviews-swiper mb-[20px] h-[440px]" id="swiper-<?php echo $tab_id; ?>">
<div class="swiper-wrapper">
<?php foreach ($tab_data['reviews'] as $review): ?>
<div class="swiper-slide cursor-pointer min-h-[440px]">
<a href="<?php echo esc_url($review['src']); ?>"
class="glightbox block w-full h-full relative"
data-gallery="reviews-<?php echo $tab_id; ?>"
<?php if (isset($review['type']) && $review['type'] === 'video'): ?>
data-type="video"
data-description="<?php echo esc_attr($review['alt']); ?>"
<?php endif; ?>>
<img src="<?php echo esc_url($review['thumb']); ?>"
alt="<?php echo esc_attr($review['alt']); ?>"
class="w-full h-full object-cover rounded-lg">
<?php if (isset($review['type']) && $review['type'] === 'video'): ?>
<!-- Иконка воспроизведения для видео -->
<div class="absolute inset-0 flex items-center justify-center bg-[rgba(0,0,0,0.5)] hover:bg-[rgba(0,0,0,0.1)] transition-all">
<div class="w-[60px] h-[60px] bg-white bg-opacity-90 rounded-full flex items-center justify-center shadow-lg">
<svg class="w-[24px] h-[24px]" fill="currentColor" viewBox="0 0 20 20">
<path d="M8 5v10l8-5-8-5z"/>
</svg>
</div>
</div>
<?php endif; ?>
</a>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<?php endforeach; ?>
</div>