merdan
/
sarga
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Some Changes

This commit is contained in:
devansh bawari 2020-10-30 16:29:34 +05:30
parent ae0605a49c
commit 4035e4f892
6 changed files with 135 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/Webkul/Velocity/publishable/assets/js/velocity.js vendored
View File

File diff suppressed because one or more lines are too long

2
packages/Webkul/Velocity/publishable/assets/mix-manifest.json
View File

@ -1,5 +1,5 @@
{
"/js/velocity.js": "/js/velocity.js?id=ec2fcac08b9c220c4ec6",
"/js/velocity.js": "/js/velocity.js?id=a90cfe84dba927c8521c",
"/css/velocity-admin.css": "/css/velocity-admin.css?id=4322502d80a0e4a0affd",
"/css/velocity.css": "/css/velocity.css?id=deeefa4677371b494de3"
}

106
packages/Webkul/Velocity/src/Resources/assets/js/UI/components/featured-products.vue Normal file
View File

@ -0,0 +1,106 @@
<template>
<div class="container-fluid featured-products">
<shimmer-component v-if="isLoading"></shimmer-component>
<template v-else-if="featuredProducts.length > 0">
<card-list-header :heading="cardTitle">
</card-list-header>
<div class="carousel-products" :class="localeDirection">
<carousel-component
:slides-per-page="slidesPerPage"
navigation-enabled="hide"
pagination-enabled="hide"
id="fearured-products-carousel"
:locale-direction="localeDirection"
:autoplay="false"
:slides-count="featuredProducts.length">
<slide
:key="index"
:slot="`slide-${index}`"
v-for="(product, index) in featuredProducts">
<product-card
:list="list"
:product="product">
</product-card>
</slide>
</carousel-component>
</div>
</template>
</div>
</template>
<script>
export default {
props: [
'cardTitle',
'localeDirection'
],
data: function () {
return {
list: false,
isLoading: true,
featuredProducts: [],
slidesPerPage: 6,
windowWidth: window.innerWidth,
}
},
mounted: function () {
this.$nextTick(() => {
window.addEventListener('resize', this.onResize);
})
this.getFeaturedProducts();
this.setSlidesPerPage(this.windowWidth);
},
watch: {
windowWidth(newWidth, oldWidth) {
this.setSlidesPerPage(newWidth);
}
},
methods: {
getFeaturedProducts: function () {
this.$http.get(`${this.baseUrl}/category-details?category-slug=featured-products&count={{ $count }}`)
.then(response => {
var count = '{{$count}}';
if (response.data.status && count != 0 )
{
this.featuredProducts = response.data.products;
}else{
this.featuredProducts = 0;
}
this.isLoading = false;
})
.catch(error => {
this.isLoading = false;
console.log(this.__('error.something_went_wrong'));
})
},
onResize: function () {
this.windowWidth = window.innerWidth;
},
setSlidesPerPage: function (width) {
if (width >= 992) {
this.slidesPerPage = 6;
} else if (width < 992 && width >= 420) {
this.slidesPerPage = 4;
} else {
this.slidesPerPage = 2;
}
console.log(width);
}
},
beforeDestroy: function () {
window.removeEventListener('resize', this.onResize);
},
}
</script>

1
packages/Webkul/Velocity/src/Resources/assets/js/app.js vendored
View File

@ -53,6 +53,7 @@ Vue.component('responsive-sidebar', require('./UI/components/responsive-sidebar'
Vue.component('product-quick-view', require('./UI/components/product-quick-view'));
Vue.component('product-quick-view-btn', require('./UI/components/product-quick-view-btn'));
Vue.component('category-products', require('./UI/components/category-products'));
Vue.component('featured-products', require('./UI/components/featured-products'));
Vue.component('hot-category', require('./UI/components/hot-category'));
Vue.component('popular-category', require('./UI/components/popular-category'));

27
packages/Webkul/Velocity/src/Resources/assets/sass/components/media.scss vendored
View File

@ -133,13 +133,9 @@
.product-card-new {
max-width: 16rem;
max-width: 19rem;
&.grid-card {
.product-image-container {
height: 165px;
}
.card-body {
.product-name {
width: 13rem;
@ -959,6 +955,7 @@
}
}
/* medium devices */
@media only screen and (max-width: 768px) {
.modal-container {
left: 10%;
@ -1022,4 +1019,24 @@
.quick-view-in-list {
display: none;
}
.product-card-new {
max-width: 18rem;
}
}
/* small devices */
@media only screen and (max-width: 420px) {
.sticky-header {
display: none !important;
}
#home-right-bar-container {
position: unset;
top: unset;
}
.product-card-new {
max-width: 16rem;
}
}

103
packages/Webkul/Velocity/src/Resources/views/shop/home/featured-products.blade.php
View File

@ -4,102 +4,7 @@
$direction = core()->getCurrentLocale()->direction == 'rtl' ? 'rtl' : 'ltr';
@endphp
<featured-products></featured-products>
@push('scripts')
<script type="text/x-template" id="featured-products-template">
<div class="container-fluid featured-products">
<shimmer-component v-if="isLoading && !isMobileView"></shimmer-component>
<template v-else-if="featuredProducts.length > 0">
<card-list-header heading="{{ __('shop::app.home.featured-products') }}">
</card-list-header>
<div class="carousel-products vc-full-screen {{ $direction }}" v-if="!isMobileView">
<carousel-component
slides-per-page="6"
navigation-enabled="hide"
pagination-enabled="hide"
id="fearured-products-carousel"
locale-direction="{{ $direction }}"
:autoplay="false"
:slides-count="featuredProducts.length">
<slide
:key="index"
:slot="`slide-${index}`"
v-for="(product, index) in featuredProducts">
<product-card
:list="list"
:product="product">
</product-card>
</slide>
</carousel-component>
</div>
<div class="carousel-products vc-small-screen {{ $direction }}" v-else>
<carousel-component
slides-per-page="2"
navigation-enabled="hide"
pagination-enabled="hide"
id="fearured-products-carousel"
locale-direction="{{ $direction }}"
:slides-count="featuredProducts.length">
<slide
:key="index"
:slot="`slide-${index}`"
v-for="(product, index) in featuredProducts">
<product-card
:list="list"
:product="product">
</product-card>
</slide>
</carousel-component>
</div>
</template>
</div>
</script>
<script type="text/javascript">
(() => {
Vue.component('featured-products', {
'template': '#featured-products-template',
data: function () {
return {
'list': false,
'isLoading': true,
'featuredProducts': [],
'isMobileView': this.$root.isMobile(),
}
},
mounted: function () {
this.getFeaturedProducts();
},
methods: {
'getFeaturedProducts': function () {
this.$http.get(`${this.baseUrl}/category-details?category-slug=featured-products&count={{ $count }}`)
.then(response => {
var count = '{{$count}}';
if (response.data.status && count != 0 )
{
this.featuredProducts = response.data.products;
}else{
this.featuredProducts = 0;
}
this.isLoading = false;
})
.catch(error => {
this.isLoading = false;
console.log(this.__('error.something_went_wrong'));
})
}
}
})
})()
</script>
@endpush
<featured-products
card-title="{{ __('shop::app.home.featured-products') }}"
locale-direction="{{ $direction }}">
</featured-products>