fix1207
This commit is contained in:
egortriston
@ -272,175 +272,179 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
|
||||
return (
|
||||
<>
|
||||
<div className="w-layout-hflex core-product-search-s1">
|
||||
<div className="w-layout-vflex core-product-s1">
|
||||
<div className="w-layout-vflex flex-block-47">
|
||||
<div className="div-block-19">
|
||||
<img src="/images/info.svg" loading="lazy" alt="info" className="image-9" />
|
||||
</div>
|
||||
<div className="w-layout-vflex flex-block-50">
|
||||
<div className="w-layout-hflex flex-block-79">
|
||||
<h3 className="heading-10 name">{brand}</h3>
|
||||
<h3 className="heading-10">{article}</h3>
|
||||
<div
|
||||
className="favorite-icon w-embed"
|
||||
onClick={handleFavoriteClick}
|
||||
style={{ cursor: 'pointer', marginLeft: '10px', color: isItemFavorite ? '#e53935' : undefined }}
|
||||
>
|
||||
<svg width="24" height="24" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<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"
|
||||
fill={isItemFavorite ? "#e53935" : "currentColor"}
|
||||
/>
|
||||
</svg>
|
||||
<div className="w-layout-vflex flex-block-48-copy">
|
||||
<div className="w-layout-vflex product-list-search-s1">
|
||||
<div className="w-layout-vflex core-product-s1">
|
||||
<div className="w-layout-vflex flex-block-47">
|
||||
<div className="div-block-19">
|
||||
<img src="/images/info.svg" loading="lazy" alt="info" className="image-9" />
|
||||
</div>
|
||||
<div className="w-layout-vflex flex-block-50">
|
||||
<div className="w-layout-hflex flex-block-79">
|
||||
<h3 className="heading-10 name">{brand}</h3>
|
||||
<h3 className="heading-10">{article}</h3>
|
||||
<div
|
||||
className="favorite-icon w-embed"
|
||||
onClick={handleFavoriteClick}
|
||||
style={{ cursor: 'pointer', marginLeft: '10px', color: isItemFavorite ? '#e53935' : undefined }}
|
||||
>
|
||||
<svg width="24" height="24" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<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"
|
||||
fill={isItemFavorite ? "#e53935" : "currentColor"}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-block-21">{name}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-block-21">{name}</div>
|
||||
</div>
|
||||
</div>
|
||||
{image && (
|
||||
<div className="div-block-20">
|
||||
<img src={image} loading="lazy" alt={name} className="image-10" />
|
||||
{partsIndexPowered && (
|
||||
<div className="text-xs text-gray-500 mt-1 text-center">
|
||||
powered by <span className="font-semibold text-blue-600">Parts Index</span>
|
||||
{image && (
|
||||
<div className="div-block-20">
|
||||
<img src={image} loading="lazy" alt={name} className="image-10" />
|
||||
{partsIndexPowered && (
|
||||
<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 className="w-layout-hflex sort-list-s1">
|
||||
<div className="w-layout-hflex flex-block-49">
|
||||
<div className="sort-item first">Наличие</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 className="w-layout-vflex flex-block-48-copy">
|
||||
<div className="w-layout-vflex product-list-search-s1">
|
||||
<div className="w-layout-hflex sort-list-s1">
|
||||
<div className="w-layout-hflex flex-block-49">
|
||||
<div className="sort-item first">Наличие</div>
|
||||
<div className="sort-item">Доставка</div>
|
||||
</div>
|
||||
<div className="w-layout-hflex add-to-cart-block-s1">
|
||||
<div className="w-layout-hflex flex-block-82">
|
||||
<div className="w-layout-hflex pcs-cart-s1">
|
||||
<div
|
||||
className="minus-plus"
|
||||
onClick={() => handleMinus(idx)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
aria-label="Уменьшить количество"
|
||||
tabIndex={0}
|
||||
onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && handleMinus(idx)}
|
||||
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 className="sort-item price">Цена</div>
|
||||
</div>
|
||||
{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="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 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="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 className="price-s1">{offer.price}</div>
|
||||
</div>
|
||||
<div className="w-layout-hflex add-to-cart-block-s1">
|
||||
<div className="w-layout-hflex flex-block-82">
|
||||
<div className="w-layout-hflex pcs-cart-s1">
|
||||
<div
|
||||
className="minus-plus"
|
||||
onClick={() => handleMinus(idx)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
aria-label="Уменьшить количество"
|
||||
tabIndex={0}
|
||||
onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && handleMinus(idx)}
|
||||
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>
|
||||
<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>
|
||||
<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>
|
||||
);
|
||||
})}
|
||||
{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>
|
||||
{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} предложений` : 'Скрыть'}
|
||||
) : null}
|
||||
</div>
|
||||
<img
|
||||
src="/images/arrow_drop_down.svg"
|
||||
loading="lazy"
|
||||
alt=""
|
||||
className={`transition-transform duration-200 ${!hasMoreOffers ? 'rotate-180' : ''}`}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -51,7 +51,9 @@
|
||||
|
||||
}
|
||||
|
||||
|
||||
.flex-block-40 {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
input.text-block-31 {
|
||||
background: none !important;
|
||||
@ -406,8 +408,15 @@ input.input-receiver:focus {
|
||||
}
|
||||
|
||||
|
||||
.core-product-s1 {
|
||||
max-width: 320px ;
|
||||
.core-product-s1{
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.heading-10 {
|
||||
width: auto !important;
|
||||
min-width: 0 !important;
|
||||
|
||||
white-space: nowrap; /* если хотите, чтобы текст не переносился */
|
||||
}
|
||||
|
||||
.flex-block-112 {
|
||||
@ -743,7 +752,7 @@ a.link-block-2.w-inline-block {
|
||||
height: 140px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
@media (max-width: 767px) {
|
||||
.div-block-128 {
|
||||
height: 100px;
|
||||
}
|
||||
@ -836,10 +845,57 @@ a.link-block-2.w-inline-block {
|
||||
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 {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
|
||||
.flex-block-45 {
|
||||
@ -1047,3 +1103,26 @@ a.link-block-2.w-inline-block {
|
||||
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;
|
||||
}
|
||||
}
|
||||
@ -2324,8 +2324,7 @@ body {
|
||||
.text-block-21 {
|
||||
color: var(--_fonts---color--light-blue-grey);
|
||||
font-size: var(--_fonts---font-size--small-font-size);
|
||||
align-self: stretch;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
.text-block-22 {
|
||||
@ -2396,13 +2395,7 @@ body {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.flex-block-47 {
|
||||
grid-column-gap: 15px;
|
||||
grid-row-gap: 15px;
|
||||
flex-flow: row;
|
||||
flex: 1;
|
||||
align-self: auto;
|
||||
}
|
||||
|
||||
|
||||
.image-10 {
|
||||
object-fit: contain;
|
||||
@ -3716,9 +3709,7 @@ body {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-block-79 {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
|
||||
.flex-block-80 {
|
||||
grid-column-gap: 20px;
|
||||
@ -4491,16 +4482,7 @@ body {
|
||||
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 {
|
||||
grid-column-gap: 16px;
|
||||
@ -6767,14 +6749,7 @@ body {
|
||||
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 {
|
||||
flex-flow: row;
|
||||
@ -7037,10 +7012,7 @@ body {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.core-product-s1 {
|
||||
flex-flow: column;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
|
||||
.core-product-search-s2 {
|
||||
flex-flow: row;
|
||||
@ -7869,9 +7841,7 @@ body {
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.core-product-s1 {
|
||||
flex-flow: row-reverse;
|
||||
}
|
||||
|
||||
|
||||
.sort-list-s1 {
|
||||
padding-right: 210px;
|
||||
@ -9498,9 +9468,9 @@ body {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.text-block-21 {
|
||||
/* .text-block-21 {
|
||||
line-height: 140%;
|
||||
}
|
||||
} */
|
||||
|
||||
.flex-block-45 {
|
||||
display: flex;
|
||||
@ -10057,13 +10027,7 @@ body {
|
||||
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 {
|
||||
max-width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user