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.