Este PR conta com a implementação do SKUMatrix na ProductDetails.
Dentro do @faststore/core na pasta ui, foi criada uma abstração do SKUMatrixSidebar. Toda a lógica de captura dos dados e formatação do mesmo é feita nessa abstração.
Para fazer a requisição dos dados, foi criado uma nova query. Para utiliza-la basta chamar o hook useAllVariantProducts (toda a construção dessa nova query está presente no PR #2504 ). Para consumir esse hook, é necessário passar algumas propriedades, das quais podemos destacar o callBack e enabled.
Dentro dessa abstração do SKUMatrixSidebar, deve haver o consumo do contexto do SKUMatrix. O contexto que irá controlar todos os estados, como por exemplo, informar ao contexto a lista das variações do produto. Como essa abstração que ficará responsável por fazer a requisição e informar os dados para o contexto, o callBack que é passado no useAllVariantProducts, será o método de adicionar os itens que serão exibidos na tabela do SKUMatrixSidebar, portanto deve ser atribuído o método setAllVariantProductspresente no contexto do SKUMatrix, dessa forma, os dados que já serão retornados formatados, serão informados ao contexto e posteriormente, o SKUMatrixSidebarvai poder consumir esses dados e exibir em tela.
Falando um pouco sobre o useBuyButton, este hook é responsável por adicionar os itens selecionados no carrinho. Anteriormente, o mesmo não aceitava uma lista de itens, logo, foi necessário modifica-lo para que a nova demanda fosse atendida. Como o hook deve consumir algumas informações para posteriormente informar o buyButtonProps (reposável por preparar os dados a serem inseridos no carrinho), ele precisa observar os dados dos produtos a serem adicionados no carrinho. Esses dados, são retornados do contexto do SKUMatrix, por tanto, sempre que existir qualquer tipo de modificação no estado do contexto (por exemplo, uma alteração na quantidade de um SKU dentro da tabela do SKUMatrixSidebar), irá refletir no hook do useBuyButton, e as propriedades serão geradas corretamente.
Para finalizar, toda a configuração do headless CMS foi desenvolvida nesse PR.
Este PR conta com a implementação do
SKUMatrix
na ProductDetails.Dentro do @faststore/core na pasta ui, foi criada uma abstração do
SKUMatrixSidebar
. Toda a lógica de captura dos dados e formatação do mesmo é feita nessa abstração. Para fazer a requisição dos dados, foi criado uma nova query. Para utiliza-la basta chamar o hook useAllVariantProducts (toda a construção dessa nova query está presente no PR #2504 ). Para consumir esse hook, é necessário passar algumas propriedades, das quais podemos destacar o callBack e enabled.Dentro dessa abstração do
SKUMatrixSidebar
, deve haver o consumo do contexto doSKUMatrix
. O contexto que irá controlar todos os estados, como por exemplo, informar ao contexto a lista das variações do produto. Como essa abstração que ficará responsável por fazer a requisição e informar os dados para o contexto, o callBack que é passado nouseAllVariantProducts
, será o método de adicionar os itens que serão exibidos na tabela doSKUMatrixSidebar
, portanto deve ser atribuído o métodosetAllVariantProducts
presente no contexto doSKUMatrix
, dessa forma, os dados que já serão retornados formatados, serão informados ao contexto e posteriormente, oSKUMatrixSidebar
vai poder consumir esses dados e exibir em tela.Falando um pouco sobre o
useBuyButton
, este hook é responsável por adicionar os itens selecionados no carrinho. Anteriormente, o mesmo não aceitava uma lista de itens, logo, foi necessário modifica-lo para que a nova demanda fosse atendida. Como o hook deve consumir algumas informações para posteriormente informar o buyButtonProps (reposável por preparar os dados a serem inseridos no carrinho), ele precisa observar os dados dos produtos a serem adicionados no carrinho. Esses dados, são retornados do contexto do SKUMatrix, por tanto, sempre que existir qualquer tipo de modificação no estado do contexto (por exemplo, uma alteração na quantidade de um SKU dentro da tabela doSKUMatrixSidebar
), irá refletir no hook douseBuyButton
, e as propriedades serão geradas corretamente.Para finalizar, toda a configuração do headless CMS foi desenvolvida nesse PR.
Este PR tem como dependência: #2503 e #2504
Printscreens
Headless CMS