Task: 6607 | Fix: Замена слайдера на materialize

wp-content/themes/cosmopet/functions.php

@@ -293,6 +293,16 @@ function include_component($module_name, $component_name) {
 
 }
 
+function theme_enqueue_scripts() {
+    // Materialize CSS
+    wp_enqueue_style('materialize-css', 'https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css', [], '1.0.0');
+    
+    // Materialize JS
+    wp_enqueue_script('materialize-js', 'https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js', [], '1.0.0', true);
+}
+add_action('wp_enqueue_scripts', 'theme_enqueue_scripts');
+
+
 
 /**
  * Регистрируем шаблоны из всех подпапок /templates/

wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-core.css

@@ -2073,92 +2073,7 @@ textarea{
 }
 }
 
-.container, .container-fluid {
-    width: 100%;
-    padding-right: 15px;
-    padding-left: 15px;
-    margin-right: auto;
-    margin-left: auto;
-}
-
-.about_slider .prev, .about_slider .next {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    cursor: pointer;
-    z-index: 99;
-    background-color: unset;
-}
-
-.about_slider .next {
-    right: 29vw;
-}
-
-.about_slider .prev {
-    left: 29vw;
-}
 
-.about_slider .carousel-item {
-    height: 546px;
-    padding: 35px 50px 25px 50px;
-    padding: 50px 53px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    /* background: var(--creme-white, #F4F1F0); */
-    background: #ffffff30;
-    backdrop-filter: blur(6px);
-    z-index: 1;
-    box-shadow: -2px 5px 22.9px 0px rgba(0, 0, 0, 0.25);
-}
-
-.about_slider .swiper-slide-active {
-    backdrop-filter: blur(6px);
-    width: 429px!important;
-    z-index: 3;
-}
-
-.about_slider .carousel-item img {
-    width: auto;
-}
-
-.about_slider .slide_info {
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-}
-
-.about_slider .carousel-item::after {
-    content: '';
-    background-image: url(/wp-content/themes/cosmopet/static/front-page/img/border.png);
-    background-size: cover;
-    /* background: linear-gradient(21.69deg, #F44242 23.69%, #569EF0 66.57%); */
-    display: block;
-    position: absolute;
-    width: calc(100% + 4px);
-    height: calc(100% + 4px);
-    border-radius: 60px;
-    top: -2px;
-    left: -2px;
-    z-index: -2;
-    transform: translateZ(-1px);
-}
-
-.about_slider .slide_title {
-    text-transform: uppercase;
-    font-size: 24px;
-    font-weight: 700;
-    line-height: 28.8px;
-    color: #121212;
-}
-
-.about_slider .slide_text {
-    font-size: 20px;
-    font-weight: 500;
-    line-height: 24px;
-    color:#121212;
-}
 
 .discount_block .discount_cosmodog {
     margin-top: 60px;

wp-content/themes/cosmopet/modules/layout/assets/js/gp-main.js

@@ -415,40 +415,27 @@ if (document.querySelector('.header').classList.contains('white')) {
 // scroll
 
 document.addEventListener('DOMContentLoaded', function () {
-    const aboutSwiper = new Swiper('.about_slider', {
+    var carousels = document.querySelectorAll('.carousel');
-        loop: true,
+
-        centeredSlides: true,
+    if (carousels.length) {
-        grabCursor: true,
+        var options = {
-        slidesPerView: 'auto',
+            numVisible: window.innerWidth > 421 ? 5 : 3,
-        spaceBetween: 30,
+        };
-        effect: 'coverflow',
+        var instances = M.Carousel.init(carousels, options);
-        coverflowEffect: {
+
-            rotate: 0,
+        document.querySelectorAll('.about_slider_nav').forEach(function (btn) {
-            stretch: 0,
+            btn.addEventListener('click', function (e) {
-            depth: 150,
+                const instance = instances[0];
-            modifier: 2.5,
+                if (btn.classList.contains('next')) {
-            slideShadows: false,
+                    instance.next();
-        },
+                } else {
-        navigation: {
+                    instance.prev();
-            nextEl: '.about_slider_nav.next',
+                }
-            prevEl: '.about_slider_nav.prev',
-        },
-        breakpoints: {
-            0: {
-                slidesPerView: 1.5,
-            },
-            480: {
-                slidesPerView: 2.5,
-            },
-            768: {
-                slidesPerView: 3.5,
-            },
-            1024: {
-                slidesPerView: 5,
-            },
-        },
             });
         });
+    }
+});
+
 
 document.addEventListener('DOMContentLoaded', function () {
     const petsSlider = new Swiper(".discount_cosmodog__slider", {

wp-content/themes/cosmopet/templates/front-page/front-page.twig

@@ -95,75 +95,73 @@
         {% endif %}
 
         <div class="container-fluid">
-            <div class="about_slider swiper">
+            <div class="about_slider aboutSlider swiper">
-                <div class="swiper-buttons">
-                    <button class="about_slider_nav prev">
-                        <img src="/wp-content/themes/cosmopet/static/front-page/img/slider-prev.svg" alt="">
-                    </button>
                 <button class="about_slider_nav next">
                     <img src="/wp-content/themes/cosmopet/static/front-page/img/slider-next.svg" alt="">
                 </button>
-                </div>
+                <button class="about_slider_nav prev">
-
+                    <img src="/wp-content/themes/cosmopet/static/front-page/img/slider-prev.svg" alt="">
-                <div class="swiper-wrapper">
+                </button>
+                <div class="slider swiper-wrapper carousel">
                     <div class="slide swiper-slide carousel-item">
                         <img src="/wp-content/themes/cosmopet/static/front-page/img/about_slider-img1.png" alt="">
                         <div class="slide_info">
-                            <h3 class="slide_title">Пребиотики MOS и FOS</h3>
+                            <h3 class="slide_title">
+                                {% if site_region == 'ru' %}МОС и ФОС пребиотики{% elseif site_region == 'ae' %}MOS and FOS prebiotics{% endif %}
+                            </h3>
                             <p class="slide_text">
-                                Поддерживают здоровый баланс кишечной микрофлоры и снижают риск
+                                {% if site_region == 'ru' %}Поддерживают здоровый баланс микрофлоры кишечника и снижают риск заболеваний ЖКТ{% elseif site_region == 'ae' %}Maintain a healthy balance of intestinal microflora and reduces the risk of intestinal diseases{% endif %}
-								возникновения
-								заболеваний кишечника
                             </p>
                         </div>
                     </div>
                     <div class="slide swiper-slide carousel-item">
                         <img src="/wp-content/themes/cosmopet/static/front-page/img/about_slider-img2.png" alt="">
                         <div class="slide_info">
-                            <h3 class="slide_title">Омега 3 и жирные кислоты</h3>
+                            <h3 class="slide_title">
+                                {% if site_region == 'ru' %}Омега 3 и жирные кислоты{% elseif site_region == 'ae' %}Omega 3 and fatty acids{% endif %}
+                            </h3>
                             <p class="slide_text">
-                                Улучшают работу мозга и поддерживают его активность в норме,
+                                {% if site_region == 'ru' %}Улучшают работу мозга и сохраняют его активность, обеспечивают здоровье кожи и блеск шерсти{% elseif site_region == 'ae' %}They improve the functioning of the brain and maintain its normal activity, preserve the health of the skin and the shine of the coat{% endif %}
-								сохраняют здоровье
-								кожи и блеск шерсти
                             </p>
                         </div>
                     </div>
-                    <div class="slide swiper-slide swiper-slide-active carousel-item">
+                    <div class="slide swiper-slide carousel-item">
                         <img src="/wp-content/themes/cosmopet/static/front-page/img/about_slider-img3.png" alt="">
                         <div class="slide_info">
-                            <h3 class="slide_title">Юкка Шидигера</h3>
+                            <h3 class="slide_title">
+                                {% if site_region == 'ru' %}Юкка Шидигера{% elseif site_region == 'ae' %}Yucca schidigera{% endif %}
+                            </h3>
                             <p class="slide_text">
-                                Стимулирует пищеварение и связывает вещества, отвечающие за
+                                {% if site_region == 'ru' %}Стимулирует пищеварение, связывает вещества, вызывающие неприятный запах фекалий. Результат — регулярный стул с меньшим запахом{% elseif site_region == 'ae' %}It stimulates digestion, even binding the substances responsible for the specific smell of dog and cat faeces. As a result bowel-emptying occurs like clockwork (and with less odour!){% endif %}
-								специфический запах
-								стула. Результат: туалет как по часам<br> (а неприятного запаха<br> – меньше).
                             </p>
                         </div>
                     </div>
                     <div class="slide swiper-slide carousel-item">
                         <img src="/wp-content/themes/cosmopet/static/front-page/img/about_slider-img4.png" alt="">
                         <div class="slide_info">
-                            <h3 class="slide_title">Кальций, фосфор и витамин D</h3>
+                            <h3 class="slide_title">
+                                {% if site_region == 'ru' %}Кальций, фосфор и витамин D{% elseif site_region == 'ae' %}Calcium, phosphorus and vitamin D{% endif %}
+                            </h3>
                             <p class="slide_text">
-                                В оптимальном соотношении поддерживают здоровье костей,
+                                {% if site_region == 'ru' %}В оптимальном соотношении поддерживают здоровье костей, способствуют восстановлению суставов и подвижности{% elseif site_region == 'ae' %}In their optimal ratio, they support bone health, promote joint restoration and help maintain mobility{% endif %}
-								способствуют
-								восстановлению суставов и поддержанию их подвижности
                             </p>
                         </div>
                     </div>
                     <div class="slide swiper-slide carousel-item">
                         <img src="/wp-content/themes/cosmopet/static/front-page/img/about_slider-img5.png" alt="">
                         <div class="slide_info">
-                            <h3 class="slide_title">E-protein</h3>
+                            <h3 class="slide_title">
+                                {% if site_region == 'ru' %}Энтопротеин{% elseif site_region == 'ae' %}E-protein{% endif %}
+                            </h3>
                             <p class="slide_text">
-                                Легкоперевариваемый энтопротеин, который к тому же превосходит по
+                                {% if site_region == 'ru' %}Легкоперевариваемый энтопротеин, который к тому же превосходит по питательности традиционное мясо. Будучи новым источником белка, не вызывает аллергии у питомцев{% elseif site_region == 'ae' %}An easily digestible E-protein, nutritionally superior to traditional meat; being a novel source of protein, does not cause allergies in pets{% endif %}
-								питательности
-								традиционное мясо. Будучи новым источником белка не вызывает аллергии<br> у питомцев
                             </p>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
+
         {% if site_region == 'ru' %}
         <div class="marketplace">
             <div class="container">