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.