Slider

Sobre

O componente de slider é uma aplicação que insere o comportamento de slider para diversos elementos, geralmente usada em vitrines e banners, contendo o comportamento e os elementos a serem renderizados. Ainda suporta customizações para o comportamento.

Dependências

• prod

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

  • Tipo: Object

Instalação

• Instale o app através do seu terminal

npm install @wapstore/slider

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

"dependencies": {
  "@wapstore/slider": "^1.0.0"
}

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

Uso

O componente de 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 um Banner Principal:

<template lang="html">
  <section class="bannerPrincipal">
    <slider v-bind="config[device]">
      <!-- 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="white"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M13 9L10 12L13 15"
                stroke="white"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </slot>
        </button>
      </template>
      <!-- Banners -->
      <div v-for="(banner, i) in banners" :key="i" class="">
        <!-- Link do banner -->
        <a
          :id="`banner-bannerPrincipal-${banner.id}`"
          @click.capture="$gtmBannerEvent(banner.nome, banner.dataInicial, banner.dimensoes[device].link)"
        >
          <!-- Imagem do banner -->
          <img
            :src="banner.dimensoes[device][$store.state.tipoImg.geral]"
            :alt="banner.nome"
            width="100%"
            height="100%"
          >
        </a>
      </div>
      <!-- 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="white"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M11 15L14 12L11 9"
                stroke="white"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </slot>
        </button>
      </template>
    </slider>
  </section>
</template>
<script>
  import slider from 'vue-slick-carousel';
  import 'vue-slick-carousel/dist/vue-slick-carousel.css';
  import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css';

  export default {
    components: {
      slider
    },
    props: {
      banners: Array,
      sliderConfig: {
        type: Object,
        default: () => {
          return {
            mobile: {
              arrows: false,
              dots: true
            },
            desktop: {
              arrows: true,
              dots: true
            },
            allRes: {}
          };
        }
      }
    },
    computed: {
      config () {
        const config = this.sliderConfig;
        config.mobile.lazyLoad  = 'ondemand';
        config.desktop.lazyLoad = 'ondemand';

        if (config.allRes) {
          config.mobile  = { ...config.mobile, ...config.allRes };
          config.desktop = { ...config.desktop, ...config.allRes };
        }

        return config;
      },
      device () {
        return this.$store.state.screenWidth < 1024 ? 'mobile' : 'desktop';
      }
    },
    mounted () {
      // ADICIONA EVENTO PROMOVIEW
      this.$gtmBannerPromoView(this.banners);
    }
  };
  </script>
<style>
  ...
</style>

-Este é um exemplo da chamada do template de banner principal na home:

<homeBanner-principal v-if="bannersHome.length" :banners="bannersHome" />

...

<script>
  export default {
    async asyncData ({ app, store }) {
      const bannersHome = await app.$axios.request({
        method: 'get',
        url: '/v2/front/showcase/banners/home-principal'
      }).then(response => {
        return response.data.banners;
      }).catch(response => {
        console.error(response.response.data);
      });
      return {
        bannersHome
      };
    }
  };
</script>

Recursos

Props

| Prop | Descrição | Tipo | Valor padrão | |---|---|---|---| | Exemplo 1.0.0 | Exemplo. | String | "p" |

Slots

| Slot | Descrição | Name | Valor padrão | Exemplo | |---|---|---|---|---| | Exemplo 1.0.0 | Exemplo. | exemplo | - | <card-produto> <template #selo> <img src="seu-selo.webp" alt="selo"> </template> </card-produto> |

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.