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.