Favoritos

Sobre

Componente para favoritar produtos na listagem, vitrines e no disponivel do detalhe produto.

Dependências

Não há.

Instalação

• Instale o app através do seu terminal

npm install @wapstore/favoritos

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

"dependencies": {
  "@wapstore/favoritos": "0.0.4"
}

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

Uso

O componente de favoritos 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 Favoritos na vitrine:

<template>
  <favoritos
    :idProduto="produto.id"
    class="pratafina-cardProduto-favoritos"
    @loginFavorito="handleLoginFavorito"
  >
    <template #slotFavoritarAfter>
      <img
        src="~/static/img/geral/favorito.svg"
        alt="Icone favoritar produto"
        width="17"
        height="15"
        loading="lazy"
      >
    </template>
    <template #slotFavoritarBefore>
      <img
        src="~/static/img/geral/favoritado.svg"
        alt="Icone favoritar produto"
        width="17"
        height="15"
        loading="lazy"
      >
    </template>
  </favoritos>
</template>
<script>

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

Recursos

Props

| Prop | Descrição | Tipo | Valor padrão | |---|---|---|---| | idProduto 0.0.4 | Id do produto a ser favoritado. | Number | - | | atributoSimples 0.0.4 | Atributo simples do produto a ser favoritado. | Object | - | | nameAnimation 0.0.4 | Caso tenha necessidade de mudar a animação, você pode usar esse campo para alterar o nome e assim carregar um css global. | String | fadeFavorito | | modeAnimation 0.0.4 | Caso tenha necessidade de mudar o mode da animação. | String | out-in |

Slots

| Slot | Descrição | Name| Exemplo de uso | |---|---|---|---| | Favoritar 0.0.4 | Elemento favoritar, exibido quando o produto ainda não foi favoritado. | slotFavoritarBefore | <favoritos><template #slotFavoritarBefore>/*...*/</template></favoritos> | | Favoritado 0.0.4 | Elemento favoritado, exibido quando o produto está favoritado. | slotFavoritarAfter | <favoritos><template #slotFavoritarAfter>/*...*/</template></favoritos> |

Eventos

| Evento | Descrição | Argumentos | |---|---|---| | beforeChange 0.0.4 | Evento antes da mudança do favorito. | oldStatusFavorito Descrição: Index da atual aba. Tipo: Boolean newStatusFavorito Descrição: Index da nova aba. Tipo: Boolean | | afterChange 0.0.4 | Evento depois da mudança do favorito. | statusFavorito Descrição: Estado do favorito. Tipo: Boolean | | loginFavorito 0.0.4 | Evento quando a tentativa de favoritar um produto sem usuário estar logado. | - | | initFavorito 0.0.4 | Evento de montagem do favorito no DOM. | element Descrição: Referencia do HTML do favorito no DOM. Tipo: HTMLDivElement | | updatedFavorito 0.0.4 | Evento de atualização do favorito no DOM. | element Descrição: Referencia do HTML do favorito no DOM. Tipo: HTMLDivElement |

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.