Banner Component Minified
This commit is contained in:
devansh bawari
parent
3e4b86fa4c
commit
a9ab02cc6c
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"/js/velocity.js": "/js/velocity.js?id=2e4efbb7a401f978aa7f",
|
||||
"/js/velocity.js": "/js/velocity.js?id=7dee247dbf6aaea353ac",
|
||||
"/css/velocity-admin.css": "/css/velocity-admin.css?id=4322502d80a0e4a0affd",
|
||||
"/css/velocity.css": "/css/velocity.css?id=1971af537d25c655cb27"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,65 @@
|
|||
<template>
|
||||
<div :class="`slides-container ${direction}`">
|
||||
<carousel-component
|
||||
loop="true"
|
||||
timeout="5000"
|
||||
autoplay="true"
|
||||
slides-per-page="1"
|
||||
navigation-enabled="hide"
|
||||
paginationEnabled="hide"
|
||||
:locale-direction="direction"
|
||||
:slides-count="banners.length > 0 ? banners.length : 1"
|
||||
>
|
||||
<template v-if="banners.length > 0">
|
||||
<slide
|
||||
v-for="(banner, index) in banners"
|
||||
:key="index"
|
||||
:slot="`slide-${index}`"
|
||||
title=" "
|
||||
>
|
||||
<a
|
||||
:href="
|
||||
banner.slider_path != ''
|
||||
? banner.slider_path
|
||||
: 'javascript:void(0);'
|
||||
"
|
||||
>
|
||||
<img
|
||||
class="col-12 no-padding banner-icon"
|
||||
:src="`${$root.baseUrl}/storage/${banner.path}`"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="show-content"
|
||||
v-html="banner.content.replace('\r\n', '')"
|
||||
></div>
|
||||
</a>
|
||||
</slide>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<slide slot="slide-0">
|
||||
<img
|
||||
loading="lazy"
|
||||
class="col-12 no-padding banner-icon"
|
||||
:src="defaultBanner"
|
||||
alt=""
|
||||
/>
|
||||
</slide>
|
||||
</template>
|
||||
</carousel-component>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['direction', 'defaultBanner', 'banners'],
|
||||
|
||||
mounted: function() {
|
||||
let banners = this.$el.querySelectorAll('img');
|
||||
banners.forEach(banner => {
|
||||
banner.style.display = 'block';
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -71,6 +71,7 @@ Vue.component('sidebar-component', require('./UI/components/sidebar'));
|
|||
Vue.component('product-card', require('./UI/components/product-card'));
|
||||
Vue.component('wishlist-component', require('./UI/components/wishlist'));
|
||||
Vue.component('carousel-component', require('./UI/components/carousel'));
|
||||
Vue.component('slider-component', require('./UI/components/banners'));
|
||||
Vue.component('child-sidebar', require('./UI/components/child-sidebar'));
|
||||
Vue.component('card-list-header', require('./UI/components/card-header'));
|
||||
Vue.component('logo-component', require('./UI/components/image-logo'));
|
||||
|
|
|
|||
|
|
@ -1,70 +1,9 @@
|
|||
@php
|
||||
$direction = core()->getCurrentLocale()->direction;
|
||||
@endphp
|
||||
|
||||
@if ($velocityMetaData && $velocityMetaData->slider)
|
||||
<div class="slider-container">
|
||||
<slider-component direction="{{ $direction }}"></slider-component>
|
||||
<slider-component
|
||||
direction="{{ core()->getCurrentLocale()->direction }}"
|
||||
default-banner="{{ asset('/themes/velocity/assets/images/banner.webp') }}"
|
||||
:banners="{{ json_encode($sliderData) }}">
|
||||
</slider-component>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@push('scripts')
|
||||
<script type="text/x-template" id="slider-template">
|
||||
<div class="slides-container {{ $direction }}">
|
||||
<carousel-component
|
||||
loop="true"
|
||||
timeout="5000"
|
||||
autoplay="true"
|
||||
slides-per-page="1"
|
||||
navigation-enabled="hide"
|
||||
:locale-direction="direction"
|
||||
:slides-count="{{ ! empty($sliderData) ? sizeof($sliderData) : 1 }}">
|
||||
|
||||
@if (! empty($sliderData))
|
||||
@foreach ($sliderData as $index => $slider)
|
||||
|
||||
@php
|
||||
$textContent = str_replace("\r\n", '', $slider['content']);
|
||||
@endphp
|
||||
<slide slot="slide-{{ $index }}" title=" ">
|
||||
<a @if($slider['slider_path']) href="{{ $slider['slider_path'] }}" @endif>
|
||||
<img
|
||||
class="col-12 no-padding banner-icon"
|
||||
src="{{ url()->to('/') . '/storage/' . $slider['path'] }}" />
|
||||
|
||||
<div class="show-content" v-html="'{{ $textContent }}'">
|
||||
</div>
|
||||
</a>
|
||||
</slide>
|
||||
|
||||
@endforeach
|
||||
@else
|
||||
<slide slot="slide-0">
|
||||
<img
|
||||
loading="lazy"
|
||||
class="col-12 no-padding banner-icon"
|
||||
src="{{ asset('/themes/velocity/assets/images/banner.webp') }}"
|
||||
alt=""/>
|
||||
</slide>
|
||||
@endif
|
||||
|
||||
</carousel-component>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type='text/javascript'>
|
||||
(() => {
|
||||
Vue.component('slider-component', {
|
||||
template: '#slider-template',
|
||||
props: ['direction'],
|
||||
|
||||
mounted: function () {
|
||||
let banners = this.$el.querySelectorAll('img');
|
||||
banners.forEach(banner => {
|
||||
banner.style.display = 'block';
|
||||
});
|
||||
}
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
@endpush
|
||||
Loading…
Reference in New Issue