Task 7515 | правки по верстке (добавил к слайдерам буллеты и стрелочки, изменил главный экран на телефоне и ширину карточек товара в блоке рекоммендуемые, пофиксил кнопку читать подробный отзыв)

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

@@ -478,7 +478,12 @@ textarea{
     padding-right: 24px;
 }
 
-
+@media (max-width: 576px) {
+  .wrapper {
+  padding-left: 10px;
+  padding-right: 10px;
+  }
+}
 .modal {
   display: none;
 }
@@ -2219,4 +2224,25 @@ textarea{
 
 a, button{
   cursor: pointer;
+}
+
+.slider-button{
+
+width: 48px;
+height: 48px;
+border: 1px solid #121212;
+border-radius: 20px;
+background-repeat: no-repeat;
+background-position: center;
+
+background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 12.364H4.5' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cpath d='M21 12.364L14.636 18.728' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cpath d='M21 12.364L14.636 6.00005' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
+}
+
+.slider-button-prev{
+  transform: scaleX(-1);
+}
+
+.swiper-button-disabled{
+  opacity: .5;
+  cursor: default;
 }

wp-content/themes/cosmopet/modules/shop/components/product-card/assets/css/product-card.css

@@ -39,18 +39,17 @@
 .main-food_products-card.acc .main-food_products-card-slider .swiper-pagination-bullet.swiper-pagination-bullet-active{
 background: radial-gradient(278.91% 196.13% at 128.36% -48.29%, #ee6868 0%, #569ef0 57.69%);
 }
-.swiper-slide .main-food_products-card {
-    width: 100%;
-}
 .main-food_products-card-img {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 8px 0px 32px;
-    padding-bottom: 42px;
+    padding-bottom:20px;
     /* filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1)); */
 }
+
+
 /* .shadow-svg {
     position: absolute;
     bottom: 0;
@@ -192,6 +191,7 @@ background: radial-gradient(278.91% 196.13% at 128.36% -48.29%, #ee6868 0%, #569
     display: flex;
     justify-content: space-around;
     margin-bottom: 10px;
+    margin-top: 10px;
 }
 .main-food_products-card__weight:empty{
     display: none;
@@ -210,6 +210,14 @@ background: radial-gradient(278.91% 196.13% at 128.36% -48.29%, #ee6868 0%, #569
     border: 2px solid var(--accent-color);
     color: var(--accent-color);
 }
+
+
+@media (max-width: 1200px) {
+    .main-food_products-card {
+        width: calc(50% - 5px);
+        min-width: 0;
+    }
+}
 @media (max-width: 940px) {
     .main-food_products-card-img img{
     height: 50vw;

wp-content/themes/cosmopet/modules/shop/components/reviews/assets/css/reviews.css

@@ -82,9 +82,6 @@
     color: #121212;
 }
 
-.main-food_products-card-img{
-    padding-bottom: 20px;
-}
 .main-food_arrows .swiper-button-next{
     right: var(--swiper-navigation-sides-offset, -65px)!important;
     left: auto;

wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/css/product-style.css

@@ -320,7 +320,7 @@ margin-top: 8px;
    
 }
 
-.mySwiper::before{
+.product-gallery__thumbsSlider::before{
   background: linear-gradient(270deg, rgba(193, 221, 230, 0) 0%, var(--bg-color) 100%);
   height: 120%;
   position: absolute;
@@ -332,7 +332,7 @@ margin-top: 8px;
     pointer-events: none;
 }
 
-.mySwiper::after{
+.product-gallery__thumbsSlider::after{
   background: linear-gradient(270deg, rgba(193, 221, 230, 0) 0%, var(--bg-color) 100%);
   height: 120%;
   position: absolute;
@@ -411,19 +411,19 @@ margin-top: 8px;
       background-position: center;
     }
 
-    .mySwiper2 {
+    .product-gallery__mainSlider {
       height: 80%;
       width: 100%;
     }
 
-    .mySwiper {
+    .product-gallery__thumbsSlider {
       height: 20%;
       box-sizing: border-box;
       padding: 10px;
       height: 110px;
     }
 
-    .mySwiper .swiper-slide {
+    .product-gallery__thumbsSlider .swiper-slide {
       width: 90px;
       height: 90px;
       background-color: #fff;
@@ -432,7 +432,7 @@ margin-top: 8px;
       position: relative;
     }
 
-    .mySwiper .swiper-slide-thumb-active {
+    .product-gallery__thumbsSlider .swiper-slide-thumb-active {
       outline: 4px solid var(--accent-color);
     }
 
@@ -480,8 +480,7 @@ margin-top: 20px;
     .product-reviews-slider {
       overflow: visible !important;
       margin-top: 40px;
-      padding-left: 20px;
+
-      padding-right: 20px;
     }
 
     .product-reviews{
@@ -515,9 +514,7 @@ margin-top: 20px;
   display: flex;
   flex-direction: column;
 }
-.product-similar-slider .swiper-slide > div{
+
-  flex-grow: 1;
-}
 
   .product-title.--m{
     display: none;
@@ -539,10 +536,10 @@ margin-top: 20px;
     margin-left: 0;
     margin-top: 20px;
   }
-  .mySwiper{
+  .product-gallery__thumbsSlider{
     display: none;
   }
-  .mySwiper2{
+  .product-gallery__mainSlider{
     width: 100%;
     height: auto;
     aspect-ratio: 1 / 1.25;
@@ -552,7 +549,7 @@ margin-top: 20px;
     display: none;
   }
   .product_main{
-    margin-top: -45px;
+    margin-top: 0;
     width: calc(48px + 100%);
     margin-left: -24px;
     border-radius: 0;
@@ -594,4 +591,83 @@ line-height: 143%;
   .main-food_products-card-img img{
     height: 40vw;
   }
+}
+
+.product-show{
+    display: flex;
+    flex-grow: 1;
+}
+@media (max-width: 576px) {
+  .product_main {
+    margin-left: -10px;
+        width: calc(20px + 100%);
+  }
+  .product-show{
+    flex-direction: column;
+    min-height: calc(100vh - 80px);
+    
+  }
+  .product-gallery{
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-bottom: 30px;
+    position: relative;
+  }
+  .product-gallery-bullets{
+    position: absolute;
+    display: flex;
+    bottom: 35px !important;
+    top: unset !important;
+    width: 100%;
+    padding-left: 20px;
+    padding-right: 20px;
+    gap: 12px;
+    justify-content: center;
+  }
+  .product-gallery-bullets__item{
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+    background-color: #fff;
+  }
+  .product-gallery-bullets__item.--active{
+    background-color: var(--accent-color);
+  }
+}
+.product-block-arrows--m{
+  display: none;
+}
+.product-similar__head, .product-reviews__head{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.product-block-arrows{
+  display: flex;
+  gap: 20px;
+}
+
+@media (max-width: 980px) {
+  .product-block-arrows--m{
+  display: flex;
+  gap: 10px;
+  margin-top: 20px;
+    padding-right: 10px;
+  padding-left: 10px;
+}
+.product-block-arrows{
+  display: none;
+
+}
+.product-reviews-slider{
+  padding-right: 10px;
+  padding-left: 10px;
+}
+.product-similar{
+  margin-top: 60px;
+}
 }

wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/js/product-single.js

@@ -1,7 +1,7 @@
 document.addEventListener('DOMContentLoaded', function() {
 
 
-    var swiper = new Swiper(".mySwiper", {
+    var productSwiperThumbs = new Swiper(".product-gallery__thumbsSlider", {
       loop: true,
       spaceBetween: 10,
       slidesPerView: 'auto',
@@ -12,12 +12,19 @@ document.addEventListener('DOMContentLoaded', function() {
             prevEl: '.product-gallery-prev',
         },
     });
-    var swiper2 = new Swiper(".mySwiper2", {
+    var productSwiperGallery = new Swiper(".product-gallery__mainSlider", {
       loop: true,
       spaceBetween: 10,
       thumbs: {
-        swiper: swiper,
+        swiper: productSwiperThumbs,
       },
+
+        pagination: {
+            el: '.product-gallery-bullets',
+            clickable: true,
+            bulletClass: 'product-gallery-bullets__item',
+            bulletActiveClass: '--active',
+        },
     });
 
 
@@ -42,30 +49,26 @@ document.addEventListener('DOMContentLoaded', function() {
                 slidesPerView: 4,
                 spaceBetween: 40,
             },
-        }
+        },
+        navigation: {
+            nextEl: '.product-reviews-next',
+            prevEl: '.product-reviews-prev',
+        },
     });
     var productsRelatedSwiper = new Swiper(".product-similar-slider", {
       loop: false,
-      spaceBetween: 20,
+      spaceBetween: 10,
-      slidesPerView: 1,
+      slidesPerView: 'auto',
       breakpoints: {
-            300: {
+
-                slidesPerView: 1.8,
+            1200: {
-                spaceBetween: 10,
-            },
-            776: {
-                slidesPerView: 2,
-                spaceBetween: 20,
-            },
-            991: {
-                slidesPerView: 3,
-                spaceBetween: 20,
-            },
-            1440: {
-                slidesPerView: 4,
                 spaceBetween: 20,
             },
-        }
+        },
+        navigation: {
+            nextEl: '.product-similar-next',
+            prevEl: '.product-similar-prev',
+        },
     });
 
 

wp-content/themes/cosmopet/templates/shop/product-card_element.twig

@@ -24,9 +24,20 @@
             </div>      
         </a>
         <div class="">
-            {% set collection = fn('wc_get_product_terms', _product.id, 'pa_collection') %}{% if collection %}
+            {% set collection = fn('wc_get_product_terms', _product.id, 'pa_collection') %}
+            
+            
             {% set cur_weight = function('get_product_info', _product.id, 'weight') %}
-            <div class="main-food_products-card__weight">
+
+            
+            
+            <a href="{{_product.get_permalink()}}" class="main-food_products-card-title">
+                {{_product.get_name()}}
+            </a>
+            
+            {% if collection %}
+
+                        <div class="main-food_products-card__weight">
                     {% for option in collection %}
                         {% set term = get_term(option) %}
                         {% set siblings = function('get_collection_siblings' , term.id) %}
@@ -55,9 +66,6 @@
                         {% endfor %}
                     {% endfor %}
             </div>{% endif %}
-            <a href="{{_product.get_permalink()}}" class="main-food_products-card-title">
-                {{_product.get_name()}}
-            </a>
             <div class="main-food_products-card-bottom">
                 <div class="main-food_products-card-bottom-price">{{ _product.get_price() }} {{ fn('get_woocommerce_currency_symbol') }}</div>
                 <a href="{{ _product.add_to_cart_url }}" class="main-food_products-cardbottom-btn ajax_add_to_cart add_to_cart_button" data-product_id="{{ _product.id }}"

wp-content/themes/cosmopet/templates/shop/single-product_page.twig

@@ -59,10 +59,12 @@
 
             {% set thumbnail = product.get_image_id() ? function('wp_get_attachment_image_url', product.get_image_id(), '') : function('wc_placeholder_img_src') %}
             {% set images = product.get_gallery_image_ids() %}  
+            
+            <div class="product-show">
             <div class="product-gallery">
                 
 
-                <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2">
+                <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper product-gallery__mainSlider">
     <div class="swiper-wrapper">
        <div class="swiper-slide">
                             <img src="{{ thumbnail }}" alt="">
@@ -74,7 +76,7 @@
                         {% endif %}
     </div>
   </div>
-  <div thumbsSlider="" class="swiper mySwiper">
+  <div thumbsSlider="" class="swiper product-gallery__thumbsSlider">
     <div class="swiper-wrapper">
        <div class="swiper-slide">
                             <img src="{{ thumbnail }}" alt="">
@@ -89,13 +91,16 @@
                         <button class="product-gallery-arrow product-gallery-prev"></button>
                         <button class="product-gallery-arrow product-gallery-next"></button>
                     </div>
+        
   </div>
+              <div class="product-gallery-bullets"></div>
             </div>
-                            <h1 class="product-title --m">
+            <h1 class="product-title --m">
                     Сухой корм, 
                     для&nbsp;средних 
                     и&nbsp;крупных пород
-                </h1>
+            </h1>
+            </div>
             <div class="product-constructor">
                 <div class="product-constructor__block">
                     <div class="product-constructor__block-title">ВКУС КОРМА</div>
@@ -214,6 +219,10 @@
                 <div class="product-block-title">
                     Отзывы Специалистов
                 </div>
+                 <div class="product-block-arrows">
+                    <button class="slider-button-prev slider-button product-reviews-prev"></button>
+                    <button class="slider-button-next slider-button product-reviews-next"></button>
+                </div>
             </div>
             <div class="product-reviews-slider swiper">
                 <div class="swiper-wrapper">
@@ -222,43 +231,57 @@
                     {% endfor %}
                 </div>   
             </div>
+
+              <div class="product-block-arrows--m">
+                    <button class="slider-button-prev slider-button product-reviews-prev"></button>
+                    <button class="slider-button-next slider-button product-reviews-next"></button>
+                </div>
         </div>
 
        {% if related_products %}
-        <div class="product-similar">
+        <div class="product-similar ">
             <div class="product-similar__head wrapper">
                 <div class="product-block-title">
                     вашему питомцу может понравиться
                 </div>
-                <div class="product-similar-slider">
+                <div class="product-block-arrows">
+                    <button class="slider-button-prev slider-button product-similar-prev"></button>
+                    <button class="slider-button-next slider-button product-similar-next"></button>
+                </div>
+
+            </div>
+            <div class="product-similar-slider wrapper">
                     <div class="swiper-wrapper">
                     {% for related_product in related_products %}
-                    <div class="swiper-slide">
+                    
                         {% set categories = related_product.get_category_ids() %}
                         {% set section = '' %}
                         {% for cat in categories %}
                         {% if cat == 365 %}
-                        {% set section = 'food' %}
+                        {% set section = 'food swiper-slide' %}
                         {% elseif cat == 367 %}
-                        {% set section = 'treats' %}
+                        {% set section = 'treats swiper-slide' %}
                         {% endif %}
                         {% endfor %}
                         {% if section == '' %}
-                        {% set section = 'acc' %}
+                        {% set section = 'acc swiper-slide' %}
                         {% endif %}
                         
                         {% include 'shop/product-card_element.twig' with {_product : fn('wc_get_product', related_product), section: section} %}
                        
-                    </div>
+                    
                 {% endfor %}
                 </div>
-                </div>
+            </div>
+            <div class="product-block-arrows--m">
+                <button class="slider-button-prev slider-button product-similar-prev"></button>
+                <button class="slider-button-next slider-button product-similar-next"></button>
             </div>
         </div>
         {% endif %}
 
 </div>
-        {% for slide in rev_list %}
+        {% for slide in reviews %}
 
         {% include 'modal/rewiew_modal.twig' with {slide : slide} %}