product video added for velocity theme
This commit is contained in:
rahulshukla-home
parent
0dacfd8072
commit
296cb99d4d
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"/js/velocity.js": "/js/velocity.js?id=4ac9d3094b2372ee0b3e",
|
||||
"/js/velocity.js": "/js/velocity.js?id=23ccbda2da72767600ac",
|
||||
"/css/velocity-admin.css": "/css/velocity-admin.css?id=4322502d80a0e4a0affd",
|
||||
"/css/velocity.css": "/css/velocity.css?id=d1461e1147981876a7fd"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,13 @@
|
|||
<template>
|
||||
<div class="magnifier">
|
||||
<img
|
||||
:src="src"
|
||||
<video :key=this.activeImageVideoURL v-if="currentType == 'video'" width="500" height="450" controls>
|
||||
<source :src=this.activeImageVideoURL ref="activeProductImage"
|
||||
id="active-product-image"
|
||||
class="main-product-image" type="video/mp4">
|
||||
</video>
|
||||
|
||||
<img v-else
|
||||
:src=this.activeImageVideoURL
|
||||
:data-zoom-image="src"
|
||||
ref="activeProductImage"
|
||||
id="active-product-image"
|
||||
|
|
@ -13,12 +19,14 @@
|
|||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
props: ['src'],
|
||||
props: ['src', 'type'],
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
'activeImage': null,
|
||||
'activeImageElement': null,
|
||||
activeImageVideoURL: '',
|
||||
currentType: '',
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -26,17 +34,24 @@
|
|||
/* store image related info in global variables */
|
||||
this.activeImageElement = this.$refs.activeProductImage;
|
||||
|
||||
this.currentType = this.type;
|
||||
this.activeImageVideoURL = this.src;
|
||||
|
||||
/* convert into jQuery object */
|
||||
this.activeImage = new jQuery.fn.init(this.activeImageElement);
|
||||
|
||||
/* initialise zoom */
|
||||
this.elevateZoom();
|
||||
|
||||
this.$root.$on('changeMagnifiedImage', ({smallImageUrl, largeImageUrl}) => {
|
||||
this.$root.$on('changeMagnifiedImage', ({smallImageUrl, largeImageUrl, currentType}) => {
|
||||
/* removed old instance */
|
||||
$('.zoomContainer').remove();
|
||||
this.activeImage.removeData('elevateZoom');
|
||||
|
||||
this.currentType = currentType;
|
||||
|
||||
this.activeImageVideoURL = largeImageUrl;
|
||||
|
||||
/* update source for images */
|
||||
this.activeImageElement.src = smallImageUrl;
|
||||
this.activeImage.data('zoom-image', (largeImageUrl ? largeImageUrl : smallImageUrl));
|
||||
|
|
|
|||
|
|
@ -1,75 +1,94 @@
|
|||
@inject ('productImageHelper', 'Webkul\Product\Helpers\ProductImage')
|
||||
@inject ('productVideoHelper', 'Webkul\Product\Helpers\ProductVideo')
|
||||
@inject ('wishListHelper', 'Webkul\Customer\Helpers\Wishlist')
|
||||
|
||||
@php
|
||||
$images = $productImageHelper->getGalleryImages($product);
|
||||
$videos = $productVideoHelper->getVideos($product);
|
||||
|
||||
if (! count($images)) {
|
||||
$images[0] = $productImageHelper->getProductBaseImage($product);
|
||||
$videoData = $imageData = [];
|
||||
|
||||
foreach ($videos as $key => $video) {
|
||||
$videoData[$key]['type'] = $video['type'];
|
||||
$videoData[$key]['large_image_url'] = $videoData[$key]['small_image_url']= $videoData[$key]['medium_image_url']= $videoData[$key]['original_image_url'] = $video['video_url'];
|
||||
}
|
||||
|
||||
foreach ($images as $key => $image) {
|
||||
$imageData[$key]['type'] = '';
|
||||
$imageData[$key]['large_image_url'] = $image['large_image_url'];
|
||||
$imageData[$key]['small_image_url'] = $image['small_image_url'];
|
||||
$imageData[$key]['medium_image_url'] = $image['medium_image_url'];
|
||||
$imageData[$key]['original_image_url'] = $image['original_image_url'];
|
||||
}
|
||||
|
||||
$images = array_merge($imageData, $videoData);
|
||||
@endphp
|
||||
|
||||
{!! view_render_event('bagisto.shop.products.view.gallery.before', ['product' => $product]) !!}
|
||||
|
||||
<div class="product-image-group">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<magnify-image src="{{ $images[0]['large_image_url'] }}" v-if="!isMobile()">
|
||||
</magnify-image>
|
||||
<div class="row col-12">
|
||||
<magnify-image src="{{ $images[0]['large_image_url'] }}" type="{{ $images[0]['type'] }}" v-if="!isMobile()">
|
||||
</magnify-image>
|
||||
|
||||
<img
|
||||
v-else
|
||||
class="vc-small-product-image"
|
||||
src="{{ $images[0]['large_image_url'] }}" alt="" />
|
||||
</div>
|
||||
<img
|
||||
v-else
|
||||
class="vc-small-product-image"
|
||||
src="{{ $images[0]['large_image_url'] }}" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<product-gallery></product-gallery>
|
||||
</div>
|
||||
|
||||
<div class="row col-12">
|
||||
<product-gallery></product-gallery>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{!! view_render_event('bagisto.shop.products.view.gallery.after', ['product' => $product]) !!}
|
||||
|
||||
<script type="text/x-template" id="product-gallery-template">
|
||||
<ul class="thumb-list col-12 row ltr" type="none">
|
||||
<li class="arrow left" @click="scroll('prev')" v-if="thumbs.length > 4">
|
||||
<i class="rango-arrow-left fs24"></i>
|
||||
</li>
|
||||
|
||||
<carousel-component
|
||||
slides-per-page="4"
|
||||
:id="galleryCarouselId"
|
||||
pagination-enabled="hide"
|
||||
navigation-enabled="hide"
|
||||
add-class="product-gallery"
|
||||
:slides-count="thumbs.length">
|
||||
|
||||
<slide :slot="`slide-${index}`" v-for="(thumb, index) in thumbs">
|
||||
<li
|
||||
@click="changeImage({
|
||||
largeImageUrl: thumb.large_image_url,
|
||||
originalImageUrl: thumb.original_image_url,
|
||||
currentType: thumb.type
|
||||
})"
|
||||
:class="`thumb-frame ${index + 1 == 4 ? '' : 'mr5'} ${thumb.large_image_url == currentLargeImageUrl ? 'active' : ''}`"
|
||||
>
|
||||
|
||||
<video v-if="thumb.type == 'video'" width="110" height="110" controls>
|
||||
<source :src="thumb.small_image_url" type="video/mp4">
|
||||
{{ __('admin::app.catalog.products.not-support-video') }}
|
||||
</video>
|
||||
|
||||
<div v-else
|
||||
class="bg-image"
|
||||
:style="`background-image: url(${thumb.small_image_url})`">
|
||||
</div>
|
||||
</li>
|
||||
</slide>
|
||||
</carousel-component>
|
||||
|
||||
<li class="arrow right" @click="scroll('next')" v-if="thumbs.length > 4">
|
||||
<i class="rango-arrow-right fs24"></i>
|
||||
</li>
|
||||
</ul>
|
||||
</script>
|
||||
|
||||
@push('scripts')
|
||||
<script type="text/x-template" id="product-gallery-template">
|
||||
<ul class="thumb-list col-12 row ltr" type="none">
|
||||
<li class="arrow left" @click="scroll('prev')" v-if="thumbs.length > 4">
|
||||
<i class="rango-arrow-left fs24"></i>
|
||||
</li>
|
||||
|
||||
<carousel-component
|
||||
slides-per-page="4"
|
||||
:id="galleryCarouselId"
|
||||
pagination-enabled="hide"
|
||||
navigation-enabled="hide"
|
||||
add-class="product-gallery"
|
||||
:slides-count="thumbs.length">
|
||||
|
||||
<slide :slot="`slide-${index}`" v-for="(thumb, index) in thumbs">
|
||||
<li
|
||||
@mouseover="changeImage({
|
||||
largeImageUrl: thumb.large_image_url,
|
||||
originalImageUrl: thumb.original_image_url,
|
||||
})"
|
||||
:class="`thumb-frame ${index + 1 == 4 ? '' : 'mr5'} ${thumb.large_image_url == currentLargeImageUrl ? 'active' : ''}`"
|
||||
>
|
||||
|
||||
<div
|
||||
class="bg-image"
|
||||
:style="`background-image: url(${thumb.small_image_url})`">
|
||||
</div>
|
||||
</li>
|
||||
</slide>
|
||||
</carousel-component>
|
||||
|
||||
<li class="arrow right" @click="scroll('next')" v-if="thumbs.length > 4">
|
||||
<i class="rango-arrow-right fs24"></i>
|
||||
</li>
|
||||
</ul>
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
(() => {
|
||||
var galleryImages = @json($images);
|
||||
|
|
@ -83,6 +102,7 @@
|
|||
galleryCarouselId: 'product-gallery-carousel',
|
||||
currentLargeImageUrl: '',
|
||||
currentOriginalImageUrl: '',
|
||||
currentType: '',
|
||||
counter: {
|
||||
up: 0,
|
||||
down: 0,
|
||||
|
|
@ -96,6 +116,7 @@
|
|||
this.changeImage({
|
||||
largeImageUrl: this.images[0]['large_image_url'],
|
||||
originalImageUrl: this.images[0]['original_image_url'],
|
||||
currentType: this.images[0]['type']
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -107,11 +128,12 @@
|
|||
this.changeImage({
|
||||
largeImageUrl: this.images[0]['large_image_url'],
|
||||
originalImageUrl: this.images[0]['original_image_url'],
|
||||
currentType: this.images[0]['type']
|
||||
});
|
||||
|
||||
eventBus.$on('configurable-variant-update-images-event', this.updateImages);
|
||||
|
||||
this.prepareThumbs()
|
||||
this.prepareThumbs();
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
@ -127,13 +149,17 @@
|
|||
});
|
||||
},
|
||||
|
||||
changeImage: function({largeImageUrl, originalImageUrl}) {
|
||||
changeImage: function({largeImageUrl, originalImageUrl, currentType}) {
|
||||
this.currentLargeImageUrl = largeImageUrl;
|
||||
|
||||
this.currentOriginalImageUrl = originalImageUrl;
|
||||
|
||||
this.currentType = currentType;
|
||||
|
||||
this.$root.$emit('changeMagnifiedImage', {
|
||||
smallImageUrl: this.currentOriginalImageUrl
|
||||
smallImageUrl: this.currentOriginalImageUrl,
|
||||
largeImageUrl: this.currentLargeImageUrl,
|
||||
currentType : this.currentType
|
||||
});
|
||||
|
||||
let productImage = $('.vc-small-product-image');
|
||||
|
|
|
|||
Loading…
Reference in New Issue