#reactjs #framer-motion
Вопрос:
У меня проблема при выборе цвета товара, например, на картинке ниже. Если я выберу цвет на часах и положу телефон в корзину, в корзине я увижу данные телефона, но на картинке будут часы с выбранным цветом. Как я могу это исправить ?
Вот страница продуктов:
const ParsedColors = props => {
return(
<ul>
{props.product.color.map((color, i) => {
const parsed = JSON.parse(color)
return(
<li key={props.product._id i}>
<motion.button
key={props.product._id parsed.value}
style={{backgroundColor: parsed.value}}
className="color--Button"
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.8 }}
onClick={() => setColor([props.product._id, parsed.value])}
/>
</li>
)
})}
</ul>
)
}
const RenderProductImage = (props) => {
return(
props.product.imageFile?.map(image => {
if(image.originalname.includes(color[1].substring(1))) {
setChosenImage(image.originalname)
return (
<img key={props.product._id} src={require(`./styles/images/${image.originalname}`).default} alt="product img" />
)
}
})
)
}
...
<div className="product--Image--Container">
{(color.length > 0 amp;amp; color[0] === product._id) ?
<RenderProductImage product={product} />
:
<>
{product.imageFile.map(image => {
if(image.originalname.includes('def')) {
return (
<img src={require(`./styles/images/${image.originalname}`).default} alt="product img" />
)
}
})}
</>
}
</div>
</div>
<div className="product--Card--Layout">
<div className="product--Colors--Container">
<ParsedColors product={product}/>
</div>
Я сопоставляю изображение и цвет по значению цвета и имени изображения, которое содержит тот же цвет, что и строка в его названии.
Вот как это выглядит на странице Корзины: