forked from M3-Academy/m3-academy-template-vtexio
87 lines
2.0 KiB
Markdown
87 lines
2.0 KiB
Markdown
|
# Sku Selector
|
||
|
|
|
||
|
|
## Dependências
|
||
|
|
|
||
|
|
## SkuSelectorContext
|
||
|
|
|
||
|
|
### State
|
||
|
|
|
||
|
|
Exemplo do estado do contexto do sku selector
|
||
|
|
|
||
|
|
```ts
|
||
|
|
{
|
||
|
|
skus: [
|
||
|
|
{
|
||
|
|
id: "1",
|
||
|
|
name: "blusa preta g",
|
||
|
|
price: 12345,
|
||
|
|
maxAvailable: 7,
|
||
|
|
variants: [
|
||
|
|
{
|
||
|
|
name: "cor",
|
||
|
|
value: "preto"
|
||
|
|
}
|
||
|
|
{
|
||
|
|
name: "tamanho",
|
||
|
|
value: "G"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
{
|
||
|
|
id: "2",
|
||
|
|
name: "blusa preta m",
|
||
|
|
price: 12345,
|
||
|
|
maxAvailable: 7,
|
||
|
|
variants: [
|
||
|
|
{
|
||
|
|
name: "cor",
|
||
|
|
value: "preto"
|
||
|
|
}
|
||
|
|
{
|
||
|
|
name: "tamanho",
|
||
|
|
value: "G"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
...
|
||
|
|
],
|
||
|
|
variants: ["cor", "tamanho"], // pode ser qualquer especificação cadastrada
|
||
|
|
variantsValues: [
|
||
|
|
{
|
||
|
|
name: "cor",
|
||
|
|
values: ["preto", "vermelho", "azul", "verde"]
|
||
|
|
}
|
||
|
|
{
|
||
|
|
name: "tamanho",
|
||
|
|
values: ["GG", "G", "M", "P"]
|
||
|
|
}
|
||
|
|
],
|
||
|
|
currentSelected: {
|
||
|
|
cor: "preto",
|
||
|
|
tamanho: "G",
|
||
|
|
},
|
||
|
|
selectedSku: "1", // id do sku
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### Actions
|
||
|
|
|
||
|
|
Açoes do seletor de sku
|
||
|
|
|
||
|
|
```ts
|
||
|
|
// nome da especificação e seu valor
|
||
|
|
type Variant = {
|
||
|
|
name: string
|
||
|
|
value: string
|
||
|
|
}
|
||
|
|
|
||
|
|
type Actions = {
|
||
|
|
/*
|
||
|
|
Muda o estado de currentSelected com os dados da variante selecionada
|
||
|
|
e caso de match com algum sku disponível deverá altera o selectedSku para o sku encontrado
|
||
|
|
caso o sku selecionado não possuir o estoque isso é uma regra de view a ser tratada
|
||
|
|
*/
|
||
|
|
selectVariant(variant: Variant): void
|
||
|
|
}
|
||
|
|
```
|