Блог

У меня проблема при выборе цвета товара, например, на картинке ниже. Если я выберу цвет на часах и положу телефон в корзину, в корзине я увижу данные телефона, но на картинке будут часы с выбранным цветом. Как я могу это исправить ?

Вот страница продуктов:

     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>
 

Я сопоставляю изображение и цвет по значению цвета и имени изображения, которое содержит тот же цвет, что и строка в его названии.

Вот как это выглядит на странице Корзины: