Vitrine-com-abas NPM

Vitrine com Abas

Sobre

Vitrine com abas de navegação.

Vitrine

Dependências

Instalação dos seguintes componentes:

npm install @wapstore/vitrine-slide

npm i vue-slick-carousel

prod
- Descrição: Suporta somente a estrutura de dados recebida da API da Wap.store.
- Tipo: Object

Componentes

Card de produto 1.4.2
- Descrição: Um card de produto usado em vitrines e listagens de produto, contendo uma imagem de produto, preço "de", "vista" e parcelado, nome do produto, suporta selos, avaliações e botão comprar.
- Instalação: npm install @wapstore/card-produto
- Documentação: Acesse aqui
- Recursos (depreciado): 1.2.0 - 1.6.0 Os recursos como slots e props pertencentes ao Card de produto podem ser usados na vitrine também. (substituído pela prop propsCard)

Instalação

Instale o app através do seu terminal

npm i @wapstore/vitrine-abas

Valide se seu arquivo package.json possui a dependência

"dependencies": {
  "@wapstore/vitrine-abas": "^0.0.10"
}

Agora a loja está apta para o uso da aplicação.

Uso

O componente de vitrine com abas pode ser inserido em qualquer lugar da pasta "components" ou "pages". Neste arquivo você pode inserir todas as props e slots que o componente aceita, além de seus estilos.

Exemplo

-Este é um exemplo da aplicação de um arquivo padrão para uma Vitrine na Home com abas:

<template>
  ...
</template>
<script>
  ...
</script>
<style>
  ...
</style>

Para definição do padrão de card-produto, leia esta documentação.

Recursos

Props

Prop	Descrição	Tipo	Valor padrão
slideSettings `0.0.10`	Objeto de configuração do vue slick, para mais informação Acesse aqui	`Object`	-
weCenterMode `0.0.10`	Define center mode customizado do slide da vitrine.	`Boolean`	`false`
quantidadeMaxCard `0.0.10`	Define número de cards na skeleton. Obrigatório	`Number`	-
loadingGeral `0.0.10`	Define loading geral do component (abas e vitrine de produtos).	`Boolean`	`false`
abasData `0.0.10`	Lista contendo informações de cada aba em um objeto.	`Array`	-

Configurações para a prop `abasData`

Prop	Descrição	Tipo	Obrigatório
hashVitrine `0.0.10`	Hash cadastrada no painel, usada para requisição das informações da vitrine.	`String`	Sim
ativo `0.0.10`	Define qual aba de vitrine está ativa no momento.	`Boolean`	Sim
label `0.0.10`	Label exibido na aba da vitrine.	`String`	Sim
requisicaoPersonalizada `0.0.10`	Em alguns casos exibimos os produtos da categoria como vitrine no detalhe produto, nessa situação utilize essa flag para ativar uma requisição personalizada. Esse campo funciona em conjunto `urlRequisicaoPersonalizada`.	`Boolean`	Não
urlRequisicaoPersonalizada `0.0.10`	Use esse campo para definir a url para a requisição personalizada. Para isso o campo `requisicaoPersonalizada` deve estar definida como `true`.	`String`	Não
quantidadeMaximaProduto `0.0.10`	Use esse campo para definir uma quantidade máxima de produtos a serem exibido. Funciona em casos que a requisição é personalizada.	`Number`	Não

Slots

Para Skeleton Geral

Skeleton de carregamento de toda a vitrine.

Slot	Descrição	Name
Titulo da Skeleton Geral `0.0.10`	Elemento exibido como titulo no momento da skeleton geral.	`tituloSkeleton`
Abas da Skeleton Geral `0.0.10`	Elemento exibido como abas no momento da skeleton geral.	`abasSkeleton`
Card da Skeleton Geral `0.0.10`	Elemento exibido como card no momento da skeleton geral.	`cardSkeleton`
Link da Skeleton Geral `0.0.10`	Elemento exibido como link no momento da skeleton geral.	`linkSkeleton`

Para skeleton da aba

A skeleton da aba é exibida na transição entre as abas, enquanto é realizado a requisição da vitrine.

Slot	Descrição	Name
Card da Skeleton da aba `0.0.10`	Elemento exibido como card no momento na skeleton da aba, exibido enquanto é realizado a requisição para a vitrine da aba atual.	`cardSkeleton`

Para vitrine com abas

Slots referente a vitrine com abas após totalmente carregada.

Slot	Descrição	Name	Props do slot
Título da vitrine com abas `0.0.10`	Título apresentado acima das abas da vitrine.	`tituloVitrine`	-
Card da vitrine com abas `0.0.10`	Card apresentado na vitrine.	`cardVitrine`	produtoData Descrição: Informações do produto apresentado pela API na vitrine. Tipo: `Object`
Link da vitrine com abas `0.0.10`	Link apresentado no final da vitrine com abas.	`linkVitrine`	vitrineData Descrição: Informações da atual vitrine em apresentação. Tipo: `Object` abaData Descrição: Informações da atual aba em apresentação. Tipo: `Object`

Eventos

Evento	Descrição	Argumentos
beforeChange `0.0.10`	Evento antes da mudança de aba.	currentAba Descrição: Index da atual aba. Tipo: `Number` newAba Descrição: Index da nova aba. Tipo: `Number`
afterChange `0.0.10`	Evento depois da mudança de aba.	aba Descrição: Index da aba. Tipo: `Number`
loadAbas `0.0.10`	Evento de montagem da aba no DOM.	element Descrição: Referencia do HTML da aba no DOM. Tipo: `HTMLDivElement`
beforeChangeSlide `0.0.10`	Evento antes da mudança de slide na vitrine.	oldSlideIndex Descrição: Index do atual card. Tipo: `Number` newSlideIndex Descrição: Index do novo card. Tipo: `Number`
afterChangeSlide `0.0.10`	Evento depois de slide na vitrine.	slideIndex Descrição: Index do atual slide. Tipo: `Number`
loadSlide `0.0.10`	Evento da primeira montagem do slide no DOM.	element Descrição: Referencia do HTML da aba no DOM. Tipo: `HTMLDivElement`
updateSlide `0.0.10`	Evento de update do slide no DOM.	-

Estilização

Para a estilização, basta utilizar estilos sem escopos dentro do componente onde for inserido, utilizando sempre de um ID ou classe específica para a chamada do componente, para que em outras chamadas o estilo não influencie. Caso o estilo seja para várias chamadas do componente é recomendado a inserção dos estilos em um arquivos CSS separado.

@everything-registry/sub-chunk-3063

1.0.1

2 years ago

1.0.0