блоки в админку и фиксы стилей
This commit is contained in:
GP_DEV
1553
css/app.css
1553
css/app.css
File diff suppressed because one or more lines are too long
1492
css/editor-style.css
1492
css/editor-style.css
File diff suppressed because one or more lines are too long
@@ -142,13 +142,10 @@ function enqueue_swiper_assets() {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Frontend
|
|
||||||
add_action('wp_enqueue_scripts', 'enqueue_swiper_assets');
|
add_action('wp_enqueue_scripts', 'enqueue_swiper_assets');
|
||||||
|
|
||||||
// Admin area
|
|
||||||
add_action('admin_enqueue_scripts', 'enqueue_swiper_assets');
|
add_action('admin_enqueue_scripts', 'enqueue_swiper_assets');
|
||||||
|
|
||||||
// Block Editor
|
|
||||||
add_action('enqueue_block_editor_assets', 'enqueue_swiper_assets');
|
add_action('enqueue_block_editor_assets', 'enqueue_swiper_assets');
|
||||||
|
|
||||||
function display_icon($field_name)
|
function display_icon($field_name)
|
||||||
@@ -160,4 +157,12 @@ function display_icon($field_name)
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//test
|
function wider_language_cols() {
|
||||||
|
echo '<style>
|
||||||
|
.wp-list-table td[class*=column-language_],
|
||||||
|
.wp-list-table th[class*=column-language_] {
|
||||||
|
width: 3em !important;
|
||||||
|
}
|
||||||
|
</style>';
|
||||||
|
}
|
||||||
|
add_action('admin_head', 'wider_language_cols');
|
||||||
192
js/app.js
192
js/app.js
@@ -1 +1,191 @@
|
|||||||
(()=>{var e,r={547:()=>{},566:()=>{},988:()=>{window.addEventListener("load",(function(){var e=document.querySelector("#primary-menu");document.querySelector("#primary-menu-toggle").addEventListener("click",(function(r){r.preventDefault(),e.classList.toggle("hidden")}))}))}},t={};function n(e){var o=t[e];if(void 0!==o)return o.exports;var i=t[e]={exports:{}};return r[e](i,i.exports,n),i.exports}n.m=r,e=[],n.O=(r,t,o,i)=>{if(!t){var a=1/0;for(u=0;u<e.length;u++){for(var[t,o,i]=e[u],l=!0,s=0;s<t.length;s++)(!1&i||a>=i)&&Object.keys(n.O).every((e=>n.O[e](t[s])))?t.splice(s--,1):(l=!1,i<a&&(a=i));if(l){e.splice(u--,1);var v=o();void 0!==v&&(r=v)}}return r}i=i||0;for(var u=e.length;u>0&&e[u-1][2]>i;u--)e[u]=e[u-1];e[u]=[t,o,i]},n.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),(()=>{var e={847:0,992:0,252:0};n.O.j=r=>0===e[r];var r=(r,t)=>{var o,i,[a,l,s]=t,v=0;if(a.some((r=>0!==e[r]))){for(o in l)n.o(l,o)&&(n.m[o]=l[o]);if(s)var u=s(n)}for(r&&r(t);v<a.length;v++)i=a[v],n.o(e,i)&&e[i]&&e[i][0](),e[i]=0;return n.O(u)},t=self.webpackChunktailpress=self.webpackChunktailpress||[];t.forEach(r.bind(null,0)),t.push=r.bind(null,t.push.bind(t))})(),n.O(void 0,[992,252],(()=>n(988))),n.O(void 0,[992,252],(()=>n(547)));var o=n.O(void 0,[992,252],(()=>n(566)));o=n.O(o)})();
|
/******/ (() => { // webpackBootstrap
|
||||||
|
/******/ var __webpack_modules__ = ({
|
||||||
|
|
||||||
|
/***/ "./resources/css/app.css":
|
||||||
|
/*!*******************************!*\
|
||||||
|
!*** ./resources/css/app.css ***!
|
||||||
|
\*******************************/
|
||||||
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
__webpack_require__.r(__webpack_exports__);
|
||||||
|
// extracted by mini-css-extract-plugin
|
||||||
|
|
||||||
|
|
||||||
|
/***/ }),
|
||||||
|
|
||||||
|
/***/ "./resources/css/editor-style.css":
|
||||||
|
/*!****************************************!*\
|
||||||
|
!*** ./resources/css/editor-style.css ***!
|
||||||
|
\****************************************/
|
||||||
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
__webpack_require__.r(__webpack_exports__);
|
||||||
|
// extracted by mini-css-extract-plugin
|
||||||
|
|
||||||
|
|
||||||
|
/***/ }),
|
||||||
|
|
||||||
|
/***/ "./resources/js/app.js":
|
||||||
|
/*!*****************************!*\
|
||||||
|
!*** ./resources/js/app.js ***!
|
||||||
|
\*****************************/
|
||||||
|
/***/ (() => {
|
||||||
|
|
||||||
|
// Navigation toggle
|
||||||
|
window.addEventListener('load', function () {
|
||||||
|
var main_navigation = document.querySelector('#primary-menu');
|
||||||
|
document.querySelector('#primary-menu-toggle').addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
main_navigation.classList.toggle('hidden');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/***/ })
|
||||||
|
|
||||||
|
/******/ });
|
||||||
|
/************************************************************************/
|
||||||
|
/******/ // The module cache
|
||||||
|
/******/ var __webpack_module_cache__ = {};
|
||||||
|
/******/
|
||||||
|
/******/ // The require function
|
||||||
|
/******/ function __webpack_require__(moduleId) {
|
||||||
|
/******/ // Check if module is in cache
|
||||||
|
/******/ var cachedModule = __webpack_module_cache__[moduleId];
|
||||||
|
/******/ if (cachedModule !== undefined) {
|
||||||
|
/******/ return cachedModule.exports;
|
||||||
|
/******/ }
|
||||||
|
/******/ // Create a new module (and put it into the cache)
|
||||||
|
/******/ var module = __webpack_module_cache__[moduleId] = {
|
||||||
|
/******/ // no module.id needed
|
||||||
|
/******/ // no module.loaded needed
|
||||||
|
/******/ exports: {}
|
||||||
|
/******/ };
|
||||||
|
/******/
|
||||||
|
/******/ // Execute the module function
|
||||||
|
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
|
||||||
|
/******/
|
||||||
|
/******/ // Return the exports of the module
|
||||||
|
/******/ return module.exports;
|
||||||
|
/******/ }
|
||||||
|
/******/
|
||||||
|
/******/ // expose the modules object (__webpack_modules__)
|
||||||
|
/******/ __webpack_require__.m = __webpack_modules__;
|
||||||
|
/******/
|
||||||
|
/************************************************************************/
|
||||||
|
/******/ /* webpack/runtime/chunk loaded */
|
||||||
|
/******/ (() => {
|
||||||
|
/******/ var deferred = [];
|
||||||
|
/******/ __webpack_require__.O = (result, chunkIds, fn, priority) => {
|
||||||
|
/******/ if(chunkIds) {
|
||||||
|
/******/ priority = priority || 0;
|
||||||
|
/******/ for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
|
||||||
|
/******/ deferred[i] = [chunkIds, fn, priority];
|
||||||
|
/******/ return;
|
||||||
|
/******/ }
|
||||||
|
/******/ var notFulfilled = Infinity;
|
||||||
|
/******/ for (var i = 0; i < deferred.length; i++) {
|
||||||
|
/******/ var [chunkIds, fn, priority] = deferred[i];
|
||||||
|
/******/ var fulfilled = true;
|
||||||
|
/******/ for (var j = 0; j < chunkIds.length; j++) {
|
||||||
|
/******/ if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {
|
||||||
|
/******/ chunkIds.splice(j--, 1);
|
||||||
|
/******/ } else {
|
||||||
|
/******/ fulfilled = false;
|
||||||
|
/******/ if(priority < notFulfilled) notFulfilled = priority;
|
||||||
|
/******/ }
|
||||||
|
/******/ }
|
||||||
|
/******/ if(fulfilled) {
|
||||||
|
/******/ deferred.splice(i--, 1)
|
||||||
|
/******/ var r = fn();
|
||||||
|
/******/ if (r !== undefined) result = r;
|
||||||
|
/******/ }
|
||||||
|
/******/ }
|
||||||
|
/******/ return result;
|
||||||
|
/******/ };
|
||||||
|
/******/ })();
|
||||||
|
/******/
|
||||||
|
/******/ /* webpack/runtime/hasOwnProperty shorthand */
|
||||||
|
/******/ (() => {
|
||||||
|
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
|
||||||
|
/******/ })();
|
||||||
|
/******/
|
||||||
|
/******/ /* webpack/runtime/make namespace object */
|
||||||
|
/******/ (() => {
|
||||||
|
/******/ // define __esModule on exports
|
||||||
|
/******/ __webpack_require__.r = (exports) => {
|
||||||
|
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
||||||
|
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
||||||
|
/******/ }
|
||||||
|
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
||||||
|
/******/ };
|
||||||
|
/******/ })();
|
||||||
|
/******/
|
||||||
|
/******/ /* webpack/runtime/jsonp chunk loading */
|
||||||
|
/******/ (() => {
|
||||||
|
/******/ // no baseURI
|
||||||
|
/******/
|
||||||
|
/******/ // object to store loaded and loading chunks
|
||||||
|
/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
|
||||||
|
/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
|
||||||
|
/******/ var installedChunks = {
|
||||||
|
/******/ "/js/app": 0,
|
||||||
|
/******/ "css/editor-style": 0,
|
||||||
|
/******/ "css/app": 0
|
||||||
|
/******/ };
|
||||||
|
/******/
|
||||||
|
/******/ // no chunk on demand loading
|
||||||
|
/******/
|
||||||
|
/******/ // no prefetching
|
||||||
|
/******/
|
||||||
|
/******/ // no preloaded
|
||||||
|
/******/
|
||||||
|
/******/ // no HMR
|
||||||
|
/******/
|
||||||
|
/******/ // no HMR manifest
|
||||||
|
/******/
|
||||||
|
/******/ __webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);
|
||||||
|
/******/
|
||||||
|
/******/ // install a JSONP callback for chunk loading
|
||||||
|
/******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
|
||||||
|
/******/ var [chunkIds, moreModules, runtime] = data;
|
||||||
|
/******/ // add "moreModules" to the modules object,
|
||||||
|
/******/ // then flag all "chunkIds" as loaded and fire callback
|
||||||
|
/******/ var moduleId, chunkId, i = 0;
|
||||||
|
/******/ if(chunkIds.some((id) => (installedChunks[id] !== 0))) {
|
||||||
|
/******/ for(moduleId in moreModules) {
|
||||||
|
/******/ if(__webpack_require__.o(moreModules, moduleId)) {
|
||||||
|
/******/ __webpack_require__.m[moduleId] = moreModules[moduleId];
|
||||||
|
/******/ }
|
||||||
|
/******/ }
|
||||||
|
/******/ if(runtime) var result = runtime(__webpack_require__);
|
||||||
|
/******/ }
|
||||||
|
/******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
|
||||||
|
/******/ for(;i < chunkIds.length; i++) {
|
||||||
|
/******/ chunkId = chunkIds[i];
|
||||||
|
/******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
|
||||||
|
/******/ installedChunks[chunkId][0]();
|
||||||
|
/******/ }
|
||||||
|
/******/ installedChunks[chunkId] = 0;
|
||||||
|
/******/ }
|
||||||
|
/******/ return __webpack_require__.O(result);
|
||||||
|
/******/ }
|
||||||
|
/******/
|
||||||
|
/******/ var chunkLoadingGlobal = self["webpackChunktailpress"] = self["webpackChunktailpress"] || [];
|
||||||
|
/******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
|
||||||
|
/******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
|
||||||
|
/******/ })();
|
||||||
|
/******/
|
||||||
|
/************************************************************************/
|
||||||
|
/******/
|
||||||
|
/******/ // startup
|
||||||
|
/******/ // Load entry module and return exports
|
||||||
|
/******/ // This entry module depends on other loaded chunks and execution need to be delayed
|
||||||
|
/******/ __webpack_require__.O(undefined, ["css/editor-style","css/app"], () => (__webpack_require__("./resources/js/app.js")))
|
||||||
|
/******/ __webpack_require__.O(undefined, ["css/editor-style","css/app"], () => (__webpack_require__("./resources/css/app.css")))
|
||||||
|
/******/ var __webpack_exports__ = __webpack_require__.O(undefined, ["css/editor-style","css/app"], () => (__webpack_require__("./resources/css/editor-style.css")))
|
||||||
|
/******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__);
|
||||||
|
/******/
|
||||||
|
/******/ })()
|
||||||
|
;
|
||||||
@@ -21,3 +21,5 @@
|
|||||||
border-color: var(--color-gray-200, currentColor);
|
border-color: var(--color-gray-200, currentColor);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -18,3 +18,4 @@
|
|||||||
border-color: var(--color-gray-200, currentColor);
|
border-color: var(--color-gray-200, currentColor);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@utility alignfull {
|
/*@utility alignfull {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
margin: 0 calc(50% - 50vw) !important;
|
margin: 0 calc(50% - 50vw) !important;
|
||||||
}
|
}
|
||||||
@@ -28,4 +28,4 @@
|
|||||||
|
|
||||||
@utility aligncenter {
|
@utility aligncenter {
|
||||||
margin: 0.5rem auto !important;
|
margin: 0.5rem auto !important;
|
||||||
}
|
}*/
|
||||||
|
|||||||
@@ -13,28 +13,29 @@ if (!empty($block['align'])) {
|
|||||||
$class_name .= ' align' . $block['align'];
|
$class_name .= ' align' . $block['align'];
|
||||||
}
|
}
|
||||||
|
|
||||||
// Получение карт для текущего языка
|
if (!function_exists('get_club_cards_for_current_language')) {
|
||||||
function get_club_cards_for_current_language() {
|
function get_club_cards_for_current_language() {
|
||||||
$current_lang = pll_current_language();
|
$current_lang = pll_current_language();
|
||||||
|
|
||||||
$args = array(
|
$args = array(
|
||||||
'post_type' => 'club-card',
|
'post_type' => 'club-card',
|
||||||
'posts_per_page' => -1,
|
'posts_per_page' => -1,
|
||||||
'lang' => $current_lang,
|
'lang' => $current_lang,
|
||||||
'post_status' => 'publish'
|
'post_status' => 'publish'
|
||||||
);
|
);
|
||||||
|
|
||||||
return get_posts($args);
|
return get_posts($args);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$cards = get_club_cards_for_current_language();
|
$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); ?>">
|
<div id="<?php echo esc_attr($block_id); ?>" class="container mx-auto mt-[24px] <?php echo esc_attr($class_name); ?>">
|
||||||
<?php if ($cards): ?>
|
<?php if ($cards): ?>
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[24px]">
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[24px]">
|
||||||
<?php foreach ($cards as $card): ?>
|
<?php foreach ($cards as $card): ?>
|
||||||
<div class="club-card rounded-[8px] overflow-hidden hover:shadow-xl transition-shadow duration-[300ms]">
|
<div class="club-card rounded-[8px] overflow-hidden border transition-shadow ">
|
||||||
<?php if (has_post_thumbnail($card->ID)): ?>
|
<?php if (has_post_thumbnail($card->ID)): ?>
|
||||||
<div class="aspect-video overflow-hidden">
|
<div class="aspect-video overflow-hidden">
|
||||||
<?php echo get_the_post_thumbnail($card->ID, 'medium', ['class' => 'w-full h-full object-cover']); ?>
|
<?php echo get_the_post_thumbnail($card->ID, 'medium', ['class' => 'w-full h-full object-cover']); ?>
|
||||||
@@ -56,7 +57,7 @@ $cards = get_club_cards_for_current_language();
|
|||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<button data-modal="club-card"
|
<button data-modal="club-card"
|
||||||
data-card-id="<?php echo $card->ID; ?>"
|
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]">
|
class="inline-block px-[24px] py-[12px] bg-blue-500 text-white rounded-[6px] hover:bg-blue-600 transition-colors ">
|
||||||
Подробнее
|
Подробнее
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,7 +1,22 @@
|
|||||||
<?php
|
<?php
|
||||||
/**
|
|
||||||
* Шаблон для блока преимуществ
|
$id = 'contacts-block-' . $block['id'];
|
||||||
*/
|
if ( ! empty($block['anchor'] ) ) {
|
||||||
|
$id = $block['anchor'];
|
||||||
|
}
|
||||||
|
|
||||||
|
$classes = 'block-contacts-block';
|
||||||
|
if ( ! empty( $block['className'] ) ) {
|
||||||
|
$classes .= ' ' . $block['className'];
|
||||||
|
}
|
||||||
|
if ( ! empty( $block['align'] ) ) {
|
||||||
|
$classes .= ' align' . $block['align'];
|
||||||
|
}
|
||||||
|
|
||||||
|
$heading = get_field('heading');
|
||||||
|
$work_time = get_field('work_time');
|
||||||
|
$address = get_field('address');
|
||||||
|
$contacts = get_field('contacts');
|
||||||
|
|
||||||
$blocks = parse_blocks(get_the_content());
|
$blocks = parse_blocks(get_the_content());
|
||||||
$is_first_block = false;
|
$is_first_block = false;
|
||||||
@@ -10,116 +25,122 @@ if (!empty($blocks) && isset($blocks[0]['blockName']) && $blocks[0]['blockName']
|
|||||||
$is_first_block = true;
|
$is_first_block = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
$section_padding = $is_first_block ? "pt-[65px] max-[768px]:pt-[35px]" : "pt-[120px] max-[768px]:pt-[70px]";
|
$section_padding = $is_first_block ? "pt-[64px] max-[768px]:pt-[40px]" : "pt-[80px] max-[768px]:pt-[64px]";
|
||||||
|
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<style>
|
<style type="text/css">
|
||||||
/* Скрываем, но лучше не нужно по копирайту */
|
<?php echo '#' . $id; ?> {
|
||||||
.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,
|
.ymaps-2-1-79-copyright,
|
||||||
[class*="ymaps-2"][class*="copyright"], [class*="ymaps-2"][class*="gototech"],
|
.ymaps-2-1-79-gototech,
|
||||||
[class*="ymaps-2"][class*="gototaxi"], [class*="ymaps-2"][class*="gotoymaps"] {
|
.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;
|
display: none !important;
|
||||||
opacity: 0 !important;
|
|
||||||
visibility: hidden !important;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<section class="<?php echo $section_padding ?> full-layout">
|
<section id="<?php echo esc_attr( $id ); ?>" class="<?php echo esc_attr( $classes ); ?> <?php echo $section_padding ?>">
|
||||||
<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="w-full relative">
|
||||||
<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">
|
<div id="map" class="w-full h-[500px] min-[1024px]:h-[700px] bg-[#f3f4f6]"></div>
|
||||||
<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">
|
<div class="absolute inset-0 pointer-events-none">
|
||||||
<rect x="60.8145" width="82.2698" height="98.6297" transform="rotate(38.0681 60.8145 0)"
|
<div class="container mx-auto px-[16px] h-full flex items-start pt-[40px]">
|
||||||
fill="url(#paint0_linear_2001_4983)"/>
|
<div class="bg-[#ffffff] border-[1px] border-[#e5e7eb] rounded-[12px] p-[30px] w-full max-w-[380px] shadow-lg pointer-events-auto">
|
||||||
<defs>
|
|
||||||
<linearGradient id="paint0_linear_2001_4983" x1="62.7686" y1="4.14594" x2="131.553" y2="37.4035"
|
<?php if ($heading) : ?>
|
||||||
gradientUnits="userSpaceOnUse">
|
<h2 class="text-[36px] max-[768px]:text-[28px] font-bold mb-[30px] text-[#1f2937]">
|
||||||
<stop stop-color="#F41C1B"/>
|
<?php echo esc_html($heading); ?>
|
||||||
<stop offset="0.435" stop-color="#F72D2C"/>
|
</h2>
|
||||||
<stop offset="1" stop-color="#FA4242"/>
|
<?php else : ?>
|
||||||
</linearGradient>
|
<h2 class="text-[36px] max-[768px]:text-[28px] font-bold mb-[30px] text-[#1f2937]">Контакты</h2>
|
||||||
</defs>
|
<?php endif; ?>
|
||||||
</svg>
|
|
||||||
<div class="py-[10px] px-[25px] w-full max-w-fit gap-[19px] border border-[#dedede] rounded-[1111px] flex items-center justify-center">
|
<div class="flex flex-col gap-[20px]">
|
||||||
<?php
|
|
||||||
display_icon('dot');
|
<?php if ($work_time) : ?>
|
||||||
?>
|
<div>
|
||||||
<span class="font-light text-[14px] leading-[140%] text-[#565656]">Связь с нами</span>
|
<?php if (!empty($work_time['heading'])) : ?>
|
||||||
</div>
|
<p class="text-[14px] text-[#6b7280] mb-[8px]"><?php echo esc_html($work_time['heading']); ?></p>
|
||||||
<div class="max-[768px]:max-w-[240px] flex flex-col gap-[20px]">
|
<?php endif; ?>
|
||||||
<h2 class="max-[768px]:text-[28px] font-bold mt-[25px] text-[45px] leading-[130%] text-[#3f3f3f]">
|
|
||||||
Контакты</h2>
|
<?php if (!empty($work_time['work_time_repeater'])) : ?>
|
||||||
<div class="max-[768px]:text-[24px] flex flex-col font-semibold text-[28px] leading-[165%] text-[#3f3f3f]">
|
<div class="flex flex-col gap-[4px] mb-[12px]">
|
||||||
<p class="max-[768px]:text-[15px] font-light text-[18px] text-[#828282]">Номер телефона:</p>
|
<?php foreach ($work_time['work_time_repeater'] as $time_item) : ?>
|
||||||
<a target="_blank" href="tel:<?php echo get_field('phones', 'options')['main_phone'] ?>"
|
<div class="flex text-[16px] text-[#1f2937]">
|
||||||
class="hover:text-[#f62322] !decoration-transparent skip-ink transition-colors"
|
<span><?php echo esc_html($time_item['title']); ?></span>
|
||||||
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'] ?>"
|
<span><?php echo esc_html($time_item['time']); ?></span>
|
||||||
class="hover:text-[#f62322] !decoration-transparent skip-ink transition-colors"
|
</div>
|
||||||
href="tel:+7(911)098-59-77"><?php echo get_field('phones', 'options')['phone'] ?></a>
|
<?php endforeach; ?>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col gap-[10px]">
|
<?php endif; ?>
|
||||||
<p class="max-[768px]:text-[15px] font-light text-[18px] text-[#828282]">Головной офис:</p>
|
</div>
|
||||||
<div class="max-[768px]:text-[19px] font-normal text-[23px] leading-[137%] text-[#3f3f3f]">
|
<?php endif; ?>
|
||||||
<?php echo get_field('address', 'options') ?>
|
|
||||||
</div>
|
<?php if ($address) : ?>
|
||||||
</div>
|
<div>
|
||||||
<div class="flex flex-col gap-[10px]">
|
<?php if (!empty($address['heading'])) : ?>
|
||||||
<p class="max-[768px]:text-[15px] font-light text-[18px] text-[#828282]">E-mail:</p>
|
<p class="text-[14px] text-[#6b7280] mb-[8px]"><?php echo esc_html($address['heading']); ?></p>
|
||||||
<a class="max-[768px]:text-[19px] hover:text-[#f62322] !decoration-transparent skip-ink transition-colors font-normal text-[23px] leading-[137%] text-[#3f3f3f]"
|
<?php endif; ?>
|
||||||
href="mailto:info@mylogistika2010.ru"><?php echo get_field('email', 'options') ?></a>
|
|
||||||
</div>
|
<?php if (!empty($address['address_repeater'])) : ?>
|
||||||
</div>
|
<div class="flex flex-col gap-[8px] mb-[12px]">
|
||||||
</div>
|
<?php foreach ($address['address_repeater'] as $addr_item) : ?>
|
||||||
</div>
|
<div class="text-[16px] text-[#1f2937] leading-[140%]">
|
||||||
<div id="map-container"
|
<?php if (!empty($addr_item['address_title'])) : ?>
|
||||||
class="max-[1200px]:p-0 max-[1200px]:h-[600px] pt-[90px] pl-[62px] pb-[89px] rounded-[35px] relative">
|
<div class="font-semibold"><?php echo esc_html($addr_item['address_title']); ?></div>
|
||||||
<div id="map" class="absolute top-0 left-0 w-full h-full rounded-[35px] overflow-hidden z-0"></div>
|
<?php endif; ?>
|
||||||
<div class="max-[1200px]:hidden bg-white w-full max-w-[378px] simple-shadow rounded-[25px] relative z-10">
|
<?php if (!empty($addr_item['address_extra'])) : ?>
|
||||||
<div class=" pl-[45px] pt-[40px] pb-[40px] relative rounded-[25px] overflow-hidden">
|
<div><?php echo esc_html($addr_item['address_extra']); ?></div>
|
||||||
<svg class="absolute bottom-[-55px] right-[-65px]" width="126" height="129" viewBox="0 0 126 129"
|
<?php endif; ?>
|
||||||
fill="none" xmlns="http://www.w3.org/2000/svg">
|
</div>
|
||||||
<rect x="60.8145" width="82.2698" height="98.6297" transform="rotate(38.0681 60.8145 0)"
|
<?php endforeach; ?>
|
||||||
fill="url(#paint0_linear_2001_4983)"/>
|
</div>
|
||||||
<defs>
|
<?php endif; ?>
|
||||||
<linearGradient id="paint0_linear_2001_4983" x1="62.7686" y1="4.14594" x2="131.553" y2="37.4035"
|
</div>
|
||||||
gradientUnits="userSpaceOnUse">
|
<?php endif; ?>
|
||||||
<stop stop-color="#F41C1B"/>
|
|
||||||
<stop offset="0.435" stop-color="#F72D2C"/>
|
<?php if ($contacts) : ?>
|
||||||
<stop offset="1" stop-color="#FA4242"/>
|
<div>
|
||||||
</linearGradient>
|
<?php if (!empty($contacts['phone'])) : ?>
|
||||||
</defs>
|
<div class="mb-[16px]">
|
||||||
</svg>
|
<a href="tel:<?php echo esc_attr($contacts['phone']); ?>"
|
||||||
<div class="py-[10px] px-[25px] w-full max-w-fit gap-[19px] border border-[#dedede] rounded-[1111px] flex items-center justify-center">
|
class="!decoration-transparent hover:!decoration-inherit text-[20px] max-[768px]:text-[18px] font-semibold transition-colors">
|
||||||
<?php
|
<?php echo esc_html($contacts['phone']); ?>
|
||||||
display_icon('dot');
|
</a>
|
||||||
?>
|
</div>
|
||||||
<span class="font-light text-[14px] leading-[140%] text-[#565656]">Свяжитесь с нами</span>
|
<?php endif; ?>
|
||||||
</div>
|
|
||||||
<div class="flex flex-col gap-[20px]">
|
<?php if (!empty($contacts['social_repeater'])) : ?>
|
||||||
<h2 class="max-[768px]:text-[28px] max-[1200px]:mb-[20px] font-bold mt-[25px] text-[45px] leading-[130%] text-[#3f3f3f]">
|
<div>
|
||||||
Контакты</h2>
|
<div class="flex gap-[12px]">
|
||||||
<div class="flex flex-col font-semibold text-[28px] leading-[165%] text-[#3f3f3f]">
|
<?php foreach ($contacts['social_repeater'] as $social_item) : ?>
|
||||||
<p class=" font-light text-[18px] text-[#828282]">Номер телефона:</p>
|
<?php if (!empty($social_item['url'])) : ?>
|
||||||
<a target="_blank" href="tel:<?php echo get_field('phones', 'options')['main_phone'] ?>"
|
<a href="<?php echo esc_url($social_item['url']); ?>"
|
||||||
class="hover:text-[#f62322] !decoration-transparent skip-ink transition-colors"
|
target="_blank"
|
||||||
href="tel:+7(800)302-11-85"><?php echo get_field('phones', 'options')['main_phone'] ?></a>
|
class="hover:[&>img]:brightness-150 transition">
|
||||||
<a target="_blank" href="tel:<?php echo get_field('phones', 'options')['phone'] ?>"
|
<?php if (!empty($social_item['icon'])) : ?>
|
||||||
class="hover:text-[#f62322] !decoration-transparent skip-ink transition-colors"
|
<img src="<?php echo esc_url($social_item['icon']['url']); ?>"
|
||||||
href="tel:+7(911)098-59-77"><?php echo get_field('phones', 'options')['phone'] ?></a>
|
alt="<?php echo esc_attr($social_item['icon']['alt']); ?>"
|
||||||
</div>
|
class="object-contain" />
|
||||||
<div class="flex flex-col gap-[10px]">
|
<?php endif; ?>
|
||||||
<p class="font-light text-[18px] text-[#828282]">Головной офис:</p>
|
</a>
|
||||||
<div class="font-normal text-[23px] leading-[137%] text-[#3f3f3f]">
|
<?php endif; ?>
|
||||||
<?php echo get_field('address', 'options') ?>
|
<?php endforeach; ?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col gap-[10px]">
|
<?php endif; ?>
|
||||||
<p class="font-light text-[18px] text-[#828282]">E-mail:</p>
|
</div>
|
||||||
<a class="hover:text-[#f62322] !decoration-transparent skip-ink transition-colors font-normal text-[23px] leading-[137%] text-[#3f3f3f]"
|
<?php endif; ?>
|
||||||
href="mailto:info@mylogistika2010.ru"><?php echo get_field('email', 'options') ?></a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -12,23 +12,51 @@ function initGalleryBlock(blockId) {
|
|||||||
const swipers = {};
|
const swipers = {};
|
||||||
let lightbox;
|
let lightbox;
|
||||||
|
|
||||||
function initSwiper(tabId) {
|
function initAllSwipers() {
|
||||||
if (swipers[tabId]) {
|
const tabs = container.querySelectorAll('.tab-button');
|
||||||
swipers[tabId].destroy(true, true);
|
|
||||||
}
|
|
||||||
|
|
||||||
swipers[tabId] = new Swiper(`#${blockId} #swiper-${tabId}`, {
|
tabs.forEach(button => {
|
||||||
slidesPerView: 1.5,
|
const tabId = button.getAttribute('data-tab');
|
||||||
spaceBetween: 20,
|
const tabContent = container.querySelector(`#tab-${tabId}`);
|
||||||
loop: true,
|
|
||||||
centeredSlides: true,
|
if (tabContent && tabContent.querySelector('.swiper')) {
|
||||||
navigation: {
|
const wasHidden = tabContent.classList.contains('hidden');
|
||||||
nextEl: `#${blockId} #swiper-${tabId} .swiper-button-next`,
|
if (wasHidden) {
|
||||||
prevEl: `#${blockId} #swiper-${tabId} .swiper-button-prev`,
|
tabContent.style.visibility = 'hidden';
|
||||||
},
|
tabContent.style.position = 'absolute';
|
||||||
on: {
|
tabContent.classList.remove('hidden');
|
||||||
slideChange: function() {
|
tabContent.classList.add('block');
|
||||||
updateThumbnails(tabId, this.realIndex);
|
}
|
||||||
|
|
||||||
|
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');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -57,7 +85,14 @@ function initGalleryBlock(blockId) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Табы
|
initAllSwipers();
|
||||||
|
|
||||||
|
const activeTab = container.querySelector('.tab-button.active');
|
||||||
|
if (activeTab) {
|
||||||
|
const tabId = activeTab.getAttribute('data-tab');
|
||||||
|
initLightbox(tabId);
|
||||||
|
}
|
||||||
|
|
||||||
container.querySelectorAll('.tab-button').forEach(button => {
|
container.querySelectorAll('.tab-button').forEach(button => {
|
||||||
button.addEventListener('click', () => {
|
button.addEventListener('click', () => {
|
||||||
const tabId = button.getAttribute('data-tab');
|
const tabId = button.getAttribute('data-tab');
|
||||||
@@ -73,17 +108,21 @@ function initGalleryBlock(blockId) {
|
|||||||
content.classList.remove('block');
|
content.classList.remove('block');
|
||||||
content.classList.add('hidden');
|
content.classList.add('hidden');
|
||||||
});
|
});
|
||||||
container.querySelector(`#tab-${tabId}`).classList.remove('hidden');
|
|
||||||
container.querySelector(`#tab-${tabId}`).classList.add('block');
|
|
||||||
|
|
||||||
setTimeout(() => {
|
const targetTab = container.querySelector(`#tab-${tabId}`);
|
||||||
initSwiper(tabId);
|
targetTab.classList.remove('hidden');
|
||||||
initLightbox(tabId);
|
targetTab.classList.add('block');
|
||||||
}, 100);
|
|
||||||
|
if (swipers[tabId]) {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
swipers[tabId].update();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
initLightbox(tabId);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// Thumbnails
|
|
||||||
container.addEventListener('click', (e) => {
|
container.addEventListener('click', (e) => {
|
||||||
if (e.target.closest('.thumbnail')) {
|
if (e.target.closest('.thumbnail')) {
|
||||||
const thumbnail = e.target.closest('.thumbnail');
|
const thumbnail = e.target.closest('.thumbnail');
|
||||||
@@ -98,13 +137,4 @@ function initGalleryBlock(blockId) {
|
|||||||
updateThumbnails(tabId, 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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -1,136 +1,86 @@
|
|||||||
<?php
|
<?php
|
||||||
|
|
||||||
// Моковые данные (потом заменить на ACF поля)
|
$id = 'gallery-tabs-' . $block['id'];
|
||||||
$galleryData = [
|
if ( ! empty($block['anchor'] ) ) {
|
||||||
'reception' => [
|
$id = $block['anchor'];
|
||||||
'title' => 'Зона ресепшен',
|
}
|
||||||
'images' => [
|
|
||||||
[
|
$classes = 'block-gallery-tabs';
|
||||||
'src' => 'https://placehold.co/800x600/4a5568/ffffff?text=Ресепшен+1',
|
if ( ! empty( $block['className'] ) ) {
|
||||||
'thumb' => 'https://placehold.co/150x100/4a5568/ffffff?text=Р1',
|
$classes .= ' ' . $block['className'];
|
||||||
'alt' => 'Ресепшен 1'
|
}
|
||||||
],
|
if ( ! empty( $block['align'] ) ) {
|
||||||
[
|
$classes .= ' align' . $block['align'];
|
||||||
'src' => 'https://placehold.co/800x600/2d3748/ffffff?text=Ресепшен+2',
|
}
|
||||||
'thumb' => 'https://placehold.co/150x100/2d3748/ffffff?text=Р2',
|
|
||||||
'alt' => 'Ресепшен 2'
|
$heading = get_field('heading');
|
||||||
],
|
$slider_tabs = get_field('slider_tabs');
|
||||||
[
|
|
||||||
'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"
|
<div class="gallery-block mt-[24px]"
|
||||||
id="<?php echo $block_id; ?>"
|
id="<?php echo esc_attr( $id ); ?>"
|
||||||
data-gallery-id="<?php echo $block_id; ?>">
|
data-gallery-id="<?php echo esc_attr( $id ); ?>">
|
||||||
<div class="container mx-auto">
|
<div class="container mx-auto">
|
||||||
<h2 class="text-[32px] font-bold mb-[30px]">Галерея</h2>
|
|
||||||
|
|
||||||
<div class="flex gap-[10px] mb-[30px]">
|
<?php if ($heading) : ?>
|
||||||
<?php foreach ($galleryData as $index => $tab): ?>
|
<h2 class="text-[32px] font-bold"><?php echo esc_html($heading); ?></h2>
|
||||||
<button class="tab-button px-[24px] py-[12px] border-0 rounded-[25px] cursor-pointer transition-all <?php echo $index === 'reception' ? 'active underline' : ''; ?>"
|
<?php endif; ?>
|
||||||
data-tab="<?php echo $index; ?>">
|
|
||||||
<?php echo esc_html($tab['title']); ?>
|
|
||||||
</button>
|
|
||||||
<?php endforeach; ?>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<?php foreach ($galleryData as $tab_id => $tab_data): ?>
|
<?php if ($slider_tabs && !empty($slider_tabs['slider_tab'])) : ?>
|
||||||
<div class="tab-content <?php echo $tab_id === 'reception' ? 'block' : 'hidden'; ?>"
|
<div class="flex gap-[10px] mt-[24px]">
|
||||||
id="tab-<?php echo $tab_id; ?>">
|
<?php foreach ($slider_tabs['slider_tab'] as $tab_index => $tab) : ?>
|
||||||
|
<?php if (!empty($tab['tab_name'])) : ?>
|
||||||
<div class="swiper gallery-swiper mb-[20px] h-[440px]" id="swiper-<?php echo $tab_id; ?>">
|
<button class="tab-button px-[24px] py-[12px] border rounded-[25px] cursor-pointer transition-all <?php echo $tab_index === 0 ? 'active underline' : ''; ?>"
|
||||||
<div class="swiper-wrapper">
|
data-tab="<?php echo $tab_index; ?>">
|
||||||
<?php foreach ($tab_data['images'] as $image): ?>
|
<?php echo esc_html($tab['tab_name']); ?>
|
||||||
<div class="swiper-slide cursor-pointer min-h-[440px]">
|
</button>
|
||||||
<a href="<?php echo esc_url($image['src']); ?>"
|
<?php endif; ?>
|
||||||
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; ?>
|
<?php endforeach; ?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<?php endif; ?>
|
||||||
<?php endforeach; ?>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<?php if ($slider_tabs && !empty($slider_tabs['slider_tab'])) : ?>
|
||||||
|
<?php foreach ($slider_tabs['slider_tab'] as $tab_index => $tab) : ?>
|
||||||
|
<div class="tab-content <?php echo $tab_index === 0 ? 'block' : 'hidden'; ?>"
|
||||||
|
id="tab-<?php echo $tab_index; ?>">
|
||||||
|
|
||||||
|
<?php if (!empty($tab['slider_images'])) : ?>
|
||||||
|
<div class="swiper mt-[24px] gallery-swiper h-[440px]" id="swiper-<?php echo $tab_index; ?>">
|
||||||
|
<div class="swiper-wrapper">
|
||||||
|
<?php foreach ($tab['slider_images'] as $image) : ?>
|
||||||
|
<div class="swiper-slide cursor-pointer min-h-[440px]">
|
||||||
|
<a href="<?php echo esc_url($image['url']); ?>"
|
||||||
|
class="glightbox block w-full h-full"
|
||||||
|
data-gallery="gallery-<?php echo $tab_index; ?>">
|
||||||
|
<img src="<?php echo esc_url($image['url']); ?>"
|
||||||
|
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 mt-[24px] gap-[8px] overflow-x-auto">
|
||||||
|
<?php foreach ($tab['slider_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['sizes']['thumbnail']); ?>"
|
||||||
|
alt="<?php echo esc_attr($image['alt']); ?>"
|
||||||
|
class="w-full h-full object-cover">
|
||||||
|
</div>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<?php if (!empty($image['caption'])) : ?>
|
||||||
|
<p><?php echo esc_html($image['caption']); ?></p>
|
||||||
|
<?php endif; ?>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
@@ -12,16 +12,43 @@ function initReviewsBlock(blockId) {
|
|||||||
const swipers = {};
|
const swipers = {};
|
||||||
let lightbox;
|
let lightbox;
|
||||||
|
|
||||||
function initSwiper(tabId) {
|
function initAllSwipers() {
|
||||||
if (swipers[tabId]) {
|
const tabs = container.querySelectorAll('.tab-button');
|
||||||
swipers[tabId].destroy(true, true);
|
|
||||||
}
|
|
||||||
|
|
||||||
swipers[tabId] = new Swiper(`#${blockId} #swiper-${tabId}`, {
|
tabs.forEach(button => {
|
||||||
slidesPerView: 3,
|
const tabId = button.getAttribute('data-tab');
|
||||||
spaceBetween: 20,
|
const tabContent = container.querySelector(`#tab-${tabId}`);
|
||||||
loop: true,
|
|
||||||
centeredSlides: true,
|
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');
|
||||||
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -64,8 +91,14 @@ function initReviewsBlock(blockId) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
initAllSwipers();
|
||||||
|
|
||||||
|
const activeTab = container.querySelector('.tab-button.active');
|
||||||
|
if (activeTab) {
|
||||||
|
const tabId = activeTab.getAttribute('data-tab');
|
||||||
|
initLightbox(tabId);
|
||||||
|
}
|
||||||
|
|
||||||
// Табы
|
|
||||||
container.querySelectorAll('.tab-button').forEach(button => {
|
container.querySelectorAll('.tab-button').forEach(button => {
|
||||||
button.addEventListener('click', () => {
|
button.addEventListener('click', () => {
|
||||||
const tabId = button.getAttribute('data-tab');
|
const tabId = button.getAttribute('data-tab');
|
||||||
@@ -81,24 +114,18 @@ function initReviewsBlock(blockId) {
|
|||||||
content.classList.remove('block');
|
content.classList.remove('block');
|
||||||
content.classList.add('hidden');
|
content.classList.add('hidden');
|
||||||
});
|
});
|
||||||
container.querySelector(`#tab-${tabId}`).classList.remove('hidden');
|
|
||||||
container.querySelector(`#tab-${tabId}`).classList.add('block');
|
|
||||||
|
|
||||||
setTimeout(() => {
|
const targetTab = container.querySelector(`#tab-${tabId}`);
|
||||||
initSwiper(tabId);
|
targetTab.classList.remove('hidden');
|
||||||
initLightbox(tabId);
|
targetTab.classList.add('block');
|
||||||
}, 100);
|
|
||||||
|
if (swipers[tabId]) {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
swipers[tabId].update();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
initLightbox(tabId);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const firstTab = container.querySelector('.tab-button.active');
|
|
||||||
if (firstTab) {
|
|
||||||
const tabId = firstTab.getAttribute('data-tab');
|
|
||||||
setTimeout(() => {
|
|
||||||
initSwiper(tabId);
|
|
||||||
initLightbox(tabId);
|
|
||||||
}, 100);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -1,136 +1,153 @@
|
|||||||
<?php
|
<?php
|
||||||
|
|
||||||
// Моковые данные отзывов (потом заменить на ACF поля)
|
$id = 'reviews-block-' . $block['id'];
|
||||||
$reviewsData = [
|
if ( ! empty($block['anchor'] ) ) {
|
||||||
'google' => [
|
$id = $block['anchor'];
|
||||||
'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'];
|
$classes = 'block-reviews-block';
|
||||||
|
if ( ! empty( $block['className'] ) ) {
|
||||||
|
$classes .= ' ' . $block['className'];
|
||||||
|
}
|
||||||
|
if ( ! empty( $block['align'] ) ) {
|
||||||
|
$classes .= ' align' . $block['align'];
|
||||||
|
}
|
||||||
|
|
||||||
|
$heading = get_field('heading');
|
||||||
|
$slider_tabs = get_field('slider_tabs');
|
||||||
|
$slider_video_reviews = get_field('slider_video_reviews');
|
||||||
|
$stars = get_field('stars');
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<div class="reviews-block container mx-auto"
|
<div class="reviews-block container mx-auto mt-[24px]"
|
||||||
id="<?php echo $block_id; ?>"
|
id="<?php echo esc_attr( $id ); ?>"
|
||||||
data-reviews-id="<?php echo $block_id; ?>">
|
data-reviews-id="<?php echo esc_attr( $id ); ?>">
|
||||||
<div>
|
<div>
|
||||||
<h2 class="text-[32px] font-bold mb-[30px]">Отзывы клиентов</h2>
|
<?php if ($heading) : ?>
|
||||||
|
<h2 class="text-[32px] font-bold mt-[24px]"><?php echo esc_html($heading); ?></h2>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
<!-- Табы -->
|
<div class="flex gap-[10px] mt-[24px]">
|
||||||
<div class="flex gap-[10px] mb-[30px]">
|
<?php if ($slider_tabs && !empty($slider_tabs['slider_tab'])) : ?>
|
||||||
<?php foreach ($reviewsData as $index => $tab): ?>
|
<?php foreach ($slider_tabs['slider_tab'] as $tab_index => $tab) : ?>
|
||||||
<button class="tab-button px-[24px] py-[12px] border-0 rounded-[25px] cursor-pointer transition-all <?php echo $index === 'google' ? 'active underline' : ''; ?>"
|
<?php if (!empty($tab['tab_name'])) : ?>
|
||||||
data-tab="<?php echo $index; ?>">
|
<button class="tab-button px-[24px] py-[12px] border rounded-[25px] cursor-pointer transition-all <?php echo $tab_index === 0 ? 'active underline' : ''; ?>"
|
||||||
<?php echo esc_html($tab['title']); ?>
|
data-tab="<?php echo $tab_index; ?>">
|
||||||
|
<?php echo esc_html($tab['tab_name']); ?>
|
||||||
|
</button>
|
||||||
|
<?php endif; ?>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<?php if ($slider_video_reviews) : ?>
|
||||||
|
<button class="tab-button px-[24px] py-[12px] border rounded-[25px] cursor-pointer transition-all"
|
||||||
|
data-tab="video">
|
||||||
|
Видеоотзывы
|
||||||
</button>
|
</button>
|
||||||
<?php endforeach; ?>
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Контент табов -->
|
<div class="mt-[24px] flex gap-[20px]">
|
||||||
<?php foreach ($reviewsData as $tab_id => $tab_data): ?>
|
<div class="flex gap-[5px] w-full items-center justify-center">
|
||||||
<div class="tab-content <?php echo $tab_id === 'google' ? 'block' : 'hidden'; ?>"
|
<svg width="39" height="38" viewBox="0 0 39 38" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
id="tab-<?php echo $tab_id; ?>">
|
<path d="M19.5 0L25.7658 11.8759L38.9967 14.1652L29.6383 23.7941L31.5496 37.0848L19.5 31.16L7.4504 37.0848L9.36174 23.7941L0.00334167 14.1652L13.2342 11.8759L19.5 0Z" fill="#565656"/>
|
||||||
|
</svg>
|
||||||
<!-- Swiper для отзывов -->
|
<svg width="39" height="38" viewBox="0 0 39 38" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<div class="swiper reviews-swiper mb-[20px] h-[440px]" id="swiper-<?php echo $tab_id; ?>">
|
<path d="M19.5 0L25.7658 11.8759L38.9967 14.1652L29.6383 23.7941L31.5496 37.0848L19.5 31.16L7.4504 37.0848L9.36174 23.7941L0.00334167 14.1652L13.2342 11.8759L19.5 0Z" fill="#565656"/>
|
||||||
<div class="swiper-wrapper">
|
</svg>
|
||||||
<?php foreach ($tab_data['reviews'] as $review): ?>
|
<svg width="39" height="38" viewBox="0 0 39 38" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<div class="swiper-slide cursor-pointer min-h-[440px]">
|
<path d="M19.5 0L25.7658 11.8759L38.9967 14.1652L29.6383 23.7941L31.5496 37.0848L19.5 31.16L7.4504 37.0848L9.36174 23.7941L0.00334167 14.1652L13.2342 11.8759L19.5 0Z" fill="#565656"/>
|
||||||
<a href="<?php echo esc_url($review['src']); ?>"
|
</svg>
|
||||||
class="glightbox block w-full h-full relative"
|
<svg width="39" height="38" viewBox="0 0 39 38" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
data-gallery="reviews-<?php echo $tab_id; ?>"
|
<path d="M19.5 0L25.7658 11.8759L38.9967 14.1652L29.6383 23.7941L31.5496 37.0848L19.5 31.16L7.4504 37.0848L9.36174 23.7941L0.00334167 14.1652L13.2342 11.8759L19.5 0Z" fill="#565656"/>
|
||||||
<?php if (isset($review['type']) && $review['type'] === 'video'): ?>
|
</svg>
|
||||||
data-type="video"
|
<svg width="39" height="38" viewBox="0 0 39 38" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
data-description="<?php echo esc_attr($review['alt']); ?>"
|
<path d="M19.5 0L25.7658 11.8759L38.9967 14.1652L29.6383 23.7941L31.5496 37.0848L19.5 31.16L7.4504 37.0848L9.36174 23.7941L0.00334167 14.1652L13.2342 11.8759L19.5 0Z" fill="#565656"/>
|
||||||
<?php endif; ?>>
|
</svg>
|
||||||
<img src="<?php echo esc_url($review['thumb']); ?>"
|
<div>
|
||||||
alt="<?php echo esc_attr($review['alt']); ?>"
|
Оценок:
|
||||||
class="w-full h-full object-cover rounded-lg">
|
<?php
|
||||||
<?php if (isset($review['type']) && $review['type'] === 'video'): ?>
|
echo $stars;
|
||||||
<!-- Иконка воспроизведения для видео -->
|
?>
|
||||||
<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>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<?php endforeach; ?>
|
</div>
|
||||||
|
|
||||||
|
<?php if ($slider_tabs && !empty($slider_tabs['slider_tab'])) : ?>
|
||||||
|
<?php foreach ($slider_tabs['slider_tab'] as $tab_index => $tab) : ?>
|
||||||
|
<div class="tab-content mt-[24px] <?php echo $tab_index === 0 ? 'block' : 'hidden'; ?>"
|
||||||
|
id="tab-<?php echo $tab_index; ?>">
|
||||||
|
|
||||||
|
<?php if (!empty($tab['slider_images'])) : ?>
|
||||||
|
<div class="swiper reviews-swiper" id="swiper-<?php echo $tab_index; ?>">
|
||||||
|
<div class="swiper-wrapper">
|
||||||
|
<?php foreach ($tab['slider_images'] as $image) : ?>
|
||||||
|
<div class="swiper-slide max-w-[449px] cursor-pointer">
|
||||||
|
<a href="<?php echo esc_url($image['url']); ?>"
|
||||||
|
class="glightbox block w-full h-full relative"
|
||||||
|
data-gallery="reviews-<?php echo $tab_index; ?>">
|
||||||
|
<img src="<?php echo esc_url($image['url']); ?>"
|
||||||
|
alt="<?php echo esc_attr($image['alt']); ?>"
|
||||||
|
class="w-full h-full object-contain">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<?php if ($slider_video_reviews) : ?>
|
||||||
|
<div class="tab-content mt-[24px] hidden" id="tab-video">
|
||||||
|
<div class="swiper reviews-swiper" id="swiper-video">
|
||||||
|
<div class="swiper-wrapper">
|
||||||
|
<?php foreach ($slider_video_reviews as $video) : ?>
|
||||||
|
<?php if (!empty($video['slider_video_review'])) : ?>
|
||||||
|
<div class="swiper-slide max-w-[449px] cursor-pointer">
|
||||||
|
<a href="<?php echo esc_url($video['slider_video_review']['url']); ?>"
|
||||||
|
class="glightbox block w-full h-full relative"
|
||||||
|
data-gallery="reviews-video"
|
||||||
|
data-type="video">
|
||||||
|
<div class="w-full h-[200px] relative overflow-hidden rounded-lg">
|
||||||
|
<?php if (!empty($video['slider_video_prereview'])) : ?>
|
||||||
|
<div class="w-full h-full bg-[#f3f4f6] flex items-center justify-center">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] w-[60px] h-[60px] bg-white bg-opacity-90 rounded-full flex items-center justify-center mx-auto mb-[8px]">
|
||||||
|
<svg class="w-[24px] h-[24px]" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path d="M8 5v10l8-5-8-5z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<img src="<?php echo esc_url($video['slider_video_prereview']['url']); ?>"
|
||||||
|
alt="<?php echo esc_attr($video['slider_video_prereview']['alt'] ?: 'Превью видеоотзыва'); ?>"
|
||||||
|
class="w-full h-full object-cover">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php else : ?>
|
||||||
|
|
||||||
|
<div class="w-full h-full bg-[#f3f4f6] flex justify-center">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] w-[60px] h-[60px] bg-white bg-opacity-90 rounded-full flex items-center justify-center mx-auto mb-[8px]">
|
||||||
|
<svg class="w-[24px] h-[24px]" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path d="M8 5v10l8-5-8-5z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p class="text-[14px] text-[#6b7280]">Видеоотзыв</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
@@ -0,0 +1,62 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
$id = 'tiles-block-' . $block['id'];
|
||||||
|
if ( ! empty($block['anchor'] ) ) {
|
||||||
|
$id = $block['anchor'];
|
||||||
|
}
|
||||||
|
|
||||||
|
$classes = 'block-tiles-block';
|
||||||
|
if ( ! empty( $block['className'] ) ) {
|
||||||
|
$classes .= ' ' . $block['className'];
|
||||||
|
}
|
||||||
|
if ( ! empty( $block['align'] ) ) {
|
||||||
|
$classes .= ' align' . $block['align'];
|
||||||
|
}
|
||||||
|
|
||||||
|
$heading = get_field('heading');
|
||||||
|
$tiles_repeater = get_field('tiles_repeater');
|
||||||
|
|
||||||
|
|
||||||
|
?>
|
||||||
|
|
||||||
|
<section id="<?php echo esc_attr( $id ); ?>" class="<?php echo esc_attr( $classes ); ?>">
|
||||||
|
<div class="container mx-auto mt-[24px]">
|
||||||
|
|
||||||
|
<?php if ($heading) : ?>
|
||||||
|
<h2 class="text-[48px] max-[768px]:text-[36px] font-bold text-center text-[#1f2937]">
|
||||||
|
<?php echo esc_html($heading); ?>
|
||||||
|
</h2>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<?php if ($tiles_repeater) : ?>
|
||||||
|
<div class="mt-[24px] grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[30px] max-[768px]:gap-[20px]">
|
||||||
|
<?php foreach ($tiles_repeater as $tile) : ?>
|
||||||
|
<div class="bg-[#ffffff] border-[1px] border-[#e5e7eb] rounded-[16px] p-[30px] max-[768px]:p-[20px] shadow-lg hover:shadow-xl transition-shadow duration-300">
|
||||||
|
|
||||||
|
<?php if (!empty($tile['image'])) : ?>
|
||||||
|
<div class="w-[80px] h-[80px] rounded-full overflow-hidden mb-[20px] mx-auto bg-[#f3f4f6] flex items-center justify-center">
|
||||||
|
<img src="<?php echo esc_url($tile['image']['url']); ?>"
|
||||||
|
alt="<?php echo esc_attr($tile['image']['alt']); ?>"
|
||||||
|
class="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<?php if (!empty($tile['title'])) : ?>
|
||||||
|
<h3 class="text-[24px] max-[768px]:text-[20px] font-semibold text-[#1f2937] mb-[16px] text-center">
|
||||||
|
<?php echo esc_html($tile['title']); ?>
|
||||||
|
</h3>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<?php if (!empty($tile['text'])) : ?>
|
||||||
|
<div class="text-[16px] max-[768px]:text-[14px] text-[#6b7280] leading-[150%] text-center">
|
||||||
|
<?php echo wp_kses_post($tile['text']); ?>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
<?php
|
<?php
|
||||||
//test
|
//test
|
||||||
?>
|
?>
|
||||||
<div class="bg-black text-white">
|
<div class="bg-black text-white mt-[24px]">
|
||||||
<div class="mx-auto container">
|
<div class="mx-auto container">
|
||||||
<div>
|
<div>
|
||||||
Время работы:
|
Время работы:
|
||||||
@@ -25,4 +25,3 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
/
|
|
||||||
@@ -73,6 +73,21 @@ function register_acf_blocks() {
|
|||||||
),
|
),
|
||||||
));
|
));
|
||||||
|
|
||||||
|
acf_register_block_type(array(
|
||||||
|
'name' => 'tiles-block',
|
||||||
|
'title' => __('Блок с плитками'),
|
||||||
|
'description' => __('Блок с плитками'),
|
||||||
|
'render_template' => 'template-parts/la-components/blocks/tiles-block/tiles-block.php',
|
||||||
|
'category' => 'theme-blocks',
|
||||||
|
'icon' => 'grid-view',
|
||||||
|
'keywords' => array('плитки', 'карточки', 'tiles', 'cards'),
|
||||||
|
'supports' => array(
|
||||||
|
'align' => array('wide', 'full'),
|
||||||
|
'anchor' => true,
|
||||||
|
'customClassName' => true,
|
||||||
|
),
|
||||||
|
));
|
||||||
|
|
||||||
acf_register_block_type(array(
|
acf_register_block_type(array(
|
||||||
'name' => 'reviews-block',
|
'name' => 'reviews-block',
|
||||||
'title' => __('Блок с отзывами'),
|
'title' => __('Блок с отзывами'),
|
||||||
|
|||||||
Reference in New Issue
Block a user