Merge pull request #4211 from devansh-webkul/issue-3929
Carousel Space Issue & Lighthouse Work #3929
This commit is contained in:
Jitendra Singh
GitHub
commit
2dbbcfa1a5
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"/js/velocity.js": "/js/velocity.js?id=3881062524b183f96b0c",
|
||||
"/js/velocity.js": "/js/velocity.js?id=718060b43be7aaf645f7",
|
||||
"/css/velocity-admin.css": "/css/velocity-admin.css?id=4322502d80a0e4a0affd",
|
||||
"/css/velocity.css": "/css/velocity.css?id=2405c8967f518a3ce499"
|
||||
"/css/velocity.css": "/css/velocity.css?id=bbe2b8053a6406fd7f64"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,98 +0,0 @@
|
|||
<template>
|
||||
<div class="container-fluid remove-padding-margin">
|
||||
<shimmer-component v-if="isLoading && !isMobileView"></shimmer-component>
|
||||
|
||||
<template v-else-if="categoryProducts.length > 0">
|
||||
<card-list-header
|
||||
:heading="categoryDetails.name"
|
||||
:view-all="`${this.baseUrl}/${categoryDetails.slug}`">
|
||||
</card-list-header>
|
||||
|
||||
<div class="carousel-products vc-full-screen ltr" v-if="!isMobileView">
|
||||
<carousel-component
|
||||
slides-per-page="6"
|
||||
navigation-enabled="hide"
|
||||
pagination-enabled="hide"
|
||||
:slides-count="categoryProducts.length"
|
||||
locale-direction="localeDirection"
|
||||
:id="`${categoryDetails.name}-carousel`">
|
||||
|
||||
<slide
|
||||
:key="index"
|
||||
:slot="`slide-${index}`"
|
||||
v-for="(product, index) in categoryProducts">
|
||||
<product-card
|
||||
:list="list"
|
||||
:product="product">
|
||||
</product-card>
|
||||
</slide>
|
||||
</carousel-component>
|
||||
</div>
|
||||
|
||||
<div class="carousel-products vc-small-screen" v-else>
|
||||
<carousel-component
|
||||
slides-per-page="2"
|
||||
navigation-enabled="hide"
|
||||
pagination-enabled="hide"
|
||||
:slides-count="categoryProducts.length"
|
||||
locale-direction="localeDirection"
|
||||
:id="`${categoryDetails.name}-carousel`">
|
||||
|
||||
<slide
|
||||
:key="index"
|
||||
:slot="`slide-${index}`"
|
||||
v-for="(product, index) in categoryProducts">
|
||||
<product-card
|
||||
:list="list"
|
||||
:product="product">
|
||||
</product-card>
|
||||
</slide>
|
||||
</carousel-component>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: [
|
||||
'categorySlug',
|
||||
'localeDirection'
|
||||
],
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
isLoading: true,
|
||||
isCategory: false,
|
||||
heading: 'customer',
|
||||
categoryProducts: [],
|
||||
isMobileView: this.$root.isMobile(),
|
||||
}
|
||||
},
|
||||
|
||||
mounted: function () {
|
||||
this.getCategoryDetails();
|
||||
},
|
||||
|
||||
methods: {
|
||||
'getCategoryDetails': function () {
|
||||
this.$http.get(`${this.baseUrl}/category-details?category-slug=${this.categorySlug}`)
|
||||
.then(response => {
|
||||
if (response.data.status) {
|
||||
this.list = response.data.list;
|
||||
this.categoryDetails = response.data.categoryDetails;
|
||||
this.categoryProducts = response.data.categoryProducts;
|
||||
|
||||
this.isCategory = true;
|
||||
}
|
||||
|
||||
this.isLoading = false;
|
||||
})
|
||||
.catch(error => {
|
||||
this.isLoading = false;
|
||||
console.log(this.__('error.something_went_wrong'));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
<template>
|
||||
<div class="container-fluid">
|
||||
<shimmer-component v-if="isLoading"></shimmer-component>
|
||||
|
||||
<template v-else-if="productCollections.length > 0">
|
||||
<card-list-header
|
||||
:heading="isCategory ? categoryDetails.name : productTitle"
|
||||
:view-all="isCategory ? `${this.baseUrl}/${categoryDetails.slug}` : ''">
|
||||
</card-list-header>
|
||||
|
||||
<div class="row" :class="localeDirection">
|
||||
<div
|
||||
class="col-md-12 no-padding carousel-products"
|
||||
:class="showRecentlyViewed ? 'with-recent-viewed col-lg-9' : 'col-lg-12'">
|
||||
<carousel-component
|
||||
:slides-per-page="slidesPerPage"
|
||||
navigation-enabled="hide"
|
||||
pagination-enabled="hide"
|
||||
:id="isCategory ? `${categoryDetails.name}-carousel` : productId"
|
||||
:locale-direction="localeDirection"
|
||||
:slides-count="productCollections.length"
|
||||
v-if="count != 0">
|
||||
|
||||
<slide
|
||||
:key="index"
|
||||
:slot="`slide-${index}`"
|
||||
v-for="(product, index) in productCollections">
|
||||
<product-card
|
||||
:list="list"
|
||||
:product="product">
|
||||
</product-card>
|
||||
</slide>
|
||||
</carousel-component>
|
||||
</div>
|
||||
|
||||
<recently-viewed
|
||||
:title="recentlyViewedTitle"
|
||||
:no-data-text="noDataText"
|
||||
:add-class="`col-lg-3 col-md-12 ${localeDirection}`"
|
||||
quantity="3"
|
||||
add-class-wrapper=""
|
||||
v-if="showRecentlyViewed">
|
||||
</recently-viewed>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
count: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
productId: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
productTitle: String,
|
||||
productRoute: String,
|
||||
localeDirection: String,
|
||||
showRecentlyViewed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
recentlyViewedTitle: String,
|
||||
noDataText: String,
|
||||
},
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
list: false,
|
||||
isLoading: true,
|
||||
isCategory: false,
|
||||
productCollections: [],
|
||||
slidesPerPage: 6,
|
||||
windowWidth: window.innerWidth,
|
||||
}
|
||||
},
|
||||
|
||||
mounted: function () {
|
||||
this.$nextTick(() => {
|
||||
window.addEventListener('resize', this.onResize);
|
||||
});
|
||||
|
||||
this.getProducts();
|
||||
this.setSlidesPerPage(this.windowWidth);
|
||||
},
|
||||
|
||||
watch: {
|
||||
/* checking the window width */
|
||||
windowWidth(newWidth, oldWidth) {
|
||||
this.setSlidesPerPage(newWidth);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
/* fetch product collections */
|
||||
getProducts: function () {
|
||||
this.$http.get(this.productRoute)
|
||||
.then(response => {
|
||||
let count = this.count;
|
||||
|
||||
if (response.data.status && count != 0) {
|
||||
if (response.data.categoryProducts !== undefined) {
|
||||
this.isCategory = true;
|
||||
this.categoryDetails = response.data.categoryDetails;
|
||||
this.productCollections = response.data.categoryProducts;
|
||||
} else {
|
||||
this.productCollections = response.data.products;
|
||||
}
|
||||
} else {
|
||||
this.productCollections = 0;
|
||||
}
|
||||
|
||||
this.isLoading = false;
|
||||
})
|
||||
.catch(error => {
|
||||
this.isLoading = false;
|
||||
console.log(this.__('error.something_went_wrong'));
|
||||
})
|
||||
},
|
||||
|
||||
/* on resize set window width */
|
||||
onResize: function () {
|
||||
this.windowWidth = window.innerWidth;
|
||||
},
|
||||
|
||||
/* setting slides on the basis of window width */
|
||||
setSlidesPerPage: function (width) {
|
||||
if (width >= 992) {
|
||||
this.slidesPerPage = 6;
|
||||
} else if (width < 992 && width >= 420) {
|
||||
this.slidesPerPage = 4;
|
||||
} else {
|
||||
this.slidesPerPage = 2;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/* removing event */
|
||||
beforeDestroy: function () {
|
||||
window.removeEventListener('resize', this.onResize);
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<template>
|
||||
<div :class="addClass">
|
||||
<div class="row remove-padding-margin">
|
||||
<div class="col-12 no-padding">
|
||||
<h2 class="fs20 fw6 mb15" v-text="title"></h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :class="`recetly-viewed-products-wrapper ${addClassWrapper}`">
|
||||
<div
|
||||
:key="Math.random()"
|
||||
class="row small-card-container"
|
||||
v-for="(product, index) in recentlyViewed">
|
||||
|
||||
<div class="col-4 product-image-container mr15">
|
||||
<a :href="`${baseUrl}/${product.urlKey}`" class="unset">
|
||||
<div class="product-image" :style="`background-image: url(${product.image})`"></div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-8 no-padding card-body align-vertical-top" v-if="product.urlKey">
|
||||
<a :href="`${baseUrl}/${product.urlKey}`" class="unset no-padding">
|
||||
<div class="product-name">
|
||||
<span class="fs16 text-nowrap" v-text="product.name"></span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-html="product.priceHTML"
|
||||
class="fs18 card-current-price fw6">
|
||||
</div>
|
||||
|
||||
<star-ratings v-if="product.rating > 0"
|
||||
push-class="display-inbl"
|
||||
:ratings="product.rating">
|
||||
</star-ratings>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span
|
||||
class="fs16"
|
||||
v-if="!recentlyViewed ||(recentlyViewed && Object.keys(recentlyViewed).length == 0)"
|
||||
v-text="noDataText">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: [
|
||||
'title',
|
||||
'noDataText',
|
||||
'quantity',
|
||||
'addClass',
|
||||
'addClassWrapper'
|
||||
],
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
recentlyViewed: (() => {
|
||||
let storedRecentlyViewed = window.localStorage.recentlyViewed;
|
||||
if (storedRecentlyViewed) {
|
||||
var slugs = JSON.parse(storedRecentlyViewed);
|
||||
var updatedSlugs = {};
|
||||
|
||||
slugs = slugs.reverse();
|
||||
|
||||
slugs.forEach(slug => {
|
||||
updatedSlugs[slug] = {};
|
||||
});
|
||||
|
||||
return updatedSlugs;
|
||||
}
|
||||
})(),
|
||||
}
|
||||
},
|
||||
|
||||
created: function () {
|
||||
for (const slug in this.recentlyViewed) {
|
||||
if (slug) {
|
||||
this.$http(`${this.baseUrl}/product-details/${slug}`)
|
||||
.then(response => {
|
||||
if (response.data.status) {
|
||||
this.$set(this.recentlyViewed, response.data.details.urlKey, response.data.details);
|
||||
} else {
|
||||
delete this.recentlyViewed[response.data.slug];
|
||||
this.$set(this, 'recentlyViewed', this.recentlyViewed);
|
||||
|
||||
this.$forceUpdate();
|
||||
}
|
||||
})
|
||||
.catch(error => {})
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -52,7 +52,8 @@ Vue.component("shimmer-component", require("./UI/components/shimmer-component"))
|
|||
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('recently-viewed', require('./UI/components/recently-viewed'));
|
||||
Vue.component('product-collections', require('./UI/components/product-collections'));
|
||||
Vue.component('hot-category', require('./UI/components/hot-category'));
|
||||
Vue.component('popular-category', require('./UI/components/popular-category'));
|
||||
|
||||
|
|
|
|||
|
|
@ -171,13 +171,9 @@
|
|||
|
||||
.product-card-new {
|
||||
|
||||
max-width: 16rem;
|
||||
max-width: 19rem;
|
||||
|
||||
&.grid-card {
|
||||
.product-image-container {
|
||||
height: 165px;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
.product-name {
|
||||
width: 13rem;
|
||||
|
|
@ -990,7 +986,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* small devices */
|
||||
/* medium devices */
|
||||
@media only screen and (max-width: 768px) {
|
||||
.sticky-header {
|
||||
display: none !important;
|
||||
|
|
@ -1054,6 +1050,22 @@
|
|||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
/* very small devices */
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<category-products
|
||||
category-slug="{{ $category }}"
|
||||
<product-collections
|
||||
product-title="{{ __('shop::app.home.featured-products') }}"
|
||||
product-route="{{ route('velocity.category.details', ['category-slug' => $category]) }}"
|
||||
locale-direction="{{ core()->getCurrentLocale()->direction == 'rtl' ? 'rtl' : 'ltr' }}">
|
||||
</category-products>
|
||||
</product-collections>
|
||||
|
|
@ -4,102 +4,10 @@
|
|||
$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"></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 }}">
|
||||
<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 }}">
|
||||
<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
|
||||
<product-collections
|
||||
product-id="fearured-products-carousel"
|
||||
product-title="{{ __('shop::app.home.featured-products') }}"
|
||||
product-route="{{ route('velocity.category.details', ['category-slug' => 'featured-products', 'count' => $count]) }}"
|
||||
locale-direction="{{ $direction }}"
|
||||
count="{{ (int) $count }}">
|
||||
</product-collections>
|
||||
|
|
@ -4,185 +4,17 @@
|
|||
$direction = core()->getCurrentLocale()->direction == 'rtl' ? 'rtl' : 'ltr';
|
||||
@endphp
|
||||
|
||||
<new-products></new-products>
|
||||
{!! view_render_event('bagisto.shop.new-products.before') !!}
|
||||
|
||||
@push('scripts')
|
||||
<script type="text/x-template" id="new-products-template">
|
||||
<div class="container-fluid">
|
||||
<shimmer-component v-if="isLoading"></shimmer-component>
|
||||
<product-collections
|
||||
count="{{ (int) $count }}"
|
||||
product-id="new-products-carousel"
|
||||
product-title="{{ __('shop::app.home.new-products') }}"
|
||||
product-route="{{ route('velocity.category.details', ['category-slug' => 'new-products', 'count' => $count]) }}"
|
||||
locale-direction="{{ $direction }}"
|
||||
show-recently-viewed="{{ (Boolean) $showRecentlyViewed }}"
|
||||
recently-viewed-title="{{ __('velocity::app.products.recently-viewed') }}"
|
||||
no-data-text="{{ __('velocity::app.products.not-available') }}">
|
||||
</product-collections>
|
||||
|
||||
<template v-else-if="newProducts.length > 0">
|
||||
<card-list-header heading="{{ __('shop::app.home.new-products') }}">
|
||||
</card-list-header>
|
||||
|
||||
{!! view_render_event('bagisto.shop.new-products.before') !!}
|
||||
|
||||
@if ($showRecentlyViewed)
|
||||
@push('css')
|
||||
<style>
|
||||
.recently-viewed {
|
||||
padding-right: 0px;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
<div class="row {{ $direction }}">
|
||||
<div class="col-9 no-padding carousel-products vc-full-screen with-recent-viewed">
|
||||
<carousel-component
|
||||
slides-per-page="5"
|
||||
navigation-enabled="hide"
|
||||
pagination-enabled="hide"
|
||||
id="new-products-carousel"
|
||||
locale-direction="{{ $direction }}"
|
||||
:slides-count="newProducts.length">
|
||||
|
||||
<slide
|
||||
:key="index"
|
||||
:slot="`slide-${index}`"
|
||||
v-for="(product, index) in newProducts">
|
||||
<product-card
|
||||
:list="list"
|
||||
:product="product">
|
||||
</product-card>
|
||||
</slide>
|
||||
</carousel-component>
|
||||
</div>
|
||||
|
||||
<div class="col-12 no-padding carousel-products vc-small-screen">
|
||||
<carousel-component
|
||||
slides-per-page="2"
|
||||
navigation-enabled="hide"
|
||||
pagination-enabled="hide"
|
||||
id="new-products-carousel"
|
||||
locale-direction="{{ $direction }}"
|
||||
:slides-count="newProducts.length">
|
||||
|
||||
<slide
|
||||
:key="index"
|
||||
:slot="`slide-${index}`"
|
||||
v-for="(product, index) in newProducts">
|
||||
<product-card
|
||||
:list="list"
|
||||
:product="product">
|
||||
</product-card>
|
||||
</slide>
|
||||
</carousel-component>
|
||||
</div>
|
||||
|
||||
@include ('shop::products.list.recently-viewed', [
|
||||
'quantity' => 3,
|
||||
'addClass' => 'col-lg-3 col-md-12',
|
||||
])
|
||||
</div>
|
||||
@else
|
||||
<div class="carousel-products vc-full-screen {{ $direction }}">
|
||||
<carousel-component
|
||||
slides-per-page="6"
|
||||
navigation-enabled="hide"
|
||||
pagination-enabled="hide"
|
||||
id="new-products-carousel"
|
||||
locale-direction="{{ $direction }}"
|
||||
:slides-count="newProducts.length">
|
||||
|
||||
<slide
|
||||
:key="index"
|
||||
:slot="`slide-${index}`"
|
||||
v-for="(product, index) in newProducts">
|
||||
<product-card
|
||||
:list="list"
|
||||
:product="product">
|
||||
</product-card>
|
||||
</slide>
|
||||
</carousel-component>
|
||||
</div>
|
||||
|
||||
<div class="carousel-products vc-small-screen {{ $direction }}">
|
||||
<carousel-component
|
||||
slides-per-page="2"
|
||||
navigation-enabled="hide"
|
||||
pagination-enabled="hide"
|
||||
id="new-products-carousel"
|
||||
locale-direction="{{ $direction }}"
|
||||
:slides-count="newProducts.length">
|
||||
|
||||
<slide
|
||||
:key="index"
|
||||
:slot="`slide-${index}`"
|
||||
v-for="(product, index) in newProducts">
|
||||
<product-card
|
||||
:list="list"
|
||||
:product="product">
|
||||
</product-card>
|
||||
</slide>
|
||||
</carousel-component>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{!! view_render_event('bagisto.shop.new-products.after') !!}
|
||||
</template>
|
||||
|
||||
@if ($count==0)
|
||||
<template>
|
||||
@if ($showRecentlyViewed)
|
||||
@push('css')
|
||||
<style>
|
||||
.recently-viewed {
|
||||
padding-right: 0px;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
<div class="row {{ $direction }}">
|
||||
<div class="col-9 no-padding carousel-products vc-full-screen with-recent-viewed" v-if="!isMobileView"></div>
|
||||
|
||||
@include ('shop::products.list.recently-viewed', [
|
||||
'quantity' => 3,
|
||||
'addClass' => 'col-lg-3 col-md-12',
|
||||
])
|
||||
</div>
|
||||
@endif
|
||||
</template>
|
||||
@endif
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
(() => {
|
||||
Vue.component('new-products', {
|
||||
'template': '#new-products-template',
|
||||
data: function () {
|
||||
return {
|
||||
'list': false,
|
||||
'isLoading': true,
|
||||
'newProducts': [],
|
||||
'isMobileView': this.$root.isMobile(),
|
||||
}
|
||||
},
|
||||
|
||||
mounted: function () {
|
||||
this.getNewProducts();
|
||||
},
|
||||
|
||||
methods: {
|
||||
'getNewProducts': function () {
|
||||
this.$http.get(`${this.baseUrl}/category-details?category-slug=new-products&count={{ $count }}`)
|
||||
.then(response => {
|
||||
var count = '{{$count}}';
|
||||
if (response.data.status && count != 0){
|
||||
this.newProducts = response.data.products;
|
||||
}else{
|
||||
this.newProducts = 0;
|
||||
}
|
||||
|
||||
this.isLoading = false;
|
||||
})
|
||||
.catch(error => {
|
||||
this.isLoading = false;
|
||||
console.log(this.__('error.something_went_wrong'));
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
@endpush
|
||||
{!! view_render_event('bagisto.shop.new-products.after') !!}
|
||||
|
|
|
|||
|
|
@ -1,111 +1,11 @@
|
|||
@inject ('velocityHelper', 'Webkul\Velocity\Helpers\Helper')
|
||||
@inject ('productRatingHelper', 'Webkul\Product\Helpers\Review')
|
||||
@inject ('productImageHelper', 'Webkul\Product\Helpers\ProductImage')
|
||||
|
||||
@php
|
||||
$direction = core()->getCurrentLocale()->direction;
|
||||
@endphp
|
||||
|
||||
<recently-viewed
|
||||
title="{{ __('velocity::app.products.recently-viewed') }}"
|
||||
no-data-text="{{ __('velocity::app.products.not-available') }}"
|
||||
add-class="{{ isset($addClass) ? $addClass . " $direction": '' }}"
|
||||
quantity="{{ isset($quantity) ? $quantity : null }}"
|
||||
add-class-wrapper="{{ isset($addClassWrapper) ? $addClassWrapper : '' }}">
|
||||
</recently-viewed>
|
||||
|
||||
@push('scripts')
|
||||
<script type="text/x-template" id="recently-viewed-template">
|
||||
<div :class="`${addClass} recently-viewed`">
|
||||
<div class="row remove-padding-margin">
|
||||
<div class="col-12 no-padding">
|
||||
<h2 class="fs20 fw6 mb15">{{ __('velocity::app.products.recently-viewed') }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :class="`recetly-viewed-products-wrapper ${addClassWrapper}`">
|
||||
<div
|
||||
:key="Math.random()"
|
||||
class="row small-card-container"
|
||||
v-for="(product, index) in recentlyViewed">
|
||||
|
||||
<div class="col-4 product-image-container mr15">
|
||||
<a :href="`${baseUrl}/${product.urlKey}`" class="unset">
|
||||
<div class="product-image" :style="`background-image: url(${product.image})`"></div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-8 no-padding card-body align-vertical-top" v-if="product.urlKey">
|
||||
<a :href="`${baseUrl}/${product.urlKey}`" class="unset no-padding">
|
||||
<div class="product-name">
|
||||
<span class="fs16 text-nowrap">@{{ product.name }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-html="product.priceHTML"
|
||||
class="fs18 card-current-price fw6">
|
||||
</div>
|
||||
|
||||
<star-ratings v-if="product.rating > 0"
|
||||
push-class="display-inbl"
|
||||
:ratings="product.rating">
|
||||
</star-ratings>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span
|
||||
class="fs16"
|
||||
v-if="!recentlyViewed ||(recentlyViewed && Object.keys(recentlyViewed).length == 0)"
|
||||
v-text="'{{ __('velocity::app.products.not-available') }}'">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
(() => {
|
||||
Vue.component('recently-viewed', {
|
||||
template: '#recently-viewed-template',
|
||||
props: ['quantity', 'addClass', 'addClassWrapper'],
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
recentlyViewed: (() => {
|
||||
let storedRecentlyViewed = window.localStorage.recentlyViewed;
|
||||
if (storedRecentlyViewed) {
|
||||
var slugs = JSON.parse(storedRecentlyViewed);
|
||||
var updatedSlugs = {};
|
||||
|
||||
slugs = slugs.reverse();
|
||||
|
||||
slugs.forEach(slug => {
|
||||
updatedSlugs[slug] = {};
|
||||
});
|
||||
|
||||
return updatedSlugs;
|
||||
}
|
||||
})(),
|
||||
}
|
||||
},
|
||||
|
||||
created: function () {
|
||||
for (slug in this.recentlyViewed) {
|
||||
if (slug) {
|
||||
this.$http(`${this.baseUrl}/product-details/${slug}`)
|
||||
.then(response => {
|
||||
if (response.data.status) {
|
||||
this.$set(this.recentlyViewed, response.data.details.urlKey, response.data.details);
|
||||
} else {
|
||||
delete this.recentlyViewed[response.data.slug];
|
||||
this.$set(this, 'recentlyViewed', this.recentlyViewed);
|
||||
|
||||
this.$forceUpdate();
|
||||
}
|
||||
})
|
||||
.catch(error => {})
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
@endpush
|
||||
|
|
|
|||
Loading…
Reference in New Issue