vitrine-slide v1.0.0

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

Slots

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>

Eventos

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.