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 73c3f52..b8d01c2 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 @@ -474,6 +474,8 @@ textarea{ .wrapper { margin: 0 auto; max-width: 1600px; + padding-left: 24px; + padding-right: 24px; } 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 218fafd..fc41fa7 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 @@ -1,3 +1,177 @@ +.main-food_products-card-title{ + padding: 8px 16px 8px 16px; + border-radius: 36px; + background: #fff; + font-weight: 600; + font-size: 12px; + text-transform: uppercase; +} + +.main-food_products-card-bottom { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-top: 10px; +} + +.main-food_products-card { + --accent-color: #121212; + border-radius: 30px; + padding: 8px; + width: 265px; + min-width: 194px; + display: flex; + flex-direction: column; + justify-content: space-between; + background-color: var(--accent-color); + background-image: linear-gradient( + rgba(255, 255, 255, 0.6), + rgba(255, 255, 255, 0.6) + ); +} + + +.main-food_products-card.acc{ + background: #e7e7e7; +} + +.main-food_products-card.acc .main-food_products-cardbottom-btn, +.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; + /* filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1)); */ +} +/* .shadow-svg { + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-65%); + width: 80%; + height: auto; + z-index: 0; + pointer-events: none; +} */ +.main-food_products-card-img img { + position: relative; + z-index: 1; + display: block; + max-width: 100%; + height: auto; + aspect-ratio: 1/1; + object-fit: contain; +} + +.main-food_products-card-title{ + padding: 8px 16px 8px 16px; + border-radius: 36px; + background: #fff; + font-weight: 500; + font-size: 12px; + text-transform: uppercase; + color: var(--accent-color); +} + +.food.lamb.main-food_products-card { + --accent-color: #863300; + +} +.food.turkey.main-food_products-card { + --accent-color: #CD0003; + +} +.food.beef.main-food_products-card{ + --accent-color: #7e0092; + +} +.food.fish.main-food_products-card{ + --accent-color: #48c1ed; +} +.treats.lamb.main-food_products-card { + --accent-color: #44006c; + +} +.treats.rabbit.main-food_products-card { + --accent-color: #601094; + +} +.treats.beef.main-food_products-card{ + --accent-color: #004c31; + +} +.treats.salmon.main-food_products-card{ + --accent-color: #7c007a; + +} +.treats.duck.main-food_products-card{ + --accent-color: #326e70; + +} +.main-food_products-card-bottom { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 8px; +} +.main-food_products-card-bottom-price{ + border-radius: 36px; + padding: 10px; + background: #fff; + font-weight: 600; + font-size: 18px; + text-transform: uppercase; + text-align: center; + display: flex; + justify-content: center; + align-items: center; + color: var(--accent-color); +} +.main-food_products-cardbottom-btn{ + border: 2px solid #fff; + border-radius: 36px; + padding: 0px 32px; + height: 42px; + font-weight: 900; + font-size: 12px; + text-align: center; + color: #fff; + display: flex; + justify-content: center; + align-items: center; + flex-grow: 1; + transition: all .3s; + background-color: var(--accent-color); +} + + +.main-food_products-card-slider .swiper-pagination-bullet { + background: #fff; + height: 10px; + width: 10px; + border-radius: 50%; + opacity: 1; +} + .main-food_products-card-slider .swiper-pagination-bullet.swiper-pagination-bullet-active{ + background-color: var(--accent-color); +} +.swiper-dots{ + position: absolute; + bottom: 16px !important; + display: flex; + justify-content: center; + z-index: 5; +} + + .main-food_products-cardbottom-btn .spinner{ height: 17px; width: 17px; @@ -36,9 +210,60 @@ border: 2px solid var(--accent-color); color: var(--accent-color); } +@media (max-width: 940px) { + .main-food_products-card-img img{ + height: 50vw; +} +.main-food_products-card-title{ + font-size: 10px; +} +.main-food_products-card-bottom-price{ + font-size: 12px; + height: 44px; + padding-left: 10px; + padding-right: 10px; +} +.main-food_products-cardbottom-btn{ + font-size: 0; + height: 44px; + width: 44px; + position: relative; + padding: 0; + flex-grow: 0; +} +.main-food_products-cardbottom-btn::after{ + background-image: url("data:image/svg+xml,%3Csvg width='18' height='20' viewBox='0 0 18 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.99891 0C10.0882 1.85362e-05 11.1353 0.416463 11.908 1.15941L12.0484 1.30206C12.7329 2.02913 13.1164 2.97793 13.1165 3.96649V5.03207L14.9288 5.02729L15.0941 5.03207C15.4787 5.05208 15.8566 5.14206 16.208 5.29727L16.357 5.36716C16.6986 5.54015 17.0042 5.7742 17.257 6.05744L17.3621 6.18191C17.5979 6.47719 17.7739 6.81389 17.8808 7.17377L17.9228 7.32887C17.9969 7.64101 18.0178 7.96276 17.9849 8.28147L17.9639 8.4404L16.6522 16.6376C16.5114 17.5178 16.0674 18.3238 15.3969 18.9287L15.2603 19.0464C14.5603 19.6238 13.6814 19.9569 12.7659 19.9962L12.5815 20H5.41634C4.49677 19.9999 3.60472 19.7028 2.88179 19.1584L2.73944 19.0464C2.03929 18.4688 1.56066 17.6815 1.37998 16.8119L1.3475 16.6376L0.0357986 8.4404C-0.03187 8.0173 -0.00329994 7.58521 0.118914 7.17377L0.168592 7.02058C0.295244 6.6677 0.489965 6.34073 0.742759 6.05744L0.854535 5.93968C1.12207 5.67071 1.44011 5.45265 1.79174 5.29727L1.94364 5.23408C2.25097 5.11719 2.57599 5.04922 2.90568 5.03207L3.07095 5.02729H4.60525L4.87155 5.03207L4.8823 3.96649C4.88242 2.91203 5.31814 1.90251 6.09082 1.15941L6.2389 1.02346C6.99437 0.365708 7.97783 0.000101636 8.99891 0ZM3.07095 6.92772C2.95004 6.92773 2.83041 6.94761 2.71652 6.9842L2.60378 7.02633C2.49444 7.07468 2.39447 7.13951 2.30763 7.21781L2.22451 7.3011C2.14669 7.38833 2.08465 7.48682 2.04013 7.59215L2.00191 7.69938C1.95855 7.84531 1.94843 7.99859 1.9723 8.1484L3.28495 16.3456L3.32221 16.5256C3.42862 16.9407 3.66723 17.3168 4.00911 17.5989L4.16101 17.7128C4.47324 17.927 4.83998 18.0579 5.22336 18.091L5.41634 18.0996H12.5824L12.7754 18.091C13.223 18.0525 13.6486 17.8809 13.9906 17.5989L14.1301 17.4725C14.4421 17.1647 14.6468 16.7708 14.7148 16.3456L16.0274 8.14935L16.0389 8.03638C16.0424 7.96081 16.0379 7.88502 16.0246 7.81044L15.9978 7.69938C15.9653 7.58999 15.9149 7.48606 15.8478 7.39205L15.7752 7.3011C15.6974 7.21384 15.6049 7.13906 15.502 7.07994L15.3959 7.02633C15.2863 6.9779 15.1689 6.94689 15.0492 6.93442L14.9288 6.92772H13.1165V8.99473C13.1163 9.52694 12.6697 9.94443 12.1363 9.94447C11.6029 9.94439 11.1562 9.52691 11.1561 8.99473V6.92772H6.84172V8.99473C6.84159 9.52685 6.39576 9.9443 5.86249 9.94447C5.32907 9.94447 4.88244 9.52696 4.8823 8.99473V6.92772H3.07095ZM8.99891 1.90043C8.49608 1.90053 8.01257 2.06912 7.62893 2.37147L7.4713 2.50838C7.0677 2.89647 6.84185 3.4213 6.84172 3.96649V4.74102H11.1561V3.96649C11.156 3.48959 10.9841 3.0284 10.6708 2.6606L10.5275 2.50838C10.1235 2.12005 9.57346 1.90045 8.99891 1.90043Z' fill='white' /%3E%3C/svg%3E"); + height: 20px; + width: 18px; + background-size: contain; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + content: ''; + background-repeat: no-repeat; +} +} @media (max-width: 640px) { .main-food_products-card__weight{ display: none; } +} + + + +/* GP | Mobile */ + +@media (max-width: 768px) { + .main-food{ + padding-top: 2rem; + } +} + + +.mform__review__media{ + display: block; + width: 100%; + max-width: 350px; } \ No newline at end of file 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 new file mode 100644 index 0000000..bb979f3 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/reviews/assets/css/reviews.css @@ -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; +} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/shop/components/reviews/assets/js/reviews.js b/wp-content/themes/cosmopet/modules/shop/components/reviews/assets/js/reviews.js new file mode 100644 index 0000000..b746290 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/reviews/assets/js/reviews.js @@ -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() + }) \ No newline at end of file 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 new file mode 100644 index 0000000..2e48c81 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/css/product-style.css @@ -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; + } +} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/avg.svg b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/avg.svg new file mode 100644 index 0000000..f575031 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/avg.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/beef.svg b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/beef.svg new file mode 100644 index 0000000..34e7c81 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/beef.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/dog-face.svg b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/dog-face.svg new file mode 100644 index 0000000..003dc47 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/dog-face.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/fish.svg b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/fish.svg new file mode 100644 index 0000000..653bba5 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/fish.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/lamb.svg b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/lamb.svg new file mode 100644 index 0000000..9eb78d5 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/lamb.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/lg.svg b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/lg.svg new file mode 100644 index 0000000..0976a0a --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/lg.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/mini.svg b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/mini.svg new file mode 100644 index 0000000..af4fd62 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/mini.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/pet/cat.png b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/pet/cat.png new file mode 100644 index 0000000..dbe6872 Binary files /dev/null and b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/pet/cat.png differ diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/pet/cat.png.webp b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/pet/cat.png.webp new file mode 100644 index 0000000..f6bd986 Binary files /dev/null and b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/pet/cat.png.webp differ diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/pet/dog.png b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/pet/dog.png new file mode 100644 index 0000000..07d13f3 Binary files /dev/null and b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/pet/dog.png differ diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/pet/dog.png.webp b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/pet/dog.png.webp new file mode 100644 index 0000000..88fe92b Binary files /dev/null and b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/pet/dog.png.webp differ diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/pet/mini-dog.png b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/pet/mini-dog.png new file mode 100644 index 0000000..a5cd82d Binary files /dev/null and b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/pet/mini-dog.png differ diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/pet/mini-dog.png.webp b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/pet/mini-dog.png.webp new file mode 100644 index 0000000..8695b6e Binary files /dev/null and b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/pet/mini-dog.png.webp differ diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/svg/main/arrow-back.svg b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/svg/main/arrow-back.svg new file mode 100644 index 0000000..a977e53 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/svg/main/arrow-back.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/svg/main/arrow-breadcrumbs.svg b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/svg/main/arrow-breadcrumbs.svg new file mode 100644 index 0000000..f1f9618 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/svg/main/arrow-breadcrumbs.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/svg/main/arrow-left.svg b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/svg/main/arrow-left.svg new file mode 100644 index 0000000..465c268 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/svg/main/arrow-left.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/svg/main/arrow-right.svg b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/svg/main/arrow-right.svg new file mode 100644 index 0000000..8952470 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/svg/main/arrow-right.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/svg/main/arrow-selected.svg b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/svg/main/arrow-selected.svg new file mode 100644 index 0000000..fb283a7 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/svg/main/arrow-selected.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/svg/main/black-x.svg b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/svg/main/black-x.svg new file mode 100644 index 0000000..cb3041d --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/svg/main/black-x.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/turkey.svg b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/turkey.svg new file mode 100644 index 0000000..57022cd --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/img/turkey.svg @@ -0,0 +1,3 @@ + + + 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/gp-main.js new file mode 100644 index 0000000..7e58257 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/assets/js/gp-main.js @@ -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'); + }); +}); \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product_new/component-controller.php b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/component-controller.php new file mode 100644 index 0000000..140f90e --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product_new/component-controller.php @@ -0,0 +1,29 @@ + '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); \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/static-pages/new-front-page/template-new-front-page.php b/wp-content/themes/cosmopet/modules/static-pages/new-front-page/template-new-front-page.php index 5b2108f..f4b292e 100644 --- a/wp-content/themes/cosmopet/modules/static-pages/new-front-page/template-new-front-page.php +++ b/wp-content/themes/cosmopet/modules/static-pages/new-front-page/template-new-front-page.php @@ -59,7 +59,7 @@ add_action('wp_enqueue_scripts', 'theme_enqueue_scripts'); include_component('blog', 'main-page-block'); include_component('shop', 'product-card'); - +include_component('shop', 'reviews'); $reviews_food_query = get_posts(array( 'post_type' => 'p_reviews', diff --git a/wp-content/themes/cosmopet/single-product.php b/wp-content/themes/cosmopet/single-product.php index 8cbab0e..a78a482 100644 --- a/wp-content/themes/cosmopet/single-product.php +++ b/wp-content/themes/cosmopet/single-product.php @@ -7,6 +7,15 @@ if ( ! defined( 'ABSPATH' ) ) { if (is_product()) { include_module('shop'); - include_component('shop', 'single-product'); + global $product; + // Get the product ID + $product_id = get_the_ID(); + if ($product_id == 1105){ + include_component('shop', 'single-product_new'); + } + else{ + include_component('shop', 'single-product'); + } + } \ No newline at end of file diff --git a/wp-content/themes/cosmopet/static/css/new-front-page-style.css b/wp-content/themes/cosmopet/static/css/new-front-page-style.css index f815f84..ce45041 100644 --- a/wp-content/themes/cosmopet/static/css/new-front-page-style.css +++ b/wp-content/themes/cosmopet/static/css/new-front-page-style.css @@ -794,227 +794,8 @@ background: radial-gradient(161.08% 232.33% at 133.99% -48.29%, #EE6868 0%, #569 flex-wrap: wrap; gap: 10px; } -.main-food_products-card { - --accent-color: #121212; - border-radius: 30px; - padding: 8px; - width: 265px; - min-width: 194px; - display: flex; - flex-direction: column; - justify-content: space-between; - background-color: var(--accent-color); - background-image: linear-gradient( - rgba(255, 255, 255, 0.6), - rgba(255, 255, 255, 0.6) - ); -} - - - -.main-food_products-card-img { - position: relative; - display: flex; - justify-content: center; - align-items: center; - padding: 8px 0px 32px; - padding-bottom: 42px; - /* filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1)); */ -} -/* .shadow-svg { - position: absolute; - bottom: 0; - left: 50%; - transform: translateX(-65%); - width: 80%; - height: auto; - z-index: 0; - pointer-events: none; -} */ -.main-food_products-card-img img { - position: relative; - z-index: 1; - display: block; - max-width: 100%; - height: auto; - aspect-ratio: 1/1; - object-fit: contain; -} - - -.main-food_products-card-title{ - padding: 8px 16px 8px 16px; - border-radius: 36px; - background: #fff; - font-weight: 500; - font-size: 12px; - text-transform: uppercase; - color: var(--accent-color); -} - - -.food.lamb.main-food_products-card { - --accent-color: #863300; - -} -.food.turkey.main-food_products-card { - --accent-color: #CD0003; - -} -.food.beef.main-food_products-card{ - --accent-color: #7e0092; - -} -.food.fish.main-food_products-card{ - --accent-color: #48c1ed; - -} - -.treats.lamb.main-food_products-card { - --accent-color: #44006c; - -} -.treats.rabbit.main-food_products-card { - --accent-color: #601094; - -} -.treats.beef.main-food_products-card{ - --accent-color: #004c31; - -} -.treats.salmon.main-food_products-card{ - --accent-color: #7c007a; - -} - -.treats.duck.main-food_products-card{ - --accent-color: #326e70; - -} - -.main-food_products-card-bottom { - display: flex; - justify-content: space-between; - align-items: flex-start; - gap: 8px; -} - -.main-food_products-card-bottom-price{ - border-radius: 36px; - padding: 10px; - background: #fff; - font-weight: 600; - font-size: 18px; - text-transform: uppercase; - text-align: center; - display: flex; - justify-content: center; - align-items: center; - color: var(--accent-color); -} - - -.main-food_products-cardbottom-btn{ - border: 2px solid #fff; - border-radius: 36px; - padding: 0px 32px; - height: 42px; - font-weight: 900; - font-size: 12px; - text-align: center; - color: #fff; - display: flex; - justify-content: center; - align-items: center; - flex-grow: 1; - transition: all .3s; - background-color: var(--accent-color); -} -.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_arrows { position: absolute; right: 20%; @@ -1039,84 +820,14 @@ background: radial-gradient(161.08% 232.33% at 133.99% -48.29%, #EE6868 0%, #569 content: none; } -.main-food_products-card-slider .swiper-pagination-bullet { - background: #fff; - height: 10px; - width: 10px; - border-radius: 50%; - opacity: 1; -} - .main-food_products-card-slider .swiper-pagination-bullet.swiper-pagination-bullet-active{ - background-color: var(--accent-color); -} -.swiper-dots{ - position: absolute; - bottom: 16px !important; - display: flex; - justify-content: center; - z-index: 5; -} -.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_link { max-width: 240px; justify-content: space-between; padding: 0 8px; } -@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-reviews { background: #f4f1f0; @@ -1177,21 +888,6 @@ background: radial-gradient(161.08% 232.33% at 133.99% -48.29%, #EE6868 0%, #569 border-radius: 0px 0px 60px 60px; } -.main-food_products-card-title{ - padding: 8px 16px 8px 16px; - border-radius: 36px; - background: #fff; - font-weight: 600; - font-size: 12px; - text-transform: uppercase; -} - -.main-food_products-card-bottom { - display: flex; - justify-content: space-between; - align-items: flex-start; - margin-top: 10px; -} .main-treats_products-card-bottom-price{ border-radius: 100px; @@ -1281,18 +977,7 @@ background: radial-gradient(161.08% 232.33% at 133.99% -48.29%, #EE6868 0%, #569 right: auto; } -.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%; -} + /* Main Smi */ @@ -2840,48 +2525,7 @@ font-size: 32px; width: calc(50% - 5px); min-width: 0; } -.main-food_products-card-img img{ - height: 50vw; -} -.main-food_products-card-title{ - font-size: 10px; -} -.main-food_products-card-bottom-price{ - font-size: 12px; - height: 44px; - padding-left: 10px; - padding-right: 10px; -} -.main-food_products-cardbottom-btn{ - font-size: 0; - height: 44px; - width: 44px; - position: relative; - padding: 0; - flex-grow: 0; -} -.main-food_products-cardbottom-btn::after{ - background-image: url("data:image/svg+xml,%3Csvg width='18' height='20' viewBox='0 0 18 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.99891 0C10.0882 1.85362e-05 11.1353 0.416463 11.908 1.15941L12.0484 1.30206C12.7329 2.02913 13.1164 2.97793 13.1165 3.96649V5.03207L14.9288 5.02729L15.0941 5.03207C15.4787 5.05208 15.8566 5.14206 16.208 5.29727L16.357 5.36716C16.6986 5.54015 17.0042 5.7742 17.257 6.05744L17.3621 6.18191C17.5979 6.47719 17.7739 6.81389 17.8808 7.17377L17.9228 7.32887C17.9969 7.64101 18.0178 7.96276 17.9849 8.28147L17.9639 8.4404L16.6522 16.6376C16.5114 17.5178 16.0674 18.3238 15.3969 18.9287L15.2603 19.0464C14.5603 19.6238 13.6814 19.9569 12.7659 19.9962L12.5815 20H5.41634C4.49677 19.9999 3.60472 19.7028 2.88179 19.1584L2.73944 19.0464C2.03929 18.4688 1.56066 17.6815 1.37998 16.8119L1.3475 16.6376L0.0357986 8.4404C-0.03187 8.0173 -0.00329994 7.58521 0.118914 7.17377L0.168592 7.02058C0.295244 6.6677 0.489965 6.34073 0.742759 6.05744L0.854535 5.93968C1.12207 5.67071 1.44011 5.45265 1.79174 5.29727L1.94364 5.23408C2.25097 5.11719 2.57599 5.04922 2.90568 5.03207L3.07095 5.02729H4.60525L4.87155 5.03207L4.8823 3.96649C4.88242 2.91203 5.31814 1.90251 6.09082 1.15941L6.2389 1.02346C6.99437 0.365708 7.97783 0.000101636 8.99891 0ZM3.07095 6.92772C2.95004 6.92773 2.83041 6.94761 2.71652 6.9842L2.60378 7.02633C2.49444 7.07468 2.39447 7.13951 2.30763 7.21781L2.22451 7.3011C2.14669 7.38833 2.08465 7.48682 2.04013 7.59215L2.00191 7.69938C1.95855 7.84531 1.94843 7.99859 1.9723 8.1484L3.28495 16.3456L3.32221 16.5256C3.42862 16.9407 3.66723 17.3168 4.00911 17.5989L4.16101 17.7128C4.47324 17.927 4.83998 18.0579 5.22336 18.091L5.41634 18.0996H12.5824L12.7754 18.091C13.223 18.0525 13.6486 17.8809 13.9906 17.5989L14.1301 17.4725C14.4421 17.1647 14.6468 16.7708 14.7148 16.3456L16.0274 8.14935L16.0389 8.03638C16.0424 7.96081 16.0379 7.88502 16.0246 7.81044L15.9978 7.69938C15.9653 7.58999 15.9149 7.48606 15.8478 7.39205L15.7752 7.3011C15.6974 7.21384 15.6049 7.13906 15.502 7.07994L15.3959 7.02633C15.2863 6.9779 15.1689 6.94689 15.0492 6.93442L14.9288 6.92772H13.1165V8.99473C13.1163 9.52694 12.6697 9.94443 12.1363 9.94447C11.6029 9.94439 11.1562 9.52691 11.1561 8.99473V6.92772H6.84172V8.99473C6.84159 9.52685 6.39576 9.9443 5.86249 9.94447C5.32907 9.94447 4.88244 9.52696 4.8823 8.99473V6.92772H3.07095ZM8.99891 1.90043C8.49608 1.90053 8.01257 2.06912 7.62893 2.37147L7.4713 2.50838C7.0677 2.89647 6.84185 3.4213 6.84172 3.96649V4.74102H11.1561V3.96649C11.156 3.48959 10.9841 3.0284 10.6708 2.6606L10.5275 2.50838C10.1235 2.12005 9.57346 1.90045 8.99891 1.90043Z' fill='white' /%3E%3C/svg%3E"); - height: 20px; - width: 18px; - background-size: contain; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - content: ''; - background-repeat: no-repeat; -} -.main-food_reviews-title{ - font-size: 24px; -} -.main-food_reviews-star{ - width: 82px; - top: -20px; -} -.main-reviews_title{ - font-size: 32px; -} + .marketplace__swiper{ overflow: visible; } @@ -3812,88 +3456,6 @@ background-color: #fff; } -.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; - -} - - @media (max-width: 576px) { .about_slider .slide { @@ -3955,81 +3517,9 @@ background-color: #fff; position: relative; } -.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; - } + .main-bot .swiper-pagination-bullet{ width: 91px; } diff --git a/wp-content/themes/cosmopet/static/js/new-front-page.js b/wp-content/themes/cosmopet/static/js/new-front-page.js index 1586f1e..61e650c 100644 --- a/wp-content/themes/cosmopet/static/js/new-front-page.js +++ b/wp-content/themes/cosmopet/static/js/new-front-page.js @@ -415,19 +415,7 @@ document.addEventListener('DOMContentLoaded', function () { } }) - 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() - }) + }); 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 dfd1aac..a5fdfcb 100644 --- a/wp-content/themes/cosmopet/templates/shop/product-card_element.twig +++ b/wp-content/themes/cosmopet/templates/shop/product-card_element.twig @@ -1,21 +1,21 @@ -{% set thumbnail = product.get_image_id() ? function('wp_get_attachment_image_url', product.get_image_id(), 'medium') : function('wc_placeholder_img_src') %} -{% set images = product.get_gallery_image_ids() %} -{% set compound = fn('wc_get_product_terms', product.get_id(), 'pa_compound') %} +{% set thumbnail = _product.get_image_id() ? function('wp_get_attachment_image_url', _product.get_image_id(), 'medium') : function('wc_placeholder_img_src') %} +{% set images = _product.get_gallery_image_ids() %} +{% set compound = fn('wc_get_product_terms', _product.get_id(), 'pa_compound') %}
- +
- {{product.get_name()}} + {{_product.get_name()}}
{% if images %} {% for image in images %}
- {{ product.get_title() }} + {{ _product.get_title() }}
{% endfor %} @@ -23,15 +23,16 @@
-
{% set collection = fn('wc_get_product_terms', product.id, 'pa_collection') %}{% if collection %} - {% set cur_weight = function('get_product_info', product.id, 'weight') %} +
+ {% set collection = fn('wc_get_product_terms', _product.id, 'pa_collection') %}{% if collection %} + {% set cur_weight = function('get_product_info', _product.id, 'weight') %}
{% for option in collection %} {% set term = get_term(option) %} {% set siblings = function('get_collection_siblings' , term.id) %} {% for sibling in siblings %} - + {% set weight = function('get_product_info', sibling.ID, 'weight') %} {% set s_product = TimberPost(sibling.ID) %} {% set wc_product = fn('wc_get_product', sibling.ID) %} @@ -54,13 +55,13 @@ {% endfor %} {% endfor %}
{% endif %} - - {{product.get_name()}} + + {{_product.get_name()}}
-
{{ product.get_price() }} {{ fn('get_woocommerce_currency_symbol') }}
- {{ fn('pll_e', 'В корзину') }} +
{{ _product.get_price() }} {{ fn('get_woocommerce_currency_symbol') }}
+ {{ fn('pll_e', 'В корзину') }}
\ No newline at end of file diff --git a/wp-content/themes/cosmopet/templates/shop/products-section_block.twig b/wp-content/themes/cosmopet/templates/shop/products-section_block.twig index c638980..3529f30 100644 --- a/wp-content/themes/cosmopet/templates/shop/products-section_block.twig +++ b/wp-content/themes/cosmopet/templates/shop/products-section_block.twig @@ -1,6 +1,6 @@
{% for product in product_list %} - {% include 'shop/product-card_element.twig' with {product : fn('wc_get_product', product.product)} %} + {% include 'shop/product-card_element.twig' with {_product : fn('wc_get_product', product.product)} %} {% endfor %} {% if section == 'food' %} Вся продукция diff --git a/wp-content/themes/cosmopet/templates/shop/reviews-section_block.twig b/wp-content/themes/cosmopet/templates/shop/reviews-section_block.twig index 7f2fb63..3f798cd 100644 --- a/wp-content/themes/cosmopet/templates/shop/reviews-section_block.twig +++ b/wp-content/themes/cosmopet/templates/shop/reviews-section_block.twig @@ -4,46 +4,7 @@
{% for slide in rev_list %} -
- {% if fn('get_field', 'media_file', slide) %} - - {% endif %} - {% if fn('get_field', 'media', slide) %} -
- - - {% for file in fn('get_field', 'media', slide) %} - - {% endfor %} -
- {% endif %} -
- {% if fn('get_field', 'photo', slide) %} - - {% endif %} -

{{fn('get_the_title', slide)}}

-
-

{{fn('get_field', 'desc', slide)}}

- {% 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 %} -
{{ content[:maxLength] ~ '...' }} - -
- {% else %} -
{{ content }}
- {% endif %} - - {% endif %} -
+ {% include "shop/reviews-slide_element.twig" with {slide: slide} %} {% endfor %}
diff --git a/wp-content/themes/cosmopet/templates/shop/reviews-slide_element.twig b/wp-content/themes/cosmopet/templates/shop/reviews-slide_element.twig new file mode 100644 index 0000000..ea2da77 --- /dev/null +++ b/wp-content/themes/cosmopet/templates/shop/reviews-slide_element.twig @@ -0,0 +1,40 @@ +
+ {% if fn('get_field', 'media_file', slide) %} + + {% endif %} + {% if fn('get_field', 'media', slide) %} +
+ + + {% for file in fn('get_field', 'media', slide) %} + + {% endfor %} +
+ {% endif %} +
+ {% if fn('get_field', 'photo', slide) %} + + {% endif %} +

{{fn('get_the_title', slide)}}

+
+

{{fn('get_field', 'desc', slide)}}

+ {% 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 %} +
{{ content[:maxLength] ~ '...' }} + +
+ {% else %} +
{{ content }}
+ {% endif %} + + {% endif %} +
\ No newline at end of file diff --git a/wp-content/themes/cosmopet/templates/shop/single-product_page.twig b/wp-content/themes/cosmopet/templates/shop/single-product_page.twig new file mode 100644 index 0000000..1395a61 --- /dev/null +++ b/wp-content/themes/cosmopet/templates/shop/single-product_page.twig @@ -0,0 +1,266 @@ +{% set bodyClass = 'bg-white' %} +{% set mainClass = '' %} +{% extends 'layout.twig' %} + +{% block content %} +
+
+ + + +
+
+

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

+
+

СОСТАВ

+
Животные белки 49% (Дегидрированная индейка 33%, белковый концентрат из Черной львинки 10%, печеночный гидролизат 5%, сухая плазма крови 1%), цельный рис, горошек, жир индейки, автолизат пивных дрожжей, витаминно-минеральный комплекс, лососевое масло (источник незаменимых Омега-3 жирных кислот), клетчатка гороха, таурин, комплекс пребиотиков (натуральные пребиотики FOS и MOS), экстракт граната, юкка Шидигера, экстракт розмарина (натуральный антиоксидант).
+
+
+

ПИЩЕВАЯ ЦЕННОСТЬ

+
+
+
Сырой белок
+
14%
+
+
+
Сырой жир
+
8%
+
+
+
Сырая клетчатка
+
26%
+
+
+
+
+ Витамины на кг +
+
+
A, ME — 34000
+
D3, ME — 1600
+
+
+
+
+ + {% 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() %} + +

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

+
+ + +
+
ВОЗРАСТ СОБАКИ
+ +
+
+
ВЕС УПАКОВКИ
+ +
+ + +
+
+ 1 303 ₽ +
+
+
1 449 ₽
+
+ - 10% +
+
+
+ + +
+
+ +
+
+ ОПИСАНИЕ +
+
+ Этот легкоусвояемый рацион содержит исключительно натуральные ингредиенты. Он обогащён белком, витаминами, минералами и антиоксидантами. Благодаря своей высокопитательной рецептуре, Cosmocat способствует здоровому росту и развитию котёнка +
+
+
+ +
+
+
+ Отзывы Специалистов +
+
+
+
+ {% for slide in reviews %} + {% include "shop/reviews-slide_element.twig" with {slide: slide} %} + {% 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' %} + {% elseif cat == 367 %} + {% set section = 'treats' %} + {% endif %} + {% endfor %} + {% if section == '' %} + {% set section = 'acc' %} + {% endif %} + + {% include 'shop/product-card_element.twig' with {_product : fn('wc_get_product', related_product), section: section} %} + +
+ {% endfor %} +
+
+
+
+ {% endif %} + +
+ {% for slide in rev_list %} + + {% include 'modal/rewiew_modal.twig' with {slide : slide} %} + + {% endfor %} +{% endblock %} \ No newline at end of file