diff --git a/wp-content/themes/cosmopet/modules/layout/assets/css/core-styles.css b/wp-content/themes/cosmopet/modules/layout/assets/css/core-styles.css index b8d01c2..087aaae 100644 --- a/wp-content/themes/cosmopet/modules/layout/assets/css/core-styles.css +++ b/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; } \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/shop/components/product-card/assets/css/product-card.css b/wp-content/themes/cosmopet/modules/shop/components/product-card/assets/css/product-card.css index fc41fa7..ffbc046 100644 --- a/wp-content/themes/cosmopet/modules/shop/components/product-card/assets/css/product-card.css +++ b/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; diff --git a/wp-content/themes/cosmopet/modules/shop/components/reviews/assets/css/reviews.css b/wp-content/themes/cosmopet/modules/shop/components/reviews/assets/css/reviews.css index bb979f3..b1726bf 100644 --- a/wp-content/themes/cosmopet/modules/shop/components/reviews/assets/css/reviews.css +++ b/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; diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/css/product-style.css b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/css/product-style.css index 2e48c81..7233607 100644 --- a/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/css/product-style.css +++ b/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; +} } \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/js/gp-main.js b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/js/product-single.js similarity index 72% rename from wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/js/gp-main.js rename to wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/js/product-single.js index 7e58257..294d446 100644 --- a/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/js/gp-main.js +++ b/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, - slidesPerView: 1, + spaceBetween: 10, + slidesPerView: 'auto', breakpoints: { - 300: { - slidesPerView: 1.8, - spaceBetween: 10, - }, - 776: { - slidesPerView: 2, - spaceBetween: 20, - }, - 991: { - slidesPerView: 3, - spaceBetween: 20, - }, - 1440: { - slidesPerView: 4, + + 1200: { spaceBetween: 20, }, - } + }, + navigation: { + nextEl: '.product-similar-next', + prevEl: '.product-similar-prev', + }, }); diff --git a/wp-content/themes/cosmopet/templates/shop/product-card_element.twig b/wp-content/themes/cosmopet/templates/shop/product-card_element.twig index a5fdfcb..d4e9c52 100644 --- a/wp-content/themes/cosmopet/templates/shop/product-card_element.twig +++ b/wp-content/themes/cosmopet/templates/shop/product-card_element.twig @@ -24,9 +24,20 @@
- {% 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') %} -
+ + + + + {{_product.get_name()}} + + + {% if collection %} + +
{% for option in collection %} {% set term = get_term(option) %} {% set siblings = function('get_collection_siblings' , term.id) %} @@ -55,9 +66,6 @@ {% endfor %} {% endfor %}
{% endif %} - - {{_product.get_name()}} -
{{ _product.get_price() }} {{ fn('get_woocommerce_currency_symbol') }}
-
+
@@ -74,7 +76,7 @@ {% endif %}
-
+
@@ -89,13 +91,16 @@
+
+
-

+

Сухой корм, для средних и крупных пород -

+ +
ВКУС КОРМА
@@ -214,6 +219,10 @@
Отзывы Специалистов
+
+ + +
@@ -222,43 +231,57 @@ {% endfor %}
+ +
+ + +
{% if related_products %} -
+
вашему питомцу может понравиться
-
+
+ + +
+ +
+
{% for related_product in related_products %} -
+ {% 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} %} -
+ {% endfor %}
-
+
+
+ +
{% endif %}
- {% for slide in rev_list %} + {% for slide in reviews %} {% include 'modal/rewiew_modal.twig' with {slide : slide} %}