Vitrine com Abas

Sobre

Vitrine com abas de navegação.

---

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.