vitrine-slide

Vitrine com Slide

Sobre

Vitrine de produtos em slider.

---

Dependências

Instalação dos seguintes componentes:

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

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

"dependencies": {
  "@wapstore/vitrine-slide": "^1.1.4"
}

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

---

Uso

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

<template>
  <vitrine-slide
    :vitrineData="vitrineData"
    :title="vitrineData.vitrine.titulo"
    :tagTitle="vitrineData.vitrine.tagTitulo"
    :classTitle="'vitrine-title'"
    :slideSettings="vitrineSettings"
    :weCenterMode="centerModeCustom"
    :arrowsCustom="true"
    class="vitrine-slide"
  >
    <!-- Arrow para esquerda -->
    <template #prevArrow>
      <button type="button" name="button" class="banner-arrowSlider-prev">
        <slot name="arrowPrev">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle
              cx="12"
              cy="12"
              r="9"
              transform="rotate(-180 12 12)"
              stroke="black"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M13 9L10 12L13 15"
              stroke="black"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </slot>
      </button>
    </template>
    <template #cardsVitrine>
      <cardProduto
        v-for="(prod, index) in vitrineData.produtos"
        :key="`${index}-${prod.sku}`"
        :produto="prod"
      />
    </template>
    <!-- Arrow para direita -->
    <template #nextArrow>
      <button type="button" name="button" class="banner-arrowSlider-next">
        <slot name="arrowNext">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle
              cx="12"
              cy="12"
              r="9"
              stroke="black"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M11 15L14 12L11 9"
              stroke="black"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </slot>
      </button>
    </template>
  </vitrine-slide>
</template>
<script>
  import cardProduto from '../card-produto.vue';
  export default {
    components: {
      cardProduto
    },
    props: {
      vitrineData: {
        type: Object,
        required: true
      }
    },
    data () {
      return {
        vitrineSettings: {
          slidesToShow: 4,
          slidesToScroll: 4,
          infinite: true,
          arrows: false,
          dots: false,
          responsive: [
            {
              breakpoint: 1024,
              settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
                arrows: true
              }
            }
          ]
        },
        centerModeCustom: false
      };
    },
    watch: {
      '$store.state.screenWidth': {
        handler () {
          if (this.$store.state.screenWidth < 769) {
            this.centerModeCustom = true;
          }
        }
      }
    },
    mounted () {
      if (this.$store.state.screenWidth < 769) {
        this.centerModeCustom = true;
      }
    }
  };
</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
tagTitle 1.1.4	Tag a ser utilizada como titulo para a vitrine.	String	h2
classTitle 1.1.4	Classes css para ser definida no titulo da vitrine.	String	-
title 1.1.4	Texto a ser usado no título da vitrine.	String	-
hideTitle 1.1.4	Usado para exibir/esconder o título da vitrine.	String	-
slideSettings 1.1.4	Configurações para slide do vue slick.	Object	-
weCenterMode 1.1.4	Usado para ativar/desativar o center mode customizado.	Boolean	false
vitrineEventId 1.1.4	Id do evento do slider.	String	-

Slots

Slot	Descrição	Name	Exemplo de uso
Cards da vitrine 1.1.4	Cards do slide da vitrine.	cardsVitrine	<VitrineSlide><template #cardsVitrine><CardProduto v-for="(prod, index) in vitrineData.produtos" :key="${index}-${prod.sku}"/></template></VitrineSlide>
Seta esquerda para o slide 1.1.4	Recurso para inserir seta esquerda pro slider.	prevArrow	<VitrineSlide><template #prevArrow>/*...*/</template></VitrineSlide>
Seta direita para o slide 1.1.4	Recurso para inserir seta direita pro slider.	nextArrow	<VitrineSlide><template #nextArrow>/*...*/</template></VitrineSlide>

---

Métodos

-Exemplo genérico da chamada de um método.

<template>
  <button @click="handlePrevSlide">Prev slide</button>
  <VitrineSlide ref="vitrineSlide">
    /*...*/
  </VitrineSlide>
</template>
<script>
  export default {
    methods: {
      handlePrevSlide() {
        this.$refs.vitrineSlide.prev();
      },
    },
  }
</script>

Método	Descrição	Parâmetros
prev 1.1.4	Navega para o slide anterior.	-
next 1.1.4	Navega para o próximo slide.	-
goTo 1.1.4	Navega para o índice do slide. Passe no parametro o index do slide que deseja navegar.	indexSlide Descrição: Index do slide que deseja navegar. Tipo: Number
play 1.1.4	Para iniciar o autoplay do slide.	-
pause 1.1.4	Pausa o autoplay do slide.	-

---

Eventos

Evento	Descrição	Argumentos
beforeChangeSlide 1.1.4	Evento antes da mudança de slide.	oldSlideIndex Descrição: Index do antigo slide. Tipo: Number newSlideIndex Descrição: Index do novo slide. Tipo: Number
afterChangeSlide 1.1.4	Evento depois da mudança de slide.	slideIndex Descrição: Index do atual slide. Tipo: Number
initSlide 1.1.4	Evento de primeira montagem do slide da vitrine no DOM.	element Descrição: Referencia do HTML do slide da vitrine no DOM. Tipo: HTMLDivElement
updateSlide 1.1.4	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.