init
This commit is contained in:
GP_DEV
104
blocks/reviews-block/reviews-block.js
Normal file
104
blocks/reviews-block/reviews-block.js
Normal 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
136
blocks/reviews-block/reviews-block.php
Normal 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>
|
||||
Reference in New Issue
Block a user