+
+
+
\ No newline at end of file
diff --git a/single-training.php b/single-training.php
new file mode 100644
index 0000000..339ec35
--- /dev/null
+++ b/single-training.php
@@ -0,0 +1,235 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![<?php echo esc_attr($trainer_photos[0]['alt']); ?>](<?php echo esc_url($trainer_photos[0]['url']); ?>)
+
+
+
+
+ 1): ?>
+
+
+
+
+
+ ![<?php echo esc_attr($trainer_photos[$i]['alt']); ?>](<?php echo esc_url($trainer_photos[$i]['url']); ?>)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Квалификация и достижения
+-
+
+
+
- + + + + + +
+
+
+ Документы
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Тренировки с
+
+
+
+
+
+ + +
+ ++ +
+ +
+ Узнать больше
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/template-parts/club-cards-template.php b/template-parts/club-cards-template.php
new file mode 100644
index 0000000..3a8c5f9
--- /dev/null
+++ b/template-parts/club-cards-template.php
@@ -0,0 +1,775 @@
+ '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();
+
+?>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![<?php echo esc_attr($training_photos[0]['alt']); ?>](<?php echo esc_url($training_photos[0]['url']); ?>)
+
+
+
+
+ 1): ?>
+
+
+
+
+
+ ![<?php echo esc_attr($training_photos[$i]['alt']); ?>](<?php echo esc_url($training_photos[$i]['url']); ?>)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Что происходит на тренировке
+-
+
+
+
- + + + + + +
+
+
+ Для кого подходит
+-
+
+
+
- + + + + + +
Тренеры
+
+
+
+ ID)) {
+ while (have_rows('short_info', $post->ID)) {
+ the_row();
+ $trainer_name = get_sub_field('name');
+ $trainer_exp = get_sub_field('exp');
+ $trainer_short_desc = get_sub_field('short_desc');
+ }
+ }
+
+ $trainer_photos = get_field('photo', $post->ID);
+ ?>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+ + + ++ +
+ + +
+ Подробнее
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ID);
+ if ($card_image): ?>
+
+
+ ID); ?>
+
+
+ ![<?php echo esc_attr($card_image['alt']); ?>](<?php echo esc_url($card_image['url']); ?>)
+
+
+ ID); ?>
+
+ + +
+ +
+
+
+
+
+
+ ID); ?>
+ ID) ?: ($card_prices['1_month']['day'] ?? ''); ?>
+ 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')
+ ];
+ }
+ }
+ }
+ }
+ }
+ ?>
+ 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')
+ ];
+ }
+ }
+ ?>
+
+
+
+
+
+
+ от
+
+
+
+
+
+
+ ₽
+
+ в день
+
+
+
+ >
+
+ + В клубные карты входит +
+
+ '',
+ 'heading' => 'Тренажерный зал'
+ ],
+ [
+ 'svg' => '',
+ 'heading' => 'Групповые программы по расписанию'
+ ],
+ [
+ 'svg' => '',
+ 'heading' => 'Кардио зона'
+ ],
+ [
+ 'svg' => '',
+ 'heading' => 'Зарядка телефона'
+ ],
+ [
+ 'svg' => '',
+ 'heading' => 'Раздевалки с душевыми'
+ ],
+ [
+ 'svg' => '',
+ 'heading' => 'Функциональная зона'
+ ],
+ [
+ 'svg' => '',
+ 'heading' => 'Сауна'
+ ],
+ [
+ 'svg' => '',
+ 'heading' => 'Полотенце'
+ ],
+ [
+ 'svg' => '',
+ 'heading' => 'Питьевая вода'
+ ],
+ [
+ 'svg' => '',
+ 'heading' => 'Вводный инструктаж'
+ ],
+ [
+ 'svg' => '',
+ 'heading' => 'Посещение зоны бокса'
+ ]
+ ];
+ } else {
+ $card_include = [
+ [
+ 'svg' => '',
+ 'heading' => 'Тренажерный зал'
+ ],
+ [
+ 'svg' => '',
+ 'heading' => 'Кардио зона'
+ ],
+ [
+ 'svg' => '',
+ 'heading' => 'Зарядка телефона'
+ ],
+ [
+ 'svg' => '',
+ 'heading' => 'Раздевалки с душевыми'
+ ],
+ [
+ 'svg' => '',
+ 'heading' => 'Функциональная зона'
+ ],
+ [
+ 'svg' => '',
+ 'heading' => 'Вводный инструктаж'
+ ],
+
+ ];
+ }
+
+
+ foreach ($card_include as $card) {
+ $card_svg = $card['svg'];
+ $card_heading = $card['heading'];
+ ?>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Дополнительные + услуги
+ + +
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
-
-
-
+>
+
-
-
-
- ID);
- if ($card_image): ?>
-
-
-
-
+
+
+
+
-
- ID); ?>
-
-
+
+
+
+ - -
- + + + +
+
+
ID);
+ if ($card_image): ?>
+
ID); ?>
-
+
+
+
+ ID); ?>
+
+ + +
+
+
-
- ID); ?>
-
-
diff --git a/template-parts/la-components/blocks/contacts-block/contacts-block.js b/template-parts/la-components/blocks/contacts-block/contacts-block.js
index a5018da..b6ba9c4 100644
--- a/template-parts/la-components/blocks/contacts-block/contacts-block.js
+++ b/template-parts/la-components/blocks/contacts-block/contacts-block.js
@@ -1,110 +1,74 @@
- ymaps.ready(function () {
+ymaps.ready(function () {
- var buildingCoordinates = [55.832659, 37.576118];
+ var buildingCoordinates = [56.462317, 84.969289];
-//Смещение карты, чтобы иконка была визуально по центру
+ // Смещение карты, чтобы иконка была визуально по центру
var offsetCoefficient = 0.001;
var mapCenter = [
- buildingCoordinates[0],
- buildingCoordinates[1] - offsetCoefficient
+ buildingCoordinates[0],
+ buildingCoordinates[1] - offsetCoefficient
];
var myMap = new ymaps.Map('map', {
- center: mapCenter,
- zoom: 17,
- controls: []
-});
+ center: mapCenter,
+ zoom: 17,
+ controls: []
+ });
// Отключаем все взаимодействия с картой
myMap.behaviors.disable(['scrollZoom', 'drag', 'multiTouch', 'dblClickZoom']);
- var svgIcon = '';
-
-
- 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
-}
+ buildingCoordinates,
+ {hintContent: '', balloonContent: ''},
+ {
+ preset: 'islands#greyIcon'
+ }
);
-
+ // Делаем карту черно-белой
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;
+ if (!isMapInteractive) {
+ myMap.behaviors.enable(['scrollZoom', 'drag', 'multiTouch', 'dblClickZoom']);
+ isMapInteractive = true;
- setTimeout(function () {
- document.addEventListener('click', deactivateMap);
- document.addEventListener('touchend', deactivateMap);
-}, 100);
+ setTimeout(function () {
+ document.addEventListener('click', deactivateMap);
+ document.addEventListener('touchend', deactivateMap);
+ }, 100);
- e.stopPropagation();
-}
-}
+ e.stopPropagation();
+ }
+ }
function deactivateMap(e) {
- var target = e.target;
+ 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 (e.type === 'touchend' || e.changedTouches || e.changedTouches[0]) {
+ var touch = e.changedTouches[0];
+ target = document.elementFromPoint(touch.clientX, touch.clientY);
+ }
- if (!mapElement.contains(target)) {
+ if (!mapElement.contains(target)) {
+ myMap.behaviors.disable(['scrollZoom', 'drag', 'multiTouch', 'dblClickZoom']);
+ isMapInteractive = false;
- myMap.behaviors.disable(['scrollZoom', 'drag', 'multiTouch', 'dblClickZoom']);
- isMapInteractive = false;
-
-
- document.removeEventListener('click', deactivateMap);
- document.removeEventListener('touchend', deactivateMap);
-}
-}
+ document.removeEventListener('click', deactivateMap);
+ document.removeEventListener('touchend', deactivateMap);
+ }
+ }
mapElement.addEventListener('click', activateMap);
mapElement.addEventListener('touchstart', activateMap);
-});
+});
\ No newline at end of file
diff --git a/template-parts/la-components/blocks/contacts-block/contacts-block.php b/template-parts/la-components/blocks/contacts-block/contacts-block.php
index bfd7b50..66303b6 100644
--- a/template-parts/la-components/blocks/contacts-block/contacts-block.php
+++ b/template-parts/la-components/blocks/contacts-block/contacts-block.php
@@ -25,7 +25,7 @@ if (!empty($blocks) && isset($blocks[0]['blockName']) && $blocks[0]['blockName']
$is_first_block = true;
}
-$section_padding = $is_first_block ? "pt-[64px] max-[768px]:pt-[40px]" : "pt-[80px] max-[768px]:pt-[64px]";
+$section_padding = $is_first_block ? "!pt-[0]" : "!pt-[0px]";
?>
@@ -49,35 +49,54 @@ $section_padding = $is_first_block ? "pt-[64px] max-[768px]:pt-[40px]" : "pt-[80
- От Р.
-
-
-
-
-
+
ID); ?>
-
+ ID) ?: ($card_prices['1_month']['day'] ?? ''); ?>
+ 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')
+ ];
+ }
+ }
+ }
+ }
+ }
+ ?>
+ 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')
+ ];
+ }
+ }
+ ?>
+
+
+
+
+
+ от
+
+
+
+
+
+ ₽
+
+ в день
+
-
+
-
-
+
+
-
+
+
-
- Контакты
-
+
-
+
-
-
-
-
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
@@ -85,22 +104,32 @@ $section_padding = $is_first_block ? "pt-[64px] max-[768px]:pt-[40px]" : "pt-[80
-
-
-
-
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
@@ -109,18 +138,18 @@ $section_padding = $is_first_block ? "pt-[64px] max-[768px]:pt-[40px]" : "pt-[80
-
+
-
+
-
+
@@ -130,7 +159,7 @@ $section_padding = $is_first_block ? "pt-[64px] max-[768px]:pt-[40px]" : "pt-[80
![<?php echo esc_attr($social_item['icon']['alt']); ?>](<?php echo esc_url($social_item['icon']['url']); ?>)
+ class="object-contain w-[42px]" />
diff --git a/template-parts/la-components/blocks/form-block/form-block.css b/template-parts/la-components/blocks/form-block/form-block.css
index 66cee77..fc5b231 100644
--- a/template-parts/la-components/blocks/form-block/form-block.css
+++ b/template-parts/la-components/blocks/form-block/form-block.css
@@ -1,91 +1,89 @@
-.form-block-wrapper .ff-el-group {
- margin-bottom: 24px;
+#fluentform_3 {
+
}
-.form-block-wrapper .ff-el-input--label label {
- display: block;
- margin-bottom: 8px;
- font-weight: 600;
- color: #374151;
- font-size: 14px;
-}
-
-.form-block-wrapper .ff-el-form-control {
- width: 100%;
- padding: 12px 16px;
- border: 2px solid #e5e7eb;
- border-radius: 8px;
- font-size: 16px;
- transition: all 0.2s ease;
- background: #ffffff;
- box-sizing: border-box;
-}
-
-.form-block-wrapper .ff-el-form-control:focus {
- outline: none;
- border-color: #3b82f6;
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.form-block-wrapper .ff-btn-submit {
- width: 100%;
- padding: 14px 24px;
- background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
- color: white;
+#fluentform_3 .ff-el-form-control {
border: none;
- border-radius: 8px;
+ box-shadow: 0 2px 32px 0 rgba(16, 15, 15, 0.03);
+ background: #fff;
+ border-radius: 90px;
+ height: 77px;
+ padding-left: 32px;
+ padding-right: 32px;
+ outline: 1px solid transparent;
+
+ font-weight: 500;
font-size: 16px;
+ line-height: 130%;
+ color: #6c6b6b;
+}
+
+#fluentform_3 .ff-btn-submit {
+ height: 75px;
+ background: linear-gradient(90deg, #e21e24 39.42%, #ff2f35 92.9%);
+ border-radius: 90px;
font-weight: 600;
+ font-size: 18px;
+ line-height: 195%;
+ color: #f8f8f8;
+ display: grid;
+ place-content: center;
+ width: 100%;
cursor: pointer;
- transition: all 0.3s ease;
- text-transform: none;
+ transition: 180ms ease-in;
}
-.form-block-wrapper .ff-btn-submit:hover {
- transform: translateY(-1px);
- box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
+#fluentform_3 .ff-btn-submit:hover {
+ font-weight: 700;
+ transition: 180ms ease-in;
}
-.form-block-wrapper .ff-btn-submit:active {
- transform: translateY(0);
+#fluentform_3 .ff_submit_btn_wrapper {
+ margin-bottom: 0!important;
}
-.form-block-wrapper .asterisk-right label::after {
- content: ' *';
- color: #ef4444;
- font-weight: bold;
+#fluentform_3 .error.text-danger {
+ position: absolute;
+ margin-top: 0;
+ bottom: -18px;
+ left: 0;
+ width: 100%;
+ text-align: center;
}
-.form-block-wrapper .ff-message-success,
-.form-block-wrapper .ff-message-container {
- display: none !important;
+#fluentform_3 .ff-el-group {
+ position: relative;
+ margin-bottom: 18px;
}
-.form-block-wrapper.form-loading .ff-btn-submit {
- opacity: 0.7;
+#fluentform_3_success {
+ display: none!important;
+}
+
+
+
+#fluentform_3 .ff-el-input--label {
+ position: absolute;
+ top: 50%;
+ left: 32px;
+ transform: translateY(-50%);
pointer-events: none;
+ z-index: 2;
+ margin: 0;
+ transition: 180ms ease-in-out;
+
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 130%;
+ color: #6c6b6b;
}
-@media (max-width: 768px) {
- .form-block-wrapper {
- margin: 20px;
- padding: 20px;
- }
- .form-block-wrapper .ff-el-form-control {
- font-size: 16px;
- padding: 10px 14px;
- }
-
- .form-block-wrapper .ff-btn-submit {
- font-size: 16px;
- padding: 12px 20px;
- }
-}
-
-@media (max-width: 1024px) and (min-width: 769px) {
- .form-block-wrapper {
- padding: 25px;
- }
+#fluentform_3 .ff-el-group.focused .ff-el-input--label,
+#fluentform_3 .ff-el-group.has-value .ff-el-input--label {
+ top: 6px;
+ transform: translateY(0);
+ transition: 180ms ease-in-out;
+ font-size: 14px;
}
\ No newline at end of file
diff --git a/template-parts/la-components/blocks/form-block/form-block.js b/template-parts/la-components/blocks/form-block/form-block.js
new file mode 100644
index 0000000..3a21b83
--- /dev/null
+++ b/template-parts/la-components/blocks/form-block/form-block.js
@@ -0,0 +1,82 @@
+document.addEventListener('DOMContentLoaded', function() {
+ const inputs = document.querySelectorAll('#fluentform_3 .ff-el-form-control');
+ const phoneInput = document.querySelector('#fluentform_3 .ff-el-phone');
+
+ inputs.forEach(input => {
+ // Добавляем класс при фокусе
+ input.addEventListener('focus', function() {
+ this.closest('.ff-el-group').classList.add('focused');
+ });
+
+ // Убираем класс при потере фокуса
+ input.addEventListener('blur', function() {
+ this.closest('.ff-el-group').classList.remove('focused');
+ });
+
+ // Добавляем/убираем класс при вводе
+ input.addEventListener('input', function() {
+ const group = this.closest('.ff-el-group');
+ if (this.value.trim() !== '') {
+ group.classList.add('has-value');
+ } else {
+ group.classList.remove('has-value');
+ }
+ });
+ });
+
+ // Маска для телефона +7 (___) ___-__-__
+ if (phoneInput) {
+ phoneInput.addEventListener('input', function(e) {
+ let value = e.target.value.replace(/\D/g, ''); // Убираем все кроме цифр
+
+ // Если начинается с 8, заменяем на 7
+ if (value.startsWith('8')) {
+ value = '7' + value.slice(1);
+ }
+
+ // Если не начинается с 7, добавляем 7
+ if (!value.startsWith('7') && value.length > 0) {
+ value = '7' + value;
+ }
+
+ let formattedValue = '';
+
+ if (value.length > 0) {
+ formattedValue = '+7';
+
+ if (value.length > 1) {
+ formattedValue += ' (' + value.slice(1, 4);
+
+ if (value.length > 4) {
+ formattedValue += ') ' + value.slice(4, 7);
+
+ if (value.length > 7) {
+ formattedValue += '-' + value.slice(7, 9);
+
+ if (value.length > 9) {
+ formattedValue += '-' + value.slice(9, 11);
+ }
+ }
+ }
+ }
+ }
+
+ e.target.value = formattedValue;
+ });
+
+ // Обработка клавиш для корректного удаления
+ phoneInput.addEventListener('keydown', function(e) {
+ if (e.key === 'Backspace' || e.key === 'Delete') {
+ const cursorPos = e.target.selectionStart;
+ const value = e.target.value;
+
+ // Если курсор на служебном символе, сдвигаем его
+ if (cursorPos > 0 && [' ', '(', ')', '-'].includes(value[cursorPos - 1])) {
+ setTimeout(() => {
+ e.target.setSelectionRange(cursorPos - 1, cursorPos - 1);
+ }, 0);
+ }
+ }
+ });
+ }
+});
\ No newline at end of file
diff --git a/template-parts/la-components/blocks/form-block/form-block.php b/template-parts/la-components/blocks/form-block/form-block.php
index fdc99b6..1acc361 100644
--- a/template-parts/la-components/blocks/form-block/form-block.php
+++ b/template-parts/la-components/blocks/form-block/form-block.php
@@ -10,24 +10,44 @@ $current_url = home_url($_SERVER['REQUEST_URI']);
$page_title = get_the_title() ?: 'Главная страница';
$form_name = $form_title;
+$room = get_current_room();
+if ($room === 'gym') {
+ $section_classes = 'bg-cover bg-center bg-no-repeat';
+ $bg_image = get_template_directory_uri() . '/assets/images/form-bg-dark.png';
+ $style_attr = 'style="background-image: url(' . esc_url($bg_image) . ')"';
+} else {
+ $section_classes = 'bg-cover bg-center bg-no-repeat';
+ $bg_image = get_template_directory_uri() . '/assets/images/form-bg-light.png';
+ $style_attr = 'style="background-image: url(' . esc_url($bg_image) . ')"';
+}
+
$hidden_value = "Форма: {$form_name} | Страница: {$page_title} | URL: {$current_url}";
?>
-
-
-
-
+
+>
-
-
+
+  . '/assets/images/form-image-trainer.png'); ?>)
+
+ Пробная персональная
+ тренировка
+ за 1200 ₽
+
+ Познакомимся, покажем зал и
+ подберём
+ оптимальные для вас тренировки!
+
+
\ No newline at end of file
diff --git a/template-parts/la-components/blocks/gallery-tabs/gallery-tabs.css b/template-parts/la-components/blocks/gallery-tabs/gallery-tabs.css
new file mode 100644
index 0000000..55aaecd
--- /dev/null
+++ b/template-parts/la-components/blocks/gallery-tabs/gallery-tabs.css
@@ -0,0 +1,55 @@
+.gallery-block .thumbnail {
+ opacity: 0.5;
+ transition: 180ms ease-in-out;
+
+}
+
+.gallery-block .thumbnail.active {
+ opacity: 1;
+ transition: 180ms ease-in-out;
+}
+
+.gallery-block .tab-button {
+ box-shadow: 0 2px 32px 0 rgba(16, 15, 15, 0.03);
+ background: #fff;
+ font-weight: 500;
+ font-size: 18px;
+ line-height: 195%;
+ color: #222;
+}
+
+.gallery-block .tab-button.active {
+ font-size: 18px;
+ line-height: 195%;
+ color: #f8f8f8;
+ box-shadow: none;
+ background: linear-gradient(90deg, #9d9994 39.42%, #ccc9c4 92.9%);
+}
+.dark .gallery-block .tab-button.active {
+ background: linear-gradient(90deg, #2b2c35 39.42%, #6e7996 92.9%);
+ color: #f8f8f8;
+}
+
+
+.gallery-block .swiper-slide img {
+ transition: opacity 180ms ease-in-out;
+}
+
+.gallery-block .swiper-slide img[loading="lazy"] {
+ opacity: 0;
+}
+
+.gallery-block .swiper-slide img[loading="lazy"].loaded,
+.gallery-block .swiper-slide img:not([loading="lazy"]) {
+ opacity: 1;
+}
+
+.gallery-block .thumbnail:not(.active) {
+ opacity: 0.6;
+ transition: opacity 180ms ease-in-out;
+}
+
+.gallery-block .thumbnail.active {
+ opacity: 1;
+}
+
diff --git a/template-parts/la-components/blocks/gallery-tabs/gallery-tabs.js b/template-parts/la-components/blocks/gallery-tabs/gallery-tabs.js
index afe3a9e..4e1b6ff 100644
--- a/template-parts/la-components/blocks/gallery-tabs/gallery-tabs.js
+++ b/template-parts/la-components/blocks/gallery-tabs/gallery-tabs.js
@@ -1,5 +1,5 @@
-document.addEventListener('DOMContentLoaded', function() {
- document.querySelectorAll('.gallery-block').forEach(function(block) {
+document.addEventListener('DOMContentLoaded', function () {
+ document.querySelectorAll('.gallery-block').forEach(function (block) {
const blockId = block.getAttribute('data-gallery-id');
initGalleryBlock(blockId);
});
@@ -10,99 +10,126 @@ function initGalleryBlock(blockId) {
if (!container) return;
const swipers = {};
+ const thumbnailSwipers = {};
+ const initializedTabs = new Set();
let lightbox;
- function initAllSwipers() {
- const tabs = container.querySelectorAll('.tab-button');
+ function initTabSwiper(tabId) {
+ if (initializedTabs.has(tabId)) return;
- tabs.forEach(button => {
- const tabId = button.getAttribute('data-tab');
- const tabContent = container.querySelector(`#tab-${tabId}`);
+ const tabContent = container.querySelector(`#tab-${tabId}`);
+ if (!tabContent?.querySelector('.gallery-swiper')) return;
- if (tabContent && tabContent.querySelector('.swiper')) {
- const wasHidden = tabContent.classList.contains('hidden');
- if (wasHidden) {
- tabContent.style.visibility = 'hidden';
- tabContent.style.position = 'absolute';
- tabContent.classList.remove('hidden');
- tabContent.classList.add('block');
- }
+ thumbnailSwipers[tabId] = new Swiper(`#${blockId} #thumbnail-swiper-${tabId}`, {
+ slidesPerView: 'auto',
+ spaceBetween: 24,
+ freeMode: true,
+ grabCursor: true,
+ watchSlidesProgress: true,
+ });
- if (swipers[tabId]) {
- swipers[tabId].destroy(true, true);
- }
-
- swipers[tabId] = new Swiper(`#${blockId} #swiper-${tabId}`, {
- slidesPerView: 1.5,
- spaceBetween: 20,
- loop: true,
- centeredSlides: true,
- grabCursor: true,
- observer: true,
- observeParents: true,
- watchSlidesProgress: true,
- navigation: {
- nextEl: `#${blockId} #swiper-${tabId} .swiper-button-next`,
- prevEl: `#${blockId} #swiper-${tabId} .swiper-button-prev`,
- },
- on: {
- slideChange: function() {
- updateThumbnails(tabId, this.realIndex);
- }
- }
- });
-
- if (wasHidden) {
- tabContent.style.visibility = '';
- tabContent.style.position = '';
- tabContent.classList.add('hidden');
- tabContent.classList.remove('block');
+ swipers[tabId] = new Swiper(`#${blockId} #swiper-${tabId}`, {
+ slidesPerView: 'auto',
+ spaceBetween: 24,
+ centeredSlides: true,
+ initialSlide: 1,
+ scrollbar: {
+ el: `#swiper-scrollbar-${tabId}`,
+ draggable: true,
+ },
+ grabCursor: true,
+ watchSlidesProgress: true,
+ lazy: {
+ loadPrevNext: true,
+ loadOnTransitionStart: true,
+ },
+ on: {
+ slideChange: function () {
+ updateThumbnails(tabId, this.realIndex);
+ centerThumbnail(tabId, this.realIndex);
}
}
});
+
+ initializedTabs.add(tabId);
}
function initLightbox(tabId) {
- if (lightbox) {
- lightbox.destroy();
- }
+ const currentSelector = `#${blockId} #tab-${tabId} .glightbox`;
- lightbox = GLightbox({
- selector: `#${blockId} #tab-${tabId} .glightbox`
- });
+ if (lightbox?.settings?.selector !== currentSelector) {
+ if (lightbox) {
+ lightbox.destroy();
+ }
+
+ lightbox = GLightbox({
+ selector: currentSelector,
+ preload: false,
+ touchNavigation: true,
+ loop: true
+ });
+ }
}
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');
+ thumb.classList.remove('opacity-50', 'hover:opacity-80');
+ thumb.classList.add('opacity-100', 'active');
} else {
- thumb.classList.remove('active', '!border-blue-500');
- thumb.classList.add('border-transparent');
+ thumb.classList.remove('opacity-100', 'active');
+ thumb.classList.add('opacity-50', 'hover:opacity-80');
}
});
}
- initAllSwipers();
+ function centerThumbnail(tabId, activeIndex) {
+ if (thumbnailSwipers[tabId]) {
+ thumbnailSwipers[tabId].slideTo(activeIndex);
+ }
+ }
+
+ function preloadHeroImage() {
+ const activeTab = container.querySelector('.tab-button.active');
+ if (!activeTab) return;
+
+ const tabId = activeTab.getAttribute('data-tab');
+ const firstImage = container.querySelector(`#tab-${tabId} .swiper-slide:first-child img`);
+
+ if (firstImage && firstImage.src) {
+ const link = document.createElement('link');
+ link.rel = 'preload';
+ link.as = 'image';
+ link.href = firstImage.src;
+ document.head.appendChild(link);
+ }
+ }
+
+ function debounce(func, wait) {
+ let timeout;
+ return (...args) => {
+ clearTimeout(timeout);
+ timeout = setTimeout(() => func.apply(this, args), wait);
+ };
+ }
+
+ preloadHeroImage();
const activeTab = container.querySelector('.tab-button.active');
if (activeTab) {
const tabId = activeTab.getAttribute('data-tab');
+ initTabSwiper(tabId);
initLightbox(tabId);
}
container.querySelectorAll('.tab-button').forEach(button => {
- button.addEventListener('click', () => {
+ button.addEventListener('click', debounce(() => {
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-button').forEach(btn =>
+ btn.classList.remove('active'));
+ button.classList.add('active');
container.querySelectorAll('.tab-content').forEach(content => {
content.classList.remove('block');
@@ -113,28 +140,41 @@ function initGalleryBlock(blockId) {
targetTab.classList.remove('hidden');
targetTab.classList.add('block');
- if (swipers[tabId]) {
- requestAnimationFrame(() => {
+ initTabSwiper(tabId);
+
+ requestAnimationFrame(() => {
+ if (swipers[tabId]) {
swipers[tabId].update();
- });
- }
+ }
+ if (thumbnailSwipers[tabId]) {
+ thumbnailSwipers[tabId].update();
+ }
+ });
initLightbox(tabId);
- });
+
+ }, 100));
});
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-', '');
+ const thumbnail = e.target.closest('.thumbnail');
+ if (!thumbnail) return;
- if (swipers[tabId]) {
- swipers[tabId].slideToLoop(index);
- }
+ const index = parseInt(thumbnail.getAttribute('data-index'));
+ const activeTabContent = container.querySelector('.tab-content.block');
+ const tabId = activeTabContent.id.replace('tab-', '');
- updateThumbnails(tabId, index);
+ if (swipers[tabId]) {
+ swipers[tabId].slideTo(index);
}
+
+ updateThumbnails(tabId, index);
+ centerThumbnail(tabId, index);
+ });
+
+ window.addEventListener('beforeunload', () => {
+ Object.values(swipers).forEach(swiper => swiper?.destroy());
+ Object.values(thumbnailSwipers).forEach(swiper => swiper?.destroy());
+ if (lightbox) lightbox.destroy();
});
}
\ No newline at end of file
diff --git a/template-parts/la-components/blocks/gallery-tabs/gallery-tabs.php b/template-parts/la-components/blocks/gallery-tabs/gallery-tabs.php
index 1a49d96..d70c25f 100644
--- a/template-parts/la-components/blocks/gallery-tabs/gallery-tabs.php
+++ b/template-parts/la-components/blocks/gallery-tabs/gallery-tabs.php
@@ -1,85 +1,124 @@
-
+
+
+
+
+
+
-
-
-
-
-
-
- $tab) : ?>
-
-
-
-
-
-
+
+
+ $tab) : ?>
+
+
+
+
+
+
+
$tab) : ?>
-
-
+
+
-
-
+ $image) : ?>
+
-
-
-
- $image) : ?>
-
- ![<?php echo esc_attr($image['alt']); ?>](<?php echo esc_url($image['sizes']['thumbnail']); ?>)
+
+
+
+ $image) : ?>
+
+
+
+
+
+
-
+
-
-
-
-
+
diff --git a/template-parts/la-components/blocks/hero-block/hero-block.js b/template-parts/la-components/blocks/hero-block/hero-block.js
index 1f0f288..bbccb5e 100644
--- a/template-parts/la-components/blocks/hero-block/hero-block.js
+++ b/template-parts/la-components/blocks/hero-block/hero-block.js
@@ -8,7 +8,6 @@ document.addEventListener('DOMContentLoaded', function() {
const swiper = new Swiper(swiperContainer, {
slidesPerView: 1,
- loop: true,
grabCursor: true,
on: {
slideChange: function () {
diff --git a/template-parts/la-components/blocks/hero-block/hero-block.php b/template-parts/la-components/blocks/hero-block/hero-block.php
index 09e3cbb..8fa2d0d 100644
--- a/template-parts/la-components/blocks/hero-block/hero-block.php
+++ b/template-parts/la-components/blocks/hero-block/hero-block.php
@@ -42,19 +42,20 @@ if (!empty($slider_data) && is_array($slider_data)) {
}
$room = get_current_room();
-$base_classes = 'hero-block pb-[30px] pt-[14px]';
if ($room === 'fitness') {
- $section_classes = $base_classes . 'radient-bg';
+ $section_classes = 'radient-bg';
$style_attr = '';
} else {
- $section_classes = $base_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) . ')"';
+ $section_classes = 'bg-cover bg-center bg-no-repeat';
+ $bg_image = 'data:image/webp;base64,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';
+
+ $style_attr = 'style="background-image: url(' . esc_attr($bg_image) . ')"';
}
+
?>
->
+>
@@ -100,7 +101,7 @@ if ($room === 'fitness') {
$slide): ?>
- ![<?php echo esc_attr($slide['title']); ?>](<?php echo esc_url($slide['img']); ?>)
+
@@ -153,7 +154,6 @@ if ($room === 'fitness') {
for (let selector of selectors) {
swiperContainer = document.querySelector(selector);
- console.log(`🔍 Checking selector "${selector}":`, swiperContainer);
if (swiperContainer) break;
}
diff --git a/template-parts/la-components/blocks/line-block/line-block.php b/template-parts/la-components/blocks/line-block/line-block.php
new file mode 100644
index 0000000..f015f71
--- /dev/null
+++ b/template-parts/la-components/blocks/line-block/line-block.php
@@ -0,0 +1,108 @@
+
+
+
+
+
+
+
+
+
+
+ 2500 м²
+ светлого пространства
+
+
+
+
+
+
+
+ 45+
+ направлений тренировок
+
+
+
+
+
+
+
+ ТОП
+ оборудование из США
+
+
+
+
+
\ No newline at end of file
diff --git a/template-parts/la-components/blocks/masonry-tiles-1/masonry-tiles-1.php b/template-parts/la-components/blocks/masonry-tiles-1/masonry-tiles-1.php
new file mode 100644
index 0000000..f13d9d6
--- /dev/null
+++ b/template-parts/la-components/blocks/masonry-tiles-1/masonry-tiles-1.php
@@ -0,0 +1,192 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ style="background-image: url(''); background-size: cover; background-position: center;"
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  . '/assets/images/masonry-decor.png'; ?>)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ style="background-image: url(''); background-size: cover; background-position: center;"
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/template-parts/la-components/blocks/masonry-tiles-2/masonry-tiles-2.php b/template-parts/la-components/blocks/masonry-tiles-2/masonry-tiles-2.php
new file mode 100644
index 0000000..80481ab
--- /dev/null
+++ b/template-parts/la-components/blocks/masonry-tiles-2/masonry-tiles-2.php
@@ -0,0 +1,210 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ; ?>)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ style="background-image: url(''); background-size: cover; background-position: center;"
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ style="background-image: url(''); background-size: cover; background-position: center;"
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ style="background-image: url(''); background-size: cover; background-position: center;"
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/template-parts/la-components/blocks/reviews-block/reviews-block.css b/template-parts/la-components/blocks/reviews-block/reviews-block.css
new file mode 100644
index 0000000..7a91864
--- /dev/null
+++ b/template-parts/la-components/blocks/reviews-block/reviews-block.css
@@ -0,0 +1,23 @@
+
+.reviews-block .tab-button {
+ box-shadow: 0 2px 32px 0 rgba(16, 15, 15, 0.03);
+ background: #fff;
+ font-weight: 500;
+ font-size: 18px;
+ line-height: 195%;
+ color: #222;
+}
+
+.reviews-block .tab-button.active {
+ font-size: 18px;
+ line-height: 195%;
+ color: #f8f8f8;
+ box-shadow: none;
+ background: linear-gradient(90deg, #9d9994 39.42%, #ccc9c4 92.9%);
+}
+
+.dark .reviews-block .tab-button.active {
+ background: linear-gradient(90deg, #2b2c35 39.42%, #6e7996 92.9%);
+ color: #f8f8f8;
+}
+
diff --git a/template-parts/la-components/blocks/reviews-block/reviews-block.js b/template-parts/la-components/blocks/reviews-block/reviews-block.js
index bbf2e6e..4a32525 100644
--- a/template-parts/la-components/blocks/reviews-block/reviews-block.js
+++ b/template-parts/la-components/blocks/reviews-block/reviews-block.js
@@ -13,102 +13,139 @@ function initReviewsBlock(blockId) {
let lightbox;
function initAllSwipers() {
- const tabs = container.querySelectorAll('.tab-button');
+ container.querySelectorAll('.reviews-swiper').forEach(swiperEl => {
+ const tabId = swiperEl.id.replace('swiper-', '');
- tabs.forEach(button => {
- const tabId = button.getAttribute('data-tab');
- const tabContent = container.querySelector(`#tab-${tabId}`);
-
- if (tabContent && tabContent.querySelector('.swiper')) {
- const wasHidden = tabContent.classList.contains('hidden');
- if (wasHidden) {
- tabContent.style.visibility = 'hidden';
- tabContent.style.position = 'absolute';
- tabContent.classList.remove('hidden');
- tabContent.classList.add('block');
- }
-
- if (swipers[tabId]) {
- swipers[tabId].destroy(true, true);
- }
-
- swipers[tabId] = new Swiper(`#${blockId} #swiper-${tabId}`, {
- slidesPerView: 'auto',
- spaceBetween: 20,
- loop: true,
- centeredSlides: true,
- observer: true,
- observeParents: true,
- watchSlidesProgress: true,
- });
-
- if (wasHidden) {
- tabContent.style.visibility = '';
- tabContent.style.position = '';
- tabContent.classList.add('hidden');
- tabContent.classList.remove('block');
- }
- }
+ swipers[tabId] = new Swiper(`#${blockId} #swiper-${tabId}`, {
+ slidesPerView: 'auto',
+ spaceBetween: 24,
+ grabCursor: true,
+ watchSlidesProgress: true,
+ scrollbar: {
+ el: `#${blockId} #swiper-${tabId} .swiper-scrollbar`,
+ draggable: true,
+ },
+ });
});
}
function initLightbox(tabId) {
- if (lightbox) {
- lightbox.destroy();
- }
+ const currentSelector = `#${blockId} #tab-${tabId} .glightbox`;
- 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('видео закрыли');
+ if (lightbox?.settings?.selector !== currentSelector) {
+ if (lightbox) {
+ lightbox.destroy();
}
- });
+
+ const isVideo = tabId === 'video';
+
+ lightbox = GLightbox({
+ selector: currentSelector,
+ touchNavigation: true,
+ loop: true,
+ autoplayVideos: false,
+ videosWidth: isVideo ? '90vw' : 'auto',
+ videosHeight: isVideo ? '80vh' : 'auto',
+ plyr: isVideo ? {
+ 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'
+ ]
+ }
+ } : undefined,
+ });
+ }
}
+ function toggleRatingSection(show) {
+ const ratingSection = container.querySelector('.rating-section');
+ if (ratingSection) {
+ if (show) {
+ ratingSection.classList.remove('hidden');
+ ratingSection.classList.add('flex');
+ } else {
+ ratingSection.classList.remove('flex');
+ ratingSection.classList.add('hidden');
+ }
+ }
+ }
+
+ function updateRatingAndStars(rating, stars) {
+
+ if (stars) {
+ const starsElement = container.querySelector('[data-reviews="stars"]');
+ if (starsElement) {
+ const starCount = parseInt(stars);
+ const lastDigit = starCount % 10;
+ const lastTwoDigits = starCount % 100;
+
+ let ending;
+ if (lastTwoDigits >= 11 && lastTwoDigits <= 19) {
+ ending = ' оценок';
+ } else if (lastDigit == 1) {
+ ending = ' оценка';
+ } else if (lastDigit >= 2 && lastDigit <= 4) {
+ ending = ' оценки';
+ } else {
+ ending = ' оценок';
+ }
+
+ starsElement.textContent = starCount + ending;
+ }
+ }
+ }
+
+ function debounce(func, wait) {
+ let timeout;
+ return (...args) => {
+ clearTimeout(timeout);
+ timeout = setTimeout(() => func.apply(this, args), wait);
+ };
+ }
+
+
initAllSwipers();
+
const activeTab = container.querySelector('.tab-button.active');
if (activeTab) {
const tabId = activeTab.getAttribute('data-tab');
initLightbox(tabId);
}
+
container.querySelectorAll('.tab-button').forEach(button => {
- button.addEventListener('click', () => {
+ button.addEventListener('click', debounce(() => {
const tabId = button.getAttribute('data-tab');
+ const rating = button.getAttribute('data-rating');
+ const stars = button.getAttribute('data-stars');
+ const isVideoTab = tabId === 'video';
+
container.querySelectorAll('.tab-button').forEach(btn => {
- btn.classList.remove('active', 'underline');
- btn.classList.add('bg-gray-100');
+ btn.classList.remove('active');
});
- button.classList.add('active', 'underline');
- button.classList.remove('bg-gray-100');
+ button.classList.add('active');
+
+
+ toggleRatingSection(!isVideoTab);
+
+
+ if (!isVideoTab) {
+ updateRatingAndStars(rating, stars);
+ }
+
container.querySelectorAll('.tab-content').forEach(content => {
content.classList.remove('block');
@@ -119,13 +156,22 @@ function initReviewsBlock(blockId) {
targetTab.classList.remove('hidden');
targetTab.classList.add('block');
- if (swipers[tabId]) {
+
+ initLightbox(tabId);
+
+
+ if (!isVideoTab && swipers[tabId]) {
requestAnimationFrame(() => {
swipers[tabId].update();
});
}
- initLightbox(tabId);
- });
+ }, 100));
+ });
+
+
+ window.addEventListener('beforeunload', () => {
+ Object.values(swipers).forEach(swiper => swiper?.destroy());
+ if (lightbox) lightbox.destroy();
});
}
\ No newline at end of file
diff --git a/template-parts/la-components/blocks/reviews-block/reviews-block.php b/template-parts/la-components/blocks/reviews-block/reviews-block.php
index 149cc8f..27e2839 100644
--- a/template-parts/la-components/blocks/reviews-block/reviews-block.php
+++ b/template-parts/la-components/blocks/reviews-block/reviews-block.php
@@ -1,28 +1,29 @@
-
-
+
+
@@ -31,8 +32,10 @@ $stars = get_field('stars');
$tab) : ?>
-
-
-
-
-
-
-
-
-
- Оценок:
+
+
+
+
$tab) : ?>
-
-
-
+ $image) : ?>
+
+
@@ -103,50 +139,49 @@ $stars = get_field('stars');
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
+
+
-
-
+
+
@@ -85,22 +104,32 @@ $section_padding = $is_first_block ? "pt-[64px] max-[768px]:pt-[40px]" : "pt-[80
+
+
+
+
+
+
-
-
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
@@ -109,18 +138,18 @@ $section_padding = $is_first_block ? "pt-[64px] max-[768px]:pt-[40px]" : "pt-[80
-
+
+
+
+
-
+
-
+
@@ -130,7 +159,7 @@ $section_padding = $is_first_block ? "pt-[64px] max-[768px]:pt-[40px]" : "pt-[80
+ class="object-contain w-[42px]" />
diff --git a/template-parts/la-components/blocks/form-block/form-block.css b/template-parts/la-components/blocks/form-block/form-block.css
index 66cee77..fc5b231 100644
--- a/template-parts/la-components/blocks/form-block/form-block.css
+++ b/template-parts/la-components/blocks/form-block/form-block.css
@@ -1,91 +1,89 @@
-.form-block-wrapper .ff-el-group {
- margin-bottom: 24px;
+#fluentform_3 {
+
}
-.form-block-wrapper .ff-el-input--label label {
- display: block;
- margin-bottom: 8px;
- font-weight: 600;
- color: #374151;
- font-size: 14px;
-}
-
-.form-block-wrapper .ff-el-form-control {
- width: 100%;
- padding: 12px 16px;
- border: 2px solid #e5e7eb;
- border-radius: 8px;
- font-size: 16px;
- transition: all 0.2s ease;
- background: #ffffff;
- box-sizing: border-box;
-}
-
-.form-block-wrapper .ff-el-form-control:focus {
- outline: none;
- border-color: #3b82f6;
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.form-block-wrapper .ff-btn-submit {
- width: 100%;
- padding: 14px 24px;
- background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
- color: white;
+#fluentform_3 .ff-el-form-control {
border: none;
- border-radius: 8px;
+ box-shadow: 0 2px 32px 0 rgba(16, 15, 15, 0.03);
+ background: #fff;
+ border-radius: 90px;
+ height: 77px;
+ padding-left: 32px;
+ padding-right: 32px;
+ outline: 1px solid transparent;
+
+ font-weight: 500;
font-size: 16px;
+ line-height: 130%;
+ color: #6c6b6b;
+}
+
+#fluentform_3 .ff-btn-submit {
+ height: 75px;
+ background: linear-gradient(90deg, #e21e24 39.42%, #ff2f35 92.9%);
+ border-radius: 90px;
font-weight: 600;
+ font-size: 18px;
+ line-height: 195%;
+ color: #f8f8f8;
+ display: grid;
+ place-content: center;
+ width: 100%;
cursor: pointer;
- transition: all 0.3s ease;
- text-transform: none;
+ transition: 180ms ease-in;
}
-.form-block-wrapper .ff-btn-submit:hover {
- transform: translateY(-1px);
- box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
+#fluentform_3 .ff-btn-submit:hover {
+ font-weight: 700;
+ transition: 180ms ease-in;
}
-.form-block-wrapper .ff-btn-submit:active {
- transform: translateY(0);
+#fluentform_3 .ff_submit_btn_wrapper {
+ margin-bottom: 0!important;
}
-.form-block-wrapper .asterisk-right label::after {
- content: ' *';
- color: #ef4444;
- font-weight: bold;
+#fluentform_3 .error.text-danger {
+ position: absolute;
+ margin-top: 0;
+ bottom: -18px;
+ left: 0;
+ width: 100%;
+ text-align: center;
}
-.form-block-wrapper .ff-message-success,
-.form-block-wrapper .ff-message-container {
- display: none !important;
+#fluentform_3 .ff-el-group {
+ position: relative;
+ margin-bottom: 18px;
}
-.form-block-wrapper.form-loading .ff-btn-submit {
- opacity: 0.7;
+#fluentform_3_success {
+ display: none!important;
+}
+
+
+
+#fluentform_3 .ff-el-input--label {
+ position: absolute;
+ top: 50%;
+ left: 32px;
+ transform: translateY(-50%);
pointer-events: none;
+ z-index: 2;
+ margin: 0;
+ transition: 180ms ease-in-out;
+
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 130%;
+ color: #6c6b6b;
}
-@media (max-width: 768px) {
- .form-block-wrapper {
- margin: 20px;
- padding: 20px;
- }
- .form-block-wrapper .ff-el-form-control {
- font-size: 16px;
- padding: 10px 14px;
- }
-
- .form-block-wrapper .ff-btn-submit {
- font-size: 16px;
- padding: 12px 20px;
- }
-}
-
-@media (max-width: 1024px) and (min-width: 769px) {
- .form-block-wrapper {
- padding: 25px;
- }
+#fluentform_3 .ff-el-group.focused .ff-el-input--label,
+#fluentform_3 .ff-el-group.has-value .ff-el-input--label {
+ top: 6px;
+ transform: translateY(0);
+ transition: 180ms ease-in-out;
+ font-size: 14px;
}
\ No newline at end of file
diff --git a/template-parts/la-components/blocks/form-block/form-block.js b/template-parts/la-components/blocks/form-block/form-block.js
new file mode 100644
index 0000000..3a21b83
--- /dev/null
+++ b/template-parts/la-components/blocks/form-block/form-block.js
@@ -0,0 +1,82 @@
+document.addEventListener('DOMContentLoaded', function() {
+ const inputs = document.querySelectorAll('#fluentform_3 .ff-el-form-control');
+ const phoneInput = document.querySelector('#fluentform_3 .ff-el-phone');
+
+ inputs.forEach(input => {
+ // Добавляем класс при фокусе
+ input.addEventListener('focus', function() {
+ this.closest('.ff-el-group').classList.add('focused');
+ });
+
+ // Убираем класс при потере фокуса
+ input.addEventListener('blur', function() {
+ this.closest('.ff-el-group').classList.remove('focused');
+ });
+
+ // Добавляем/убираем класс при вводе
+ input.addEventListener('input', function() {
+ const group = this.closest('.ff-el-group');
+ if (this.value.trim() !== '') {
+ group.classList.add('has-value');
+ } else {
+ group.classList.remove('has-value');
+ }
+ });
+ });
+
+ // Маска для телефона +7 (___) ___-__-__
+ if (phoneInput) {
+ phoneInput.addEventListener('input', function(e) {
+ let value = e.target.value.replace(/\D/g, ''); // Убираем все кроме цифр
+
+ // Если начинается с 8, заменяем на 7
+ if (value.startsWith('8')) {
+ value = '7' + value.slice(1);
+ }
+
+ // Если не начинается с 7, добавляем 7
+ if (!value.startsWith('7') && value.length > 0) {
+ value = '7' + value;
+ }
+
+ let formattedValue = '';
+
+ if (value.length > 0) {
+ formattedValue = '+7';
+
+ if (value.length > 1) {
+ formattedValue += ' (' + value.slice(1, 4);
+
+ if (value.length > 4) {
+ formattedValue += ') ' + value.slice(4, 7);
+
+ if (value.length > 7) {
+ formattedValue += '-' + value.slice(7, 9);
+
+ if (value.length > 9) {
+ formattedValue += '-' + value.slice(9, 11);
+ }
+ }
+ }
+ }
+ }
+
+ e.target.value = formattedValue;
+ });
+
+ // Обработка клавиш для корректного удаления
+ phoneInput.addEventListener('keydown', function(e) {
+ if (e.key === 'Backspace' || e.key === 'Delete') {
+ const cursorPos = e.target.selectionStart;
+ const value = e.target.value;
+
+ // Если курсор на служебном символе, сдвигаем его
+ if (cursorPos > 0 && [' ', '(', ')', '-'].includes(value[cursorPos - 1])) {
+ setTimeout(() => {
+ e.target.setSelectionRange(cursorPos - 1, cursorPos - 1);
+ }, 0);
+ }
+ }
+ });
+ }
+});
\ No newline at end of file
diff --git a/template-parts/la-components/blocks/form-block/form-block.php b/template-parts/la-components/blocks/form-block/form-block.php
index fdc99b6..1acc361 100644
--- a/template-parts/la-components/blocks/form-block/form-block.php
+++ b/template-parts/la-components/blocks/form-block/form-block.php
@@ -10,24 +10,44 @@ $current_url = home_url($_SERVER['REQUEST_URI']);
$page_title = get_the_title() ?: 'Главная страница';
$form_name = $form_title;
+$room = get_current_room();
+if ($room === 'gym') {
+ $section_classes = 'bg-cover bg-center bg-no-repeat';
+ $bg_image = get_template_directory_uri() . '/assets/images/form-bg-dark.png';
+ $style_attr = 'style="background-image: url(' . esc_url($bg_image) . ')"';
+} else {
+ $section_classes = 'bg-cover bg-center bg-no-repeat';
+ $bg_image = get_template_directory_uri() . '/assets/images/form-bg-light.png';
+ $style_attr = 'style="background-image: url(' . esc_url($bg_image) . ')"';
+}
+
$hidden_value = "Форма: {$form_name} | Страница: {$page_title} | URL: {$current_url}";
?>
-
-
+>
-
-
-
+
-
+
+
+
\ No newline at end of file
diff --git a/template-parts/la-components/blocks/gallery-tabs/gallery-tabs.css b/template-parts/la-components/blocks/gallery-tabs/gallery-tabs.css
new file mode 100644
index 0000000..55aaecd
--- /dev/null
+++ b/template-parts/la-components/blocks/gallery-tabs/gallery-tabs.css
@@ -0,0 +1,55 @@
+.gallery-block .thumbnail {
+ opacity: 0.5;
+ transition: 180ms ease-in-out;
+
+}
+
+.gallery-block .thumbnail.active {
+ opacity: 1;
+ transition: 180ms ease-in-out;
+}
+
+.gallery-block .tab-button {
+ box-shadow: 0 2px 32px 0 rgba(16, 15, 15, 0.03);
+ background: #fff;
+ font-weight: 500;
+ font-size: 18px;
+ line-height: 195%;
+ color: #222;
+}
+
+.gallery-block .tab-button.active {
+ font-size: 18px;
+ line-height: 195%;
+ color: #f8f8f8;
+ box-shadow: none;
+ background: linear-gradient(90deg, #9d9994 39.42%, #ccc9c4 92.9%);
+}
+.dark .gallery-block .tab-button.active {
+ background: linear-gradient(90deg, #2b2c35 39.42%, #6e7996 92.9%);
+ color: #f8f8f8;
+}
+
+
+.gallery-block .swiper-slide img {
+ transition: opacity 180ms ease-in-out;
+}
+
+.gallery-block .swiper-slide img[loading="lazy"] {
+ opacity: 0;
+}
+
+.gallery-block .swiper-slide img[loading="lazy"].loaded,
+.gallery-block .swiper-slide img:not([loading="lazy"]) {
+ opacity: 1;
+}
+
+.gallery-block .thumbnail:not(.active) {
+ opacity: 0.6;
+ transition: opacity 180ms ease-in-out;
+}
+
+.gallery-block .thumbnail.active {
+ opacity: 1;
+}
+
diff --git a/template-parts/la-components/blocks/gallery-tabs/gallery-tabs.js b/template-parts/la-components/blocks/gallery-tabs/gallery-tabs.js
index afe3a9e..4e1b6ff 100644
--- a/template-parts/la-components/blocks/gallery-tabs/gallery-tabs.js
+++ b/template-parts/la-components/blocks/gallery-tabs/gallery-tabs.js
@@ -1,5 +1,5 @@
-document.addEventListener('DOMContentLoaded', function() {
- document.querySelectorAll('.gallery-block').forEach(function(block) {
+document.addEventListener('DOMContentLoaded', function () {
+ document.querySelectorAll('.gallery-block').forEach(function (block) {
const blockId = block.getAttribute('data-gallery-id');
initGalleryBlock(blockId);
});
@@ -10,99 +10,126 @@ function initGalleryBlock(blockId) {
if (!container) return;
const swipers = {};
+ const thumbnailSwipers = {};
+ const initializedTabs = new Set();
let lightbox;
- function initAllSwipers() {
- const tabs = container.querySelectorAll('.tab-button');
+ function initTabSwiper(tabId) {
+ if (initializedTabs.has(tabId)) return;
- tabs.forEach(button => {
- const tabId = button.getAttribute('data-tab');
- const tabContent = container.querySelector(`#tab-${tabId}`);
+ const tabContent = container.querySelector(`#tab-${tabId}`);
+ if (!tabContent?.querySelector('.gallery-swiper')) return;
- if (tabContent && tabContent.querySelector('.swiper')) {
- const wasHidden = tabContent.classList.contains('hidden');
- if (wasHidden) {
- tabContent.style.visibility = 'hidden';
- tabContent.style.position = 'absolute';
- tabContent.classList.remove('hidden');
- tabContent.classList.add('block');
- }
+ thumbnailSwipers[tabId] = new Swiper(`#${blockId} #thumbnail-swiper-${tabId}`, {
+ slidesPerView: 'auto',
+ spaceBetween: 24,
+ freeMode: true,
+ grabCursor: true,
+ watchSlidesProgress: true,
+ });
- if (swipers[tabId]) {
- swipers[tabId].destroy(true, true);
- }
-
- swipers[tabId] = new Swiper(`#${blockId} #swiper-${tabId}`, {
- slidesPerView: 1.5,
- spaceBetween: 20,
- loop: true,
- centeredSlides: true,
- grabCursor: true,
- observer: true,
- observeParents: true,
- watchSlidesProgress: true,
- navigation: {
- nextEl: `#${blockId} #swiper-${tabId} .swiper-button-next`,
- prevEl: `#${blockId} #swiper-${tabId} .swiper-button-prev`,
- },
- on: {
- slideChange: function() {
- updateThumbnails(tabId, this.realIndex);
- }
- }
- });
-
- if (wasHidden) {
- tabContent.style.visibility = '';
- tabContent.style.position = '';
- tabContent.classList.add('hidden');
- tabContent.classList.remove('block');
+ swipers[tabId] = new Swiper(`#${blockId} #swiper-${tabId}`, {
+ slidesPerView: 'auto',
+ spaceBetween: 24,
+ centeredSlides: true,
+ initialSlide: 1,
+ scrollbar: {
+ el: `#swiper-scrollbar-${tabId}`,
+ draggable: true,
+ },
+ grabCursor: true,
+ watchSlidesProgress: true,
+ lazy: {
+ loadPrevNext: true,
+ loadOnTransitionStart: true,
+ },
+ on: {
+ slideChange: function () {
+ updateThumbnails(tabId, this.realIndex);
+ centerThumbnail(tabId, this.realIndex);
}
}
});
+
+ initializedTabs.add(tabId);
}
function initLightbox(tabId) {
- if (lightbox) {
- lightbox.destroy();
- }
+ const currentSelector = `#${blockId} #tab-${tabId} .glightbox`;
- lightbox = GLightbox({
- selector: `#${blockId} #tab-${tabId} .glightbox`
- });
+ if (lightbox?.settings?.selector !== currentSelector) {
+ if (lightbox) {
+ lightbox.destroy();
+ }
+
+ lightbox = GLightbox({
+ selector: currentSelector,
+ preload: false,
+ touchNavigation: true,
+ loop: true
+ });
+ }
}
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');
+ thumb.classList.remove('opacity-50', 'hover:opacity-80');
+ thumb.classList.add('opacity-100', 'active');
} else {
- thumb.classList.remove('active', '!border-blue-500');
- thumb.classList.add('border-transparent');
+ thumb.classList.remove('opacity-100', 'active');
+ thumb.classList.add('opacity-50', 'hover:opacity-80');
}
});
}
- initAllSwipers();
+ function centerThumbnail(tabId, activeIndex) {
+ if (thumbnailSwipers[tabId]) {
+ thumbnailSwipers[tabId].slideTo(activeIndex);
+ }
+ }
+
+ function preloadHeroImage() {
+ const activeTab = container.querySelector('.tab-button.active');
+ if (!activeTab) return;
+
+ const tabId = activeTab.getAttribute('data-tab');
+ const firstImage = container.querySelector(`#tab-${tabId} .swiper-slide:first-child img`);
+
+ if (firstImage && firstImage.src) {
+ const link = document.createElement('link');
+ link.rel = 'preload';
+ link.as = 'image';
+ link.href = firstImage.src;
+ document.head.appendChild(link);
+ }
+ }
+
+ function debounce(func, wait) {
+ let timeout;
+ return (...args) => {
+ clearTimeout(timeout);
+ timeout = setTimeout(() => func.apply(this, args), wait);
+ };
+ }
+
+ preloadHeroImage();
const activeTab = container.querySelector('.tab-button.active');
if (activeTab) {
const tabId = activeTab.getAttribute('data-tab');
+ initTabSwiper(tabId);
initLightbox(tabId);
}
container.querySelectorAll('.tab-button').forEach(button => {
- button.addEventListener('click', () => {
+ button.addEventListener('click', debounce(() => {
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-button').forEach(btn =>
+ btn.classList.remove('active'));
+ button.classList.add('active');
container.querySelectorAll('.tab-content').forEach(content => {
content.classList.remove('block');
@@ -113,28 +140,41 @@ function initGalleryBlock(blockId) {
targetTab.classList.remove('hidden');
targetTab.classList.add('block');
- if (swipers[tabId]) {
- requestAnimationFrame(() => {
+ initTabSwiper(tabId);
+
+ requestAnimationFrame(() => {
+ if (swipers[tabId]) {
swipers[tabId].update();
- });
- }
+ }
+ if (thumbnailSwipers[tabId]) {
+ thumbnailSwipers[tabId].update();
+ }
+ });
initLightbox(tabId);
- });
+
+ }, 100));
});
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-', '');
+ const thumbnail = e.target.closest('.thumbnail');
+ if (!thumbnail) return;
- if (swipers[tabId]) {
- swipers[tabId].slideToLoop(index);
- }
+ const index = parseInt(thumbnail.getAttribute('data-index'));
+ const activeTabContent = container.querySelector('.tab-content.block');
+ const tabId = activeTabContent.id.replace('tab-', '');
- updateThumbnails(tabId, index);
+ if (swipers[tabId]) {
+ swipers[tabId].slideTo(index);
}
+
+ updateThumbnails(tabId, index);
+ centerThumbnail(tabId, index);
+ });
+
+ window.addEventListener('beforeunload', () => {
+ Object.values(swipers).forEach(swiper => swiper?.destroy());
+ Object.values(thumbnailSwipers).forEach(swiper => swiper?.destroy());
+ if (lightbox) lightbox.destroy();
});
}
\ No newline at end of file
diff --git a/template-parts/la-components/blocks/gallery-tabs/gallery-tabs.php b/template-parts/la-components/blocks/gallery-tabs/gallery-tabs.php
index 1a49d96..d70c25f 100644
--- a/template-parts/la-components/blocks/gallery-tabs/gallery-tabs.php
+++ b/template-parts/la-components/blocks/gallery-tabs/gallery-tabs.php
@@ -1,85 +1,124 @@
-
+
+
Пробная персональная + тренировка + за 1200 ₽ +
+Познакомимся, покажем зал и + подберём + оптимальные для вас тренировки!
+ +
+
+
+
$tab) : ?>
-
+
+
+
-
-
-
-
-
-
- $tab) : ?>
-
-
-
-
-
-
+
+
+ $tab) : ?>
+
+
+
+
+
+
+
-
+
+
-
-
-
+ $image) : ?>
+
-
-
- $image) : ?>
- >
+>
-
+
diff --git a/template-parts/la-components/blocks/hero-block/hero-block.js b/template-parts/la-components/blocks/hero-block/hero-block.js
index 1f0f288..bbccb5e 100644
--- a/template-parts/la-components/blocks/hero-block/hero-block.js
+++ b/template-parts/la-components/blocks/hero-block/hero-block.js
@@ -8,7 +8,6 @@ document.addEventListener('DOMContentLoaded', function() {
const swiper = new Swiper(swiperContainer, {
slidesPerView: 1,
- loop: true,
grabCursor: true,
on: {
slideChange: function () {
diff --git a/template-parts/la-components/blocks/hero-block/hero-block.php b/template-parts/la-components/blocks/hero-block/hero-block.php
index 09e3cbb..8fa2d0d 100644
--- a/template-parts/la-components/blocks/hero-block/hero-block.php
+++ b/template-parts/la-components/blocks/hero-block/hero-block.php
@@ -42,19 +42,20 @@ if (!empty($slider_data) && is_array($slider_data)) {
}
$room = get_current_room();
-$base_classes = 'hero-block pb-[30px] pt-[14px]';
if ($room === 'fitness') {
- $section_classes = $base_classes . 'radient-bg';
+ $section_classes = 'radient-bg';
$style_attr = '';
} else {
- $section_classes = $base_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) . ')"';
+ $section_classes = 'bg-cover bg-center bg-no-repeat';
+ $bg_image = 'data:image/webp;base64,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';
+
+ $style_attr = 'style="background-image: url(' . esc_attr($bg_image) . ')"';
}
+
?>
-
+
-
-
-
-
+
+
+ $image) : ?>
+
-
+
+
+
+
+
+
@@ -100,7 +101,7 @@ if ($room === 'fitness') {
$slide): ?>
+
\ No newline at end of file
diff --git a/template-parts/la-components/blocks/masonry-tiles-1/masonry-tiles-1.php b/template-parts/la-components/blocks/masonry-tiles-1/masonry-tiles-1.php
new file mode 100644
index 0000000..f13d9d6
--- /dev/null
+++ b/template-parts/la-components/blocks/masonry-tiles-1/masonry-tiles-1.php
@@ -0,0 +1,192 @@
+
+
+
+
-
+
@@ -153,7 +154,6 @@ if ($room === 'fitness') {
for (let selector of selectors) {
swiperContainer = document.querySelector(selector);
- console.log(`🔍 Checking selector "${selector}":`, swiperContainer);
if (swiperContainer) break;
}
diff --git a/template-parts/la-components/blocks/line-block/line-block.php b/template-parts/la-components/blocks/line-block/line-block.php
new file mode 100644
index 0000000..f015f71
--- /dev/null
+++ b/template-parts/la-components/blocks/line-block/line-block.php
@@ -0,0 +1,108 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 2500 м²
+светлого пространства
+
+
+
+
+
+
+
+ 45+
+направлений тренировок
+
+
+
+
+
+
+
+ ТОП
+оборудование из США
+
+
+
+
+
\ No newline at end of file
diff --git a/template-parts/la-components/blocks/reviews-block/reviews-block.css b/template-parts/la-components/blocks/reviews-block/reviews-block.css
new file mode 100644
index 0000000..7a91864
--- /dev/null
+++ b/template-parts/la-components/blocks/reviews-block/reviews-block.css
@@ -0,0 +1,23 @@
+
+.reviews-block .tab-button {
+ box-shadow: 0 2px 32px 0 rgba(16, 15, 15, 0.03);
+ background: #fff;
+ font-weight: 500;
+ font-size: 18px;
+ line-height: 195%;
+ color: #222;
+}
+
+.reviews-block .tab-button.active {
+ font-size: 18px;
+ line-height: 195%;
+ color: #f8f8f8;
+ box-shadow: none;
+ background: linear-gradient(90deg, #9d9994 39.42%, #ccc9c4 92.9%);
+}
+
+.dark .reviews-block .tab-button.active {
+ background: linear-gradient(90deg, #2b2c35 39.42%, #6e7996 92.9%);
+ color: #f8f8f8;
+}
+
diff --git a/template-parts/la-components/blocks/reviews-block/reviews-block.js b/template-parts/la-components/blocks/reviews-block/reviews-block.js
index bbf2e6e..4a32525 100644
--- a/template-parts/la-components/blocks/reviews-block/reviews-block.js
+++ b/template-parts/la-components/blocks/reviews-block/reviews-block.js
@@ -13,102 +13,139 @@ function initReviewsBlock(blockId) {
let lightbox;
function initAllSwipers() {
- const tabs = container.querySelectorAll('.tab-button');
+ container.querySelectorAll('.reviews-swiper').forEach(swiperEl => {
+ const tabId = swiperEl.id.replace('swiper-', '');
- tabs.forEach(button => {
- const tabId = button.getAttribute('data-tab');
- const tabContent = container.querySelector(`#tab-${tabId}`);
-
- if (tabContent && tabContent.querySelector('.swiper')) {
- const wasHidden = tabContent.classList.contains('hidden');
- if (wasHidden) {
- tabContent.style.visibility = 'hidden';
- tabContent.style.position = 'absolute';
- tabContent.classList.remove('hidden');
- tabContent.classList.add('block');
- }
-
- if (swipers[tabId]) {
- swipers[tabId].destroy(true, true);
- }
-
- swipers[tabId] = new Swiper(`#${blockId} #swiper-${tabId}`, {
- slidesPerView: 'auto',
- spaceBetween: 20,
- loop: true,
- centeredSlides: true,
- observer: true,
- observeParents: true,
- watchSlidesProgress: true,
- });
-
- if (wasHidden) {
- tabContent.style.visibility = '';
- tabContent.style.position = '';
- tabContent.classList.add('hidden');
- tabContent.classList.remove('block');
- }
- }
+ swipers[tabId] = new Swiper(`#${blockId} #swiper-${tabId}`, {
+ slidesPerView: 'auto',
+ spaceBetween: 24,
+ grabCursor: true,
+ watchSlidesProgress: true,
+ scrollbar: {
+ el: `#${blockId} #swiper-${tabId} .swiper-scrollbar`,
+ draggable: true,
+ },
+ });
});
}
function initLightbox(tabId) {
- if (lightbox) {
- lightbox.destroy();
- }
+ const currentSelector = `#${blockId} #tab-${tabId} .glightbox`;
- 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('видео закрыли');
+ if (lightbox?.settings?.selector !== currentSelector) {
+ if (lightbox) {
+ lightbox.destroy();
}
- });
+
+ const isVideo = tabId === 'video';
+
+ lightbox = GLightbox({
+ selector: currentSelector,
+ touchNavigation: true,
+ loop: true,
+ autoplayVideos: false,
+ videosWidth: isVideo ? '90vw' : 'auto',
+ videosHeight: isVideo ? '80vh' : 'auto',
+ plyr: isVideo ? {
+ 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'
+ ]
+ }
+ } : undefined,
+ });
+ }
}
+ function toggleRatingSection(show) {
+ const ratingSection = container.querySelector('.rating-section');
+ if (ratingSection) {
+ if (show) {
+ ratingSection.classList.remove('hidden');
+ ratingSection.classList.add('flex');
+ } else {
+ ratingSection.classList.remove('flex');
+ ratingSection.classList.add('hidden');
+ }
+ }
+ }
+
+ function updateRatingAndStars(rating, stars) {
+
+ if (stars) {
+ const starsElement = container.querySelector('[data-reviews="stars"]');
+ if (starsElement) {
+ const starCount = parseInt(stars);
+ const lastDigit = starCount % 10;
+ const lastTwoDigits = starCount % 100;
+
+ let ending;
+ if (lastTwoDigits >= 11 && lastTwoDigits <= 19) {
+ ending = ' оценок';
+ } else if (lastDigit == 1) {
+ ending = ' оценка';
+ } else if (lastDigit >= 2 && lastDigit <= 4) {
+ ending = ' оценки';
+ } else {
+ ending = ' оценок';
+ }
+
+ starsElement.textContent = starCount + ending;
+ }
+ }
+ }
+
+ function debounce(func, wait) {
+ let timeout;
+ return (...args) => {
+ clearTimeout(timeout);
+ timeout = setTimeout(() => func.apply(this, args), wait);
+ };
+ }
+
+
initAllSwipers();
+
const activeTab = container.querySelector('.tab-button.active');
if (activeTab) {
const tabId = activeTab.getAttribute('data-tab');
initLightbox(tabId);
}
+
container.querySelectorAll('.tab-button').forEach(button => {
- button.addEventListener('click', () => {
+ button.addEventListener('click', debounce(() => {
const tabId = button.getAttribute('data-tab');
+ const rating = button.getAttribute('data-rating');
+ const stars = button.getAttribute('data-stars');
+ const isVideoTab = tabId === 'video';
+
container.querySelectorAll('.tab-button').forEach(btn => {
- btn.classList.remove('active', 'underline');
- btn.classList.add('bg-gray-100');
+ btn.classList.remove('active');
});
- button.classList.add('active', 'underline');
- button.classList.remove('bg-gray-100');
+ button.classList.add('active');
+
+
+ toggleRatingSection(!isVideoTab);
+
+
+ if (!isVideoTab) {
+ updateRatingAndStars(rating, stars);
+ }
+
container.querySelectorAll('.tab-content').forEach(content => {
content.classList.remove('block');
@@ -119,13 +156,22 @@ function initReviewsBlock(blockId) {
targetTab.classList.remove('hidden');
targetTab.classList.add('block');
- if (swipers[tabId]) {
+
+ initLightbox(tabId);
+
+
+ if (!isVideoTab && swipers[tabId]) {
requestAnimationFrame(() => {
swipers[tabId].update();
});
}
- initLightbox(tabId);
- });
+ }, 100));
+ });
+
+
+ window.addEventListener('beforeunload', () => {
+ Object.values(swipers).forEach(swiper => swiper?.destroy());
+ if (lightbox) lightbox.destroy();
});
}
\ No newline at end of file
diff --git a/template-parts/la-components/blocks/reviews-block/reviews-block.php b/template-parts/la-components/blocks/reviews-block/reviews-block.php
index 149cc8f..27e2839 100644
--- a/template-parts/la-components/blocks/reviews-block/reviews-block.php
+++ b/template-parts/la-components/blocks/reviews-block/reviews-block.php
@@ -1,28 +1,29 @@
-
+ +
+ + + + + +
+
+
+
+
\ No newline at end of file
diff --git a/template-parts/la-components/blocks/masonry-tiles-2/masonry-tiles-2.php b/template-parts/la-components/blocks/masonry-tiles-2/masonry-tiles-2.php
new file mode 100644
index 0000000..80481ab
--- /dev/null
+++ b/template-parts/la-components/blocks/masonry-tiles-2/masonry-tiles-2.php
@@ -0,0 +1,210 @@
+
+
+
+
+
+
+
+
+
+ style="background-image: url(''); background-size: cover; background-position: center;"
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+ + + + + + + + + +
+ style="background-image: url(''); background-size: cover; background-position: center;"
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+ + + + + + + + + +
+
+
+
++ +
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+ + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ style="background-image: url(''); background-size: cover; background-position: center;"
+ >
+
+
+
+
+
+
+
+
+
+
+
+ + +
+ + + + +
+ style="background-image: url(''); background-size: cover; background-position: center;"
+ >
+
+
+
+
+
+
+
+
+ + +
+ + + + + + + + +
+ style="background-image: url(''); background-size: cover; background-position: center;"
+ >
+
+
+
+
+
+
+
+
+
+ + +
+ + + + + + + + +
-
+
+
@@ -31,8 +32,10 @@ $stars = get_field('stars');
$tab) : ?>
-
-
-
-
-
-
-
-
-
@@ -103,50 +139,49 @@ $stars = get_field('stars');
-
- Оценок:
+
+
+
+
$tab) : ?>
-
-
-
+ $image) : ?>
+
+