Compare commits
30 Commits
@ -0,0 +1,49 @@ |
||||
/* Стили для загрузки корзины на single странице */ |
||||
|
||||
.product-incart__wrap.loading { |
||||
position: relative; |
||||
pointer-events: none; |
||||
opacity: 0.7; |
||||
} |
||||
|
||||
.product-incart__wrap.loading::before { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
background: rgba(255, 255, 255, 0.8); |
||||
z-index: 10; |
||||
} |
||||
|
||||
.product-incart__wrap.loading::after { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
width: 20px; |
||||
height: 20px; |
||||
margin: -10px 0 0 -10px; |
||||
border: 2px solid #f3f3f3; |
||||
border-top: 2px solid #3498db; |
||||
border-radius: 50%; |
||||
animation: spin 1s linear infinite; |
||||
z-index: 11; |
||||
} |
||||
|
||||
@keyframes spin { |
||||
0% { transform: rotate(0deg); } |
||||
100% { transform: rotate(360deg); } |
||||
} |
||||
|
||||
/* Стили для кнопок во время загрузки */ |
||||
.product-incart__wrap.loading .product-incart__btn { |
||||
opacity: 0.5; |
||||
pointer-events: none; |
||||
} |
||||
|
||||
/* Стили для счетчика во время загрузки */ |
||||
.product-incart__wrap.loading .product-incart__count { |
||||
opacity: 0.5; |
||||
} |
||||
@ -0,0 +1,746 @@ |
||||
.order{ |
||||
display: flex; |
||||
} |
||||
.order__title{ |
||||
font-family: var(--font-family); |
||||
font-weight: 700; |
||||
font-size: 24px; |
||||
line-height: 117%; |
||||
text-transform: uppercase; |
||||
color: var(--text-black); |
||||
} |
||||
.order__contacts{ |
||||
width: calc(50% - 0.5px); |
||||
|
||||
padding: 24px; |
||||
|
||||
border-right: 1px solid #121212; |
||||
} |
||||
.order-contacts__header{ |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
.order-contacts__form{ |
||||
margin-top: 24px; |
||||
} |
||||
.order-contacts__delivery{ |
||||
margin-top: 47.5px; |
||||
|
||||
padding-top: 48px; |
||||
|
||||
border-top: 1px solid var(--background-grey); |
||||
} |
||||
|
||||
.order-contacts-deliver__item{ |
||||
margin-top: 24px; |
||||
} |
||||
.order-contacts-deliver__date{ |
||||
padding: 8px; |
||||
|
||||
border-radius: 24px; |
||||
|
||||
background: var(--background-grey); |
||||
} |
||||
.order-contacts-deliver__date .form-input-radio__item{ |
||||
margin-top: 24px; |
||||
} |
||||
.order-contacts-deliver__date .form-input-radio__item:first-child{ |
||||
margin-top: 0; |
||||
} |
||||
.order__your{ |
||||
width: calc(50% - 0.5px); |
||||
|
||||
padding: 24px 24px 24px 48px; |
||||
|
||||
background: var(--background-grey); |
||||
} |
||||
.order-your__products{ |
||||
margin-top: 48px; |
||||
} |
||||
.order-your-products__item{ |
||||
margin-top: 16px; |
||||
|
||||
display: flex; |
||||
justify-content: space-between; |
||||
} |
||||
.order-your-products__left{ |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.order-your-products__img{ |
||||
width: 40px; |
||||
aspect-ratio: 1; |
||||
|
||||
border-radius: 16px; |
||||
} |
||||
.order-your-products__content{ |
||||
margin-left: 16px; |
||||
} |
||||
.order-your-products__name{ |
||||
font-family: var(--font-family); |
||||
font-weight: 500; |
||||
font-size: 12px; |
||||
line-height: 133%; |
||||
color: var(--text-black); |
||||
|
||||
text-decoration: none; |
||||
} |
||||
.order-your-products__description{ |
||||
margin-top: 8px; |
||||
|
||||
font-family: var(--font-family); |
||||
font-weight: 500; |
||||
font-size: 12px; |
||||
line-height: 133%; |
||||
color: var(--text-6); |
||||
} |
||||
.order-your-products__description span{ |
||||
font-weight: 700; |
||||
} |
||||
.order-your-products__description span::before{ |
||||
margin-left: 3px; |
||||
|
||||
content: 'x '; |
||||
} |
||||
.order-your-products__right{ |
||||
display: flex; |
||||
} |
||||
.order-your-products__count{ |
||||
font-family: var(--font-family); |
||||
font-weight: 700; |
||||
font-size: 12px; |
||||
line-height: 133%; |
||||
text-align: right; |
||||
color: var(--text-6); |
||||
} |
||||
.order-your-products__count::before{ |
||||
content: 'x'; |
||||
} |
||||
.order-your-products__price{ |
||||
margin-left: 16px; |
||||
|
||||
font-family: var(--font-family); |
||||
font-weight: 700; |
||||
font-size: 12px; |
||||
line-height: 133%; |
||||
text-align: right; |
||||
color: var(--text-black); |
||||
} |
||||
|
||||
.order-your__calculation{ |
||||
margin-top: 48px; |
||||
} |
||||
.order-your__promo{ |
||||
display: flex; |
||||
} |
||||
.order-your-promo__button{ |
||||
margin-left: 8px; |
||||
} |
||||
.order-your-calculation__item{ |
||||
margin-top: 24px; |
||||
|
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
.order-your-calculation__title{ |
||||
font-family: var(--font-family); |
||||
font-weight: 500; |
||||
font-size: 20px; |
||||
line-height: 120%; |
||||
color: var(--text-black); |
||||
} |
||||
.order-your-calculation__value{ |
||||
font-family: var(--font-family); |
||||
font-weight: 700; |
||||
font-size: 20px; |
||||
line-height: 200%; |
||||
text-transform: uppercase; |
||||
text-align: right; |
||||
color: var(--text-black); |
||||
} |
||||
|
||||
.order-your-calculation__value--discount{ |
||||
background: var(--gradient-red); |
||||
background-clip: text; |
||||
-webkit-background-clip: text; |
||||
-webkit-text-fill-color: transparent; |
||||
} |
||||
|
||||
.order-your-calculation__description{ |
||||
font-family: var(--font-family); |
||||
font-weight: 500; |
||||
font-size: 12px; |
||||
line-height: 133%; |
||||
text-align: right; |
||||
color: var(--text-9); |
||||
} |
||||
.order-your-calculation__line{ |
||||
margin-top: 23px; |
||||
border: 1px solid var(--background-9); |
||||
} |
||||
.order-your-calculation__result{ |
||||
font-family: var(--font-family); |
||||
font-weight: 700; |
||||
font-size: 24px; |
||||
line-height: 117%; |
||||
text-transform: uppercase; |
||||
color: var(--text-black); |
||||
} |
||||
.order-your-calculation__submit{ |
||||
margin-top: 48px; |
||||
} |
||||
|
||||
@media only screen and (max-width: 1200px) { |
||||
.order{ |
||||
display: block; |
||||
} |
||||
.order__contacts, .order__your{ |
||||
border: none; |
||||
width: 100%; |
||||
} |
||||
} |
||||
|
||||
@media only screen and (max-width: 720px) { |
||||
.order__title{ |
||||
max-width: 181px; |
||||
|
||||
font-size: 20px; |
||||
line-height: 120%; |
||||
} |
||||
.order__your{ |
||||
margin-top: 16px; |
||||
} |
||||
.order__contacts{ |
||||
padding: 24px 16px; |
||||
} |
||||
.order__your{ |
||||
padding: 40px 16px 9px 16px; |
||||
} |
||||
.order-your__promo{ |
||||
display: block; |
||||
} |
||||
.order-your-promo__button{ |
||||
margin-left: 0; |
||||
margin-top: 24px; |
||||
|
||||
width: 100%; |
||||
} |
||||
.order-your-products__content{ |
||||
max-width: 164px; |
||||
} |
||||
.order-your-products__count, .order-your-products__price{ |
||||
flex-shrink: 0; |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
/* toggle */ |
||||
.toggle{ |
||||
padding-top: 26px; |
||||
padding-bottom: 25px; |
||||
|
||||
border-bottom: 1px solid var(--text-3); |
||||
|
||||
position: relative; |
||||
} |
||||
.toggle::after{ |
||||
content: ''; |
||||
|
||||
position: absolute; |
||||
top: 24px; |
||||
right: 0; |
||||
|
||||
width: 24px; |
||||
aspect-ratio: 1; |
||||
|
||||
background-image: url(../img/svg/main/black-x.svg); |
||||
transform: rotate(45deg); |
||||
transition: transform .2s; |
||||
pointer-events: none; |
||||
} |
||||
.toggle.active::after{ |
||||
transform: rotate(0deg); |
||||
} |
||||
.toggle__title{ |
||||
padding-right: 30px; |
||||
|
||||
font-family: var(--font-family); |
||||
font-weight: 700; |
||||
font-size: 16px; |
||||
line-height: 125%; |
||||
color: var(--text-black); |
||||
|
||||
cursor: pointer; |
||||
} |
||||
.toggle__block-content{ |
||||
height: 0; |
||||
overflow: hidden; |
||||
|
||||
transition: height .2s ease-out; |
||||
} |
||||
.toggle__content{ |
||||
padding-top: 24px; |
||||
} |
||||
.toggle-content__item{ |
||||
margin: 12px -12px -12px -12px; |
||||
|
||||
display: flex; |
||||
align-items: center; |
||||
flex-wrap: wrap; |
||||
} |
||||
.toggle-content__item:first-child{ |
||||
margin-top: 0; |
||||
} |
||||
.toggle-content__element{ |
||||
margin: 12px; |
||||
} |
||||
.toggle-content__element--width-perc-100{ |
||||
width: 100%; |
||||
} |
||||
.toggle-content__element--width-perc-50{ |
||||
width: calc(50% - 24px); |
||||
} |
||||
.toggle__text{ |
||||
font-family: var(--font-family); |
||||
font-weight: 400; |
||||
font-size: 20px; |
||||
line-height: 120%; |
||||
color: var(--text-black); |
||||
} |
||||
/* toggle */ |
||||
|
||||
/* checkbox */ |
||||
.checkbox{ |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
cursor: pointer; |
||||
} |
||||
.checkbox__state{ |
||||
border-radius: 4px; |
||||
|
||||
width: 18px; |
||||
height: 18px; |
||||
|
||||
border: 2px solid var(--background-black); |
||||
background: var(--background-white); |
||||
|
||||
flex-shrink: 0; |
||||
} |
||||
.checkbox.active .checkbox__state{ |
||||
background-color: var(--background-black); |
||||
|
||||
background-image: url(../img/svg/main/arrow-selected-white.svg); |
||||
background-repeat: no-repeat; |
||||
background-position: center; |
||||
} |
||||
.checkbox__input{ |
||||
display: none; |
||||
} |
||||
.checkbox__label{ |
||||
padding-left: 8px; |
||||
|
||||
font-family: var(--font-family); |
||||
font-weight: 400; |
||||
font-size: 20px; |
||||
line-height: 120%; |
||||
color: var(--text-dark); |
||||
|
||||
cursor: pointer; |
||||
} |
||||
.checkbox__label a{ |
||||
color: #76ce75; |
||||
|
||||
text-decoration: none; |
||||
} |
||||
.checkbox--small{ |
||||
margin-top: 24px; |
||||
} |
||||
.checkbox--small .checkbox__label{ |
||||
padding-left: 24px; |
||||
|
||||
font-weight: 500; |
||||
font-size: 12px; |
||||
line-height: 133%; |
||||
} |
||||
/* checkbox */ |
||||
|
||||
|
||||
@media (max-width: 720px) { |
||||
.modal-map__control{ |
||||
flex-wrap: wrap; |
||||
} |
||||
.modal-map-control__item{ |
||||
width: calc(100% - 24px); |
||||
} |
||||
.form__full-mobile{ |
||||
width: 100%; |
||||
border-radius: 0; |
||||
border: none; |
||||
} |
||||
} |
||||
|
||||
.container{ |
||||
max-width: 100% !important; |
||||
padding: 0; |
||||
} |
||||
|
||||
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-20_0, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-20_0, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-20_0, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto{ |
||||
padding: 0; |
||||
} |
||||
|
||||
.page-title{ |
||||
display: none; |
||||
} |
||||
|
||||
|
||||
.modal-map-control-item__input{ |
||||
display: none; |
||||
} |
||||
|
||||
.page .main-page-wrapper{ |
||||
background: #fff !important; |
||||
} |
||||
|
||||
.modal-map-control-item__content{ |
||||
width: 100%; |
||||
} |
||||
|
||||
|
||||
.woocommerce-shipping-methods{ |
||||
display: flex; |
||||
} |
||||
.visually-hidden { |
||||
position: absolute !important; |
||||
clip: rect(1px 1px 1px 1px); |
||||
clip: rect(1px, 1px, 1px, 1px); |
||||
padding: 0 !important; |
||||
border: 0 !important; |
||||
height: 1px !important; |
||||
width: 1px !important; |
||||
overflow: hidden; |
||||
} |
||||
.modal-map-control__item{ |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
.modal-map-control__item > label { |
||||
flex-grow: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
position: relative; |
||||
} |
||||
.modal-map-control__item > label > *{ |
||||
flex-grow: 1; |
||||
} |
||||
.modal-map-control__item:nth-child(n){ |
||||
margin: 12px; |
||||
margin-bottom: 12px; |
||||
} |
||||
.modal-map-control-item__title{ |
||||
text-align: left; |
||||
} |
||||
.modal-map-control__item > label{ |
||||
margin-bottom: 0; |
||||
} |
||||
.open-pvz-btn{ |
||||
position: absolute !important; |
||||
clip: rect(1px 1px 1px 1px); |
||||
clip: rect(1px, 1px, 1px, 1px); |
||||
padding: 0 !important; |
||||
border: 0 !important; |
||||
height: 1px !important; |
||||
width: 1px !important; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
|
||||
.order-contacts__delivery.loading{ |
||||
position: relative; |
||||
min-height: 110px; |
||||
} |
||||
.order-contacts__delivery.loading::before{ |
||||
content: ''; |
||||
z-index: 150; |
||||
height: 100%; |
||||
width: 100%; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
background-color: rgba(255,255,255, .6); |
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' width='200' height='200' style='shape-rendering: auto; display: block; background: transparent;'%3E%3Cg%3E%3Ccircle stroke-dasharray='164.93361431346415 56.97787143782138' r='35' stroke-width='10' stroke='%23000000' fill='none' cy='50' cx='50'%3E%3CanimateTransform keyTimes='0;1' values='0 50 50;360 50 50' dur='1s' repeatCount='indefinite' type='rotate' attributeName='transform'/%3E%3C/circle%3E%3Cg/%3E%3C/g%3E%3C!-- %5Bldio%5D generated by https://loading.io --%3E%3C/svg%3E"); |
||||
background-size: 48px; |
||||
background-position: center; |
||||
background-repeat: no-repeat; |
||||
} |
||||
|
||||
|
||||
.shop_table .woocommerce-shipping-totals{ |
||||
display:none; |
||||
} |
||||
|
||||
.amount{ |
||||
color: inherit; |
||||
} |
||||
|
||||
.order-your-products__item{ |
||||
align-items: center; |
||||
} |
||||
|
||||
|
||||
.wc_payment_methods.payment_methods.methods{ |
||||
display: none; |
||||
} |
||||
|
||||
|
||||
.woocommerce-terms-and-conditions-wrapper{ |
||||
|
||||
} |
||||
|
||||
.woocommerce-privacy-policy-text p{ |
||||
color: #121212 !important; |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.woocommerce-privacy-policy-text a{ |
||||
color: #121212 !important; |
||||
font-size: 14px; |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
.woocommerce-terms-and-conditions-checkbox-text a{ |
||||
color: #121212 !important; |
||||
font-size: 14px; |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
|
||||
|
||||
.woocommerce-checkout.processing { |
||||
position: relative; |
||||
opacity: 0.5; |
||||
pointer-events: none; |
||||
} |
||||
|
||||
.woocommerce-checkout .blockUI.blockOverlay { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
background-color: rgba(242, 242, 242, 0.7) !important; |
||||
z-index: 9999; |
||||
} |
||||
|
||||
.woocommerce-checkout .blockUI-message { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); |
||||
z-index: 10000; |
||||
font-size: 16px; |
||||
color: #333; |
||||
} |
||||
|
||||
.cabinet-card__button{ |
||||
padding: 8px 8px 6px 0; |
||||
|
||||
font-family: var(--font-family); |
||||
font-weight: 600; |
||||
font-size: 20px; |
||||
line-height: 120%; |
||||
color: var(--text-black); |
||||
|
||||
background: none; |
||||
border: none; |
||||
|
||||
position: relative; |
||||
|
||||
text-decoration: none; |
||||
} |
||||
.cabinet-card__button::before{ |
||||
content: ''; |
||||
|
||||
position: absolute; |
||||
bottom: 6px; |
||||
|
||||
width: calc(100% - 8px); |
||||
height: 1px; |
||||
|
||||
background: var(--text-black); |
||||
|
||||
transition: opacity .2s ease-out; |
||||
} |
||||
.cabinet-card__button:hover{ |
||||
opacity: .8; |
||||
} |
||||
|
||||
.form-agreement{ |
||||
display: flex; |
||||
} |
||||
.form-agreement__check{ |
||||
display: flex; |
||||
align-items: center; |
||||
margin-top: 1rem; |
||||
} |
||||
.form-agreement__square{ |
||||
width: 18px; |
||||
aspect-ratio: 1; |
||||
|
||||
border-radius: 4px; |
||||
|
||||
border: 2px solid var(--background-black); |
||||
} |
||||
.form-agreement__label{ |
||||
margin-left: 8px; |
||||
|
||||
font-family: var(--font-family); |
||||
font-weight: 400; |
||||
font-size: 20px; |
||||
line-height: 120%; |
||||
color: var(--text-black); |
||||
} |
||||
.form-agreement__input{ |
||||
display: none; |
||||
} |
||||
.form-agreement__input:checked + .form-agreement__square{ |
||||
border: none; |
||||
background: var(--gradient-blue); |
||||
|
||||
position: relative; |
||||
} |
||||
.form-agreement__input:checked + .form-agreement__square::after{ |
||||
content: ''; |
||||
|
||||
position: absolute; |
||||
top: 1px; |
||||
left: 1px; |
||||
|
||||
width: 16px; |
||||
aspect-ratio: 1; |
||||
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.50681 0.784901C9.86151 1.14024 9.86101 1.71584 9.50567 2.07055L4.35112 7.216C3.99601 7.57049 3.42085 7.57024 3.06604 7.21544L0.493317 4.64271C0.138295 4.28769 0.138295 3.71208 0.493317 3.35706C0.848339 3.00204 1.42394 3.00204 1.77897 3.35706L3.70944 5.28753L8.22116 0.783766C8.57649 0.429057 9.1521 0.429565 9.50681 0.784901Z' fill='white'/%3E%3C/svg%3E"); |
||||
background-repeat: no-repeat; |
||||
background-position: center; |
||||
} |
||||
|
||||
.modal-map__control--delivery > p{ |
||||
color: #121212; |
||||
padding-left: 1rem; |
||||
} |
||||
|
||||
.form-agreement__label a{ |
||||
color: #121212; |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
.form-input__error.active{ |
||||
display: block; |
||||
} |
||||
|
||||
.order-your__promo{ |
||||
position: relative; |
||||
} |
||||
|
||||
.woocommerce-NoticeGroup.woocommerce-NoticeGroup-checkout{ |
||||
display: none; |
||||
} |
||||
|
||||
.woocommerce-terms-and-conditions-wrapper, .woocommerce-message{ |
||||
display: none; |
||||
} |
||||
|
||||
|
||||
.woocommerce-checkout-review-order-table tr{ |
||||
border: none !important; |
||||
} |
||||
|
||||
|
||||
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-20_0, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-20_0, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-20_0, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { |
||||
padding-right: 0 !important; |
||||
padding-left: 0 !important; |
||||
} |
||||
|
||||
.cdek-office-info{ |
||||
display: none; |
||||
} |
||||
|
||||
.quantity-control { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 10px; |
||||
margin-bottom: 10px; |
||||
} |
||||
.quantity-decrease, .quantity-increase { |
||||
background: #f0f0f0; |
||||
border: none; |
||||
padding: 5px 10px; |
||||
cursor: pointer; |
||||
font-size: 16px; |
||||
border-radius: 4px; |
||||
} |
||||
.quantity-decrease:hover, .quantity-increase:hover { |
||||
background: #e0e0e0; |
||||
} |
||||
.quantity-input { |
||||
width: 50px; |
||||
text-align: center; |
||||
border: 1px solid #ccc; |
||||
border-radius: 4px; |
||||
padding: 5px; |
||||
} |
||||
|
||||
.form-row{ |
||||
margin-top: 1rem; |
||||
} |
||||
|
||||
|
||||
.woocommerce-order-overview{ |
||||
} |
||||
|
||||
.woocommerce .woocommerce-customer-details .woocommerce-column__title, .woocommerce-order-details__title{ |
||||
margin-bottom: .5em; |
||||
margin-top: 1em; |
||||
} |
||||
|
||||
.woocommerce ul.order_details{ |
||||
margin: 3rem 0; |
||||
} |
||||
|
||||
.woocommerce .woocommerce-customer-details address p{ |
||||
margin-top: .5em; |
||||
} |
||||
|
||||
.woocommerce .woocommerce-customer-details .woocommerce-customer-details--email::before, |
||||
.woocommerce .woocommerce-customer-details .woocommerce-customer-details--phone::before { |
||||
margin-top: -.25em; |
||||
} |
||||
|
||||
.woocommerce-order-overview__order.order{ |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.woocommerce-order{ |
||||
max-width: calc(100% - 30px); |
||||
margin-right: auto; |
||||
margin-left: auto; |
||||
} |
||||
|
||||
@media (max-width: 640px) { |
||||
.woocommerce ul.order_details li { |
||||
margin-right:0em; |
||||
font-size: .715em; |
||||
line-height: 1.3; |
||||
border-right: none; |
||||
border-bottom: 1px dashed #cfc8d8; |
||||
padding-right: 2em; |
||||
width: 100%; |
||||
padding-top: 0.5rem; |
||||
padding-bottom: 0.5rem; |
||||
} |
||||
} |
||||
@ -0,0 +1,901 @@ |
||||
/* 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.--food-fish{ |
||||
--bg-color: #C1DDE6; |
||||
--accent-color: #48c1ed; |
||||
} |
||||
|
||||
.product_main.--food-lamb{ |
||||
--bg-color: #E6D7C1; |
||||
--accent-color: #863300; |
||||
} |
||||
|
||||
.product_main.--food-turkey{ |
||||
--bg-color: #F3D7D2; |
||||
--accent-color: #CD0003; |
||||
} |
||||
|
||||
.product_main.--food-beef{ |
||||
--bg-color: #E6C1D7; |
||||
--accent-color: #7e0092; |
||||
} |
||||
|
||||
.product_main.--food-salmon{ |
||||
--bg-color: #F3D7C1; |
||||
--accent-color: #ff6b35; |
||||
} |
||||
|
||||
.product_main.--food-rabbit{ |
||||
--bg-color: #E6D7C1; |
||||
--accent-color: #8b4513; |
||||
} |
||||
|
||||
.product_main.--food-duck{ |
||||
--bg-color: #F3E6D7; |
||||
--accent-color: #d2691e; |
||||
} |
||||
|
||||
.product_main.--treats-lamb{ |
||||
--bg-color: #E6D7F3; |
||||
--accent-color: #44006c; |
||||
} |
||||
|
||||
.product_main.--treats-rabbit{ |
||||
--bg-color: #F3D7E6; |
||||
--accent-color: #601094; |
||||
} |
||||
|
||||
.product_main.--treats-beef{ |
||||
--bg-color: #D7F3E6; |
||||
--accent-color: #004c31; |
||||
} |
||||
|
||||
.product_main.--treats-salmon{ |
||||
--bg-color: #F3D7F3; |
||||
--accent-color: #7c007a; |
||||
} |
||||
|
||||
.product_main.--treats-duck{ |
||||
--bg-color: #D7F3F3; |
||||
--accent-color: #326e70; |
||||
} |
||||
|
||||
.product_main.--treats-fish{ |
||||
--bg-color: #D7E6F3; |
||||
--accent-color: #0066cc; |
||||
} |
||||
|
||||
.product_main.--treats-turkey{ |
||||
--bg-color: #F3E6D7; |
||||
--accent-color: #cc3300; |
||||
} |
||||
|
||||
/* 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; |
||||
min-width: 40px; |
||||
padding-left: 5px; |
||||
padding-right: 5px; |
||||
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); |
||||
fill-opacity: 1; |
||||
} |
||||
.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, .button{ |
||||
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); |
||||
} |
||||
|
||||
.button::before{ |
||||
display: none; |
||||
} |
||||
|
||||
.to-know{ |
||||
font-size: 24px; |
||||
text-transform: uppercase; |
||||
font-weight: 700; |
||||
margin-top: 20px; |
||||
text-decoration: underline; |
||||
} |
||||
/* 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{ |
||||
|
||||
} |
||||
|
||||
.product-gallery__thumbsSlider::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; |
||||
} |
||||
|
||||
.product-gallery__thumbsSlider::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; |
||||
} |
||||
|
||||
.product-gallery__mainSlider { |
||||
height: 80%; |
||||
width: 100%; |
||||
} |
||||
|
||||
.product-gallery__thumbsSlider { |
||||
height: 20%; |
||||
box-sizing: border-box; |
||||
padding: 10px; |
||||
height: 110px; |
||||
} |
||||
|
||||
.product-gallery__thumbsSlider .swiper-slide { |
||||
width: 90px; |
||||
height: 90px; |
||||
background-color: #fff; |
||||
border-radius: 24px; |
||||
padding: 10px 20px; |
||||
position: relative; |
||||
} |
||||
|
||||
.product-gallery__thumbsSlider .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; |
||||
|
||||
} |
||||
|
||||
.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-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; |
||||
} |
||||
.product-gallery__thumbsSlider{ |
||||
display: none; |
||||
} |
||||
.product-gallery__mainSlider{ |
||||
width: 100%; |
||||
height: auto; |
||||
aspect-ratio: 1 / 1.25; |
||||
max-height: 540px; |
||||
} |
||||
.breadcrumbs{ |
||||
display: none; |
||||
} |
||||
.product_main{ |
||||
margin-top: 0; |
||||
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; |
||||
} |
||||
} |
||||
|
||||
.product-show{ |
||||
display: flex; |
||||
flex-grow: 1; |
||||
flex-direction: column; |
||||
} |
||||
@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; |
||||
} |
||||
} |
||||
|
||||
.stock, .quantity{ |
||||
display: none; |
||||
} |
||||
|
||||
|
||||
.product-incart__wrap{ |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 10px; |
||||
margin-top: 20px; |
||||
|
||||
} |
||||
.product-incart__btn{ |
||||
height: 50px; |
||||
width: 50px; |
||||
position: relative; |
||||
border-radius: 50%; |
||||
background-color: var(--accent-color); |
||||
} |
||||
|
||||
.product-incart__btn--minus::before{ |
||||
content: ''; |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); |
||||
width: 16px; |
||||
height: 2px; |
||||
background-color: #fff; |
||||
} |
||||
|
||||
.product-incart__btn--plus::before{ |
||||
content: ''; |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); |
||||
width: 16px; |
||||
height: 2px; |
||||
background-color: #fff; |
||||
} |
||||
|
||||
.product-incart__btn--plus::after{ |
||||
content: ''; |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); |
||||
height: 16px; |
||||
width: 2px; |
||||
background-color: #fff; |
||||
} |
||||
|
||||
.product-incart{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
padding: 23px 5px; |
||||
gap: 10px; |
||||
margin: 0 auto; |
||||
width: 159px; |
||||
height: 60px; |
||||
background: color-mix(in srgb, var(--accent-color) 25%, transparent); |
||||
border: 2px solid #FFFFFF; |
||||
border-radius: 100px; |
||||
flex: none; |
||||
order: 0; |
||||
flex-grow: 0; |
||||
font-weight: 900; |
||||
font-size: 12px; |
||||
color: #fff; |
||||
} |
||||
|
||||
.product-incart__label{ |
||||
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; |
||||
background-color: var(--accent-color); |
||||
} |
||||
|
||||
.product-incart-btn{ |
||||
|
||||
} |
||||
|
||||
|
||||
/* Стили для загрузки корзины на single странице */ |
||||
|
||||
.product-incart__wrap.loading { |
||||
position: relative; |
||||
pointer-events: none; |
||||
opacity: 0.7; |
||||
} |
||||
|
||||
.product-incart__wrap.loading::before { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
background: var(--bg-color); |
||||
opacity: .7; |
||||
z-index: 10; |
||||
} |
||||
|
||||
.product-incart__wrap.loading::after { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
width: 20px; |
||||
height: 20px; |
||||
margin: -10px 0 0 -10px; |
||||
border: 2px solid #f3f3f3; |
||||
border-top: 2px solid #3498db; |
||||
border-radius: 50%; |
||||
animation: spin 1s linear infinite; |
||||
z-index: 11; |
||||
} |
||||
|
||||
@keyframes spin { |
||||
0% { transform: rotate(0deg); } |
||||
100% { transform: rotate(360deg); } |
||||
} |
||||
|
||||
/* Стили для кнопок во время загрузки */ |
||||
.product-incart__wrap.loading .product-incart__btn { |
||||
opacity: 0.5; |
||||
pointer-events: none; |
||||
} |
||||
|
||||
/* Стили для счетчика во время загрузки */ |
||||
.product-incart__wrap.loading .product-incart__count { |
||||
opacity: 0.5; |
||||
} |
||||
@ -0,0 +1,380 @@ |
||||
<? |
||||
|
||||
/** |
||||
* Добавление событий контрибуции для FP Pixel |
||||
* только на боевом сайте АЕ |
||||
*/ |
||||
if ($site_env->site_mode == 'production' && $site_env->site_region == 'ae') { |
||||
|
||||
// Проверка на тестовый режим для метрик |
||||
// TO_DO: дуюлирует логику is_gp_test_mode в wp-content/themes/cosmopet/global-functions/multisite-functions.php |
||||
function is_gp_test_mode() |
||||
{ |
||||
if (isset($_GET['gp-test']) && $_GET['gp-test'] == '1') { |
||||
return true; |
||||
} |
||||
if (is_user_logged_in() && current_user_can('administrator')) { |
||||
return true; |
||||
} |
||||
return false; |
||||
} |
||||
|
||||
add_action('wp_footer', 'add_facebook_pixel_events'); |
||||
function add_facebook_pixel_events() |
||||
{ |
||||
if (is_gp_test_mode()) |
||||
return; |
||||
|
||||
global $product; |
||||
|
||||
// 1. ViewContent |
||||
if (is_product() && $product && $product->get_price() > 0) { |
||||
?> |
||||
<script> |
||||
document.addEventListener('DOMContentLoaded', function() { |
||||
fbq('track', 'ViewContent', { |
||||
content_ids: ['<?php echo $product->get_id(); ?>'],
|
||||
content_type: 'product', |
||||
value: <?php echo $product->get_price(); ?>,
|
||||
currency: '<?php echo get_woocommerce_currency(); ?>'
|
||||
}); |
||||
}); |
||||
</script> |
||||
<?php |
||||
} |
||||
|
||||
// 2. InitiateCheckout |
||||
if (is_checkout() && !is_wc_endpoint_url('order-received') && WC()->cart && WC()->cart->get_cart_contents_count() > 0) { |
||||
?> |
||||
<script> |
||||
document.addEventListener('DOMContentLoaded', function() { |
||||
fbq('track', 'InitiateCheckout'); |
||||
}); |
||||
</script> |
||||
<?php |
||||
} |
||||
|
||||
// 3. AddToCart |
||||
if (is_product() || is_shop() || is_cart()) { |
||||
?> |
||||
<script> |
||||
document.addEventListener('DOMContentLoaded', function() { |
||||
jQuery(function($) { |
||||
$(document.body).on('added_to_cart', function(event, fragments, cart_hash, $button) { |
||||
var productId = $button.data('product_id') || ''; |
||||
var quantity = $button.data('quantity') || 1; |
||||
var productName = $button.data('product_sku') || |
||||
$button.closest('.product').find('.woocommerce-loop-product__title').text().trim() || 'Unknown'; |
||||
var priceElement = $button.closest('.product').find('.price .amount').text().replace(/[^0-9.]/g, '') || '0.00'; |
||||
var currency = '<?php echo get_woocommerce_currency(); ?>';
|
||||
|
||||
fbq('track', 'AddToCart', { |
||||
content_ids: [productId], |
||||
content_type: 'product', |
||||
value: parseFloat(priceElement) * quantity, |
||||
currency: currency |
||||
}); |
||||
|
||||
window.dataLayer = window.dataLayer || []; |
||||
window.dataLayer.push({ |
||||
'event': 'add_to_cart', |
||||
'ecommerce': { |
||||
'currency': currency, |
||||
'value': parseFloat(priceElement) * quantity, |
||||
'items': [{ |
||||
'item_id': productId, |
||||
'item_name': productName, |
||||
'price': parseFloat(priceElement), |
||||
'quantity': quantity |
||||
}] |
||||
} |
||||
}); |
||||
}); |
||||
}); |
||||
}); |
||||
</script> |
||||
<?php |
||||
} |
||||
|
||||
// 4. AddPaymentInfo |
||||
if (is_checkout() && !is_wc_endpoint_url('order-received') && WC()->cart && WC()->cart->get_cart_contents_count() > 0) { |
||||
$currency = get_woocommerce_currency(); |
||||
$cart_total = WC()->cart->get_total('edit'); |
||||
?> |
||||
<script> |
||||
document.addEventListener('DOMContentLoaded', function() { |
||||
fbq('track', 'AddPaymentInfo', { |
||||
value: <?php echo $cart_total; ?>,
|
||||
currency: '<?php echo $currency; ?>'
|
||||
}); |
||||
|
||||
window.dataLayer = window.dataLayer || []; |
||||
window.dataLayer.push({ |
||||
'event': 'add_payment_info', |
||||
'ecommerce': { |
||||
'currency': '<?php echo $currency; ?>',
|
||||
'value': <?php echo $cart_total; ?> |
||||
} |
||||
}); |
||||
}); |
||||
</script> |
||||
<?php |
||||
} |
||||
|
||||
// 5. Purchase |
||||
if (is_wc_endpoint_url('order-received')) { |
||||
$order_id = absint(get_query_var('order-received')); |
||||
if (!$order_id) |
||||
return; |
||||
|
||||
$order = wc_get_order($order_id); |
||||
if (!$order || ($order->get_status() !== 'processing' && $order->get_status() !== 'completed')) |
||||
return; |
||||
|
||||
$items = []; |
||||
foreach ($order->get_items() as $item) { |
||||
$product = $item->get_product(); |
||||
$items[] = [ |
||||
'item_id' => $product->get_id(), |
||||
'item_name' => $product->get_name(), |
||||
'price' => $product->get_price(), |
||||
'quantity' => $item->get_quantity() |
||||
]; |
||||
} |
||||
?> |
||||
<script> |
||||
document.addEventListener('DOMContentLoaded', function() { |
||||
fbq('track', 'Purchase', { |
||||
value: <?php echo $order->get_total(); ?>,
|
||||
currency: '<?php echo $order->get_currency(); ?>',
|
||||
content_ids: [<?php echo implode(',', array_column($items, 'item_id')); ?>],
|
||||
content_type: 'product' |
||||
}); |
||||
|
||||
window.dataLayer = window.dataLayer || []; |
||||
window.dataLayer.push({ |
||||
'event': 'purchase', |
||||
'ecommerce': { |
||||
'currency': '<?php echo $order->get_currency(); ?>',
|
||||
'value': <?php echo $order->get_total(); ?>,
|
||||
'items': <?php echo json_encode($items); ?> |
||||
} |
||||
}); |
||||
}); |
||||
</script> |
||||
<?php |
||||
} |
||||
} |
||||
|
||||
add_action('woocommerce_thankyou', 'send_purchase_to_metrika'); |
||||
function send_purchase_to_metrika($order_id) |
||||
{ |
||||
if (is_gp_test_mode()) |
||||
return; |
||||
|
||||
if (!$order_id) |
||||
return; |
||||
|
||||
$order = wc_get_order($order_id); |
||||
if ($order->get_status() !== 'processing' && $order->get_status() !== 'completed') |
||||
return; |
||||
|
||||
$items = []; |
||||
foreach ($order->get_items() as $item) { |
||||
$product = $item->get_product(); |
||||
$items[] = [ |
||||
'id' => $product->get_id(), |
||||
'name' => $product->get_name(), |
||||
'price' => $product->get_price(), |
||||
'quantity' => $item->get_quantity() |
||||
]; |
||||
} |
||||
|
||||
$currency = $order->get_currency(); |
||||
?> |
||||
<script> |
||||
window.dataLayer = window.dataLayer || []; |
||||
dataLayer.push({ |
||||
'ecommerce': { |
||||
'purchase': { |
||||
'actionField': { |
||||
'id': '<?php echo $order_id; ?>',
|
||||
'revenue': '<?php echo $order->get_total(); ?>',
|
||||
'currency': '<?php echo $currency; ?>'
|
||||
}, |
||||
'products': <?php echo json_encode($items); ?> |
||||
} |
||||
} |
||||
}); |
||||
|
||||
yaCounter96481053.reachGoal('purchase', { |
||||
'order_id': '<?php echo $order_id; ?>',
|
||||
'order_price': '<?php echo $order->get_total(); ?>',
|
||||
'currency': '<?php echo $currency; ?>',
|
||||
'items': <?php echo json_encode($items); ?> |
||||
}); |
||||
|
||||
fbq('track', 'Purchase', { |
||||
value: <?php echo $order->get_total(); ?>,
|
||||
currency: '<?php echo $currency; ?>',
|
||||
content_ids: [<?php echo implode(',', array_column($items, 'id')); ?>],
|
||||
content_type: 'product' |
||||
}); |
||||
</script> |
||||
<?php |
||||
} |
||||
} |
||||
|
||||
|
||||
// Функция событий Meta Pixel |
||||
|
||||
add_action('wp_head', function () { |
||||
global $site_env; |
||||
$show_pixel = false; |
||||
|
||||
// Для продакшена |
||||
if ($site_env->site_mode === 'production' && $site_env->site_region === 'ae') { |
||||
$show_pixel = true; |
||||
} |
||||
|
||||
// Для тестовых стендов AE |
||||
if ($site_env->site_mode === 'develope' && $site_env->site_region === 'ae') { |
||||
$show_pixel = true; |
||||
} |
||||
|
||||
// Дополнительные проверки |
||||
$skip_tracking = false; |
||||
|
||||
// Исключаем админов |
||||
if (current_user_can('administrator')) { |
||||
$skip_tracking = true; |
||||
} |
||||
|
||||
// Исключаем gp-test режим |
||||
if ($site_env->is_gp_test_mode) { |
||||
$skip_tracking = true; |
||||
} |
||||
|
||||
// Исключаем если есть параметр gp-test=1 в URL |
||||
if (isset($_GET['gp-test']) && $_GET['gp-test'] == '1') { |
||||
$skip_tracking = true; |
||||
} |
||||
|
||||
if ($show_pixel && !$skip_tracking) { |
||||
$context = [ |
||||
'currency' => get_woocommerce_currency(), |
||||
]; |
||||
|
||||
// Определяем тип страницы и подготавливаем данные |
||||
if (is_product()) { |
||||
// Страница товара - ViewContent |
||||
global $product; |
||||
if ($product && $product instanceof WC_Product) { |
||||
$context['pixel_event_type'] = 'ViewContent'; |
||||
$context['product'] = [ |
||||
'id' => $product->get_id(), |
||||
'name' => $product->get_name(), |
||||
'price' => floatval($product->get_price()), |
||||
'sku' => $product->get_sku(), |
||||
'category' => wp_get_post_terms($product->get_id(), 'product_cat', ['fields' => 'names'])[0] ?? '', |
||||
]; |
||||
} |
||||
} elseif (is_checkout() && !is_order_received_page()) { |
||||
// Страница чекаута - InitiateCheckout |
||||
$context['pixel_event_type'] = 'InitiateCheckout'; |
||||
if (WC()->cart && !WC()->cart->is_empty()) { |
||||
$context['cart_total'] = floatval(WC()->cart->get_total('edit')); |
||||
$context['cart_items'] = []; |
||||
$context['content_ids'] = []; |
||||
|
||||
foreach (WC()->cart->get_cart() as $cart_item) { |
||||
$product = $cart_item['data']; |
||||
if ($product && $product instanceof WC_Product) { |
||||
$item_data = [ |
||||
'item_id' => $product->get_id(), |
||||
'item_name' => $product->get_name(), |
||||
'price' => floatval($product->get_price()), |
||||
'quantity' => intval($cart_item['quantity']), |
||||
'category' => wp_get_post_terms($product->get_id(), 'product_cat', ['fields' => 'names'])[0] ?? '', |
||||
]; |
||||
$context['cart_items'][] = $item_data; |
||||
$context['content_ids'][] = $product->get_id(); |
||||
} |
||||
} |
||||
} |
||||
} elseif (is_order_received_page()) { |
||||
// Страница благодарности - Purchase |
||||
$order_id = get_query_var('order-received'); |
||||
if ($order_id) { |
||||
$order = wc_get_order($order_id); |
||||
if ($order && $order instanceof WC_Order) { |
||||
$context['pixel_event_type'] = 'Purchase'; |
||||
$order_items = []; |
||||
$content_ids = []; |
||||
|
||||
foreach ($order->get_items() as $item) { |
||||
if ($item instanceof WC_Order_Item_Product) { |
||||
$product = $item->get_product(); |
||||
if ($product && $product instanceof WC_Product) { |
||||
$order_items[] = [ |
||||
'item_id' => $product->get_id(), |
||||
'item_name' => $product->get_name(), |
||||
'price' => floatval($item->get_total() / $item->get_quantity()), |
||||
'quantity' => intval($item->get_quantity()), |
||||
'category' => wp_get_post_terms($product->get_id(), 'product_cat', ['fields' => 'names'])[0] ?? '', |
||||
]; |
||||
$content_ids[] = $product->get_id(); |
||||
} |
||||
} |
||||
} |
||||
|
||||
$context['order'] = [ |
||||
'id' => $order->get_id(), |
||||
'total' => floatval($order->get_total()), |
||||
'currency' => $order->get_currency(), |
||||
'items' => $order_items, |
||||
'content_ids' => $content_ids, |
||||
'order_key' => $order->get_order_key(), |
||||
]; |
||||
} |
||||
} |
||||
} else { |
||||
// Все остальные страницы - PageView + подготовка для AddToCart |
||||
$context['pixel_event_type'] = 'PageView'; |
||||
$context['enable_addtocart'] = true; // Включаем обработчик AddToCart |
||||
|
||||
// Дополнительные данные для PageView |
||||
global $wp_query; |
||||
$context['page_data'] = [ |
||||
'page_title' => wp_get_document_title(), |
||||
'page_url' => home_url(add_query_arg(array(), $wp_query->request)), |
||||
'page_type' => get_page_type(), |
||||
]; |
||||
} |
||||
|
||||
// Рендерим шаблон |
||||
\Timber\Timber::render('templates/head-pixel-functions.twig', $context); |
||||
} |
||||
}); |
||||
|
||||
|
||||
function get_page_type() |
||||
{ |
||||
if (is_home() || is_front_page()) { |
||||
return 'home'; |
||||
} elseif (is_shop()) { |
||||
return 'shop'; |
||||
} elseif (is_product_category()) { |
||||
return 'category'; |
||||
} elseif (is_product_tag()) { |
||||
return 'tag'; |
||||
} elseif (is_search()) { |
||||
return 'search'; |
||||
} elseif (is_cart()) { |
||||
return 'cart'; |
||||
} elseif (is_account_page()) { |
||||
return 'account'; |
||||
} else { |
||||
return 'other'; |
||||
} |
||||
} |
||||
@ -0,0 +1,18 @@ |
||||
<? |
||||
|
||||
add_filter('wpseo_canonical', '__return_false'); |
||||
add_filter('wpseo_opengraph_url', '__return_false'); |
||||
add_filter('wpseo_add_x_default_hreflang', '__return_false'); |
||||
add_filter('wpseo_disable_adjacent_rel_links', '__return_true'); |
||||
|
||||
/* Добавление canonical-ссылок */ |
||||
add_action('wp_head', function () { |
||||
if (!is_admin()) { |
||||
static $canonical_added = false; |
||||
if ($canonical_added) |
||||
return; |
||||
$canonical_added = true; |
||||
$current_url = strtok(trailingslashit(home_url($_SERVER['REQUEST_URI'])), '?'); |
||||
echo '<link rel="canonical" href="' . esc_url($current_url) . '" />' . "\n"; |
||||
} |
||||
}); |
||||
@ -0,0 +1,693 @@ |
||||
<?php |
||||
|
||||
use Timber; |
||||
use Timber\PostCollection; |
||||
use Timber\Integrations\WooCommerce\Product as TimberProduct; |
||||
|
||||
class CosmopetProduct extends TimberProduct { |
||||
|
||||
protected $sibling_categories = [ |
||||
'pa_compound', |
||||
'pa_dog-size', |
||||
'pa_reproductive-status', |
||||
'pa_age-of-the-cat', |
||||
'pa_age-of-the-dog', |
||||
'pa_series', |
||||
]; |
||||
|
||||
public function __construct ($pid = null) { |
||||
parent::__construct($pid); |
||||
} |
||||
|
||||
public function getComposition() { |
||||
return get_post_meta($this->id, '_composition', true); |
||||
} |
||||
|
||||
|
||||
public function getImageGallery($size) { |
||||
// Инициализируем массив для результатов |
||||
$images_array = array(); |
||||
|
||||
// Получаем ID основного изображения товара |
||||
$thumbnail_id = get_post_thumbnail_id($this->id); |
||||
// Добавляем основное изображение |
||||
if ($thumbnail_id) { |
||||
$images_array[] = array( |
||||
'url' => wp_get_attachment_image_url($thumbnail_id, $size), |
||||
'alt' => get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true) |
||||
); |
||||
} else { |
||||
// Используем заглушку, если нет основного изображения |
||||
$images_array[] = array( |
||||
'url' => wc_placeholder_img_src(), |
||||
'alt' => __('Placeholder image', 'woocommerce') |
||||
); |
||||
} |
||||
|
||||
// Получаем галерею изображений |
||||
if ($this->product && method_exists($this->product, 'get_gallery_image_ids')) { |
||||
$gallery_image_ids = $this->product->get_gallery_image_ids(); |
||||
} else { |
||||
$gallery_image_ids = []; |
||||
} |
||||
|
||||
// Добавляем изображения из галереи |
||||
if (!empty($gallery_image_ids)) { |
||||
foreach ($gallery_image_ids as $image_id) { |
||||
$image_url = wp_get_attachment_image_url($image_id, $size); |
||||
if ($image_url) { |
||||
$images_array[] = array( |
||||
'url' => $image_url, |
||||
'alt' => get_post_meta($image_id, '_wp_attachment_image_alt', true) |
||||
); |
||||
} |
||||
} |
||||
} |
||||
|
||||
return $images_array; |
||||
} |
||||
|
||||
|
||||
public function get_weight() { |
||||
$custom_measurement = get_post_meta($this->id, '_custom_measurement', true) ?: pll__('кг'); |
||||
$custom_size = get_post_meta($this->id, '_size_for_display', true) ?: ''; |
||||
|
||||
if ($custom_size){ |
||||
return $custom_size ? $custom_size . ' ' . $custom_measurement : ''; |
||||
} |
||||
else{ |
||||
if ($this->product && method_exists($this->product, 'get_weight')) { |
||||
return $this->product->get_weight() ? $this->product->get_weight() . ' ' . $custom_measurement : ''; |
||||
} |
||||
return ''; |
||||
} |
||||
return ''; |
||||
} |
||||
|
||||
public function getNumericWeight() { |
||||
$custom_size = get_post_meta($this->id, '_size_for_display', true) ?: ''; |
||||
|
||||
if ($custom_size){ |
||||
return floatval($custom_size); |
||||
} |
||||
else{ |
||||
if ($this->product && method_exists($this->product, 'get_weight')) { |
||||
return floatval($this->product->get_weight()); |
||||
} |
||||
return 0; |
||||
} |
||||
return 0; |
||||
} |
||||
|
||||
/** |
||||
* Получает CSS класс вкуса для товара |
||||
* @return string CSS класс вкуса (например, --food-fish, --treats-beef) |
||||
*/ |
||||
public function getTasteClass() { |
||||
// Получаем категории товара |
||||
$product_categories = wp_get_post_terms( $this->product->get_id(), 'product_cat' ); |
||||
|
||||
$is_food = false; |
||||
$is_treats = false; |
||||
|
||||
// Определяем тип товара (корм или лакомство) по slug |
||||
foreach ( $product_categories as $cat ) { |
||||
if ( $cat->slug === 'korm' ) { |
||||
$is_food = true; |
||||
} elseif ( $cat->slug === 'lakomstva' ) { |
||||
$is_treats = true; |
||||
} |
||||
} |
||||
|
||||
// Определяем префикс типа товара |
||||
$type_prefix = ''; |
||||
if ($is_food) { |
||||
$type_prefix = 'food'; |
||||
} elseif ($is_treats) { |
||||
$type_prefix = 'treats'; |
||||
} else { |
||||
$type_prefix = 'acc'; // Дефолтный тип |
||||
} |
||||
|
||||
// Получаем термины атрибута compound (вкус) |
||||
$compound_terms = get_the_terms($this->id, 'pa_compound'); |
||||
$taste_suffix = ''; |
||||
|
||||
if ($compound_terms && !is_wp_error($compound_terms)) { |
||||
foreach ($compound_terms as $term) { |
||||
switch ($term->slug) { |
||||
case 'govyadina': |
||||
$taste_suffix = 'beef'; |
||||
break; |
||||
case 'indejka': |
||||
$taste_suffix = 'turkey'; |
||||
break; |
||||
case 'krolik': |
||||
$taste_suffix = 'rabbit'; |
||||
break; |
||||
case 'losos': |
||||
$taste_suffix = 'salmon'; |
||||
break; |
||||
case 'ryba': |
||||
$taste_suffix = 'fish'; |
||||
break; |
||||
case 'utka': |
||||
$taste_suffix = 'duck'; |
||||
break; |
||||
case 'yagnenok': |
||||
$taste_suffix = 'lamb'; |
||||
break; |
||||
} |
||||
|
||||
// Если нашли вкус, прерываем цикл |
||||
if ($taste_suffix) { |
||||
break; |
||||
} |
||||
} |
||||
} |
||||
|
||||
// Если вкус не найден, используем дефолтные суффиксы по типу товара |
||||
if (!$taste_suffix) { |
||||
if ($is_food) { |
||||
$taste_suffix = 'fish'; |
||||
} elseif ($is_treats) { |
||||
$taste_suffix = 'beef'; |
||||
} else { |
||||
$taste_suffix = ''; // Дефолтный суффикс |
||||
} |
||||
} |
||||
|
||||
return '--' . $type_prefix . '-' . $taste_suffix; |
||||
} |
||||
|
||||
public function getSizeSiblings() { |
||||
|
||||
$term = get_the_terms($this->id, 'pa_collection'); |
||||
if ($term) { |
||||
$term = $term[0]->term_id; |
||||
} else { |
||||
return []; |
||||
} |
||||
|
||||
$args = array( |
||||
'posts_per_page' => -1, |
||||
'post_type' => 'product', |
||||
'order' => 'ASC', |
||||
'orderby' => 'name', // Fixed parameter name (was 'order_by') |
||||
'tax_query' => [ |
||||
[ |
||||
'taxonomy' => 'pa_collection', |
||||
'terms' => $term, |
||||
'field' => 'id', |
||||
] |
||||
], |
||||
); |
||||
|
||||
$siblings = Timber::get_posts($args); |
||||
|
||||
// Create array with products and their weights |
||||
$siblings_with_weights = []; |
||||
foreach ($siblings as $sibling) { |
||||
$weight = $sibling->get_weight(); |
||||
$siblings_with_weights[] = [ |
||||
'post' => $sibling, |
||||
'weight' => floatval($weight) // Ensure weight is treated as a number |
||||
]; |
||||
} |
||||
|
||||
// Sort by weight |
||||
usort($siblings_with_weights, function($a, $b) { |
||||
return $a['weight'] <=> $b['weight']; |
||||
}); |
||||
|
||||
// Extract just the posts in sorted order |
||||
$sorted_siblings = array_map(function($item) { |
||||
return $item['post']; |
||||
}, $siblings_with_weights); |
||||
return $sorted_siblings; |
||||
} |
||||
|
||||
protected function get_category_products() { |
||||
// Получаем категории текущего товара |
||||
$current_product_categories = get_the_terms($this->id, 'product_cat'); |
||||
if (!$current_product_categories || is_wp_error($current_product_categories)) { |
||||
return []; |
||||
} |
||||
|
||||
$current_category_ids = array_map(function($cat) { |
||||
return $cat->term_id; |
||||
}, $current_product_categories); |
||||
|
||||
// Получаем текущий товар |
||||
$current_product = Timber::get_post($this->id); |
||||
|
||||
// Получаем ВСЕ товары |
||||
$args = array( |
||||
'posts_per_page' => -1, |
||||
'post_type' => 'product', |
||||
'order' => 'ASC', |
||||
'orderby' => 'name', |
||||
'post_status' => 'publish', |
||||
'tax_query' => [ |
||||
[ |
||||
'taxonomy' => 'product_visibility', |
||||
'field' => 'slug', |
||||
'terms' => 'exclude-from-catalog', |
||||
'operator' => 'NOT IN' |
||||
] |
||||
], |
||||
'fields' => 'ids' // Получаем только ID товаров для оптимизации |
||||
); |
||||
|
||||
$all_products = Timber::get_posts($args); |
||||
$matching_products = []; |
||||
|
||||
foreach ($all_products as $product) { |
||||
// Получаем категории товара |
||||
$product_categories = get_the_terms($product->ID, 'product_cat'); |
||||
if (!$product_categories || is_wp_error($product_categories)) { |
||||
continue; |
||||
} |
||||
|
||||
$product_category_ids = array_map(function($cat) { |
||||
return $cat->term_id; |
||||
}, $product_categories); |
||||
|
||||
// Проверяем полное совпадение категорий |
||||
if (empty(array_diff($current_category_ids, $product_category_ids)) && |
||||
empty(array_diff($product_category_ids, $current_category_ids))) { |
||||
$matching_products[] = $product; |
||||
} |
||||
} |
||||
|
||||
// Добавляем текущий товар в начало массива |
||||
if ($current_product) { |
||||
array_unshift($matching_products, $current_product); |
||||
} |
||||
|
||||
error_log("get_category_products: Полное совпадение категорий. Найдено товаров: " . count($matching_products)); |
||||
return $matching_products; |
||||
} |
||||
|
||||
public function getProductConstructor() { |
||||
$all_products = $this->get_category_products(); |
||||
$constructor = []; |
||||
|
||||
// Получаем атрибуты текущего товара |
||||
$current_product_attributes = []; |
||||
$current_weight = $this->getNumericWeight(); |
||||
|
||||
// Получаем значения атрибутов текущего товара |
||||
foreach ($this->sibling_categories as $taxonomy) { |
||||
$terms = get_the_terms($this->id, $taxonomy); |
||||
if ($terms && !is_wp_error($terms)) { |
||||
$current_product_attributes[$taxonomy] = array_map(function($term) { |
||||
return $term->term_id; |
||||
}, $terms); |
||||
} |
||||
} |
||||
|
||||
// Получаем упорядоченные таксономии |
||||
$ordered_taxonomies = $this->getOrderedTaxonomies(); |
||||
|
||||
// Инициализируем конструктор для всех таксономий |
||||
foreach ($this->sibling_categories as $taxonomy) { |
||||
if (isset($current_product_attributes[$taxonomy])) { |
||||
$constructor[$taxonomy] = [ |
||||
'taxonomy' => $taxonomy, |
||||
'label' => $this->getAttributeLabel($taxonomy), |
||||
'current_value' => $this->getCurrentAttributeValue($taxonomy), |
||||
'options' => [] |
||||
]; |
||||
} |
||||
} |
||||
|
||||
// Создаем массив для отслеживания уже добавленных товаров по таксономиям |
||||
$added_products = []; |
||||
foreach (array_keys($constructor) as $taxonomy) { |
||||
$added_products[$taxonomy] = []; |
||||
} |
||||
|
||||
foreach ($all_products as $product) { |
||||
$compare_attributes = []; |
||||
$compare_weight = $product->getNumericWeight(); |
||||
|
||||
foreach ($this->sibling_categories as $taxonomy) { |
||||
$terms = get_the_terms($product->id, $taxonomy); |
||||
if ($terms && !is_wp_error($terms)) { |
||||
$compare_attributes[$taxonomy] = array_map(function($term) { |
||||
return $term->term_id; |
||||
}, $terms); |
||||
} |
||||
} |
||||
|
||||
// Проверяем для каждой таксономии, куда можно добавить этот товар |
||||
foreach ($this->sibling_categories as $taxonomy) { |
||||
if (!isset($current_product_attributes[$taxonomy]) || |
||||
!isset($constructor[$taxonomy]) || |
||||
in_array($product->id, $added_products[$taxonomy])) { |
||||
continue; |
||||
} |
||||
|
||||
$attributes_match = true; |
||||
|
||||
foreach ($this->sibling_categories as $compare_taxonomy) { |
||||
if ($compare_taxonomy === $taxonomy) continue; |
||||
|
||||
if (isset($current_product_attributes[$compare_taxonomy])) { |
||||
if (!isset($compare_attributes[$compare_taxonomy])) { |
||||
$attributes_match = false; |
||||
break; |
||||
} |
||||
|
||||
$current_values = $current_product_attributes[$compare_taxonomy]; |
||||
$compare_values = $compare_attributes[$compare_taxonomy]; |
||||
|
||||
if (array_diff($current_values, $compare_values) !== [] || |
||||
array_diff($compare_values, $current_values) !== []) { |
||||
$attributes_match = false; |
||||
break; |
||||
} |
||||
} else { |
||||
if (isset($compare_attributes[$compare_taxonomy])) { |
||||
$attributes_match = false; |
||||
break; |
||||
} |
||||
} |
||||
} |
||||
|
||||
if (abs($current_weight - $compare_weight) > 0.01) { |
||||
$attributes_match = false; |
||||
} |
||||
|
||||
if ($attributes_match) { |
||||
$product_terms = get_the_terms($product->id, $taxonomy); |
||||
if ($product_terms && !is_wp_error($product_terms)) { |
||||
foreach ($product_terms as $term) { |
||||
$option_key = $term->term_id; |
||||
|
||||
if (!isset($constructor[$taxonomy]['options'][$option_key])) { |
||||
$constructor[$taxonomy]['options'][$option_key] = [ |
||||
'term_id' => $term->term_id, |
||||
'name' => $this->getTermName($term->term_id, $taxonomy), |
||||
'slug' => $term->slug, |
||||
'icon' => $this->getTermIcon($term->term_id, $taxonomy), |
||||
'products' => [] |
||||
]; |
||||
} |
||||
|
||||
// Добавляем товар только если его еще нет в этой опции |
||||
if (!in_array($product->id, $added_products[$taxonomy])) { |
||||
$constructor[$taxonomy]['options'][$option_key]['products'][] = $product; |
||||
$added_products[$taxonomy][] = $product->id; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
// Сортируем опции по порядку терминов для каждой таксономии |
||||
foreach ($constructor as $taxonomy => $taxonomy_data) { |
||||
if (isset($ordered_taxonomies[$taxonomy])) { |
||||
$ordered_options = []; |
||||
foreach ($ordered_taxonomies[$taxonomy] as $term) { |
||||
if (isset($constructor[$taxonomy]['options'][$term->term_id])) { |
||||
$ordered_options[$term->term_id] = $constructor[$taxonomy]['options'][$term->term_id]; |
||||
} |
||||
} |
||||
$constructor[$taxonomy]['options'] = $ordered_options; |
||||
} |
||||
} |
||||
|
||||
// Сортируем итоговый конструктор по порядку таксономий |
||||
$ordered_constructor = []; |
||||
foreach ($this->sibling_categories as $taxonomy) { |
||||
if (isset($constructor[$taxonomy])) { |
||||
$ordered_constructor[$taxonomy] = $constructor[$taxonomy]; |
||||
} |
||||
} |
||||
|
||||
return $ordered_constructor; |
||||
} |
||||
|
||||
protected function getAttributeLabel($taxonomy) { |
||||
// Fallback на старые метки |
||||
$labels = [ |
||||
'pa_age-of-the-cat' => pll__('ВОЗРАСТ КОШКИ'), |
||||
'pa_age-of-the-dog' => pll__('ВОЗРАСТ СОБАКИ'), |
||||
'pa_dog-size' => pll__('РАЗМЕР СОБАКИ'), |
||||
'pa_compound' => pll__('ВКУС КОРМА'), |
||||
'pa_reproductive-status' => pll__('ВИД КОШКИ'), |
||||
'pa_series' => pll__('СЕРИЯ'), |
||||
]; |
||||
|
||||
return $labels[$taxonomy] ?? wc_attribute_label($taxonomy); |
||||
} |
||||
|
||||
protected function getCurrentAttributeValue($taxonomy) { |
||||
$terms = get_the_terms($this->id, $taxonomy); |
||||
if ($terms && !is_wp_error($terms)) { |
||||
return $terms[0]->term_id; |
||||
} |
||||
return null; |
||||
} |
||||
|
||||
/** |
||||
* Получает таксономии в правильном порядке с учетом сортировки |
||||
* @return array Массив таксономий с их порядком |
||||
*/ |
||||
protected function getOrderedTaxonomies() { |
||||
$ordered_taxonomies = []; |
||||
|
||||
foreach ($this->sibling_categories as $taxonomy) { |
||||
// Получаем все термины для данной таксономии |
||||
$terms = get_terms([ |
||||
'taxonomy' => $taxonomy, |
||||
'hide_empty' => false, |
||||
'orderby' => 'menu_order', |
||||
'order' => 'ASC' |
||||
]); |
||||
|
||||
// Если menu_order не работает, пробуем сортировку по name |
||||
if (is_wp_error($terms) || empty($terms)) { |
||||
$terms = get_terms([ |
||||
'taxonomy' => $taxonomy, |
||||
'hide_empty' => false, |
||||
'orderby' => 'name', |
||||
'order' => 'ASC' |
||||
]); |
||||
} |
||||
|
||||
if (!is_wp_error($terms) && !empty($terms)) { |
||||
$ordered_taxonomies[$taxonomy] = $terms; |
||||
} |
||||
} |
||||
|
||||
return $ordered_taxonomies; |
||||
} |
||||
|
||||
/** |
||||
* Получает таксономии в правильном порядке для отображения |
||||
* @return array Массив таксономий в порядке отображения |
||||
*/ |
||||
public function getOrderedSiblingCategories() { |
||||
return $this->sibling_categories; |
||||
} |
||||
|
||||
/** |
||||
* Получает таксономии с их метками в правильном порядке |
||||
* @return array Массив таксономий с метками |
||||
*/ |
||||
public function getOrderedTaxonomiesWithLabels() { |
||||
$taxonomies_with_labels = []; |
||||
|
||||
foreach ($this->sibling_categories as $taxonomy) { |
||||
$label = $this->getAttributeLabel($taxonomy); |
||||
$taxonomies_with_labels[$taxonomy] = $label; |
||||
} |
||||
|
||||
return $taxonomies_with_labels; |
||||
} |
||||
|
||||
/** |
||||
* Получает иконку термина из ACF поля |
||||
* @param int $term_id ID термина |
||||
* @param string $taxonomy Таксономия |
||||
* @return string|false URL иконки или false если иконка не найдена |
||||
*/ |
||||
public function getTermIcon($term_id, $taxonomy) { |
||||
// Проверяем, есть ли ACF поле 'icon' у термина |
||||
$icon = get_field('icon', $taxonomy . '_' . $term_id); |
||||
|
||||
if ($icon) { |
||||
return $icon; |
||||
} |
||||
|
||||
// Если ACF поле не найдено, возвращаем false |
||||
return false; |
||||
} |
||||
|
||||
/** |
||||
* Получает название термина с приоритетом описания |
||||
* @param int $term_id ID термина |
||||
* @param string $taxonomy Таксономия |
||||
* @return string Название термина |
||||
*/ |
||||
public function getTermName($term_id, $taxonomy) { |
||||
$term = get_term($term_id, $taxonomy); |
||||
|
||||
if (!$term || is_wp_error($term)) { |
||||
return ''; |
||||
} |
||||
|
||||
// Сначала пытаемся получить описание термина |
||||
$description = get_term_meta($term_id, 'description', true); |
||||
|
||||
// Также пробуем получить из ACF поля |
||||
$acf_description = get_field('description', $taxonomy . '_' . $term_id); |
||||
|
||||
// Пробуем получить из стандартного поля термина |
||||
$term_description = $term->description; |
||||
|
||||
// Пробуем ACF поле сначала |
||||
if (!empty($acf_description)) { |
||||
return $acf_description; |
||||
} |
||||
|
||||
// Потом стандартное поле термина |
||||
if (!empty($term_description)) { |
||||
return $term_description; |
||||
} |
||||
|
||||
// Потом обычное мета-поле |
||||
if (!empty($description)) { |
||||
return $description; |
||||
} |
||||
|
||||
return $term->name; |
||||
} |
||||
|
||||
/** |
||||
* Получает количество товара в корзине |
||||
* @return int Количество товара в корзине |
||||
*/ |
||||
public function getCartQuantity() { |
||||
if (!function_exists('WC') || !WC()->cart) { |
||||
return 0; |
||||
} |
||||
|
||||
$cart = WC()->cart; |
||||
$cart_item_key = $this->getCartItemKey(); |
||||
|
||||
if ($cart_item_key) { |
||||
$cart_item = $cart->get_cart_item($cart_item_key); |
||||
return $cart_item ? $cart_item['quantity'] : 0; |
||||
} |
||||
|
||||
return 0; |
||||
} |
||||
|
||||
/** |
||||
* Получает ключ товара в корзине |
||||
* @return string|false Ключ товара в корзине или false если товар не найден |
||||
*/ |
||||
public function getCartItemKey() { |
||||
if (!function_exists('WC') || !WC()->cart) { |
||||
return false; |
||||
} |
||||
|
||||
$cart = WC()->cart; |
||||
|
||||
foreach ($cart->get_cart() as $cart_item_key => $cart_item) { |
||||
if ($cart_item['product_id'] == $this->id) { |
||||
return $cart_item_key; |
||||
} |
||||
} |
||||
|
||||
return false; |
||||
} |
||||
|
||||
/** |
||||
* Проверяет, есть ли товар в корзине |
||||
* @return bool True если товар в корзине, false если нет |
||||
*/ |
||||
public function isInCart() { |
||||
return $this->getCartQuantity() > 0; |
||||
} |
||||
|
||||
|
||||
|
||||
public function getAllAttributes() { |
||||
$attributes = []; |
||||
foreach ($this->sibling_categories as $taxonomy) { |
||||
$terms = get_the_terms($this->id, $taxonomy); |
||||
if ($terms && !is_wp_error($terms)) { |
||||
$attributes[$taxonomy] = []; |
||||
foreach ($terms as $term) { |
||||
$attributes[$taxonomy][] = [ |
||||
'term_id' => $term->term_id, |
||||
'name' => $term->name, |
||||
'slug' => $term->slug |
||||
]; |
||||
} |
||||
} |
||||
} |
||||
return $attributes; |
||||
} |
||||
|
||||
public function getPriceWithCurrency(){ |
||||
$price = $this->product->get_price() . ' ' . get_woocommerce_currency_symbol(); |
||||
return $price; |
||||
} |
||||
|
||||
public function getRegularPriceWithCurrency(){ |
||||
$regular_price = $this->product->get_regular_price() . ' ' . get_woocommerce_currency_symbol(); |
||||
if ($regular_price != $this->getPriceWithCurrency()){ |
||||
return $regular_price; |
||||
} |
||||
else{ |
||||
return ''; |
||||
} |
||||
} |
||||
|
||||
public function getPriceDifferenceInPercent(){ |
||||
$regular_price = $this->product->get_regular_price(); |
||||
$price = $this->product->get_price(); |
||||
$difference = ($regular_price - $price) / $regular_price * 100; |
||||
$difference = round($difference, 0) . '%'; |
||||
return $difference; |
||||
} |
||||
|
||||
public function getReviews(){ |
||||
|
||||
$reviews = get_posts(array( |
||||
'post_type' => 'p_reviews', |
||||
'numberposts' => -1, |
||||
'meta_query' => array( |
||||
array( |
||||
'key' => 'products', |
||||
'value' => '"' . $this->id . '"', |
||||
'compare' => 'LIKE' |
||||
) |
||||
) |
||||
)); |
||||
|
||||
return $reviews; |
||||
} |
||||
|
||||
public function getRelatedProducts(){ |
||||
$related_products = []; |
||||
$related_products_ids = $this->product->get_upsell_ids(); |
||||
if ($related_products_ids) { |
||||
foreach ($related_products_ids as $related_id) { |
||||
$related_product = Timber::get_post($related_id); |
||||
if ($related_product) { |
||||
$related_products[] = $related_product; |
||||
} |
||||
} |
||||
} |
||||
return $related_products; |
||||
} |
||||
|
||||
}; |
||||
@ -0,0 +1,959 @@ |
||||
/* 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.--food-fish{ |
||||
--bg-color: #C1DDE6; |
||||
--accent-color: #48c1ed; |
||||
} |
||||
|
||||
.product_main.--food-lamb{ |
||||
--bg-color: #E6D7C1; |
||||
--accent-color: #863300; |
||||
} |
||||
|
||||
.product_main.--food-turkey{ |
||||
--bg-color: #F3D7D2; |
||||
--accent-color: #CD0003; |
||||
} |
||||
|
||||
.product_main.--food-beef{ |
||||
--bg-color: #E6C1D7; |
||||
--accent-color: #7e0092; |
||||
} |
||||
|
||||
.product_main.--food-salmon{ |
||||
--bg-color: #F3D7C1; |
||||
--accent-color: #ff6b35; |
||||
} |
||||
|
||||
.product_main.--food-rabbit{ |
||||
--bg-color: #E6D7C1; |
||||
--accent-color: #8b4513; |
||||
} |
||||
|
||||
.product_main.--food-duck{ |
||||
--bg-color: #F3E6D7; |
||||
--accent-color: #d2691e; |
||||
} |
||||
|
||||
.product_main.--treats-lamb{ |
||||
--bg-color: #E6D7F3; |
||||
--accent-color: #44006c; |
||||
} |
||||
|
||||
.product_main.--treats-rabbit{ |
||||
--bg-color: #F3D7E6; |
||||
--accent-color: #601094; |
||||
} |
||||
|
||||
.product_main.--treats-beef{ |
||||
--bg-color: #D7F3E6; |
||||
--accent-color: #004c31; |
||||
} |
||||
|
||||
.product_main.--treats-salmon{ |
||||
--bg-color: #F3D7F3; |
||||
--accent-color: #7c007a; |
||||
} |
||||
|
||||
.product_main.--treats-duck{ |
||||
--bg-color: #D7F3F3; |
||||
--accent-color: #326e70; |
||||
} |
||||
|
||||
.product_main.--treats-fish{ |
||||
--bg-color: #D7E6F3; |
||||
--accent-color: #0066cc; |
||||
} |
||||
|
||||
.product_main.--treats-turkey{ |
||||
--bg-color: #F3E6D7; |
||||
--accent-color: #cc3300; |
||||
} |
||||
|
||||
/* 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; |
||||
min-width: 40px; |
||||
padding-left: 5px; |
||||
padding-right: 5px; |
||||
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); |
||||
fill-opacity: 1; |
||||
} |
||||
.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, .button{ |
||||
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); |
||||
} |
||||
|
||||
.button::before{ |
||||
display: none; |
||||
} |
||||
|
||||
.to-know{ |
||||
font-size: 24px; |
||||
text-transform: uppercase; |
||||
font-weight: 700; |
||||
margin-top: 20px; |
||||
text-decoration: underline; |
||||
} |
||||
/* 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{ |
||||
|
||||
} |
||||
|
||||
.product-gallery__thumbsSlider::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; |
||||
} |
||||
|
||||
.product-gallery__thumbsSlider::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; |
||||
} |
||||
|
||||
.product-gallery__mainSlider { |
||||
height: 80%; |
||||
width: 100%; |
||||
} |
||||
|
||||
.product-gallery__thumbsSlider { |
||||
height: 20%; |
||||
box-sizing: border-box; |
||||
padding: 10px; |
||||
height: 110px; |
||||
} |
||||
|
||||
.product-gallery__thumbsSlider .swiper-slide { |
||||
width: 90px; |
||||
height: 90px; |
||||
background-color: #fff; |
||||
border-radius: 24px; |
||||
padding: 10px 20px; |
||||
position: relative; |
||||
} |
||||
|
||||
.product-gallery__thumbsSlider .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; |
||||
|
||||
} |
||||
|
||||
.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-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; |
||||
} |
||||
.product-gallery__thumbsSlider{ |
||||
display: none; |
||||
} |
||||
.product-gallery__mainSlider{ |
||||
width: 100%; |
||||
height: auto; |
||||
aspect-ratio: 1 / 1.25; |
||||
max-height: 540px; |
||||
} |
||||
.breadcrumbs{ |
||||
display: none; |
||||
} |
||||
.product_main{ |
||||
margin-top: 0; |
||||
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; |
||||
} |
||||
} |
||||
|
||||
.product-show{ |
||||
display: flex; |
||||
flex-grow: 1; |
||||
flex-direction: column; |
||||
max-width: calc(100% - 1000px); |
||||
margin-right: 2rem; |
||||
} |
||||
@media (max-width: 1200px) { |
||||
.product-show{ |
||||
margin-right: 0; |
||||
max-width: 100%; |
||||
} |
||||
} |
||||
@media (max-width: 576px) { |
||||
.product_main { |
||||
margin-left: -10px; |
||||
width: calc(20px + 100%); |
||||
} |
||||
.product-show{ |
||||
flex-direction: column; |
||||
min-height: calc(100vh - 80px); |
||||
margin-right: 0; |
||||
max-width: 100%; |
||||
} |
||||
.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; |
||||
} |
||||
} |
||||
|
||||
.stock, .quantity{ |
||||
display: none; |
||||
} |
||||
|
||||
|
||||
.product-incart__wrap{ |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 10px; |
||||
margin-top: 20px; |
||||
|
||||
} |
||||
.product-incart__btn{ |
||||
height: 50px; |
||||
width: 50px; |
||||
position: relative; |
||||
border-radius: 50%; |
||||
background-color: var(--accent-color); |
||||
} |
||||
|
||||
.product-incart__btn--minus::before{ |
||||
content: ''; |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); |
||||
width: 16px; |
||||
height: 2px; |
||||
background-color: #fff; |
||||
} |
||||
|
||||
.product-incart__btn--plus::before{ |
||||
content: ''; |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); |
||||
width: 16px; |
||||
height: 2px; |
||||
background-color: #fff; |
||||
} |
||||
|
||||
.product-incart__btn--plus::after{ |
||||
content: ''; |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); |
||||
height: 16px; |
||||
width: 2px; |
||||
background-color: #fff; |
||||
} |
||||
|
||||
.product-incart{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
padding: 23px 5px; |
||||
gap: 10px; |
||||
margin: 0 auto; |
||||
width: 159px; |
||||
height: 60px; |
||||
background: color-mix(in srgb, var(--accent-color) 25%, transparent); |
||||
border: 2px solid #FFFFFF; |
||||
border-radius: 100px; |
||||
flex: none; |
||||
order: 0; |
||||
flex-grow: 0; |
||||
font-weight: 900; |
||||
font-size: 12px; |
||||
color: #fff; |
||||
} |
||||
|
||||
.product-incart__label{ |
||||
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; |
||||
background-color: var(--accent-color); |
||||
} |
||||
|
||||
.product-incart-btn{ |
||||
|
||||
} |
||||
|
||||
|
||||
/* Стили для загрузки корзины на single странице */ |
||||
|
||||
.product-incart__wrap.loading { |
||||
position: relative; |
||||
pointer-events: none; |
||||
opacity: 0.7; |
||||
} |
||||
|
||||
.product-incart__wrap.loading::before { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
background: var(--bg-color); |
||||
opacity: .7; |
||||
z-index: 10; |
||||
} |
||||
|
||||
.product-incart__wrap.loading::after { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
width: 20px; |
||||
height: 20px; |
||||
margin: -10px 0 0 -10px; |
||||
border: 2px solid #f3f3f3; |
||||
border-top: 2px solid #3498db; |
||||
border-radius: 50%; |
||||
animation: spin 1s linear infinite; |
||||
z-index: 11; |
||||
} |
||||
|
||||
@keyframes spin { |
||||
0% { transform: rotate(0deg); } |
||||
100% { transform: rotate(360deg); } |
||||
} |
||||
|
||||
/* Стили для кнопок во время загрузки */ |
||||
.product-incart__wrap.loading .product-incart__btn { |
||||
opacity: 0.5; |
||||
pointer-events: none; |
||||
} |
||||
|
||||
/* Стили для счетчика во время загрузки */ |
||||
.product-incart__wrap.loading .product-incart__count { |
||||
opacity: 0.5; |
||||
} |
||||
|
||||
.product-pp-btn{ |
||||
display: flex; |
||||
justify-content: center; |
||||
margin-top: 1rem; |
||||
gap: 1rem; |
||||
/* Смотреть все */ |
||||
|
||||
font-weight: 700; |
||||
font-size: 16px; |
||||
line-height: 20px; |
||||
text-decoration-line: underline; |
||||
color: var(--accent-color); |
||||
align-items: center; |
||||
margin-right: auto; |
||||
margin-left: auto; |
||||
} |
||||
|
||||
.product-pp-btn svg, .product-pp-btn path{ |
||||
fill: var(--accent-color); |
||||
stroke: var(--accent-color); |
||||
} |
||||
|
||||
.mform__info__c{ |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin-top: 2rem; |
||||
flex-wrap: wrap; |
||||
} |
||||
|
||||
.mform__info__col{ |
||||
width: 48.5%; |
||||
} |
||||
|
||||
.mform__info__col .product-values{ |
||||
margin-top: 0; |
||||
} |
||||
|
||||
@media (max-width: 640px) { |
||||
.mform__info__col{ |
||||
width: 100%; |
||||
} |
||||
} |
||||
|
||||
.mform__review-wrap{ |
||||
max-height: 100vh; |
||||
overflow: auto; |
||||
} |
||||
|
||||
|
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 |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 9.9 KiB After Width: | Height: | Size: 9.9 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 459 B After Width: | Height: | Size: 459 B |
|
Before Width: | Height: | Size: 481 B After Width: | Height: | Size: 481 B |
|
Before Width: | Height: | Size: 456 B After Width: | Height: | Size: 456 B |
|
Before Width: | Height: | Size: 458 B After Width: | Height: | Size: 458 B |
|
Before Width: | Height: | Size: 954 B After Width: | Height: | Size: 954 B |
|
Before Width: | Height: | Size: 455 B After Width: | Height: | Size: 455 B |
|
After Width: | Height: | Size: 1.9 KiB |
@ -0,0 +1,98 @@ |
||||
document.addEventListener('DOMContentLoaded', function() { |
||||
|
||||
|
||||
var productSwiperThumbs = new Swiper(".product-gallery__thumbsSlider", { |
||||
loop: true, |
||||
spaceBetween: 10, |
||||
slidesPerView: 'auto', |
||||
freeMode: true, |
||||
watchSlidesProgress: true, |
||||
navigation: { |
||||
nextEl: '.product-gallery-next', |
||||
prevEl: '.product-gallery-prev', |
||||
}, |
||||
}); |
||||
var productSwiperGallery = new Swiper(".product-gallery__mainSlider", { |
||||
loop: true, |
||||
spaceBetween: 10, |
||||
thumbs: { |
||||
swiper: productSwiperThumbs, |
||||
}, |
||||
|
||||
pagination: { |
||||
el: '.product-gallery-bullets', |
||||
clickable: true, |
||||
bulletClass: 'product-gallery-bullets__item', |
||||
bulletActiveClass: '--active', |
||||
}, |
||||
}); |
||||
|
||||
|
||||
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, |
||||
}, |
||||
}, |
||||
navigation: { |
||||
nextEl: '.product-reviews-next', |
||||
prevEl: '.product-reviews-prev', |
||||
}, |
||||
}); |
||||
var productsRelatedSwiper = new Swiper(".product-similar-slider", { |
||||
loop: false, |
||||
spaceBetween: 10, |
||||
slidesPerView: 'auto', |
||||
breakpoints: { |
||||
|
||||
1200: { |
||||
spaceBetween: 20, |
||||
}, |
||||
}, |
||||
navigation: { |
||||
nextEl: '.product-similar-next', |
||||
prevEl: '.product-similar-prev', |
||||
}, |
||||
}); |
||||
|
||||
|
||||
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,20 @@ |
||||
<?php |
||||
use Timber\Timber; |
||||
global $post; |
||||
|
||||
$context = Timber::get_context(); |
||||
|
||||
// Получаем текущий продукт |
||||
$product_id = get_the_ID(); |
||||
$product = wc_get_product($product_id); |
||||
|
||||
// Добавляем продукт в контекст |
||||
$context['product'] = $product; |
||||
$context['post'] = Timber::get_post(); |
||||
|
||||
include_module('shop'); |
||||
include_component('shop', 'reviews'); |
||||
|
||||
?> |
||||
<?php |
||||
Timber::render('woocommerce/single-product.twig', $context); |
||||
@ -0,0 +1,49 @@ |
||||
/* Стили для загрузки корзины на single странице */ |
||||
|
||||
.product-incart__wrap.loading { |
||||
position: relative; |
||||
pointer-events: none; |
||||
opacity: 0.7; |
||||
} |
||||
|
||||
.product-incart__wrap.loading::before { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
background: rgba(255, 255, 255, 0.8); |
||||
z-index: 10; |
||||
} |
||||
|
||||
.product-incart__wrap.loading::after { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
width: 20px; |
||||
height: 20px; |
||||
margin: -10px 0 0 -10px; |
||||
border: 2px solid #f3f3f3; |
||||
border-top: 2px solid #3498db; |
||||
border-radius: 50%; |
||||
animation: spin 1s linear infinite; |
||||
z-index: 11; |
||||
} |
||||
|
||||
@keyframes spin { |
||||
0% { transform: rotate(0deg); } |
||||
100% { transform: rotate(360deg); } |
||||
} |
||||
|
||||
/* Стили для кнопок во время загрузки */ |
||||
.product-incart__wrap.loading .product-incart__btn { |
||||
opacity: 0.5; |
||||
pointer-events: none; |
||||
} |
||||
|
||||
/* Стили для счетчика во время загрузки */ |
||||
.product-incart__wrap.loading .product-incart__count { |
||||
opacity: 0.5; |
||||
} |
||||
@ -0,0 +1,515 @@ |
||||
/* breadcrumbs */ |
||||
.breadcrumbs{ |
||||
margin: 24px; |
||||
|
||||
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 */ |
||||
|
||||
/* compound */ |
||||
.compound{ |
||||
margin: -5px; |
||||
|
||||
min-height: 33.95px; |
||||
|
||||
display: flex; |
||||
align-items: start; |
||||
flex-wrap: wrap; |
||||
} |
||||
.compound__item{ |
||||
margin: 5px; |
||||
|
||||
padding: 4px 8px; |
||||
|
||||
font-family: var(--font-family); |
||||
font-weight: 700; |
||||
font-size: 12px; |
||||
line-height: 133%; |
||||
color: var(--text-black); |
||||
|
||||
border-radius: 16px; |
||||
background-color: var(--background-white); |
||||
|
||||
display: block; |
||||
text-decoration: none; |
||||
} |
||||
.compound__item:first-child{ |
||||
margin-left: 0; |
||||
} |
||||
.product__footer{ |
||||
margin: 48px 24px 24px; |
||||
|
||||
display: flex; |
||||
justify-content: center; |
||||
} |
||||
.product__footer--error{ |
||||
margin: 45px 0; |
||||
} |
||||
/* compound */ |
||||
|
||||
/* button */ |
||||
.button{ |
||||
font-family: var(--font-family); |
||||
font-weight: 600; |
||||
font-size: 20px; |
||||
line-height: 120%; |
||||
color: var(--text-black); |
||||
|
||||
border-radius: 20px; |
||||
|
||||
cursor: pointer; |
||||
} |
||||
.button--100-perc{ |
||||
width: 100%; |
||||
} |
||||
.button--white{ |
||||
padding: 11px 24px; |
||||
|
||||
text-align: center; |
||||
|
||||
background-color: var(--background-white); |
||||
border: 1px solid var(--background-black); |
||||
|
||||
transition: opacity .2s ease-out; |
||||
} |
||||
.button--white:hover{ |
||||
opacity: .8; |
||||
} |
||||
.button--white.active{ |
||||
background: var(--background-black); |
||||
color: var(--background-white); |
||||
} |
||||
.button--gradient{ |
||||
background: var(--gradient-turquoise); |
||||
border: none; |
||||
|
||||
transition: opacity .2s ease-out; |
||||
} |
||||
.button--gradient:hover{ |
||||
opacity: .8; |
||||
} |
||||
.button--base{ |
||||
padding: 12px 24px; |
||||
} |
||||
.button--high{ |
||||
height: 56px; |
||||
|
||||
padding: 16px 24px 24px 24px; |
||||
|
||||
font-weight: 700; |
||||
text-align: center; |
||||
|
||||
position: relative; |
||||
} |
||||
.button--high-46{ |
||||
padding: 12px 24px; |
||||
|
||||
font-size: 20px; |
||||
font-weight: 700; |
||||
line-height: 24px; |
||||
} |
||||
.button--icon{ |
||||
padding-right: 56px; |
||||
|
||||
text-align: start; |
||||
} |
||||
.button--filter::after{ |
||||
content: ''; |
||||
|
||||
position: absolute; |
||||
top: 16px; |
||||
right: 24px; |
||||
|
||||
width: 24px; |
||||
aspect-ratio: 1; |
||||
|
||||
background-image: url(../img/svg/main/filter.svg); |
||||
background-repeat: no-repeat; |
||||
background-size: contain; |
||||
} |
||||
.button--black{ |
||||
padding: 7px 15px; |
||||
|
||||
font-family: var(--font-family); |
||||
font-weight: 500; |
||||
font-size: 24px; |
||||
line-height: 133%; |
||||
color: var(--text-white); |
||||
|
||||
background: var(--background-black); |
||||
border: 1px solid var(--text-white); |
||||
} |
||||
.button--link{ |
||||
text-decoration: none; |
||||
} |
||||
.button--red-48-px{ |
||||
border-radius: 48px; |
||||
} |
||||
.to-know{ |
||||
/* width: 100%; */ |
||||
border: none; |
||||
transition: opacity .2s ease-out; |
||||
text-decoration: none; |
||||
text-transform: uppercase; |
||||
} |
||||
.product__item .to-know{ |
||||
margin-right: auto; |
||||
margin-left: auto; |
||||
width: auto; |
||||
display: flex; |
||||
} |
||||
.to-know--start{ |
||||
justify-content: start; |
||||
padding-left: 0; |
||||
} |
||||
|
||||
.to-know:hover{ |
||||
opacity: .8; |
||||
} |
||||
.to-know p{ |
||||
padding-bottom: 4px; |
||||
|
||||
font-family: var(--font-family); |
||||
font-weight: 700; |
||||
font-size: 20px; |
||||
line-height: 120%; |
||||
color: var(--text-black); |
||||
|
||||
border-bottom: 1px var(--text-black) solid; |
||||
|
||||
cursor: pointer; |
||||
} |
||||
.to-know--background-none{ |
||||
background: none; |
||||
} |
||||
.back{ |
||||
margin-top: 16px; |
||||
margin-left: 16px; |
||||
|
||||
padding: 8px; |
||||
padding-left: 32px; |
||||
|
||||
background: none; |
||||
border: none; |
||||
|
||||
font-family: var(--font-family); |
||||
font-weight: 600; |
||||
font-size: 20px; |
||||
line-height: 120%; |
||||
color: var(--text-black); |
||||
|
||||
text-decoration: none; |
||||
|
||||
position: relative; |
||||
} |
||||
.back::before{ |
||||
content: ''; |
||||
|
||||
position: absolute; |
||||
top: 8px; |
||||
left: 0; |
||||
|
||||
margin-right: 8px; |
||||
|
||||
width: 24px; |
||||
height: 24px; |
||||
|
||||
background-image: url(../img/svg/main/arrow-back.svg); |
||||
} |
||||
|
||||
.back::after{ |
||||
content: ''; |
||||
|
||||
position: absolute; |
||||
bottom: 6px; |
||||
left: 0; |
||||
|
||||
width: calc(100% - 8px); |
||||
height: 1px; |
||||
|
||||
background: var(--text-black); |
||||
} |
||||
/* button */ |
||||
|
||||
.subscription{ |
||||
|
||||
} |
||||
.subscription__item{ |
||||
display: flex; |
||||
|
||||
color: var(--text-black); |
||||
font-family: var(--font-family); |
||||
font-weight: 500; |
||||
line-height: 120%; |
||||
} |
||||
.subscription__item:nth-last-child(n + 2){ |
||||
border-bottom: 1px solid var(--background-9); |
||||
} |
||||
.subscription__item span{ |
||||
font-weight: 700; |
||||
} |
||||
.subscription__item span small{ |
||||
font-size: 16px; |
||||
} |
||||
.subscription__status{ |
||||
color: var(--text-black); |
||||
} |
||||
.subscription__status--close{ |
||||
color: var(--text-red); |
||||
} |
||||
.subscription__status--end{ |
||||
color: var(--text-green); |
||||
} |
||||
.subscription__add{ |
||||
width: 100%; |
||||
} |
||||
.subscription__add-header{ |
||||
} |
||||
.subscription__add-product{ |
||||
align-items: start; |
||||
} |
||||
.subscription__add-product > *:not(:first-child){ |
||||
padding-top: 14px; |
||||
} |
||||
.subscription__add-title{ |
||||
font-family: var(--font-family); |
||||
font-weight: 600; |
||||
line-height: 133%; |
||||
} |
||||
.subscription__add-content{ |
||||
|
||||
} |
||||
|
||||
.tabs__buttons{ |
||||
margin: -12px; |
||||
|
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
} |
||||
.tabs__content-wrap{ |
||||
margin-top: 24px; |
||||
} |
||||
.tabs__content{ |
||||
display: none; |
||||
} |
||||
.tabs__content.active{ |
||||
display: block; |
||||
} |
||||
|
||||
.wcsatt-add-to-subscription-wrapper, |
||||
form.cart .quantity, |
||||
.detail__content .in-stock, |
||||
.wcsatt-options-prompt-label-subscription, |
||||
.wcsatt-options-product-dropdown { |
||||
display: none; |
||||
} |
||||
.wcsatt-options-product-wrapper { |
||||
display: block!important; |
||||
} |
||||
form.cart .single_add_to_cart_button { |
||||
margin: 8px 0; |
||||
width: 345.89px; |
||||
max-width: 100%; |
||||
height: 56px; |
||||
padding: 16px 24px 16px 24px; |
||||
font-weight: 700; |
||||
text-align: center; |
||||
position: relative; |
||||
background: var(--gradient-turquoise); |
||||
border: none; |
||||
transition: opacity .2s ease-out; |
||||
font-family: var(--font-family); |
||||
font-size: 20px; |
||||
line-height: 120%; |
||||
color: var(--text-black); |
||||
border-radius: 20px; |
||||
text-transform: none; |
||||
cursor: pointer; |
||||
} |
||||
form.cart .single_add_to_cart_button:hover { |
||||
opacity: 0.8; |
||||
} |
||||
.subscription-option-details span { |
||||
color: #000; |
||||
cursor: pointer; |
||||
} |
||||
ul.wcsatt-options-product, .wcsatt-options-product-dropdown { |
||||
margin: 0; |
||||
} |
||||
.wcsatt-options-wrapper input, .wcsatt-add-to-subscription-wrapper input { |
||||
width: 18px; |
||||
aspect-ratio: 1; |
||||
accent-color: var(--background-black); |
||||
cursor: pointer; |
||||
} |
||||
.subscription-option label { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 5px; |
||||
} |
||||
|
||||
form.cart { |
||||
margin: 25px 0 -48px; |
||||
} |
||||
ul.wcsatt-options-product--hidden, .wcsatt-options-product-dropdown--hidden { |
||||
display: block!important; |
||||
} |
||||
|
||||
|
||||
.detail-block__form{ |
||||
margin-top: 48px; |
||||
|
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
|
||||
.wcsatt-options-prompt-text{ |
||||
font-family: 'Craftwork Grotesk'; |
||||
font-style: normal; |
||||
font-weight: 700; |
||||
font-size: 20px; |
||||
line-height: 24px; |
||||
text-transform: uppercase; |
||||
color: #000000; |
||||
} |
||||
|
||||
.subscription-option-details, .wcsatt-options-prompt-action, .subs-text-title{ |
||||
font-size: 20px; |
||||
line-height: 24px; |
||||
display:flex; |
||||
gap: 12px; |
||||
align-items: center; |
||||
} |
||||
.subs-text{ |
||||
|
||||
max-width: 322px; |
||||
font-family: 'Craftwork Grotesk'; |
||||
font-style: normal; |
||||
font-weight: 500; |
||||
font-size: 16px; |
||||
line-height: 20px; |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
@media (max-width: 640px) { |
||||
.subscription-option-details, .wcsatt-options-prompt-action, .subs-text-title{ |
||||
font-size: 18px; |
||||
line-height: 22px; |
||||
display:flex; |
||||
gap: 12px; |
||||
align-items: center; |
||||
} |
||||
} |
||||
input:checked + .subscription-option-details::before, input:checked + .wcsatt-options-prompt-action::before{ |
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10Z' fill='white'/%3E%3Cpath d='M1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10Z' stroke='url(%23paint0_radial_11890_46040)' stroke-width='2'/%3E%3Ccircle cx='10' cy='10' r='6' fill='url(%23paint1_radial_11890_46040)'/%3E%3Cdefs%3E%3CradialGradient id='paint0_radial_11890_46040' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(19 1) rotate(135) scale(25.4558 34.7538)'%3E%3Cstop stop-color='%23188892'/%3E%3Cstop offset='0.45' stop-color='%231EA49C'/%3E%3Cstop offset='0.9' stop-color='%2376CE75'/%3E%3Cstop offset='1' stop-color='%23BBE38D'/%3E%3C/radialGradient%3E%3CradialGradient id='paint1_radial_11890_46040' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(16 4) rotate(135) scale(16.9706 23.1692)'%3E%3Cstop stop-color='%23188892'/%3E%3Cstop offset='0.45' stop-color='%231EA49C'/%3E%3Cstop offset='0.9' stop-color='%2376CE75'/%3E%3Cstop offset='1' stop-color='%23BBE38D'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E"); |
||||
} |
||||
.subscription-option-details::before, .wcsatt-options-prompt-action::before{ |
||||
content: ''; |
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10Z' fill='white'/%3E%3Cpath d='M1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10Z' stroke='%23121212' stroke-width='2'/%3E%3C/svg%3E"); |
||||
height: 20px; width: 20px; |
||||
flex-shrink: 0; |
||||
} |
||||
|
||||
.wcsatt-options-wrapper input, .wcsatt-add-to-subscription-wrapper input { |
||||
aspect-ratio: 1; |
||||
accent-color: var(--background-black); |
||||
cursor: pointer; |
||||
height: 0; |
||||
width: 0; |
||||
position: absolute; |
||||
opacity: 0; |
||||
} |
||||
|
||||
.subscription-option .amount { |
||||
color: #1A1A1A; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.subscription-option del .amount { |
||||
color: #bbb; |
||||
font-weight: 400; |
||||
font-size: .8em; |
||||
|
||||
} |
||||
|
||||
.subscription-option del .woocommerce-Price-amount.amount, .subscription-option del .woocommerce-Price-currencySymbol{ |
||||
text-decoration: line-through !important; |
||||
} |
||||
|
||||
.woocommerce-Price-amount.amount{ |
||||
font-size: 1.15em; |
||||
} |
||||
|
||||
.detail #wc-stripe-express-checkout-element{ |
||||
display: none !important; |
||||
} |
||||
|
||||
.detail-block-form__item--radio{ |
||||
display: flex; |
||||
gap: 10px; |
||||
} |
||||
|
||||
.amount { |
||||
color: #1A1A1A; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
.detail__wrapper-catalot .swiper-slide { |
||||
height: auto; |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.detail__wrapper-catalot .swiper-wrapper { |
||||
display: flex; |
||||
align-items: stretch; |
||||
} |
||||
|
||||
.detail__catalot .product__item{ |
||||
flex-grow: 1; |
||||
} |
||||
|
||||
.toggle__title{ |
||||
text-transform: uppercase; |
||||
} |
||||
|
||||
.toggle__text p:not(:last-child) { |
||||
margin-bottom: 1em; |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,336 @@ |
||||
/* Стили для мобильных устройств */ |
||||
@media only screen and (max-width: 720px) { |
||||
/* product */ |
||||
.product__item{ |
||||
width: calc(100% - 24px); |
||||
} |
||||
/* product */ |
||||
|
||||
/* modal */ |
||||
.modal__basket{ |
||||
width: 100%; |
||||
} |
||||
.modal__filter{ |
||||
width: 100%; |
||||
} |
||||
.modal__to-know, |
||||
.modal__to-know-submit{ |
||||
width: 100%; |
||||
} |
||||
.modal__button .to-know{ |
||||
display: flex; |
||||
|
||||
background: none; |
||||
} |
||||
.modal__basket .modal__header { |
||||
height: calc(100% - 156px); |
||||
margin-bottom: -36px; |
||||
} |
||||
.modal-basket-item__block-image{ |
||||
position: absolute; |
||||
width: 80px; |
||||
} |
||||
.modal-basket-item__image{ |
||||
width: 48px; |
||||
} |
||||
.modal-basket-item__content{ |
||||
margin-left: 0; |
||||
|
||||
padding-left: 96px; |
||||
} |
||||
.modal-basket-item__control{ |
||||
margin-left: -80px; |
||||
} |
||||
.modal-basket-item__title{ |
||||
min-height: 40px; |
||||
|
||||
font-size: 16px; |
||||
} |
||||
.modal-basket__item--return{ |
||||
flex-direction: column; |
||||
align-items: start; |
||||
} |
||||
.modal-basket__item--return .modal-basket-item__title{ |
||||
margin-right: auto; |
||||
} |
||||
.notification--width-584{ |
||||
width: 100%; |
||||
} |
||||
.notification__title{ |
||||
font-size: 20px; |
||||
} |
||||
.notification__text--center-pc{ |
||||
text-align: start; |
||||
} |
||||
.notification__img{ |
||||
height: 360px; |
||||
} |
||||
.notification__title{ |
||||
padding-right: 96px; |
||||
} |
||||
.modal-form__buttons--two{ |
||||
flex-wrap: wrap; |
||||
} |
||||
.modal-form__buttons--two button, .modal-form__buttons--two input{ |
||||
margin-top: 24px; |
||||
width: 100%; |
||||
} |
||||
.modal-form__buttons--two button:first-child, .modal-form__buttons--two input:first-child{ |
||||
margin-top: 0; |
||||
} |
||||
.modal-map__control{ |
||||
flex-wrap: wrap; |
||||
} |
||||
.modal-map-control__item{ |
||||
width: calc(100% - 24px); |
||||
} |
||||
.form__full-mobile{ |
||||
width: 100%; |
||||
border-radius: 0; |
||||
border: none; |
||||
} |
||||
|
||||
.modal-form-content__line--three .modal-form-content-line__element:nth-child(1){ |
||||
width: 69px; |
||||
} |
||||
.modal-form-content__line--three .modal-form-content-line__element:nth-child(2){ |
||||
|
||||
} |
||||
.modal-form-content__line--three .modal-form-content-line__element:nth-child(3){ |
||||
width: 82px; |
||||
} |
||||
.form__input{ |
||||
padding: 12px 14px; |
||||
} |
||||
.modal-form--height-100-phone{ |
||||
min-height: 100%; |
||||
} |
||||
/* modal */ |
||||
|
||||
/* footer */ |
||||
.footer__about{ |
||||
display: none; |
||||
} |
||||
.footer__wrapper{ |
||||
flex-direction: column; |
||||
} |
||||
.footer__content{ |
||||
width: 100%; |
||||
} |
||||
.footer__form{ |
||||
margin-top: 24px; |
||||
margin-left: 0; |
||||
|
||||
width: 100%; |
||||
} |
||||
.footer__social-media{ |
||||
display: block; |
||||
|
||||
margin-top: 24px; |
||||
} |
||||
.footer-about__text{ |
||||
padding-top: 35px; |
||||
display: block; |
||||
text-align: left; |
||||
} |
||||
.footer__list{ |
||||
margin-top: 20px; |
||||
} |
||||
/* footer */ |
||||
|
||||
/* detail */ |
||||
.toggle__table--two .toggle-table__block{ |
||||
width: 100%; |
||||
} |
||||
.toggle__table--two .toggle-table__block:nth-child(even){ |
||||
margin-top: 32px; |
||||
margin-left: 0; |
||||
} |
||||
.toggle__table--three .toggle-table__block:nth-child(1){ |
||||
width: 31%; |
||||
} |
||||
/* detail */ |
||||
|
||||
/* cabinet */ |
||||
.cabinet-card__title{ |
||||
font-size: 20px; |
||||
} |
||||
.cabinet-card__no-orders{ |
||||
margin-top: 16px; |
||||
} |
||||
.cabinet-card-order__header{ |
||||
flex-direction: column; |
||||
} |
||||
.cabinet-card-order__payment{ |
||||
margin-top: 16px; |
||||
} |
||||
.cabinet-card-order-detail__main{ |
||||
flex-direction: column; |
||||
} |
||||
.cabinet-card-order-detail-main__links{ |
||||
margin-top: 24px; |
||||
|
||||
align-items: start; |
||||
} |
||||
.cabinet-card-order-detail-main-product__img{ |
||||
width: 70px; |
||||
height: 70px; |
||||
} |
||||
.cabinet-card-order-detail-main__product{ |
||||
margin-top: 16px; |
||||
|
||||
align-items: start; |
||||
} |
||||
.cabinet-card-order-detail-main-product__content{ |
||||
margin-left: 16px; |
||||
|
||||
flex-wrap: wrap; |
||||
|
||||
position: relative; |
||||
} |
||||
.cabinet-card-order-detail-main-product__description{ |
||||
width: 100%; |
||||
} |
||||
.cabinet-card-order-detail-main-product__count{ |
||||
position: absolute; |
||||
left: 116px; |
||||
bottom: 0; |
||||
} |
||||
.cabinet-card-order-detail-main-product__price{ |
||||
position: absolute; |
||||
left: 153px; |
||||
bottom: 0; |
||||
} |
||||
.cabinet-card__content{ |
||||
padding-right: 19px; |
||||
} |
||||
.cabinet-card-order-main__date{ |
||||
font-size: 20px; |
||||
} |
||||
/* .cabinet-card__order.active */ |
||||
/* .cabinet-card__order.active */ |
||||
/* cabinet */ |
||||
} |
||||
|
||||
@media only screen and (max-width: 576px) { |
||||
/* header */ |
||||
|
||||
/* header */ |
||||
|
||||
/* product */ |
||||
.product__header{ |
||||
flex-direction: column; |
||||
align-items: start; |
||||
} |
||||
.product__header .button{ |
||||
margin-top: 48px; |
||||
} |
||||
/* product */ |
||||
|
||||
/* modal */ |
||||
.modal__aside{ |
||||
left: 0; |
||||
} |
||||
.form-input-radio__title span{ |
||||
display: block; |
||||
width: 100%; |
||||
|
||||
color: var(--text-grey); |
||||
} |
||||
.modal-form__title{ |
||||
font-size: 20px; |
||||
} |
||||
/* modal */ |
||||
|
||||
/* detail */ |
||||
.detail-block-form__item, |
||||
.detail-block-form__submit{ |
||||
min-width: 100%; |
||||
} |
||||
/* detail */ |
||||
|
||||
/* cabinet */ |
||||
|
||||
.cabinet-card-order-detail-main-product__img{ |
||||
width: 40px; |
||||
height: 40px; |
||||
} |
||||
|
||||
.cabinet-card-order-detail-main-product__count{ |
||||
left: auto; |
||||
right: 71px; |
||||
} |
||||
.cabinet-card-order-detail-main-product__price{ |
||||
left: auto; |
||||
right: 0; |
||||
} |
||||
.cabinet-card-order__detail-short{ |
||||
transition-delay: 0; |
||||
transition-duration: 0; |
||||
} |
||||
/* cabinet */ |
||||
} |
||||
|
||||
@media only screen and (max-width: 720px) { |
||||
.subscription__item{ |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.subscription__item > p:first-child{ |
||||
font-size: 16px; |
||||
color: var(--text-6); |
||||
} |
||||
.subscription__item > p:last-child{ |
||||
margin-top: 6px; |
||||
} |
||||
|
||||
.subscription__add-title { |
||||
font-size: 20px; |
||||
} |
||||
|
||||
.subscription__add-product{ |
||||
flex-wrap: wrap; |
||||
} |
||||
|
||||
.subscription__add-product > *:not(:first-child){ |
||||
padding-top: 0; |
||||
} |
||||
.subscription__add-product .cabinet-card-order-detail-main-product__img{ |
||||
width: 73px; |
||||
height: 66px; |
||||
} |
||||
.subscription__add-product .cabinet-card-order-detail-main-product-description__what{ |
||||
font-size: 12px; |
||||
display: -webkit-box; |
||||
-webkit-line-clamp: 2; |
||||
-webkit-box-orient: vertical; |
||||
overflow: hidden; |
||||
} |
||||
.subscription__add-product .cabinet-card-order-detail-main-product-description__with-what{ |
||||
margin-top: 8px; |
||||
|
||||
font-size: 12px; |
||||
} |
||||
.subscription__add-product .cabinet-card-order-detail-main-product__description { |
||||
width: calc(100% - 73px); |
||||
} |
||||
.subscription__add-product .cabinet-card-order-detail-main-product__content{ |
||||
position: static; |
||||
margin-top: -10px; |
||||
margin-left: auto; |
||||
width: calc(100% - 73px); |
||||
|
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
.subscription__add-product .cabinet-card-order-detail-main-product__count{ |
||||
position: static; |
||||
font-size: 12px; |
||||
} |
||||
.subscription__add-product .cabinet-card-order-detail-main-product__price{ |
||||
position: static; |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,241 @@ |
||||
.order{ |
||||
display: flex; |
||||
} |
||||
.order__title{ |
||||
font-family: var(--font-family); |
||||
font-weight: 700; |
||||
font-size: 24px; |
||||
line-height: 117%; |
||||
text-transform: uppercase; |
||||
color: var(--text-black); |
||||
} |
||||
.order__contacts{ |
||||
width: calc(50% - 0.5px); |
||||
|
||||
padding: 24px; |
||||
|
||||
border-right: 1px solid #121212; |
||||
} |
||||
.order-contacts__header{ |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
.order-contacts__form{ |
||||
margin-top: 24px; |
||||
} |
||||
.order-contacts__delivery{ |
||||
margin-top: 47.5px; |
||||
|
||||
padding-top: 48px; |
||||
|
||||
border-top: 1px solid var(--background-grey); |
||||
} |
||||
|
||||
.order-contacts-deliver__item{ |
||||
margin-top: 24px; |
||||
} |
||||
.order-contacts-deliver__date{ |
||||
padding: 8px; |
||||
|
||||
border-radius: 24px; |
||||
|
||||
background: var(--background-grey); |
||||
} |
||||
.order-contacts-deliver__date .form-input-radio__item{ |
||||
margin-top: 24px; |
||||
} |
||||
.order-contacts-deliver__date .form-input-radio__item:first-child{ |
||||
margin-top: 0; |
||||
} |
||||
.order__your{ |
||||
width: calc(50% - 0.5px); |
||||
|
||||
padding: 24px 24px 24px 48px; |
||||
|
||||
background: var(--background-grey); |
||||
} |
||||
.order-your__products{ |
||||
margin-top: 48px; |
||||
} |
||||
.order-your-products__item{ |
||||
margin-top: 16px; |
||||
|
||||
display: flex; |
||||
justify-content: space-between; |
||||
} |
||||
.order-your-products__left{ |
||||
display: flex; |
||||
} |
||||
.order-your-products__img{ |
||||
width: 40px; |
||||
aspect-ratio: 1; |
||||
|
||||
border-radius: 16px; |
||||
} |
||||
.order-your-products__content{ |
||||
margin-left: 16px; |
||||
} |
||||
.order-your-products__name{ |
||||
font-family: var(--font-family); |
||||
font-weight: 500; |
||||
font-size: 12px; |
||||
line-height: 133%; |
||||
color: var(--text-black); |
||||
|
||||
text-decoration: none; |
||||
} |
||||
.order-your-products__description{ |
||||
margin-top: 8px; |
||||
|
||||
font-family: var(--font-family); |
||||
font-weight: 500; |
||||
font-size: 12px; |
||||
line-height: 133%; |
||||
color: var(--text-6); |
||||
} |
||||
.order-your-products__description span{ |
||||
font-weight: 700; |
||||
} |
||||
.order-your-products__description span::before{ |
||||
margin-left: 3px; |
||||
|
||||
content: 'x '; |
||||
} |
||||
.order-your-products__right{ |
||||
display: flex; |
||||
} |
||||
.order-your-products__count{ |
||||
font-family: var(--font-family); |
||||
font-weight: 700; |
||||
font-size: 12px; |
||||
line-height: 133%; |
||||
text-align: right; |
||||
color: var(--text-6); |
||||
} |
||||
.order-your-products__count::before{ |
||||
content: 'x'; |
||||
} |
||||
.order-your-products__price{ |
||||
margin-left: 16px; |
||||
|
||||
font-family: var(--font-family); |
||||
font-weight: 700; |
||||
font-size: 12px; |
||||
line-height: 133%; |
||||
text-align: right; |
||||
color: var(--text-black); |
||||
} |
||||
.order-your-products__price::after{ |
||||
content: 'Р'; |
||||
} |
||||
.order-your__calculation{ |
||||
margin-top: 48px; |
||||
} |
||||
.order-your__promo{ |
||||
display: flex; |
||||
} |
||||
.order-your-promo__button{ |
||||
margin-left: 8px; |
||||
} |
||||
.order-your-calculation__item{ |
||||
margin-top: 24px; |
||||
|
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
.order-your-calculation__title{ |
||||
font-family: var(--font-family); |
||||
font-weight: 500; |
||||
font-size: 20px; |
||||
line-height: 120%; |
||||
color: var(--text-black); |
||||
} |
||||
.order-your-calculation__value{ |
||||
font-family: var(--font-family); |
||||
font-weight: 700; |
||||
font-size: 20px; |
||||
line-height: 200%; |
||||
text-transform: uppercase; |
||||
text-align: right; |
||||
color: var(--text-black); |
||||
} |
||||
.order-your-calculation__value--price::after{ |
||||
content: ' ₽'; |
||||
} |
||||
.order-your-calculation__value--discount{ |
||||
background: var(--gradient-red); |
||||
background-clip: text; |
||||
-webkit-background-clip: text; |
||||
-webkit-text-fill-color: transparent; |
||||
} |
||||
.order-your-calculation__value--discount::before{ |
||||
content: '- '; |
||||
} |
||||
.order-your-calculation__description{ |
||||
font-family: var(--font-family); |
||||
font-weight: 500; |
||||
font-size: 12px; |
||||
line-height: 133%; |
||||
text-align: right; |
||||
color: var(--text-9); |
||||
} |
||||
.order-your-calculation__line{ |
||||
margin-top: 23px; |
||||
border: 1px solid var(--background-9); |
||||
} |
||||
.order-your-calculation__result{ |
||||
font-family: var(--font-family); |
||||
font-weight: 700; |
||||
font-size: 24px; |
||||
line-height: 117%; |
||||
text-transform: uppercase; |
||||
color: var(--text-black); |
||||
} |
||||
.order-your-calculation__submit{ |
||||
margin-top: 48px; |
||||
} |
||||
|
||||
@media only screen and (max-width: 1200px) { |
||||
.order{ |
||||
display: block; |
||||
} |
||||
.order__contacts, .order__your{ |
||||
border: none; |
||||
width: 100%; |
||||
} |
||||
} |
||||
|
||||
@media only screen and (max-width: 720px) { |
||||
.order__title{ |
||||
max-width: 181px; |
||||
|
||||
font-size: 20px; |
||||
line-height: 120%; |
||||
} |
||||
.order__your{ |
||||
margin-top: 16px; |
||||
} |
||||
.order__contacts{ |
||||
padding: 24px 16px; |
||||
} |
||||
.order__your{ |
||||
padding: 40px 16px 9px 16px; |
||||
} |
||||
.order-your__promo{ |
||||
display: block; |
||||
} |
||||
.order-your-promo__button{ |
||||
margin-left: 0; |
||||
margin-top: 24px; |
||||
|
||||
width: 100%; |
||||
} |
||||
.order-your-products__content{ |
||||
max-width: 164px; |
||||
} |
||||
.order-your-products__count, .order-your-products__price{ |
||||
flex-shrink: 0; |
||||
} |
||||
} |
||||
@ -0,0 +1,352 @@ |
||||
/* Стили для планшетов */ |
||||
@media only screen and (max-width: 1200px) { |
||||
|
||||
.product__main{ |
||||
margin: 36px 0 0; |
||||
} |
||||
/* header */ |
||||
main{ |
||||
padding-top: 64px; |
||||
} |
||||
.main-menu{ |
||||
display: none; |
||||
} |
||||
.header__open-menu{ |
||||
display: block; |
||||
} |
||||
.lang{ |
||||
display: none; |
||||
} |
||||
.header__logo{ |
||||
width: 136px; |
||||
height: 29px; |
||||
} |
||||
.header__content{ |
||||
height: auto; |
||||
|
||||
padding: 8px 16px; |
||||
} |
||||
.mini-profile__item:nth-child(2){ |
||||
margin-left: 0; |
||||
} |
||||
.header::after{ |
||||
left: 0; |
||||
|
||||
width: 100%; |
||||
} |
||||
.header__pc-menu{ |
||||
display: none; |
||||
} |
||||
.header__phone-menu{ |
||||
display: block; |
||||
} |
||||
.header__menu-block{ |
||||
top: 56px; |
||||
} |
||||
.header__content::after{ |
||||
left: 0; |
||||
right: 0; |
||||
width: 100%; |
||||
} |
||||
/* header */ |
||||
|
||||
/* footer */ |
||||
.footer{ |
||||
margin-top: 0; |
||||
|
||||
padding: 24px 16px; |
||||
} |
||||
/* footer */ |
||||
|
||||
/* breadcrumbs */ |
||||
.breadcrumbs{ |
||||
display: none; |
||||
} |
||||
/* breadcrumbs */ |
||||
|
||||
/* product */ |
||||
.product{ |
||||
padding: 12px; |
||||
padding-top: 20px; |
||||
} |
||||
.product__title{ |
||||
font-weight: 700; |
||||
font-size: 26px; |
||||
line-height: 123%; |
||||
text-transform: uppercase; |
||||
} |
||||
.to-know p { |
||||
font-size: 18px; |
||||
} |
||||
.toggle-table__title{ |
||||
font-weight: 700; |
||||
font-size: 12px; |
||||
line-height: 133%; |
||||
} |
||||
.toggle-table__item p{ |
||||
font-weight: 500; |
||||
font-size: 12px; |
||||
line-height: 133%; |
||||
} |
||||
.toggle-table-item__line{ |
||||
margin-top: 12px; |
||||
} |
||||
.detail{ |
||||
margin: 24px 16px; |
||||
} |
||||
.back-detail{ |
||||
display: inline; |
||||
} |
||||
.detail-catalot__title{ |
||||
font-size: 22px; |
||||
} |
||||
.product__footer--error{ |
||||
margin: 48px 0px 24px; |
||||
} |
||||
/* product */ |
||||
|
||||
/* modal */ |
||||
.modal{ |
||||
padding: 0; |
||||
} |
||||
.modal__text{ |
||||
padding-right: 0; |
||||
} |
||||
.form__button-pc{ |
||||
display: none; |
||||
} |
||||
.form__button-mobile{ |
||||
display: block; |
||||
} |
||||
.modal-form{ |
||||
/* min-height: 100%; |
||||
width: 100%; |
||||
|
||||
border-radius: 0; |
||||
border: none; */ |
||||
} |
||||
.modal__notification{ |
||||
margin: 24px; |
||||
} |
||||
.form-input-phone__list{ |
||||
left: 0; |
||||
} |
||||
|
||||
.modal-form-content__line--two{ |
||||
flex-wrap: wrap; |
||||
} |
||||
.modal-form-content__line--two .modal-form-content-line__element{ |
||||
margin-top: 24px; |
||||
|
||||
width: 100%; |
||||
} |
||||
.modal-form-content__line--two .modal-form-content-line__element:first-child{ |
||||
margin-top: 0; |
||||
} |
||||
.modal-map{ |
||||
width: 100%; |
||||
|
||||
flex-direction: column; |
||||
|
||||
border-radius: 0; |
||||
} |
||||
.modal-map__left, .modal-map__right{ |
||||
width: 100%; |
||||
} |
||||
.modal-map__map iframe { |
||||
width: 100%; |
||||
height: 528px; |
||||
} |
||||
.modal-map-form__button{ |
||||
display: none; |
||||
} |
||||
.modal-map-form__sub-button{ |
||||
margin-top: 64px; |
||||
|
||||
padding: 0 24px; |
||||
|
||||
display: flex; |
||||
} |
||||
/* modal */ |
||||
|
||||
/* cabinet */ |
||||
.cabinet{ |
||||
flex-direction: column; |
||||
|
||||
position: relative; |
||||
} |
||||
.cabinet__control{ |
||||
display: flex; |
||||
|
||||
position: relative; |
||||
} |
||||
.cabinet__orders, .cabinet__profile{ |
||||
width: calc(100% - 48px); |
||||
} |
||||
.cabinet__orders, .cabinet__profile{ |
||||
position: absolute; |
||||
opacity: 0; |
||||
|
||||
transition: opacity .2s ease-out; |
||||
} |
||||
.cabinet-content{ |
||||
pointer-events:none; |
||||
} |
||||
.cabinet__orders.active, .cabinet__profile.active{ |
||||
opacity: 1; |
||||
} |
||||
.cabinet__orders.hide, .cabinet__profile.hide{ |
||||
position: static; |
||||
display: block; |
||||
pointer-events:auto; |
||||
|
||||
width: 100%; |
||||
} |
||||
.cabinet__subscription-pc{ |
||||
display: none; |
||||
} |
||||
.cabinet__subscription-mobile{ |
||||
display: block; |
||||
|
||||
margin: 24px 24px 0 24px; |
||||
} |
||||
.cabinet__orders .cabinet-card:nth-child(2){ |
||||
margin-top: 0; |
||||
} |
||||
.cabinet__orders--no-cab .cabinet-card:nth-child(2){ |
||||
margin-top: 32px; |
||||
} |
||||
/* cabinet */ |
||||
} |
||||
|
||||
@media only screen and (max-width: 980px) { |
||||
/* product */ |
||||
.product__item{ |
||||
width: calc(50% - 24px); |
||||
} |
||||
/* product */ |
||||
|
||||
|
||||
/* detail */ |
||||
.detail{ |
||||
flex-direction: column; |
||||
} |
||||
.detail__images{ |
||||
display: none; |
||||
} |
||||
.detail__content{ |
||||
width: 100%; |
||||
} |
||||
.detail__content{ |
||||
margin-left: 0; |
||||
} |
||||
|
||||
.detail__images-phone{ |
||||
display: block; |
||||
|
||||
margin-top: 48px; |
||||
margin-bottom: 48px; |
||||
|
||||
position: relative; |
||||
|
||||
overflow: hidden; |
||||
} |
||||
.detail__images-phone .swiper-slide{ |
||||
display: flex; |
||||
justify-content: center; |
||||
} |
||||
.detail-images-phone__image-block{ |
||||
width: 100%; |
||||
aspect-ratio: 1; |
||||
max-width: 500px; |
||||
|
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
background: var(--background-grey); |
||||
border-radius: 16px; |
||||
} |
||||
|
||||
.detail__images-phone .swiper-pagination-bullet{ |
||||
width: 8px; |
||||
height: 8px; |
||||
|
||||
border-radius: 50%; |
||||
|
||||
border: 1px solid #666; |
||||
background-color: #666; |
||||
|
||||
opacity: 1; |
||||
} |
||||
.detail__images-phone .swiper-pagination-bullet.swiper-pagination-bullet-active{ |
||||
background-color: var(--background-white); |
||||
} |
||||
|
||||
.detail__images-phone .swiper-pagination{ |
||||
margin-bottom: 19px; |
||||
} |
||||
.detail__title{ |
||||
font-size: 26px; |
||||
line-height: 123%; |
||||
} |
||||
.gallery__slider .swiper-pagination { |
||||
display: block; |
||||
} |
||||
.gallery__pagination{ |
||||
display: none; |
||||
} |
||||
|
||||
.gallery__slider .swiper-pagination-bullet{ |
||||
width: 8px; |
||||
height: 8px; |
||||
border-radius: 50%; |
||||
border: 1px solid #666; |
||||
background-color: #666; |
||||
opacity: 1; |
||||
} |
||||
.gallery__wrapper .gallery-button{ |
||||
display: none; |
||||
} |
||||
|
||||
.gallery__slider .swiper-pagination-bullet.swiper-pagination-bullet-active{ |
||||
background-color: var(--background-white); |
||||
} |
||||
|
||||
.gallery__slider{ |
||||
margin-left:0; |
||||
padding: 0px 0px 50px 0px; |
||||
/* padding: 40px; */ |
||||
} |
||||
.gallery__block { |
||||
width: 100%; |
||||
aspect-ratio: 1; |
||||
height: auto; |
||||
} |
||||
/* detail */ |
||||
} |
||||
|
||||
@media only screen and (max-width: 750px) { |
||||
/* cabinet */ |
||||
.cabinet-card-order__open-detail{ |
||||
margin-top: 144px; |
||||
} |
||||
.cabinet-card-order__detail-short{ |
||||
right: auto; |
||||
left: 0; |
||||
bottom: 48px; |
||||
} |
||||
.cabinet-card-order-detail-short__item{ |
||||
margin-left: -27px; |
||||
} |
||||
.cabinet-card-order-detail-short__item:first-child{ |
||||
margin-left: 0; |
||||
} |
||||
.cabinet-card__order.active .cabinet-card-order__open-detail{ |
||||
margin-top: 24px; |
||||
} |
||||
.cabinet-card-order__link{ |
||||
margin-top: 144px; |
||||
} |
||||
/* cabinet */ |
||||
} |
||||
@ -0,0 +1,4 @@ |
||||
/* Стили для ультрашироких экранов */ |
||||
@media only screen and (min-width: 1400px) { |
||||
|
||||
} |
||||
|
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 |
@ -0,0 +1,156 @@ |
||||
<?php |
||||
|
||||
$product; |
||||
$product_type; |
||||
$context_for_twig; |
||||
|
||||
// Получаем данные продукта |
||||
$product_id = get_the_ID(); |
||||
$product = wc_get_product($product_id); |
||||
|
||||
// Проверяем, что продукт существует |
||||
if (!$product) { |
||||
return; // Просто выходим, если продукт не найден |
||||
} |
||||
|
||||
$attributes = []; |
||||
$product_attributes = $product->get_attributes(); |
||||
|
||||
/* Получение категорий */ |
||||
$tags = get_the_terms($product_id, 'product_cat'); |
||||
if (!empty($tags) && !is_wp_error($tags)) { |
||||
foreach ($tags as $tag) { |
||||
$context_for_twig['product_tags'][] = $tag->name; |
||||
} |
||||
} |
||||
|
||||
/* Получение атрибутов */ |
||||
if (!empty($product_attributes)) { |
||||
foreach ($product_attributes as $taxonomy => $attribute) { |
||||
if ($attribute->is_taxonomy()) { |
||||
$terms = wc_get_product_terms($product_id, $taxonomy, ['fields' => 'all']); |
||||
// $tags = wc_get_product_terms( $product_id, 'pa_catalog_tags' ); |
||||
|
||||
if (!empty($terms)) { |
||||
$attr_values = []; |
||||
foreach ($terms as $term) { |
||||
$attr_values[] = [ |
||||
'name' => $term->name, |
||||
'slug' => $term->slug, |
||||
'term_id' => $term->term_id, |
||||
'link' => get_term_link($term->term_id, $taxonomy), |
||||
]; |
||||
} |
||||
$attributes[wc_attribute_label($taxonomy)] = $attr_values; |
||||
} |
||||
} else { |
||||
$attributes[wc_attribute_label($taxonomy)] = $attribute->get_options(); |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
$context_for_twig['product_attributes'] = $attributes; |
||||
|
||||
/* Получение вариаций товара */ |
||||
if ($product->is_type('variable')) { |
||||
$available_variations = $product->get_available_variations(); |
||||
$variations_data = []; |
||||
|
||||
foreach ($available_variations as $variation) { |
||||
$variation_id = $variation['variation_id']; |
||||
$variation_obj = wc_get_product($variation_id); |
||||
|
||||
$variations_data[] = [ |
||||
'variation_id' => $variation_id, |
||||
'price' => $variation_obj->get_price(), |
||||
'regular_price' => $variation_obj->get_regular_price(), |
||||
'sale_price' => $variation_obj->get_sale_price(), |
||||
'attributes' => $variation['attributes'] |
||||
]; |
||||
} |
||||
|
||||
$context_for_twig['variations'] = $variations_data; |
||||
} |
||||
|
||||
/* ACF-поля и мета-данные продукта */ |
||||
$meta_fields = [ |
||||
'composition' => get_post_meta($product_id, '_composition', true), |
||||
'feeding_recommendations' => get_post_meta($product_id, '_feeding_recommendations', true), // Ранее выводились HTML-полем «Рекомендации по кормлению» |
||||
'feeding_recommendations_table' => get_field('feeding_recommendations_table', get_post(get_field('p_tables_field', $product_id))) , // Таблица «Рекомендации по кормлению» |
||||
'nutritional_value' => get_post_meta($product_id, '_nutritional_value', true), |
||||
'vitamins' => get_post_meta($product_id, '_vitamins', true), |
||||
'additives' => get_post_meta($product_id, '_additives', true), |
||||
'energy_value' => get_post_meta($product_id, '_energy_value', true), |
||||
'important' => get_post_meta($product_id, '_important', true), |
||||
]; |
||||
|
||||
$context_for_twig['product_meta'] = $meta_fields; |
||||
|
||||
|
||||
/* Товар оформляется по подписке? */ |
||||
$context_for_twig['is_subscription'] = $product->is_type( array( 'subscription', 'subscription_variation', 'variable-subscription' )) ? true : false; |
||||
|
||||
$context = Timber::get_context(); |
||||
$post = Timber::get_post(); |
||||
$context['post'] = $post; |
||||
$context['wc_breadcrumbs'] = array(); |
||||
|
||||
if (function_exists('woocommerce_breadcrumb')) { |
||||
$args = array( |
||||
'delimiter' => '', |
||||
'wrap_before' => '', |
||||
'wrap_after' => '', |
||||
'before' => '', |
||||
'after' => '', |
||||
'home' => _x('Home', 'breadcrumb', 'woocommerce'), |
||||
); |
||||
|
||||
$breadcrumbs = new WC_Breadcrumb(); |
||||
$breadcrumbs->generate(); |
||||
|
||||
$formatted_breadcrumbs = array(); |
||||
foreach ($breadcrumbs->get_breadcrumb() as $crumb) { |
||||
$formatted_breadcrumbs[] = array( |
||||
'text' => $crumb[0], |
||||
'url' => $crumb[1] |
||||
); |
||||
} |
||||
|
||||
$context['wc_breadcrumbs'] = $formatted_breadcrumbs; |
||||
} |
||||
|
||||
$context['product'] = $product; |
||||
|
||||
$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; |
||||
} |
||||
} |
||||
} |
||||
if (class_exists('WCS_ATT_Product_Schemes')) { |
||||
$schemes = WCS_ATT_Product_Schemes::get_subscription_schemes($product); |
||||
$context['has_subscription_options'] = !empty($schemes); |
||||
} else { |
||||
$context['has_subscription_options'] = false; |
||||
} |
||||
|
||||
Timber::render('_pages/shop/product-single.twig', $context); |
||||
|
||||
// Подключение стилей для загрузки корзины |
||||
add_action('wp_enqueue_scripts', 'single_product_cart_styles'); |
||||
|
||||
function single_product_cart_styles() { |
||||
if (is_product()) { |
||||
wp_enqueue_style( |
||||
'single-product-cart-loading', |
||||
get_template_directory_uri() . '/modules/shop/components/single-product/assets/css/cart-loading.css', |
||||
array(), |
||||
'1.0.0' |
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,331 @@ |
||||
.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 .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() |
||||
}) |
||||
@ -1,152 +0,0 @@ |
||||
<?php |
||||
|
||||
|
||||
$product; |
||||
$product_type; |
||||
$context_for_twig; |
||||
|
||||
if (function_exists('is_product') && is_product()) { |
||||
$product_id = get_the_ID(); |
||||
$product = wc_get_product($product_id); |
||||
|
||||
$attributes = []; |
||||
$product_attributes = $product->get_attributes(); |
||||
|
||||
/* Получение категорий */ |
||||
$tags = get_the_terms($product_id, 'product_cat'); |
||||
if (!empty($tags) && !is_wp_error($tags)) { |
||||
foreach ($tags as $tag) { |
||||
$context_for_twig['product_tags'][] = $tag->name; |
||||
} |
||||
} |
||||
|
||||
/* Получение атрибутов */ |
||||
if (!empty($product_attributes)) { |
||||
foreach ($product_attributes as $taxonomy => $attribute) { |
||||
if ($attribute->is_taxonomy()) { |
||||
$terms = wc_get_product_terms($product_id, $taxonomy, ['fields' => 'all']); |
||||
// $tags = wc_get_product_terms( $product_id, 'pa_catalog_tags' ); |
||||
|
||||
if (!empty($terms)) { |
||||
$attr_values = []; |
||||
foreach ($terms as $term) { |
||||
$attr_values[] = [ |
||||
'name' => $term->name, |
||||
'slug' => $term->slug, |
||||
'term_id' => $term->term_id, |
||||
'link' => get_term_link($term->term_id, $taxonomy), |
||||
]; |
||||
} |
||||
$attributes[wc_attribute_label($taxonomy)] = $attr_values; |
||||
} |
||||
} else { |
||||
$attributes[wc_attribute_label($taxonomy)] = $attribute->get_options(); |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
$context_for_twig['product_attributes'] = $attributes; |
||||
|
||||
/* Получение вариаций товара */ |
||||
if ($product->is_type('variable')) { |
||||
$available_variations = $product->get_available_variations(); |
||||
$variations_data = []; |
||||
|
||||
foreach ($available_variations as $variation) { |
||||
$variation_id = $variation['variation_id']; |
||||
$variation_obj = wc_get_product($variation_id); |
||||
|
||||
$variations_data[] = [ |
||||
'variation_id' => $variation_id, |
||||
'price' => $variation_obj->get_price(), |
||||
'regular_price' => $variation_obj->get_regular_price(), |
||||
'sale_price' => $variation_obj->get_sale_price(), |
||||
'attributes' => $variation['attributes'] |
||||
]; |
||||
} |
||||
|
||||
$context_for_twig['variations'] = $variations_data; |
||||
} |
||||
|
||||
/* ACF-поля и мета-данные продукта */ |
||||
$meta_fields = [ |
||||
'composition' => get_post_meta($product_id, '_composition', true), |
||||
'feeding_recommendations' => get_post_meta($product_id, '_feeding_recommendations', true), // Ранее выводились HTML-полем «Рекомендации по кормлению» |
||||
'feeding_recommendations_table' => get_field('feeding_recommendations_table', get_post(get_field('p_tables_field', $product_id))) , // Таблица «Рекомендации по кормлению» |
||||
'nutritional_value' => get_post_meta($product_id, '_nutritional_value', true), |
||||
'vitamins' => get_post_meta($product_id, '_vitamins', true), |
||||
'additives' => get_post_meta($product_id, '_additives', true), |
||||
'energy_value' => get_post_meta($product_id, '_energy_value', true), |
||||
'important' => get_post_meta($product_id, '_important', true), |
||||
]; |
||||
|
||||
$context_for_twig['product_meta'] = $meta_fields; |
||||
|
||||
|
||||
|
||||
/* Товар оформляется по подписке? */ |
||||
$context_for_twig['is_subscription'] = $product->is_type( array( 'subscription', 'subscription_variation', 'variable-subscription' )) ? true : false; |
||||
} |
||||
|
||||
|
||||
add_filter('timber/context', function ($context) use ($context_for_twig) { |
||||
return array_merge($context, $context_for_twig); |
||||
}); |
||||
|
||||
|
||||
|
||||
$context = Timber::get_context(); |
||||
$post = Timber::get_post(); |
||||
$context['post'] = $post; |
||||
|
||||
$context['wc_breadcrumbs'] = array(); |
||||
|
||||
if (function_exists('woocommerce_breadcrumb')) { |
||||
$args = array( |
||||
'delimiter' => '', |
||||
'wrap_before' => '', |
||||
'wrap_after' => '', |
||||
'before' => '', |
||||
'after' => '', |
||||
'home' => _x('Home', 'breadcrumb', 'woocommerce'), |
||||
); |
||||
|
||||
$breadcrumbs = new WC_Breadcrumb(); |
||||
$breadcrumbs->generate(); |
||||
|
||||
$formatted_breadcrumbs = array(); |
||||
foreach ($breadcrumbs->get_breadcrumb() as $crumb) { |
||||
$formatted_breadcrumbs[] = array( |
||||
'text' => $crumb[0], |
||||
'url' => $crumb[1] |
||||
); |
||||
} |
||||
|
||||
$context['wc_breadcrumbs'] = $formatted_breadcrumbs; |
||||
} |
||||
|
||||
$product_id = get_the_ID(); |
||||
$product = wc_get_product($product_id); |
||||
|
||||
$context['product'] = $product; |
||||
|
||||
$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; |
||||
} |
||||
} |
||||
} |
||||
if (class_exists('WCS_ATT_Product_Schemes')) { |
||||
$schemes = WCS_ATT_Product_Schemes::get_subscription_schemes($product); |
||||
$context['has_subscription_options'] = !empty($schemes); |
||||
} else { |
||||
$context['has_subscription_options'] = false; |
||||
} |
||||
|
||||
|
||||
Timber::render('_pages/shop/product-single.twig', $context); |
||||
@ -1,6 +0,0 @@ |
||||
<?php |
||||
|
||||
include_module('author'); |
||||
include_component('author', 'author-single'); |
||||
|
||||
?> |
||||
@ -1,6 +0,0 @@ |
||||
<?php |
||||
|
||||
include_module('blog'); |
||||
include_component('blog', 'single'); |
||||
|
||||
?> |
||||
@ -1,12 +0,0 @@ |
||||
<?php |
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) { |
||||
exit; |
||||
} |
||||
|
||||
if (is_product()) { |
||||
|
||||
include_module('shop'); |
||||
include_component('shop', 'single-product'); |
||||
|
||||
} |
||||
@ -0,0 +1,26 @@ |
||||
<?php |
||||
/** |
||||
* The Template for displaying all single posts |
||||
* |
||||
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/ |
||||
*/ |
||||
|
||||
namespace App; |
||||
|
||||
use Timber\Timber; |
||||
|
||||
$context = Timber::context(); |
||||
$post = $context['post']; |
||||
|
||||
if ( is_singular('post') ) { |
||||
include_module('blog'); |
||||
include_component('blog', 'single'); |
||||
} elseif ( is_singular('blog_author') ) { |
||||
include_module('author'); |
||||
include_component('author', 'author-single'); |
||||
} else { |
||||
// Для других типов записей |
||||
$templates = [ 'views/single-' . get_post_type() . '.twig', 'views/single.twig' ]; |
||||
} |
||||
|
||||
Timber::render( $templates, $context ); |
||||
@ -1,71 +1,57 @@ |
||||
<? |
||||
|
||||
use Timber; |
||||
use Timber\PostCollection; |
||||
use Timber\Integrations\WooCommerce\Product as TimberProduct; |
||||
|
||||
|
||||
Timber::$dirname = [ |
||||
[ |
||||
'modules', |
||||
'templates' |
||||
], |
||||
]; |
||||
|
||||
|
||||
add_filter( 'timber/integrations', function ( array $integrations ): array { |
||||
$integrations[] = new \Timber\Integrations\WooCommerce\WooCommerceIntegration(); |
||||
return $integrations; |
||||
} ); |
||||
|
||||
add_action('timber/init', function() { |
||||
// Инициализируем WooCommerce интеграцию |
||||
if (class_exists('Timber\Integrations\WooCommerce\WooCommerce')) { |
||||
Timber\Integrations\WooCommerce\WooCommerce::init(); |
||||
} |
||||
}); |
||||
|
||||
|
||||
// Add the function to the Timber context |
||||
add_filter('timber/context', function($context) { |
||||
$context['template_path'] = get_template_directory_uri(); |
||||
$current_url = "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; |
||||
$context['current_url'] = htmlspecialchars($current_url); |
||||
return $context; |
||||
}); |
||||
|
||||
|
||||
add_action('init', function() { |
||||
add_filter('timber/context', function($context) { |
||||
$context['current_lang'] = pll_current_language(); |
||||
return $context; |
||||
}); |
||||
}, 1); |
||||
|
||||
class WooProduct extends Timber\Post { |
||||
protected $wc_product; |
||||
|
||||
public function __construct ($pid = null) { |
||||
parent::__construct($pid); |
||||
$this->wc_product = wc_get_product($this->ID); |
||||
} |
||||
|
||||
public function price() { |
||||
return $this->wc_product->get_price(); |
||||
} |
||||
|
||||
public function get_price_html() { |
||||
return $this->wc_product->get_price_html(); |
||||
} |
||||
|
||||
public function get_attr() { |
||||
return $this->wc_product->get_attribute('pa_compound'); |
||||
} |
||||
}; |
||||
|
||||
add_filter('timber/post/classmap', function ($classmap) { |
||||
$custom_classmap = [ |
||||
'product' => WooProduct::class, |
||||
]; |
||||
return array_merge($classmap, $custom_classmap); |
||||
}); |
||||
|
||||
<? |
||||
|
||||
use Timber; |
||||
use Timber\PostCollection; |
||||
use Timber\Integrations\WooCommerce\Product as TimberProduct; |
||||
|
||||
|
||||
Timber::$dirname = [ |
||||
'views', |
||||
'modules' |
||||
]; |
||||
|
||||
// Настройка путей для WooCommerce шаблонов |
||||
add_filter('timber/loader/paths', function($paths) { |
||||
$paths[] = get_template_directory() . '/views/woocommerce'; |
||||
return $paths; |
||||
}); |
||||
|
||||
add_filter( 'timber/integrations', function ( array $integrations ): array { |
||||
$integrations[] = new \Timber\Integrations\WooCommerce\WooCommerceIntegration(); |
||||
return $integrations; |
||||
} ); |
||||
|
||||
|
||||
// Add the function to the Timber context |
||||
add_filter('timber/context', function($context) { |
||||
$context['template_path'] = get_template_directory_uri(); |
||||
$current_url = "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; |
||||
$context['current_url'] = htmlspecialchars($current_url); |
||||
|
||||
// Добавляем WooCommerce контекст если WooCommerce активен |
||||
if (class_exists('WooCommerce')) { |
||||
// WooCommerce автоматически добавляет свой контекст через интеграцию |
||||
// Но мы можем его расширить |
||||
if (is_woocommerce()) { |
||||
$context['is_woocommerce'] = true; |
||||
} |
||||
} |
||||
|
||||
return $context; |
||||
}); |
||||
|
||||
|
||||
add_action('init', function() { |
||||
add_filter('timber/context', function($context) { |
||||
$context['current_lang'] = pll_current_language(); |
||||
|
||||
// Добавляем функцию для получения иконки термина |
||||
$context['get_term_icon'] = function($term_id, $taxonomy) { |
||||
$product = new CosmopetProduct(); |
||||
return $product->getTermIcon($term_id, $taxonomy); |
||||
}; |
||||
|
||||
return $context; |
||||
}); |
||||
}, 1); |
||||
|
||||
@ -1,38 +0,0 @@ |
||||
{% set bodyClass = 'main-np new-grad' %} |
||||
{% set headerClass = 'white' %} |
||||
{% extends 'layout.twig' %} |
||||
|
||||
{% block content %} |
||||
{% include '/templates/_pages/new-front-page/main-slider.twig' %} |
||||
{% include '/templates/_pages/new-front-page/main-about.twig' %} |
||||
{% include '/templates/_pages/new-front-page/main-why.twig' %} |
||||
{% include '/templates/_pages/new-front-page/main-food.twig' %} |
||||
{% include '/templates/_pages/new-front-page/main-reviews.twig' %} |
||||
{% include '/templates/_pages/new-front-page/main-ingredients.twig' %} |
||||
{% include '/templates/_pages/new-front-page/main-specialists.twig' %} |
||||
<div class="grad-bg"> |
||||
{% include '/templates/_pages/new-front-page/main-treats.twig' %} |
||||
{% include '/templates/_pages/new-front-page/main-bot.twig' %} |
||||
{% include '/templates/blog/blog-front-page_block.twig' %} |
||||
</div> |
||||
{% include '/templates/_pages/new-front-page/main-quiz.twig' %} |
||||
{% include '/templates/_pages/new-front-page/main-media.twig' %} |
||||
{% include '/templates/_pages/new-front-page/main-cosmopetx.twig' %} |
||||
{% include '/templates/_pages/new-front-page/main-gallery.twig' %} |
||||
|
||||
|
||||
<a href="/o-kompanii/" class="btn-rocket"> |
||||
<span class="btn-rocket__img"></span> |
||||
<span class="btn-rocket__link"> |
||||
<span class="btn-rocket__text">узнать больше о e-protein</span> |
||||
</span> |
||||
</a> |
||||
|
||||
|
||||
<a href="/shop/" class="btn-ufo"> |
||||
<span class="btn-ufo__img"></span> |
||||
<span class="btn-ufo__link"> |
||||
<span class="btn-ufo__text">в магазин</span> |
||||
</span> |
||||
</a> |
||||
{% endblock %} |
||||
@ -1,9 +0,0 @@ |
||||
<div class="main-food"> |
||||
<div class="new-container"> |
||||
<h2 class="main-food_title">сухой гипоаллергенный корм</h2> |
||||
<div class="main-food_wrapper"> |
||||
{% include 'shop/products-section_block.twig' with {product_list: food_list, section: 'food'} %} |
||||
{% include 'shop/reviews-section_block.twig' with { section: 'food', rev_list: reviews_food_query } only %} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -1,19 +0,0 @@ |
||||
{% extends 'profile/profile-base.twig' %} |
||||
|
||||
{% block profile_content%} |
||||
<div class="cabinet__orders cabinet-content {% if fn('is_wc_endpoint_url') %}active hide{% endif %}"> |
||||
<!-- <div class="cabinet-card cabinet-card--green-white cabinet__subscription-pc"> |
||||
<div class="cabinet-card__content"> |
||||
<p class="cabinet-card__title">{{ function('pll_e', 'Feed subscription') }}</p> |
||||
<div class="cabinet-card__element"> |
||||
<p class="cabinet-card__text">{{ function('pll_e', 'Weekly food delivery for your pet') }}</p> |
||||
</div> |
||||
<div class="cabinet-card__element"> |
||||
<button class="button button--gradient button--high-46 form-sub__btn">{{ function('pll_e', 'Get details') }}</button> |
||||
</div> |
||||
</div> |
||||
</div> --> |
||||
{% include 'profile/order-list.twig' %} |
||||
</div> |
||||
</div> |
||||
{% endblock %} |
||||
@ -1,27 +0,0 @@ |
||||
{% set profile_pg = 1 %} |
||||
|
||||
{% extends 'profile/profile-base.twig' %} |
||||
|
||||
{% block profile_content%} |
||||
<div class="cabinet__orders cabinet-content {% if fn('is_wc_endpoint_url') %}active hide{% endif %}"> |
||||
<!-- <div class="cabinet-card cabinet-card--green-white cabinet__subscription-pc"> |
||||
<div class="cabinet-card__content"> |
||||
<p class="cabinet-card__title">{{ function('pll_e', 'Feed subscription') }}</p> |
||||
<div class="cabinet-card__element"> |
||||
<p class="cabinet-card__text">{{ function('pll_e', 'Weekly food delivery for your pet') }}</p> |
||||
</div> |
||||
<div class="cabinet-card__element"> |
||||
<button class="button button--gradient button--high-46 form-sub__btn">{{ function('pll_e', 'Get details') }}</button> |
||||
</div> |
||||
</div> |
||||
</div> --> |
||||
{% include 'profile/order-list.twig' %} |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
</main> |
||||
|
||||
|
||||
{% endblock %} |
||||
|
||||
@ -1,66 +0,0 @@ |
||||
{% 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') %} |
||||
|
||||
<div class="main-food_products-card {{section}} {% for item in compound %}{% set term = get_term(item) %}{{ fn('map_attr_slugs_to_class', term.slug) }} {% endfor %}"> |
||||
<a href="{{product.get_permalink()}}" class="main-food_products-card-slider"> |
||||
|
||||
<div class="swiper-wrapper"> |
||||
<div class="swiper-slide"> |
||||
<div class="main-food_products-card-img"> |
||||
<img src="{{ thumbnail }}" alt="{{product.get_name()}}"> |
||||
</div> |
||||
</div> |
||||
{% if images %} |
||||
{% for image in images %} |
||||
<div class="swiper-slide"> |
||||
<div class="main-food_products-card-img"> |
||||
<img src="{{ function('wp_get_attachment_image_url', image, 'medium') }}" alt="{{ product.get_title() }}"> |
||||
</div> |
||||
</div> |
||||
{% endfor %} |
||||
{% endif %} |
||||
<div class="swiper-dots"></div> |
||||
</div> |
||||
</a> |
||||
<div class="">{% set collection = fn('wc_get_product_terms', product.id, 'pa_collection') %}{% if collection %} |
||||
{% set cur_weight = function('get_product_info', product.id, 'weight') %} |
||||
<div class="main-food_products-card__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) %} |
||||
{% set s_in_stock = s_product.meta('_stock_status') == 'instock' %} |
||||
{% set s_thumbnail = wc_product.get_image_id() ? function('wp_get_attachment_image_url', wc_product.get_image_id(), 'medium') : function('wc_placeholder_img_src') %} |
||||
{% set s_images = wc_product.get_gallery_image_ids() %} |
||||
{% set s_title = wc_product.get_title() %} |
||||
{% set all_images = [s_thumbnail]|merge(s_images|map(image => function('wp_get_attachment_image_url', image, 'medium'))) %} |
||||
{% if s_in_stock %} |
||||
{% set class = '' %} |
||||
{% if weight == cur_weight %} |
||||
{% set class = 'active' %} |
||||
{% endif %} |
||||
{% if weight %} |
||||
<button class="main-food_products-card__weight-item {{ class }}" data-image-set='{{ all_images|json_encode() }}' data-product_id="{{sibling.ID}}" data-product_price="{{ function('get_product_info', sibling.ID, 'price') }} {{ fn('get_woocommerce_currency_symbol') }}" data-title="{{s_title}}"> |
||||
{{ weight }} |
||||
</button> |
||||
{% endif %} |
||||
{% endif %} |
||||
{% endfor %} |
||||
{% endfor %} |
||||
</div>{% endif %} |
||||
<a href="{{product.get_permalink()}}" class="main-food_products-card-title"> |
||||
{{product.get_name()}} |
||||
</a> |
||||
<div class="main-food_products-card-bottom"> |
||||
<div class="main-food_products-card-bottom-price">{{ product.get_price() }} {{ fn('get_woocommerce_currency_symbol') }}</div> |
||||
<a href="{{ product.add_to_cart_url }}" class="main-food_products-cardbottom-btn ajax_add_to_cart add_to_cart_button" data-product_id="{{ product.id }}" |
||||
data-product_sku="{{ product.sku|e('html_attr') }}">{{ fn('pll_e', 'В корзину') }}</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -1,5 +1,7 @@ |
||||
{% for post in posts %} |
||||
{% include '_blocks/shop/archive-product-tease.twig' with {post: post} %} |
||||
|
||||
{% include 'woocommerce/product-card.twig' with {item : post, addClass: 'product-archive-card'} %} |
||||
|
||||
{% endfor %} |
||||
|
||||
{% if not ended %} |
||||
@ -0,0 +1,37 @@ |
||||
{% set bodyClass = 'main-np new-grad' %} |
||||
{% set headerClass = 'white' %} |
||||
{% extends 'layout.twig' %} |
||||
|
||||
{% block content %} |
||||
{% include '_pages/new-front-page/main-slider.twig' %} |
||||
{% include '_pages/new-front-page/main-about.twig' %} |
||||
{% include '_pages/new-front-page/main-why.twig' %} |
||||
{% include '_pages/new-front-page/main-food.twig' %} |
||||
{% include '_pages/new-front-page/main-reviews.twig' %} |
||||
{% include '_pages/new-front-page/main-ingredients.twig' %} |
||||
{% include '_pages/new-front-page/main-specialists.twig' %} |
||||
<div class="grad-bg"> |
||||
{% include '_pages/new-front-page/main-treats.twig' %} |
||||
{% include '_pages/new-front-page/main-bot.twig' %} |
||||
{% include 'blog/blog-front-page_block.twig' %} |
||||
</div> |
||||
{% include '_pages/new-front-page/main-quiz.twig' %} |
||||
{% include '_pages/new-front-page/main-media.twig' %} |
||||
{% include '_pages/new-front-page/main-cosmopetx.twig' %} |
||||
{% include '_pages/new-front-page/main-gallery.twig' %} |
||||
|
||||
<a href="/o-kompanii/" class="btn-rocket"> |
||||
<span class="btn-rocket__img"></span> |
||||
<span class="btn-rocket__link"> |
||||
<span class="btn-rocket__text">узнать больше о e-protein</span> |
||||
</span> |
||||
</a> |
||||
|
||||
|
||||
<a href="/shop/" class="btn-ufo"> |
||||
<span class="btn-ufo__img"></span> |
||||
<span class="btn-ufo__link"> |
||||
<span class="btn-ufo__text">в магазин</span> |
||||
</span> |
||||
</a> |
||||
{% endblock %} |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue