BivekiGroup/protekauto-frontend
4
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix1207

Browse Source
This commit is contained in:
egortriston
2025-07-12 22:39:47 +03:00
parent d25970946c
commit aef3915dde
3 changed files with 254 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

312
src/components/CoreProductCard.tsx
View File

@ -272,175 +272,179 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
return ( return (
<> <>
<div className="w-layout-hflex core-product-search-s1"> <div className="w-layout-hflex core-product-search-s1">
<div className="w-layout-vflex core-product-s1"> <div className="w-layout-vflex flex-block-48-copy">
<div className="w-layout-vflex flex-block-47"> <div className="w-layout-vflex product-list-search-s1">
<div className="div-block-19"> <div className="w-layout-vflex core-product-s1">
<img src="/images/info.svg" loading="lazy" alt="info" className="image-9" /> <div className="w-layout-vflex flex-block-47">
</div> <div className="div-block-19">
<div className="w-layout-vflex flex-block-50"> <img src="/images/info.svg" loading="lazy" alt="info" className="image-9" />
<div className="w-layout-hflex flex-block-79"> </div>
<h3 className="heading-10 name">{brand}</h3> <div className="w-layout-vflex flex-block-50">
<h3 className="heading-10">{article}</h3> <div className="w-layout-hflex flex-block-79">
<div <h3 className="heading-10 name">{brand}</h3>
className="favorite-icon w-embed" <h3 className="heading-10">{article}</h3>
onClick={handleFavoriteClick} <div
style={{ cursor: 'pointer', marginLeft: '10px', color: isItemFavorite ? '#e53935' : undefined }} className="favorite-icon w-embed"
> onClick={handleFavoriteClick}
<svg width="24" height="24" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"> style={{ cursor: 'pointer', marginLeft: '10px', color: isItemFavorite ? '#e53935' : undefined }}
<path >
d="M15 25L13.405 23.5613C7.74 18.4714 4 15.1035 4 10.9946C4 7.6267 6.662 5 10.05 5C11.964 5 13.801 5.88283 15 7.26703C16.199 5.88283 18.036 5 19.95 5C23.338 5 26 7.6267 26 10.9946C26 15.1035 22.26 18.4714 16.595 23.5613L15 25Z" <svg width="24" height="24" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
fill={isItemFavorite ? "#e53935" : "currentColor"} <path
/> d="M15 25L13.405 23.5613C7.74 18.4714 4 15.1035 4 10.9946C4 7.6267 6.662 5 10.05 5C11.964 5 13.801 5.88283 15 7.26703C16.199 5.88283 18.036 5 19.95 5C23.338 5 26 7.6267 26 10.9946C26 15.1035 22.26 18.4714 16.595 23.5613L15 25Z"
</svg> fill={isItemFavorite ? "#e53935" : "currentColor"}
/>
</svg>
</div>
</div>
<div className="text-block-21">{name}</div>
</div> </div>
</div> </div>
<div className="text-block-21">{name}</div> {image && (
</div> <div className="div-block-20">
</div> <img src={image} loading="lazy" alt={name} className="image-10" />
{image && ( {partsIndexPowered && (
<div className="div-block-20"> <div className="text-xs text-gray-500 mt-1 text-center">
<img src={image} loading="lazy" alt={name} className="image-10" /> powered by <span className="font-semibold text-blue-600">Parts Index</span>
{partsIndexPowered && ( </div>
<div className="text-xs text-gray-500 mt-1 text-center"> )}
powered by <span className="font-semibold text-blue-600">Parts Index</span>
</div> </div>
)} )}
</div> </div>
)} <div className="w-layout-vflex flex-block-48-copy">
</div> <div className="w-layout-vflex product-list-search-s1">
<div className="w-layout-vflex flex-block-48-copy"> <div className="w-layout-hflex sort-list-s1">
<div className="w-layout-hflex sort-list-s1"> <div className="w-layout-hflex flex-block-49">
<div className="w-layout-hflex flex-block-49"> <div className="sort-item first">Наличие</div>
<div className="sort-item first">Наличие</div> <div className="sort-item">Доставка</div>
<div className="sort-item">Доставка</div>
</div>
<div className="sort-item price">Цена</div>
</div>
<div className="w-layout-vflex product-list-search-s1">
{displayedOffers.map((offer, idx) => {
const isLast = idx === displayedOffers.length - 1;
const maxCount = parseStock(offer.pcs);
return (
<div
className="w-layout-hflex product-item-search-s1"
key={idx}
style={isLast ? { borderBottom: 'none' } : undefined}
>
<div className="w-layout-hflex flex-block-81">
<div className="w-layout-hflex info-block-search-s1">
<div className="pcs-search-s1">{offer.pcs}</div>
<div className="pcs-search">{offer.days}</div>
</div>
<div className="w-layout-hflex info-block-product-card-search-s1">
{offer.recommended && (
<>
<div className="w-layout-hflex item-recommend">
<img src="/images/ri_refund-fill.svg" loading="lazy" alt="" />
</div>
<div className="text-block-25-s1">Рекомендуем</div>
</>
)}
</div>
<div className="price-s1">{offer.price}</div>
</div> </div>
<div className="w-layout-hflex add-to-cart-block-s1"> <div className="sort-item price">Цена</div>
<div className="w-layout-hflex flex-block-82"> </div>
<div className="w-layout-hflex pcs-cart-s1"> {displayedOffers.map((offer, idx) => {
<div const isLast = idx === displayedOffers.length - 1;
className="minus-plus" const maxCount = parseStock(offer.pcs);
onClick={() => handleMinus(idx)} return (
style={{ cursor: 'pointer' }} <div
aria-label="Уменьшить количество" className="w-layout-hflex product-item-search-s1"
tabIndex={0} key={idx}
onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && handleMinus(idx)} style={isLast ? { borderBottom: 'none' } : undefined}
role="button" >
> <div className="w-layout-hflex flex-block-81">
<div className="pluspcs w-embed"> <div className="w-layout-hflex info-block-search-s1">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <div className="pcs-search-s1">{offer.pcs}</div>
<path d="M6 10.5V9.5H14V10.5H6Z" fill="currentColor" /> <div className="pcs-search">{offer.days}</div>
</svg>
</div>
</div> </div>
<div className="input-pcs"> <div className="w-layout-hflex info-block-product-card-search-s1">
<input {offer.recommended && (
type="number" <>
min={1} <div className="w-layout-hflex item-recommend">
max={maxCount} <img src="/images/ri_refund-fill.svg" loading="lazy" alt="" />
value={inputValues[idx]} </div>
onChange={e => handleInputChange(idx, e.target.value)} <div className="text-block-25-s1">Рекомендуем</div>
onBlur={() => handleInputBlur(idx)} </>
className="text-block-26 w-full text-center outline-none" )}
aria-label="Количество"
/>
</div> </div>
<div <div className="price-s1">{offer.price}</div>
className="minus-plus" </div>
onClick={() => handlePlus(idx, maxCount)} <div className="w-layout-hflex add-to-cart-block-s1">
style={{ cursor: 'pointer' }} <div className="w-layout-hflex flex-block-82">
aria-label="Увеличить количество" <div className="w-layout-hflex pcs-cart-s1">
tabIndex={0} <div
onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && handlePlus(idx, maxCount)} className="minus-plus"
role="button" onClick={() => handleMinus(idx)}
> style={{ cursor: 'pointer' }}
<div className="pluspcs w-embed"> aria-label="Уменьшить количество"
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> tabIndex={0}
<path d="M6 10.5V9.5H14V10.5H6ZM9.5 6H10.5V14H9.5V6Z" fill="currentColor" /> onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && handleMinus(idx)}
</svg> role="button"
>
<div className="pluspcs w-embed">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 10.5V9.5H14V10.5H6Z" fill="currentColor" />
</svg>
</div>
</div>
<div className="input-pcs">
<input
type="number"
min={1}
max={maxCount}
value={inputValues[idx]}
onChange={e => handleInputChange(idx, e.target.value)}
onBlur={() => handleInputBlur(idx)}
className="text-block-26 w-full text-center outline-none"
aria-label="Количество"
/>
</div>
<div
className="minus-plus"
onClick={() => handlePlus(idx, maxCount)}
style={{ cursor: 'pointer' }}
aria-label="Увеличить количество"
tabIndex={0}
onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && handlePlus(idx, maxCount)}
role="button"
>
<div className="pluspcs w-embed">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 10.5V9.5H14V10.5H6ZM9.5 6H10.5V14H9.5V6Z" fill="currentColor" />
</svg>
</div>
</div>
</div> </div>
<button
type="button"
onClick={() => handleAddToCart(offer, idx)}
className="button-icon w-inline-block"
style={{ cursor: 'pointer' }}
aria-label="Добавить в корзину"
>
<div className="div-block-26">
<img loading="lazy" src="/images/cart_icon.svg" alt="В корзину" className="image-11" />
</div>
</button>
</div> </div>
</div> </div>
<button
type="button"
onClick={() => handleAddToCart(offer, idx)}
className="button-icon w-inline-block"
style={{ cursor: 'pointer' }}
aria-label="Добавить в корзину"
>
<div className="div-block-26">
<img loading="lazy" src="/images/cart_icon.svg" alt="В корзину" className="image-11" />
</div>
</button>
</div> </div>
);
})}
{hasMoreOffers || visibleOffersCount > INITIAL_OFFERS_LIMIT ? (
<div
className="w-layout-hflex show-more-search"
onClick={() => {
if (hasMoreOffers) {
setVisibleOffersCount(prev => Math.min(prev + 10, offers.length));
} else {
setVisibleOffersCount(INITIAL_OFFERS_LIMIT);
}
}}
style={{ cursor: 'pointer' }}
tabIndex={0}
role="button"
aria-label={hasMoreOffers ? `Еще ${offers.length - visibleOffersCount} предложений` : 'Скрыть предложения'}
onKeyDown={e => {
if (e.key === 'Enter' || e.key === ' ') {
if (hasMoreOffers) {
setVisibleOffersCount(prev => Math.min(prev + 10, offers.length));
} else {
setVisibleOffersCount(INITIAL_OFFERS_LIMIT);
}
}
}}
>
<div className="text-block-27">
{hasMoreOffers ? `Еще ${offers.length - visibleOffersCount} предложений` : 'Скрыть'}
</div>
<img
src="/images/arrow_drop_down.svg"
loading="lazy"
alt=""
className={`transition-transform duration-200 ${!hasMoreOffers ? 'rotate-180' : ''}`}
/>
</div> </div>
</div> ) : null}
);
})}
</div>
{hasMoreOffers || visibleOffersCount > INITIAL_OFFERS_LIMIT ? (
<div
className="w-layout-hflex show-more-search"
onClick={() => {
if (hasMoreOffers) {
setVisibleOffersCount(prev => Math.min(prev + 10, offers.length));
} else {
setVisibleOffersCount(INITIAL_OFFERS_LIMIT);
}
}}
style={{ cursor: 'pointer' }}
tabIndex={0}
role="button"
aria-label={hasMoreOffers ? `Еще ${offers.length - visibleOffersCount} предложений` : 'Скрыть предложения'}
onKeyDown={e => {
if (e.key === 'Enter' || e.key === ' ') {
if (hasMoreOffers) {
setVisibleOffersCount(prev => Math.min(prev + 10, offers.length));
} else {
setVisibleOffersCount(INITIAL_OFFERS_LIMIT);
}
}
}}
>
<div className="text-block-27">
{hasMoreOffers ? `Еще ${offers.length - visibleOffersCount} предложений` : 'Скрыть'}
</div> </div>
<img
src="/images/arrow_drop_down.svg"
loading="lazy"
alt=""
className={`transition-transform duration-200 ${!hasMoreOffers ? 'rotate-180' : ''}`}
/>
</div> </div>
) : null} </div>
</div> </div>
</div> </div>

93
src/styles/my.css
View File

@ -51,7 +51,9 @@
} }
.flex-block-40 {
background-color: #fff;
}
input.text-block-31 { input.text-block-31 {
background: none !important; background: none !important;
@ -406,8 +408,15 @@ input.input-receiver:focus {
} }
.core-product-s1 { .core-product-s1{
max-width: 320px ; width: 100% !important;
}
.heading-10 {
width: auto !important;
min-width: 0 !important;
white-space: nowrap; /* если хотите, чтобы текст не переносился */
} }
.flex-block-112 { .flex-block-112 {
@ -743,7 +752,7 @@ a.link-block-2.w-inline-block {
height: 140px; height: 140px;
} }
} }
@media screen and (max-width: 767px) { @media (max-width: 767px) {
.div-block-128 { .div-block-128 {
height: 100px; height: 100px;
} }
@ -836,10 +845,57 @@ a.link-block-2.w-inline-block {
max-width: 33%; max-width: 33%;
} }
.flex-block-44 {
grid-column-gap: 0px;
grid-row-gap: 0px;
flex: 1;
}
.sort-list-s1 {
padding-top: 6px;
padding-bottom: 6px;
}
.show-more-search {
padding: 6px 20px;
}
.flex-block-37 {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.w-layout-vflex.flex-block-40 {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.flex-block-47 {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important; /* по центру по горизонтали */
gap: 16px !important;
}
.flex-block-50 {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 16px !important;
width: 100% !important;
}
.flex-block-79 {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
}
.text-block-21 { .text-block-21 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.flex-block-45 { .flex-block-45 {
@ -1046,4 +1102,27 @@ a.link-block-2.w-inline-block {
.hide-on-991 { .hide-on-991 {
display: none !important; display: none !important;
} }
}
@media (max-width: 767px) {
.flex-block-50 {
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
gap: 8px !important;
padding-left: 10px !important;
padding-right: 10px !important;
}
}
@media (max-width: 767px) {
.div-block-19 {
display: none !important;
}
}
@media (max-width: 767px) {
.core-product-s1 {
flex-direction: row !important; /* или column, если нужно вертикально */
justify-content: flex-start !important;
align-items: flex-start !important;
}
} }

56
src/styles/protekproject.webflow.css
View File

@ -2324,8 +2324,7 @@ body {
.text-block-21 { .text-block-21 {
color: var(--_fonts---color--light-blue-grey); color: var(--_fonts---color--light-blue-grey);
font-size: var(--_fonts---font-size--small-font-size); font-size: var(--_fonts---font-size--small-font-size);
align-self: stretch;
overflow: hidden;
} }
.text-block-22 { .text-block-22 {
@ -2396,13 +2395,7 @@ body {
margin-right: 5px; margin-right: 5px;
} }
.flex-block-47 {
grid-column-gap: 15px;
grid-row-gap: 15px;
flex-flow: row;
flex: 1;
align-self: auto;
}
.image-10 { .image-10 {
object-fit: contain; object-fit: contain;
@ -3716,9 +3709,7 @@ body {
align-items: center; align-items: center;
} }
.flex-block-79 {
align-self: stretch;
}
.flex-block-80 { .flex-block-80 {
grid-column-gap: 20px; grid-column-gap: 20px;
@ -4491,16 +4482,7 @@ body {
max-width: 100%; max-width: 100%;
} }
.core-product-s1 {
grid-column-gap: 10px;
grid-row-gap: 10px;
flex-flow: row-reverse;
flex: 1;
justify-content: flex-end;
align-self: stretch;
align-items: center;
max-width: 100%;
}
.flex-block-48-copy { .flex-block-48-copy {
grid-column-gap: 16px; grid-column-gap: 16px;
@ -6767,14 +6749,7 @@ body {
flex: 0 auto; flex: 0 auto;
} }
.core-product-s1 {
flex-flow: column;
flex: 1;
justify-content: flex-start;
align-self: stretch;
align-items: flex-start;
min-width: 270px;
}
.core-product-search-s2 { .core-product-search-s2 {
flex-flow: row; flex-flow: row;
@ -7037,10 +7012,7 @@ body {
flex: 1; flex: 1;
} }
.core-product-s1 {
flex-flow: column;
max-width: 320px;
}
.core-product-search-s2 { .core-product-search-s2 {
flex-flow: row; flex-flow: row;
@ -7869,9 +7841,7 @@ body {
flex-flow: column; flex-flow: column;
} }
.core-product-s1 {
flex-flow: row-reverse;
}
.sort-list-s1 { .sort-list-s1 {
padding-right: 210px; padding-right: 210px;
@ -9498,9 +9468,9 @@ body {
margin-top: 0; margin-top: 0;
} }
.text-block-21 { /* .text-block-21 {
line-height: 140%; line-height: 140%;
} } */
.flex-block-45 { .flex-block-45 {
display: flex; display: flex;
@ -10057,13 +10027,7 @@ body {
max-width: 100%; max-width: 100%;
} }
.core-product-s1 {
grid-column-gap: 10px;
grid-row-gap: 10px;
flex-flow: column-reverse wrap;
justify-content: flex-start;
align-items: flex-start;
}
.flex-block-48-copy { .flex-block-48-copy {
max-width: 100%; max-width: 100%;