vitrine-wap

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.