Completed Recently Viewed Product Dependency
This commit is contained in:
devansh bawari
parent
233e87d7ef
commit
d94bf2417d
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"/js/velocity.js": "/js/velocity.js?id=e6e0f7d80ef3c616a408",
|
||||
"/js/velocity.js": "/js/velocity.js?id=2d3ee00a8a265c40ae98",
|
||||
"/css/velocity-admin.css": "/css/velocity-admin.css?id=4322502d80a0e4a0affd",
|
||||
"/css/velocity.css": "/css/velocity.css?id=16e130f3727db37280a6"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,98 @@
|
|||
<template>
|
||||
<div :class="`${addClass} recently-viewed`">
|
||||
<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,6 +52,7 @@ 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('recently-viewed', require('./UI/components/recently-viewed'));
|
||||
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'));
|
||||
|
|
|
|||
|
|
@ -40,10 +40,13 @@
|
|||
</carousel-component>
|
||||
</div>
|
||||
|
||||
@include ('shop::products.list.recently-viewed', [
|
||||
'quantity' => 3,
|
||||
'addClass' => 'col-lg-3 col-md-12',
|
||||
])
|
||||
<recently-viewed
|
||||
title="{{ __('velocity::app.products.recently-viewed') }}"
|
||||
no-data-text="{{ __('velocity::app.products.not-available') }}"
|
||||
add-class="col-lg-3 col-md-12 {{ $direction }}"
|
||||
quantity="3"
|
||||
add-class-wrapper="">
|
||||
</recently-viewed>
|
||||
</div>
|
||||
@else
|
||||
<div class="carousel-products {{ $direction }}">
|
||||
|
|
@ -77,10 +80,13 @@
|
|||
<div class="row {{ $direction }}">
|
||||
<div class="col-lg-9 col-md-12 no-padding carousel-products with-recent-viewed"></div>
|
||||
|
||||
@include ('shop::products.list.recently-viewed', [
|
||||
'quantity' => 3,
|
||||
'addClass' => 'col-lg-3 col-md-12',
|
||||
])
|
||||
<recently-viewed
|
||||
title="{{ __('velocity::app.products.recently-viewed') }}"
|
||||
no-data-text="{{ __('velocity::app.products.not-available') }}"
|
||||
add-class="col-lg-3 col-md-12 {{ $direction }}"
|
||||
quantity="3"
|
||||
add-class-wrapper="">
|
||||
</recently-viewed>
|
||||
</div>
|
||||
@endif
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -9,108 +9,3 @@
|
|||
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" 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">@{{ 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>
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
(() => {
|
||||
Vue.component('recently-viewed', {
|
||||
template: '#recently-viewed-template',
|
||||
|
||||
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 (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