Vitrine

Sobre

O componente de vitrine é uma aplicação que insere uma prateleira de produtos conforme o cadastro de produtos na plataforma, com limite de quantidade e sem slider.

Dependências

• prod

  • Descrição: Suporta somente a estrutura de dados recebida da API da Wap.store.

  • Tipo: Object

Plugins

• GTM 1.4.3

  • Descrição: Plugin que contém métodos para impressão de dataLayers do GTM.

  • Instalação: npm install @wapstore/gtm

  • Documentação: Acesse aqui

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 install @wapstore/vitrine

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

"dependencies": {
  "@wapstore/vitrine": "^1.6.2"
}

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

Uso

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

<template>
  <section class="vitrineDefault" v-if="vitrineData">
    <div class="weContainer">
      <div class="">
        <h2 class="vitrineDefault-t1" v-if="!hideTitle">
          <slot name="titulo">
            {{ vitrineData.vitrine.titulo }}
          </slot>
        </h2>

        <div class="weContainer containerListaProds" :class="{ formatoLista }">
          <component
            :is="componenteCard"
            class="weContainer-autoCol6|deskAutoCol3"
            v-for="prod in prods"
            :prod="prod"
            :key="prod.sku"
            v-bind="propsCard"
            @openPopAttrs="handlePopAttrs"
          >
            <template #selo>
              <slot name="selo" />
            </template>
            <template #favorito>
              <slot name="favorito" />
            </template>
            <template #avaliacao>
              <slot name="avaliacao" :idProd="prod.id" />
            </template>
            <template #descProd>
              <slot name="descProd" />
            </template>
            <template #condicaoVista>
              <slot name="condicaoVista" />
            </template>
            <template #labelBtComprar>
              <slot name="labelBtComprar" />
            </template>
            <template #descontoVista="data">
              <slot name="descontoVista" :desconto="data.desconto" />
            </template>
          </component>
        </div>
      </div>
      <slot />
    </div>
  </section>
</template>

<script>
export default {
  props: {
    vitrineData: Object,
    componenteCard: {
      type: String,
      default: "card-produto",
    },
    hideTitle: {
      type: Boolean,
      default: false,
    },
    qtdProdsToShow: {
      type: [Number, Object],
      default: () => {
        return {
          mobile: 2,
          desktop: 4,
        };
      },
    },
    formatoLista: {
      type: Boolean,
      default: false,
    },
    condicaoVista: {
      type: Boolean,
      default: false,
    },
    favorito: {
      type: Boolean,
      default: false,
    },
    propsCard: {
      type: Object,
    },
  },
  computed: {
    prods() {
      // Caso a quantidade de itens a ser exibida seja do tipo Number
      if (typeof this.qtdProdsToShow === "number") {
        // Limita itens à quantidade definida
        return this.vitrineData.produtos.slice(0, this.qtdProdsToShow);
      }

      // Caso a quantidade de itens a ser exibida seja do tipo Object

      // Limita quantidade de itens para desktop
      let prods = this.vitrineData.produtos.slice(
        0,
        this.qtdProdsToShow.desktop
      );

      // Limita quantidade de itens para mobile
      if (this.$store.state.screenWidth < 768) {
        prods = prods.slice(0, this.qtdProdsToShow.mobile);
      }

      return prods;
    },
  },
  methods: {
    handlePopAttrs(payload) {
      this.$emit("openPopAttrs", payload);
    },
  },
  mounted() {
    if (!this.vitrineData) {
      console.error(
        "Componente vitrine: Insira todas as dependências, para saber mais confira a documentação: https://www.npmjs.com/package/@wapstore/vitrine#Depend%C3%AAncias.\nDependências ausentes:\nvitrineData"
      );
    }

    this.$gtmVitrineDataLayer(this.vitrineData.vitrine.titulo, this.prods);
  },
};
</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 | |---|---|---|---| | vitrineData 1.6.3 | Dados da vitrine (suporta somente a estrutura de dados recebida da API da Wap.store). Deve receber o response.data da API de vitrine ("/v2/front/showcase/products/<hash da vitrine>"). | Object | - | | componenteCard 1.6.0 | Define o card de produto que será usado. | String | "card-produto" | | hideTitle 1.6.3 | Esconde título da vitrine. | Boolean | false | | qtdProdsToShow 1.6.3 | Limita quantidade de produtos a serem exibidos pela vitrine. | Number, Object | { mobile: 2, desktop: 4 } | | formatoLista 1.1.0 | Ativa/Desativa o formato de lista. | Boolean | false | | propsCard 1.6.0 | Permite que as props do card de produto sejam passadas por meio de um objeto. | Object | - |

Store

| Nome | Descrição | |---|---| | screenWidth 1.6.3 | Variável do modelo padrão do front, encontrada no modulo principal da store (arquivo index.js), responsável por conter o valor da largura atualizado da tela. |

Slots

| Slot | Descrição | Name | Valor padrão | Exemplo | |---|---|---|---|---| | Título da vitrine 1.6.3 | Campo dedicado ao título da vitrine. | titulo | Titulo retornado pela API de vitrine ("/v2/front/showcase/products/<hash da vitrine>"), localizado em response.data.vitrine.titulo | <vitrine><template v-slot:titulo>Produtos recomendados</template></vitrine> | | Default 1.4.0 | Campo dedicado à qualquer conteúdo extra. Para usa-lo, basta adicionar qualquer conteúdo dentro das tags do componente. | - | - | <vitrine><template>Produtos recomendados</template></vitrine> |

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.