Как хранить товары в базе данных
Какую структуру хранения лучше всего использовать при хранении товара?
Есть много значений:
Штрих-код, цвет, кол-во по цвету. Храню это вот так:
Вот json в котором хранится информация по цветам,кол-ву и размеру
{
"0": {
"name": "1-ОС до 92",
"colors": [
{
"color": "Красный",
"count": 0
},
{
"color": "Черный",
"count": 32
},
{
"color": "Зеленый",
"count": 8
}
]
},
"1": {
"name": "2-ОС до 97",
"colors": [
{
"color": "Красный",
"count": 5
},
{
"color": "Черный",
"count": 2
},
{
"color": "Зеленый",
"count": 32
}
]
},
"2": {
"name": "3-ОС до 104",
"colors": [
{
"color": "Красный",
"count": 8
},
{
"color": "Черный",
"count": 25
},
{
"color": "Зеленый",
"count": 17
}
]
}
}
Это очень неудобно, особенно отрисовывать это на React
<div style={{marginLeft: '50px'}}>
<p className={styles.titlep}>{products[0].name}</p>
<p style={{margin: '0px', fontSize: '14px', color: '#777777', marginBottom: '10px'}}>Артикул: {products[0].barcode}</p>
<p style={{fontSize: '24px', fontWeight: 600}}>{products[0].price} UAH</p>
<p id={'color'} style={{fontSize: '14px', fontWeight: 100, margin: '0px'}}>Колір</p>
<Form.Select id={'color'} onChange={(event) => {
selected['color'] = event.target.value
setSelected(selected)
selectedColor = event.target.value
setSelectedColor(selectedColor)
}
} size="sm" style={{width: '150px'}}>
{(( ) => {
let lols = []
let json = (JSON.parse(products[0].data));
let i = 0;
if(selectedSize == -1) {
Object.keys(json[0]['colors']).map(function (lll, kkk) {
if (selectedColor == -1) {
selectedColor = lll
setSelectedColor(selectedColor)
selected['color'] = lll
setSelected(selected)
console.log('157')
}
lols.push(<option value={lll}>{json[0]['colors'][lll].color}</option>)
i++
})
}else {
Object.keys(json[selectedSize]['colors']).map(function (lll, kkk) {
if (selectedColor == -1) {
selectedColor = lll
setSelectedColor(selectedColor)
selected['color'] = lll
setSelect(selected)
console.log('fdfdfdfdf')
}
if(json[selectedSize]['colors'][lll].count !== 0)
lols.push(<option value={lll}>{json[selectedSize]['colors'][lll].color}</option>)
i++
})
}
return lols
})()}
</Form.Select>
<div style={{marginTop: '15px', marginBottom: '20px'}}>
<p id={'size'} style={{fontSize: '16px', fontWeight: 100, margin: '0px'}}>Розмір</p>
{(( ) => {
let lols = []
let json = (JSON.parse(products[0].data));
let i = 0;
console.log(json)
Object.keys(json).map(function (lll,kkk){
console.log('kkk')
lols.push(
<Form.Check
label={json[lll].name}
value={json[lll].name}
onClick={(event) => {
selected['size'] = event.target.value
setSelected(selected)
selectedSize = lll
setSelectedSize(selectedSize)
}}
disabled={json[lll]['colors'][selectedColor].count == 0 ? true : false}
name="group1"
type={"radio"}
id={`radio-1`}
/>
)
i++
})
return lols
})()}
</div>
<a onClick={() => {
if(localStorage.getItem('products')){
let products = JSON.parse(localStorage.getItem('products'));
products.push(selected)
console.log(selected)
localStorage.setItem('products', JSON.stringify(products))
selectedProducts = products
setSelectedProducts([...selectedProducts])
}else {
let products = [];
products.push(selected)
localStorage.setItem('products', JSON.stringify(products))
selectedProducts = products
setSelectedProducts([...selectedProducts])
}
if(!selected['size'] || !selected['color']) {
if(!selected['size']) {
document.getElementById('size').style.animation = 'shake 0.82s cubic-bezier(.36,.07,.19,.97) both'
setTimeout(() => {
document.getElementById('size').style.animation = ''
}, 1000);
}
if(!selected['color']) {
document.getElementById('color').style.animation = 'shake 0.82s cubic-bezier(.36,.07,.19,.97) both'
console.log(document.getElementById('color'))
setTimeout(() => {
document.getElementById('color').style.animation = ''
}, 1000);
}
}else {
setShow(!show)
}
console.log(selected)
}
} className={styles.see_button}>Додати в корзину</a>