Compare commits
6 Commits
c4fcf438a4
...
36fda393f6
| Author | SHA1 | Date |
|---|---|---|
 Максим Максимов
|
36fda393f6 | 2 weeks ago |
|
Максим Максимов
|
b241ce250b | 2 weeks ago |
|
Максим Максимов
|
1f2bfa9fbb | 2 weeks ago |
|
Максим Максимов
|
1fa876ba0a | 2 weeks ago |
|
Максим Максимов
|
e196205d2a | 2 weeks ago |
|
Максим Максимов
|
f49c8e2741 | 2 weeks ago |
@ -0,0 +1,334 @@ |
||||
.main-food_reviews { |
||||
border-radius: 40px; |
||||
padding: 24px; |
||||
max-width: 395px; |
||||
height: 672px; |
||||
flex-grow: 1; |
||||
position: relative; |
||||
box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.12); |
||||
background: #fff; |
||||
} |
||||
.main-food_reviews-title { |
||||
font-weight: 700; |
||||
font-size: 32px; |
||||
text-transform: uppercase; |
||||
color: #121212; |
||||
} |
||||
.main-food_reviews-slider { |
||||
position: relative; |
||||
} |
||||
.main-food_reviews-slide { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
padding: 20px; |
||||
border-radius: 8px; |
||||
min-height: 580px; |
||||
} |
||||
.main-food_reviews-slide-img { |
||||
border: 2px solid #fff; |
||||
border-radius: 32px; |
||||
object-fit: cover; |
||||
margin-bottom: 10px; |
||||
} |
||||
.main-food_reviews-slide-name { |
||||
font-weight: 700; |
||||
font-size: 16px; |
||||
text-transform: uppercase; |
||||
color: #121212; |
||||
margin-bottom: 10px; |
||||
} |
||||
.main-food_reviews-slide-position { |
||||
font-weight: 500; |
||||
font-size: 14px; |
||||
line-height: 140%; |
||||
color: #121212; |
||||
margin-bottom: 10px; |
||||
} |
||||
.main-food_reviews-slide-position:not(.--no-min-height){ |
||||
min-height: 60px; |
||||
} |
||||
.main-food_reviews-slide-text { |
||||
font-weight: 500; |
||||
font-size: 16px; |
||||
line-height: 140%; |
||||
color: #121212; |
||||
margin-bottom: 10px; |
||||
} |
||||
.main-food_reviews-slide-text a{ |
||||
color: #569ef0; |
||||
font-weight: 600; |
||||
text-decoration: underline; |
||||
} |
||||
.main-food_reviews-slide-head, .main-food_reviews-slide-position{ |
||||
width: 100%; |
||||
} |
||||
.main-food_reviews-slide-text p { |
||||
margin-bottom: .5em; |
||||
} |
||||
.main-food_reviews-slider { |
||||
position: relative; |
||||
height: 97%; |
||||
} |
||||
.main-food_reviews-slider-index { |
||||
position: absolute; |
||||
left: 40%; |
||||
transform: translateX(-50%); |
||||
bottom: 30px; |
||||
z-index: 100; |
||||
font-weight: 500; |
||||
font-size: 16px; |
||||
line-height: 140%; |
||||
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; |
||||
} |
||||
.main-food_arrows .swiper-button-prev{ |
||||
left: var(--swiper-navigation-sides-offset, -65px)!important; |
||||
right: auto; |
||||
} |
||||
.main-food_reviews-star { |
||||
position: absolute; |
||||
top: 0%; |
||||
right: 0%; |
||||
z-index: 100; |
||||
} |
||||
|
||||
|
||||
.main-food_reviews-slide-top { |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
gap: 20px; |
||||
align-items: center; |
||||
width: 100%; |
||||
} |
||||
.main-food_reviews-slide-top img { |
||||
width: 48px; |
||||
height: 48px; |
||||
border-radius: 100%; |
||||
} |
||||
|
||||
@media(max-width: 940px){ |
||||
.main-food_reviews-title{ |
||||
font-size: 24px; |
||||
} |
||||
.main-food_reviews-star{ |
||||
width: 82px; |
||||
top: -20px; |
||||
} |
||||
.main-reviews_title{ |
||||
font-size: 32px; |
||||
} |
||||
} |
||||
|
||||
@media (max-width: 767px) { |
||||
.main-food_reviews { |
||||
padding: 16px 24px; |
||||
border-radius: 30px; |
||||
} |
||||
|
||||
.main-food_reviews-slide-img { |
||||
width: 100%; |
||||
} |
||||
|
||||
.main-food_reviews-slide-name { |
||||
font-size: 18px; |
||||
} |
||||
.main-food_reviews-slide-position{ |
||||
font-weight: 500; |
||||
font-size: 14px; |
||||
background: radial-gradient(278.91% 196.13% at 128.36% -48.29%, rgb(238, 104, 104) 0%, rgb(86, 158, 240) 57.692307233810425%); |
||||
background-clip: text; |
||||
-webkit-background-clip: text; |
||||
-webkit-text-fill-color: transparent; |
||||
} |
||||
|
||||
.main-food_reviews-slide-text { |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.main-food_reviews-slider-index { |
||||
font-size: 14px; |
||||
} |
||||
.main-food_reviews-slide{ |
||||
padding-left: 0; |
||||
padding-right: 0; |
||||
} |
||||
.main-reviews_title{ |
||||
font-size: 32px; |
||||
} |
||||
} |
||||
|
||||
/* Main Reviews */ |
||||
|
||||
|
||||
.main-food_reviews-slide-head{ |
||||
position: relative; |
||||
} |
||||
|
||||
.main-food_reviews-slide-photo{ |
||||
height: 48px; |
||||
width: 48px; |
||||
flex-shrink: 0; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
border-radius: 50%; |
||||
object-fit: cover; |
||||
} |
||||
|
||||
.main-food_reviews-slide-name, .main-food_reviews-slide-position{ |
||||
padding-left: 64px; |
||||
} |
||||
|
||||
.main-food_reviews-slide-name.--no-padding-left, .main-food_reviews-slide-position.--no-padding-left{ |
||||
padding-left: 0; |
||||
} |
||||
.main-food_reviews-slide-name, .main-food_reviews-slide-position, .main-food_reviews-slide-head{ |
||||
width: 100%; |
||||
} |
||||
|
||||
.main-food_reviews-slide-media_file{ |
||||
height: 220px; |
||||
width: 100%; |
||||
border-radius: 32px; |
||||
margin-bottom: 1rem; |
||||
object-fit: cover; |
||||
} |
||||
.main-food_reviews-slide-media_file-wrap{ |
||||
width: 100%; |
||||
display: block; |
||||
} |
||||
@media (max-width: 640px) { |
||||
.main-food_reviews-slide-name{ |
||||
min-height: 48px; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.main-food_reviews-slide-position{ |
||||
padding-left: 0; |
||||
} |
||||
} |
||||
|
||||
.main-food_reviews-slide-media_main{ |
||||
border-radius: 25px; |
||||
width: 168px; |
||||
height: 115px; |
||||
overflow: hidden; |
||||
} |
||||
.main-food_reviews-slide-media_main img{ |
||||
width: 168px; |
||||
height: 115px; |
||||
} |
||||
.main-food_reviews-slide-media_mini{ |
||||
width: 56px; |
||||
height: 70px; |
||||
border-radius: 16px; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.main-food_reviews-slide-media_wrap{ |
||||
display: flex; |
||||
gap: 6px; |
||||
align-items: center; |
||||
margin-bottom: 20px; |
||||
|
||||
} |
||||
.main-food_reviews-slide-media_wrap img{ |
||||
object-fit: cover; |
||||
} |
||||
.main-food_reviews-slide-media_mini img{ |
||||
width: 56px; |
||||
height: 70px; |
||||
|
||||
} |
||||
|
||||
|
||||
.mform__review{ |
||||
|
||||
max-height: 90vh; |
||||
overflow: auto; |
||||
} |
||||
.mform__review-wrap{ |
||||
background-color: #fff; |
||||
max-width: 1200px; |
||||
width: calc(100% - 20px); |
||||
border-radius: 32px; |
||||
padding: 40px; |
||||
margin: auto; |
||||
max-width: 1200px; |
||||
width: calc(100% - 20px); position: relative; |
||||
} |
||||
|
||||
.read-more{ |
||||
font-weight: 500; |
||||
font-size: 16px; |
||||
line-height: 140%; |
||||
text-decoration: underline; |
||||
text-decoration-skip-ink: none; |
||||
background: radial-gradient(278.91% 196.13% at 128.36% -48.29%, rgb(238, 104, 104) 0%, rgb(86, 158, 240) 57.692307233810425%); |
||||
background-clip: text; |
||||
-webkit-background-clip: text; |
||||
-webkit-text-fill-color: transparent; |
||||
margin-top: 2rem; |
||||
border-bottom: 1px rgb(86, 158, 240) solid; |
||||
display: block; |
||||
width: max-content; |
||||
} |
||||
|
||||
@media (max-width: 640px) { |
||||
.mform__review-wrap{ |
||||
padding: 24px; |
||||
padding-top: 60px; |
||||
padding-right: 10px; |
||||
} |
||||
.mform__review{ |
||||
padding-right: 16px; |
||||
} |
||||
} |
||||
|
||||
/* Для Chrome, Edge и Safari */ |
||||
.mform__review::-webkit-scrollbar { |
||||
width: 8px; |
||||
height: 8px; |
||||
} |
||||
|
||||
.mform__review::-webkit-scrollbar-track { |
||||
background: #f5f5f5; |
||||
border-radius: 10px; |
||||
} |
||||
|
||||
.mform__review::-webkit-scrollbar-thumb { |
||||
background-color: #81bafc; |
||||
border-radius: 10px; |
||||
border: 2px solid #f5f5f5; |
||||
} |
||||
|
||||
.mform__review::-webkit-scrollbar-thumb:hover { |
||||
background-color: #63acff; |
||||
} |
||||
|
||||
@media (max-width: 576px) { |
||||
.main-food_reviews { |
||||
min-height: 720px; |
||||
height: 80vh; |
||||
max-height: 850px; |
||||
} |
||||
.main-food_reviews-slide { |
||||
min-height: 640px; |
||||
height: calc(80vh - 80px); |
||||
max-height: 770px; |
||||
} |
||||
} |
||||
|
||||
.mform__review__media{ |
||||
display: block; |
||||
width: 100%; |
||||
max-width: 350px; |
||||
} |
||||
@ -0,0 +1,13 @@ |
||||
jQuery('.main-food_reviews-slide-media_mini').on('click', function(){ |
||||
var main = jQuery(this).closest('.main-food_reviews-slide-media_wrap').find('.main-food_reviews-slide-media_main') |
||||
var src = jQuery(this).attr('src') |
||||
var href = jQuery(this).data('video') |
||||
if (!href){ |
||||
href = src |
||||
} |
||||
jQuery(main).attr('href', href) |
||||
jQuery(main).attr('src', src) |
||||
}) |
||||
jQuery('.main-food_reviews-slide-media_wrap').each(function(){ |
||||
jQuery(this).find('.main-food_reviews-slide-media_mini')[0].click() |
||||
}) |
||||
@ -0,0 +1,597 @@ |
||||
/* breadcrumbs */ |
||||
.breadcrumbs{ |
||||
margin: 24px 0px; |
||||
|
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.breadcrumbs__item{ |
||||
display: block; |
||||
|
||||
padding: 0px 16px; |
||||
|
||||
font-family: var(--font-family); |
||||
font-weight: 700; |
||||
font-size: 16px; |
||||
line-height: 125%; |
||||
color: var(--text-6); |
||||
|
||||
text-decoration: none; |
||||
|
||||
position: relative; |
||||
} |
||||
.breadcrumbs__item:first-child{ |
||||
padding-left: 0; |
||||
} |
||||
.breadcrumbs__item:nth-child(n+2)::before{ |
||||
content: ''; |
||||
|
||||
position: absolute; |
||||
top: -2px; |
||||
left: -12px; |
||||
|
||||
width: 24px; |
||||
aspect-ratio: 1; |
||||
|
||||
background-image: url(../img/svg/main/arrow-breadcrumbs.svg); |
||||
background-repeat: no-repeat; |
||||
background-size: contain; |
||||
} |
||||
/* breadcrumbs */ |
||||
|
||||
/* product */ |
||||
|
||||
.product_main{ |
||||
display: flex; |
||||
padding: 30px; |
||||
border-radius: 30px; |
||||
min-height: 766px; |
||||
margin-top: 30px; |
||||
justify-content: space-between; |
||||
background-color: var(--bg-color); |
||||
} |
||||
|
||||
.product_main.--fish{ |
||||
--bg-color: #C1DDE6; |
||||
--accent-color: #48c1ed; |
||||
} |
||||
/* product info */ |
||||
.product-info{ |
||||
width: 364px; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
display: flex; |
||||
padding-right: 30px; |
||||
} |
||||
|
||||
.product-title{ |
||||
font-weight: 700; |
||||
font-size: 24px; |
||||
text-transform: uppercase; |
||||
color: #121212; |
||||
} |
||||
|
||||
.product-contains{ |
||||
margin-top: 30px; |
||||
|
||||
} |
||||
|
||||
.product-block-title{ |
||||
font-weight: 700; |
||||
font-size: 20px; |
||||
line-height: 100%; |
||||
color: #121212; |
||||
text-transform: uppercase; |
||||
} |
||||
|
||||
.product-contains-text{ |
||||
font-weight: 400; |
||||
font-size: 14px; |
||||
line-height: 150%; |
||||
color: #121212; |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
|
||||
|
||||
.product-values{ |
||||
margin-top: 30px; |
||||
} |
||||
|
||||
.product-values-list{ |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
margin-top: 10px; |
||||
gap: 4px; |
||||
} |
||||
|
||||
.product-values-item{ |
||||
border: 1px solid rgba(18, 18, 18, 0.1); |
||||
border-radius: 100px; |
||||
padding: 4px 4px 4px 10px; |
||||
height: 48px; |
||||
display: flex; |
||||
align-items: center; |
||||
font-weight: 700; |
||||
font-size: 14px; |
||||
line-height: 143%; |
||||
color: #121212; |
||||
gap: 10px; |
||||
} |
||||
|
||||
.product-values-item-val{ |
||||
border: 1px solid #000; |
||||
border-radius: 100px; |
||||
width: 40px; |
||||
height: 40px; |
||||
flex-shrink: 0; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
.product-values-title{ |
||||
font-weight: 700; |
||||
font-size: 16px; |
||||
line-height: 125%; |
||||
color: #121212; |
||||
} |
||||
|
||||
.product-vitamins{ |
||||
border: 1px solid rgba(18, 18, 18, 0.1); |
||||
border-radius: 20px; |
||||
padding: 10px; |
||||
width: 100%; |
||||
font-weight: 700; |
||||
font-size: 14px; |
||||
line-height: 143%; |
||||
color: #121212; |
||||
margin-top: 4px; |
||||
} |
||||
|
||||
.product-vitamins-list{ |
||||
margin-top: 10px; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
gap: 4px; |
||||
} |
||||
|
||||
.product-vitamins-item{ |
||||
border: 1px solid #000; |
||||
border-radius: 100px; |
||||
padding: 10px; |
||||
} |
||||
/* product info */ |
||||
|
||||
|
||||
/* product constructor */ |
||||
.product-constructor{ |
||||
width: 395px; |
||||
} |
||||
.product-constructor__block{ |
||||
margin-bottom: 1.5rem; |
||||
} |
||||
.product-constructor__block-title{ |
||||
font-size: 16px; |
||||
line-height: 125%; |
||||
color: #121212; |
||||
font-weight: 700; |
||||
} |
||||
|
||||
.product-constructor__block-list{ |
||||
display: flex; |
||||
margin-top: 10px; |
||||
border-radius: 100px; |
||||
padding: 5px; |
||||
height: 60px; |
||||
width: 100%; |
||||
background-color: #fff; |
||||
} |
||||
|
||||
.product-constructor__block-item{ |
||||
flex-grow: 1; |
||||
padding: 2px 6px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
height: 50px; |
||||
font-weight: 700; |
||||
font-size: 14px; |
||||
color: rgba(18, 18, 18, 0.75); |
||||
border-radius: 100px; |
||||
} |
||||
|
||||
.product-constructor__block-item svg, .product-constructor__block-item path{ |
||||
fill: rgba(18, 18, 18, 0.75); |
||||
} |
||||
.product-constructor__block-item.active{ |
||||
color: #fff; |
||||
background-color: var(--accent-color); |
||||
} |
||||
|
||||
.product-constructor__block-item.active svg, .product-constructor__block-item.active path{ |
||||
fill: #fff; |
||||
} |
||||
.product-constructor__block-item img, .product-constructor__block-item svg{ |
||||
height: 22px; |
||||
width: 22px; |
||||
} |
||||
/* product constructor */ |
||||
/* product price */ |
||||
|
||||
|
||||
.product-price{ |
||||
display: flex; |
||||
gap: 10px; |
||||
align-items: center; |
||||
} |
||||
|
||||
.product-price-main{ |
||||
border-radius: 100px; |
||||
padding: 14px 15px; |
||||
width: 135px; |
||||
background-color: #fff; |
||||
font-size: 24px; |
||||
text-transform: uppercase; |
||||
text-align: center; |
||||
color: #4d4d4d; |
||||
font-weight: 700; |
||||
} |
||||
|
||||
.product-price-old{ |
||||
font-weight: 700; |
||||
font-size: 16px; |
||||
line-height: 150%; |
||||
text-transform: uppercase; |
||||
text-decoration: line-through; |
||||
color: #666; |
||||
} |
||||
.product-price-percent{ |
||||
font-weight: 500; |
||||
font-size: 12px; |
||||
line-height: 133%; |
||||
color: #fa0505; |
||||
margin-top: 8px; |
||||
} |
||||
|
||||
.product-btn{ |
||||
border: 2px solid #fff; |
||||
border-radius: 100px; |
||||
padding: 12px 16px; |
||||
width: 100%; |
||||
height: 60px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-weight: 900; |
||||
font-size: 12px; |
||||
text-align: center; |
||||
color: #fff; |
||||
margin-top: 20px; |
||||
background-color: var(--accent-color); |
||||
} |
||||
/* product price */ |
||||
|
||||
|
||||
/* product gallery */ |
||||
|
||||
.product-gallery{ |
||||
width: 390px; |
||||
margin-right: 20px; |
||||
border: 2px solid #fff; |
||||
border-radius: 30px; |
||||
} |
||||
|
||||
/* product gallery */ |
||||
|
||||
.product-constructor, .product-gallery, .product-info{ |
||||
flex-grow: 1; |
||||
} |
||||
|
||||
.product-gallery{ |
||||
padding-top: 30px; |
||||
padding-bottom: 10px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
|
||||
.product-gallery-item{ |
||||
|
||||
background-color: #fff; |
||||
border-radius: 24px; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
height: auto; |
||||
aspect-ratio: 1/1; |
||||
} |
||||
.product-gallery-slider{ |
||||
margin-left: 10px; |
||||
margin-right: 10px; |
||||
position: relative; |
||||
|
||||
} |
||||
|
||||
.product-gallery-slider .swiper-wrapper{ |
||||
|
||||
} |
||||
|
||||
.mySwiper::before{ |
||||
background: linear-gradient(270deg, rgba(193, 221, 230, 0) 0%, var(--bg-color) 100%); |
||||
height: 120%; |
||||
position: absolute; |
||||
left: -10px; |
||||
top: -10%; |
||||
width: 65px; |
||||
content: ''; |
||||
z-index: 2; |
||||
pointer-events: none; |
||||
} |
||||
|
||||
.mySwiper::after{ |
||||
background: linear-gradient(270deg, rgba(193, 221, 230, 0) 0%, var(--bg-color) 100%); |
||||
height: 120%; |
||||
position: absolute; |
||||
right: -10px; |
||||
top: -10%; |
||||
width: 65px; |
||||
content: ''; |
||||
transform: scaleX(-1); |
||||
z-index: 2; |
||||
pointer-events: none; |
||||
} |
||||
.product-gallery-item img{ |
||||
height: 100%; |
||||
width: 100%; |
||||
object-fit: contain; |
||||
padding: 10px; |
||||
} |
||||
/* product */ |
||||
|
||||
.product-gallery-arrow{ |
||||
border-radius: 100px; |
||||
background-color: var(--accent-color); |
||||
border: 1px solid #fff; |
||||
height: 44px; |
||||
width: 44px; |
||||
pointer-events: all; |
||||
background-image: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7 7L1 13' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E"); |
||||
background-position: center; |
||||
background-repeat: no-repeat; |
||||
} |
||||
|
||||
.product-gallery-arrows{ |
||||
width: calc(100% - 10px); |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 5px; |
||||
transform: translateY(-50%); |
||||
justify-content: space-between; |
||||
pointer-events: none; |
||||
z-index: 3; |
||||
display: flex; |
||||
} |
||||
|
||||
.product-gallery-prev{ |
||||
transform: scaleX(-1); |
||||
} |
||||
|
||||
.swiper-slide-active.product-gallery-item{ |
||||
outline: 4px solid #48c1ed; |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
.product_main .swiper-slide { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
.product_main .swiper-slide img { |
||||
display: block; |
||||
width: 100%; |
||||
height: 100%; |
||||
object-fit: contain; |
||||
} |
||||
|
||||
.product_main .swiper { |
||||
width: 100%; |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
} |
||||
|
||||
.product_main .swiper-slide { |
||||
background-size: cover; |
||||
background-position: center; |
||||
} |
||||
|
||||
.mySwiper2 { |
||||
height: 80%; |
||||
width: 100%; |
||||
} |
||||
|
||||
.mySwiper { |
||||
height: 20%; |
||||
box-sizing: border-box; |
||||
padding: 10px; |
||||
height: 110px; |
||||
} |
||||
|
||||
.mySwiper .swiper-slide { |
||||
width: 90px; |
||||
height: 90px; |
||||
background-color: #fff; |
||||
border-radius: 24px; |
||||
padding: 10px 20px; |
||||
position: relative; |
||||
} |
||||
|
||||
.mySwiper .swiper-slide-thumb-active { |
||||
outline: 4px solid var(--accent-color); |
||||
} |
||||
|
||||
.product_main .swiper-slide img { |
||||
display: block; |
||||
width: calc(100% - 10px); |
||||
height: calc(100% - 10px); |
||||
object-fit: contain; |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); |
||||
} |
||||
|
||||
|
||||
|
||||
.product-desc{ |
||||
margin-top: 55px; |
||||
} |
||||
|
||||
.product-desc-text{ |
||||
font-weight: 400; |
||||
font-size: 16px; |
||||
line-height: 150%; |
||||
color: #121212; |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
|
||||
.product-reviews{ |
||||
margin-top: 140px; |
||||
} |
||||
|
||||
.product-similar{ |
||||
margin-top: 140px; |
||||
} |
||||
|
||||
.main-food_reviews-slide{ |
||||
box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.12); |
||||
background: var(--color); |
||||
/* width: 395px; */ |
||||
border-radius: 40px !important; |
||||
} |
||||
|
||||
.product-reviews-slider { |
||||
overflow: visible !important; |
||||
margin-top: 40px; |
||||
padding-left: 20px; |
||||
padding-right: 20px; |
||||
} |
||||
|
||||
.product-reviews{ |
||||
overflow: hidden; |
||||
padding-bottom: 60px; |
||||
margin-bottom: -60px; |
||||
} |
||||
|
||||
.product-similar-slider{ |
||||
margin-top: 40px; |
||||
} |
||||
|
||||
.main-food_products-card-slider .swiper-slide{ |
||||
align-self: center; |
||||
} |
||||
|
||||
.product-similar{ |
||||
overflow: hidden; |
||||
} |
||||
|
||||
|
||||
.product-single{ |
||||
padding-bottom: 90px; |
||||
} |
||||
|
||||
.product-similar-slider .swiper-wrapper{ |
||||
align-items: stretch; |
||||
} |
||||
.product-similar-slider .swiper-slide{ |
||||
height: auto; |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
.product-similar-slider .swiper-slide > div{ |
||||
flex-grow: 1; |
||||
} |
||||
|
||||
.product-title.--m{ |
||||
display: none; |
||||
} |
||||
|
||||
@media (max-width: 1150px) { |
||||
.product_main { |
||||
flex-direction: column; |
||||
} |
||||
.product-gallery{ |
||||
order: 0; |
||||
} |
||||
.product-info{ |
||||
order: 3; |
||||
} |
||||
.product-info, .product-gallery, .product-constructor{ |
||||
width: 100%; |
||||
margin-right: auto; |
||||
margin-left: 0; |
||||
margin-top: 20px; |
||||
} |
||||
.mySwiper{ |
||||
display: none; |
||||
} |
||||
.mySwiper2{ |
||||
width: 100%; |
||||
height: auto; |
||||
aspect-ratio: 1 / 1.25; |
||||
max-height: 540px; |
||||
} |
||||
.breadcrumbs{ |
||||
display: none; |
||||
} |
||||
.product_main{ |
||||
margin-top: -45px; |
||||
width: calc(48px + 100%); |
||||
margin-left: -24px; |
||||
border-radius: 0; |
||||
padding: 5px 20px 40px; |
||||
} |
||||
.product-title.--m{ |
||||
display: block; |
||||
font-size: 18px; |
||||
margin-top: 20px; |
||||
margin-top: 32px; |
||||
margin-bottom: 14px; |
||||
} |
||||
.product-title.--pc{ |
||||
display: none; |
||||
} |
||||
.product-constructor__block-title{ |
||||
font-size: 14px; |
||||
line-height: 143%; |
||||
} |
||||
.product-constructor__block-item-name{ |
||||
font-size: 12px; |
||||
} |
||||
.product-info{ |
||||
padding-right: 0; |
||||
} |
||||
.product-desc-text{ |
||||
font-size: 14px; |
||||
} |
||||
.product-reviews{ |
||||
margin-top: 66px; |
||||
} |
||||
.main-food_reviews-slide{ |
||||
padding-left: 20px !important; |
||||
padding-right: 20px !important; |
||||
} |
||||
.main-food_products-card{ |
||||
min-width: 0 !important; |
||||
} |
||||
.main-food_products-card-img img{ |
||||
height: 40vw; |
||||
} |
||||
} |
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 9.9 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 459 B |
|
After Width: | Height: | Size: 481 B |
|
After Width: | Height: | Size: 456 B |
|
After Width: | Height: | Size: 458 B |
|
After Width: | Height: | Size: 954 B |
|
After Width: | Height: | Size: 455 B |
|
After Width: | Height: | Size: 1.9 KiB |
@ -0,0 +1,94 @@ |
||||
document.addEventListener('DOMContentLoaded', function() { |
||||
|
||||
|
||||
var swiper = new Swiper(".mySwiper", { |
||||
loop: true, |
||||
spaceBetween: 10, |
||||
slidesPerView: 'auto', |
||||
freeMode: true, |
||||
watchSlidesProgress: true, |
||||
navigation: { |
||||
nextEl: '.product-gallery-next', |
||||
prevEl: '.product-gallery-prev', |
||||
}, |
||||
}); |
||||
var swiper2 = new Swiper(".mySwiper2", { |
||||
loop: true, |
||||
spaceBetween: 10, |
||||
thumbs: { |
||||
swiper: swiper, |
||||
}, |
||||
}); |
||||
|
||||
|
||||
var reviewsSwiper = new Swiper(".product-reviews-slider", { |
||||
loop: false, |
||||
spaceBetween: 20, |
||||
slidesPerView: 1, |
||||
breakpoints: { |
||||
300: { |
||||
slidesPerView: 1, |
||||
spaceBetween: 20, |
||||
}, |
||||
776: { |
||||
slidesPerView: 2, |
||||
spaceBetween: 40, |
||||
}, |
||||
991: { |
||||
slidesPerView: 3, |
||||
spaceBetween: 40, |
||||
}, |
||||
1440: { |
||||
slidesPerView: 4, |
||||
spaceBetween: 40, |
||||
}, |
||||
} |
||||
}); |
||||
var productsRelatedSwiper = new Swiper(".product-similar-slider", { |
||||
loop: false, |
||||
spaceBetween: 20, |
||||
slidesPerView: 1, |
||||
breakpoints: { |
||||
300: { |
||||
slidesPerView: 1.8, |
||||
spaceBetween: 10, |
||||
}, |
||||
776: { |
||||
slidesPerView: 2, |
||||
spaceBetween: 20, |
||||
}, |
||||
991: { |
||||
slidesPerView: 3, |
||||
spaceBetween: 20, |
||||
}, |
||||
1440: { |
||||
slidesPerView: 4, |
||||
spaceBetween: 20, |
||||
}, |
||||
} |
||||
}); |
||||
|
||||
|
||||
jQuery('img.svg').each(function(){ |
||||
var $img = jQuery(this); |
||||
var imgID = $img.attr('id'); |
||||
var imgClass = $img.attr('class'); |
||||
var imgURL = $img.attr('src'); |
||||
jQuery.get(imgURL, function(data) { |
||||
var $svg = jQuery(data).find('svg'); |
||||
|
||||
if(typeof imgID !== 'undefined') { |
||||
$svg = $svg.attr('id', imgID); |
||||
} |
||||
if(typeof imgClass !== 'undefined') { |
||||
$svg = $svg.attr('class', imgClass+' replaced-svg'); |
||||
} |
||||
$svg = $svg.removeAttr('xmlns:a'); |
||||
if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) { |
||||
$svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width')) |
||||
} |
||||
$img.replaceWith($svg); |
||||
|
||||
}, 'xml'); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,29 @@ |
||||
<?php |
||||
|
||||
|
||||
|
||||
$context = Timber::get_context(); |
||||
|
||||
include_component('shop', 'reviews'); |
||||
include_component('shop', 'product-card'); |
||||
|
||||
$reviews = get_posts(array( |
||||
'post_type' => 'p_reviews', |
||||
'numberposts' => -1, |
||||
)); |
||||
|
||||
$product_id = get_the_ID(); |
||||
$product = wc_get_product($product_id); |
||||
$context['related_products'] = array(); |
||||
$related_products_ids = $product->get_upsell_ids(); |
||||
if ($related_products_ids) { |
||||
foreach ($related_products_ids as $related_id) { |
||||
$related_product = wc_get_product($related_id); |
||||
if ($related_product) { |
||||
$context['related_products'][] = $related_product; |
||||
} |
||||
} |
||||
} |
||||
|
||||
$context['reviews'] = $reviews; |
||||
Timber::render('shop/single-product_page.twig', $context); |
||||
@ -0,0 +1,40 @@ |
||||
<div class="main-food_reviews-slide swiper-slide"> |
||||
{% if fn('get_field', 'media_file', slide) %} |
||||
<a class="main-food_reviews-slide-media_file-wrap" href="{{fn('get_field', 'media_file', slide)}}" data-fancybox><img class="main-food_reviews-slide-media_file" src="{{fn('get_field', 'media_file', slide)}}"></a> |
||||
{% endif %} |
||||
{% if fn('get_field', 'media', slide) %} |
||||
<div class="main-food_reviews-slide-media_wrap"> |
||||
<a href="{{fn('get_field', 'media_file', slide)}}" data-fancybox><img class="main-food_reviews-slide-media_main" src="{{fn('get_field', 'media_file', slide)}}"></a> |
||||
|
||||
{% for file in fn('get_field', 'media', slide) %} |
||||
<img {% if file.video %}data-video="{{file.video}}"{% endif %} class="main-food_reviews-slide-media_mini {% if file.video %}--video{% endif %}" src="{{file.img}}"> |
||||
{% endfor %} |
||||
</div> |
||||
{% endif %} |
||||
<div class="main-food_reviews-slide-head"> |
||||
{% if fn('get_field', 'photo', slide) %} |
||||
<img class="main-food_reviews-slide-photo" src="{{fn('get_field', 'photo', slide)}}"> |
||||
{% endif %} |
||||
<p class="main-food_reviews-slide-name {% if not fn('get_field', 'photo', slide) %}--no-padding-left{% endif %}">{{fn('get_the_title', slide)}}</p> |
||||
</div> |
||||
<p class="main-food_reviews-slide-position {% if not fn('get_field', 'photo', slide) %}--no-padding-left{% endif %} {% if fn('get_field', 'type', slide) == 'media' %}--no-min-height{% endif %}">{{fn('get_field', 'desc', slide)}}</p> |
||||
{% if fn('get_field', 'text', slide) %} |
||||
{% if fn('get_field', 'type', slide) == 'media' %} |
||||
{% set maxLength = 160 %} |
||||
{% else %} |
||||
{% set maxLength = 350 %} |
||||
{% endif %} |
||||
{% set content = fn('get_field', 'text', slide) %} |
||||
|
||||
{% if content|length > maxLength %} |
||||
<div class="main-food_reviews-slide-text">{{ content[:maxLength] ~ '...' }} |
||||
<button class="read-more" onclick="showModal('modal-rev_{{slide.ID}}')"> |
||||
Читать полностью |
||||
</button> |
||||
</div> |
||||
{% else %} |
||||
<div class="main-food_reviews-slide-text">{{ content }}</div> |
||||
{% endif %} |
||||
|
||||
{% endif %} |
||||
</div> |
||||
Loading…
Reference in new issue