guest customer compare item
This commit is contained in:
shubhammehrotra.symfony@webkul.com
parent
ec12a677f6
commit
179cac23ce
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=e25abfee254686278ea4",
|
||||
"/js/velocity.js": "/js/velocity.js?id=ea0f113122857a688255",
|
||||
"/css/velocity-admin.css": "/css/velocity-admin.css?id=612d35e452446366eef7",
|
||||
"/css/velocity.css": "/css/velocity.css?id=d8b380683a318e613565"
|
||||
"/css/velocity.css": "/css/velocity.css?id=91a204eb374221bbbfd8"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -328,24 +328,32 @@ use Webkul\Velocity\Repositories\Product\ProductRepository as VelocityProductRep
|
|||
*
|
||||
* @return Mixed
|
||||
*/
|
||||
public function getComparedList(Request $request)
|
||||
public function getComparisonList(Request $request)
|
||||
{
|
||||
if (request()->get('data')) {
|
||||
$customer = null;
|
||||
$productSlugs = null;
|
||||
$productCollection = [];
|
||||
|
||||
$customer = $this->velocityCustomerDataRepository->findOneByField([
|
||||
'customer_id' => auth()->guard('customer')->user()->id,
|
||||
]);
|
||||
if (auth()->guard('customer')->user()) {
|
||||
$customer = $this->velocityCustomerDataRepository->findOneByField([
|
||||
'customer_id' => auth()->guard('customer')->user()->id,
|
||||
]);
|
||||
}
|
||||
|
||||
if ($customer) {
|
||||
$productSlugs = json_decode($customer->compared_product, true);
|
||||
} else {
|
||||
if ($items = request()->get('items')) {
|
||||
$productSlugs = explode('&', $items);
|
||||
}
|
||||
}
|
||||
|
||||
if ($productSlugs) {
|
||||
foreach ($productSlugs as $slug) {
|
||||
$product = $this->productRepository->findBySlug($slug);
|
||||
if ($productSlugs) {
|
||||
foreach ($productSlugs as $slug) {
|
||||
$product = $this->productRepository->findBySlug($slug);
|
||||
|
||||
array_push($productCollection, $this->formatProduct($product));
|
||||
}
|
||||
array_push($productCollection, $this->formatProduct($product));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -406,7 +414,7 @@ use Webkul\Velocity\Repositories\Product\ProductRepository as VelocityProductRep
|
|||
*
|
||||
* @return json
|
||||
*/
|
||||
public function deleteCompareProduct()
|
||||
public function deleteComparisonProduct()
|
||||
{
|
||||
// either delete all or individual
|
||||
if (request()->get('slug') == 'all') {
|
||||
|
|
|
|||
|
|
@ -17,20 +17,14 @@ Route::group(['middleware' => ['web', 'locale', 'theme', 'currency']], function
|
|||
|
||||
Route::post('/cart/add', 'ShopController@addProductToCart')->name('velocity.cart.add.product');
|
||||
|
||||
// Auth Routes
|
||||
Route::group(['middleware' => ['customer']], function () {
|
||||
//customer compared products
|
||||
Route::prefix('customer/account')->group(function () {
|
||||
Route::get('/compare', 'ShopController@getComparedList')
|
||||
->name('customer.product.compare')
|
||||
->defaults('_config', [
|
||||
'view' => 'velocity::customers.account.compare.index'
|
||||
]);
|
||||
Route::get('/comparison', 'ShopController@getComparisonList')
|
||||
->name('velocity.product.compare')
|
||||
->defaults('_config', [
|
||||
'view' => 'shop::compare.index'
|
||||
]);
|
||||
|
||||
Route::put('/compare', 'ShopController@addCompareProduct')->name('customer.product.add.compare');
|
||||
Route::put('/comparison', 'ShopController@addCompareProduct')->name('customer.product.add.compare');
|
||||
|
||||
Route::delete('/compare', 'ShopController@deleteCompareProduct')->name('customer.product.delete.compare');
|
||||
});
|
||||
});
|
||||
Route::delete('/comparison', 'ShopController@deleteComparisonProduct')->name('customer.product.delete.compare');
|
||||
});
|
||||
});
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
props: ['slug'],
|
||||
props: ['slug', 'customer'],
|
||||
|
||||
data: function () {
|
||||
return {}
|
||||
|
|
@ -14,19 +14,37 @@
|
|||
|
||||
methods: {
|
||||
addProductToCompare: function () {
|
||||
this.$http.put(
|
||||
`${this.$root.baseUrl}/customer/account/compare`, {
|
||||
slug: this.slug,
|
||||
if (this.customer == "true") {
|
||||
this.$http.put(
|
||||
`${this.$root.baseUrl}/comparison`, {
|
||||
slug: this.slug,
|
||||
}
|
||||
).then(response => {
|
||||
window.showAlert(`alert-${response.data.status}`, response.data.label, response.data.message);
|
||||
}).catch(error => {
|
||||
window.showAlert(
|
||||
'alert-danger',
|
||||
this.__('shop.general.alert.error'),
|
||||
this.__('error.something-went-wrong')
|
||||
);
|
||||
});
|
||||
} else {
|
||||
let updatedItems = [this.slug];
|
||||
let existingItems = window.localStorage.getItem('compared_product');
|
||||
|
||||
if (existingItems) {
|
||||
existingItems = JSON.parse(existingItems);
|
||||
updatedItems = existingItems.concat([this.slug]);
|
||||
}
|
||||
).then(response => {
|
||||
window.showAlert(`alert-${response.data.status}`, response.data.label, response.data.message);
|
||||
}).catch(error => {
|
||||
|
||||
window.localStorage.setItem('compared_product', JSON.stringify(updatedItems));
|
||||
|
||||
window.showAlert(
|
||||
'alert-danger',
|
||||
this.__('shop.general.alert.error'),
|
||||
this.__('error.something-went-wrong')
|
||||
`alert-success`,
|
||||
this.__('shop.general.alert.success'),
|
||||
`${this.__('customer.compare.added')} <a href="${this.baseUrl}/comparison">compare</a>`
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -156,6 +156,22 @@ $(document).ready(function () {
|
|||
return false
|
||||
}
|
||||
},
|
||||
|
||||
getDynamicHTML: function (input) {
|
||||
debugger
|
||||
const { render, staticRenderFns } = Vue.compile(input);
|
||||
const _staticRenderFns = this.$options.staticRenderFns = staticRenderFns;
|
||||
|
||||
try {
|
||||
var output = render.call(this, this.$createElement)
|
||||
} catch (exception) {
|
||||
console.log(this.__('error.something-went-wrong'));
|
||||
}
|
||||
|
||||
this.$options.staticRenderFns = _staticRenderFns
|
||||
|
||||
return output;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -282,7 +298,7 @@ $(document).ready(function () {
|
|||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1030,67 +1030,6 @@
|
|||
padding: 6px 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.compare-products {
|
||||
margin-top: 20px;
|
||||
|
||||
.col,
|
||||
.col-2 {
|
||||
padding: 0;
|
||||
max-width: 30%;
|
||||
|
||||
> .row:nth-child(1) {
|
||||
margin: 0;
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
margin-top: 25px;
|
||||
|
||||
&.product-title {
|
||||
font-size: 16px;
|
||||
|
||||
h3 {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&.product-price {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.stars {
|
||||
i {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.action {
|
||||
position: relative;
|
||||
|
||||
.close-btn {
|
||||
right: 0;
|
||||
top: 6px;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
|
||||
&:hover {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account-items-list {
|
||||
|
|
@ -2282,3 +2221,68 @@
|
|||
.profile-update-form {
|
||||
width: 800px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.compare-products {
|
||||
.col,
|
||||
.col-2 {
|
||||
padding: 0;
|
||||
max-width: 20%;
|
||||
|
||||
> .row:nth-child(1) {
|
||||
margin: 0;
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
margin-top: 25px;
|
||||
|
||||
&.product-title {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
|
||||
h3 {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&.product-price {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.stars {
|
||||
i {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.action {
|
||||
position: relative;
|
||||
|
||||
.close-btn {
|
||||
right: 0;
|
||||
top: 6px;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
|
||||
&:hover {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.compare-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -876,4 +876,16 @@ button[disabled] {
|
|||
z-index: 5000;
|
||||
position: fixed;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.compare-icon,
|
||||
.wishlist-icon {
|
||||
height: 38px;
|
||||
display: table;
|
||||
margin-left: 10px;
|
||||
|
||||
i {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
@extends('shop::layouts.master')
|
||||
|
||||
@section('page_title')
|
||||
{{ __('velocity::app.customer.compare.compare_similar_items') }}
|
||||
@endsection
|
||||
|
||||
@section('content-wrapper')
|
||||
|
||||
<section class="cart-details row no-margin col-12">
|
||||
<h1 class="fw6 col-12">
|
||||
{{ __('velocity::app.customer.compare.compare_similar_items') }}
|
||||
</h1>
|
||||
|
||||
{!! view_render_event('bagisto.shop.customers.account.compare.view.before') !!}
|
||||
|
||||
<compare-product></compare-product>
|
||||
|
||||
{!! view_render_event('bagisto.shop.customers.account.compare.view.after') !!}
|
||||
</section>
|
||||
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script type="text/x-template" id="compare-product-template">
|
||||
<div class="row compare-products col-12 ml0">
|
||||
<div class="col" :key="index" v-for="(product, index) in products">
|
||||
<div class="row col-12 pl0">
|
||||
<div class="product-title">
|
||||
<h3>@{{ product.name }}</h3>
|
||||
</div>
|
||||
|
||||
<div class='image-wrapper'>
|
||||
<img :src="product.image" />
|
||||
</div>
|
||||
|
||||
<div class="product-price" v-html="product.priceHTML"></div>
|
||||
|
||||
<div class="product-reviews">
|
||||
<star-ratings :ratings="product.avgRating"></star-ratings>
|
||||
<a class="fs14 align-top unset active-hover" :href="`${$root.baseUrl}/reviews/${product.slug}`">
|
||||
@{{ __('products.reviews-count', {'totalReviews': product.totalReviews}) }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="action">
|
||||
<vnode-injector :nodes="getAddToCartHtml(product.addToCartHtml)"></vnode-injector>
|
||||
<div class="close-btn rango-close fs18 cursor-pointer" @click="removeProductCompare(product.slug)"></div>
|
||||
</div>
|
||||
|
||||
<div class="product-description">
|
||||
<p v-html="product.description"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span v-if="isProductListLoaded && products.length == 0">
|
||||
@{{ __('customer.compare.empty-text') }}
|
||||
</span>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('compare-product', {
|
||||
template: '#compare-product-template',
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
'products': [],
|
||||
'isProductListLoaded': false,
|
||||
'isCustomer': '{{ auth()->guard('customer')->user() ? "true" : "false" }}' == "true",
|
||||
}
|
||||
},
|
||||
|
||||
mounted: function () {
|
||||
this.getComparedProducts();
|
||||
},
|
||||
|
||||
methods: {
|
||||
'getComparedProducts': function () {
|
||||
if (this.isCustomer) {
|
||||
var data = {
|
||||
params: {
|
||||
data: true,
|
||||
}
|
||||
};
|
||||
} else {
|
||||
let items = JSON.parse(window.localStorage.getItem('compared_product'));
|
||||
items = items ? items.join('&') : '';
|
||||
|
||||
var data = {
|
||||
params: {
|
||||
items,
|
||||
data: true,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
this.$http.get(`${this.$root.baseUrl}/comparison`, data)
|
||||
.then(response => {
|
||||
this.isProductListLoaded = true;
|
||||
this.products = response.data.products
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(this.__('error.something-went-wrong'));
|
||||
});
|
||||
},
|
||||
|
||||
'removeProductCompare': function (slug) {
|
||||
if (this.isCustomer) {
|
||||
this.$http.delete(`${this.$root.baseUrl}/comparison?slug=${slug}`)
|
||||
.then(response => {
|
||||
this.$set(this, 'products', this.products.filter(product => product.slug != slug));
|
||||
|
||||
window.showAlert(`alert-${response.data.status}`, response.data.label, response.data.message);
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(this.__('error.something-went-wrong'));
|
||||
});
|
||||
} else {
|
||||
let existingItems = window.localStorage.getItem('compared_product');
|
||||
existingItems = JSON.parse(existingItems);
|
||||
|
||||
updatedItems = existingItems.filter(item => item != slug);
|
||||
this.$set(this, 'products', this.products.filter(product => product.slug != slug));
|
||||
|
||||
window.localStorage.setItem('compared_product', JSON.stringify(updatedItems));
|
||||
|
||||
window.showAlert(
|
||||
`alert-success`,
|
||||
this.__('shop.general.alert.success'),
|
||||
`${this.__('customer.compare.removed')}`
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
'getAddToCartHtml': function (input) {
|
||||
const { render, staticRenderFns } = Vue.compile(input);
|
||||
const _staticRenderFns = this.$options.staticRenderFns = staticRenderFns;
|
||||
|
||||
try {
|
||||
var output = render.call(this, this.$createElement)
|
||||
} catch (exception) {
|
||||
console.log(this.__('error.something-went-wrong'));
|
||||
}
|
||||
|
||||
this.$options.staticRenderFns = _staticRenderFns
|
||||
|
||||
return output;
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@endpush
|
||||
|
|
@ -1,112 +0,0 @@
|
|||
@extends('shop::customers.account.index')
|
||||
|
||||
@section('page_title')
|
||||
{{ __('velocity::app.customer.compare.compare_similar_items') }}
|
||||
@endsection
|
||||
|
||||
@section('page-detail-wrapper')
|
||||
<div class="account-head mb-0">
|
||||
<span class="back-icon">
|
||||
<a href="{{ route('customer.account.index') }}">
|
||||
<i class="icon icon-menu-back"></i>
|
||||
</a>
|
||||
</span>
|
||||
<span class="account-heading">
|
||||
{{ __('velocity::app.customer.compare.compare_similar_items') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{!! view_render_event('bagisto.shop.customers.account.compare.view.before') !!}
|
||||
|
||||
<compare-product></compare-product>
|
||||
|
||||
{!! view_render_event('bagisto.shop.customers.account.compare.view.after') !!}
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script type="text/x-template" id="compare-product-template">
|
||||
<div class="account-table-content">
|
||||
{{-- https://prnt.sc/r447tc
|
||||
https://prnt.sc/r4484e --}}
|
||||
|
||||
<div class="row compare-products col-12">
|
||||
|
||||
<div class="col" :key="index" v-for="(product, index) in products">
|
||||
<div class="row col-12">
|
||||
<div class="product-title">
|
||||
<h3>@{{ product.name }}</h3>
|
||||
</div>
|
||||
|
||||
<div class='image-wrapper'>
|
||||
<img :src="product.image" />
|
||||
</div>
|
||||
|
||||
<div class="product-price" v-html="product.priceHTML"></div>
|
||||
|
||||
<div class="product-reviews">
|
||||
<star-ratings :ratings="product.avgRating"></star-ratings>
|
||||
<a class="fs14 align-top unset active-hover" :href="`${$root.baseUrl}/reviews/${product.slug}`">
|
||||
@{{ __('products.reviews-count', {'totalReviews': product.totalReviews}) }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="action">
|
||||
<div class="add-to-cart" v-html="product.addToCartHtml"></div>
|
||||
<div class="close-btn rango-close fs18 cursor-pointer" @click="removeProductCompare(product.slug)"></div>
|
||||
</div>
|
||||
|
||||
<div class="product-description">
|
||||
<p v-html="product.description"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span v-if="isProductListLoaded && products.length == 0">
|
||||
@{{ __('customer.compare.empty-text') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('compare-product', {
|
||||
template: '#compare-product-template',
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
'products': [],
|
||||
'isProductListLoaded': false,
|
||||
}
|
||||
},
|
||||
|
||||
mounted: function () {
|
||||
this.getComparedProducts();
|
||||
},
|
||||
|
||||
methods: {
|
||||
'getComparedProducts': function () {
|
||||
this.$http.get(`${this.$root.baseUrl}/customer/account/compare?data=true`, {data: true})
|
||||
.then(response => {
|
||||
this.isProductListLoaded = true;
|
||||
this.products = response.data.products
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(this.__('error.something-went-wrong'));
|
||||
});
|
||||
},
|
||||
|
||||
'removeProductCompare': function (slug) {
|
||||
this.$http.delete(`${this.$root.baseUrl}/customer/account/compare?slug=${slug}`)
|
||||
.then(response => {
|
||||
this.$set(this, 'products', this.products.filter(product => product.slug != slug));
|
||||
|
||||
window.showAlert(`alert-${response.data.status}`, response.data.label, response.data.message);
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(this.__('error.something-went-wrong'));
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@endpush
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
$subMenuCollection['wishlist'] = $menuItem['children']['wishlist'];
|
||||
$subMenuCollection['compare'] = [
|
||||
'key' => 'account.compare',
|
||||
'url' => route('customer.product.compare'),
|
||||
'url' => route('velocity.product.compare'),
|
||||
'name' => 'velocity::app.customer.compare.text',
|
||||
];
|
||||
$subMenuCollection['reviews'] = $menuItem['children']['reviews'];
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@
|
|||
</li>
|
||||
|
||||
<li>
|
||||
<a href="{{ route('customer.product.compare') }}" class="unset">{{ __('velocity::app.customer.compare.text') }}</a>
|
||||
<a href="{{ route('velocity.product.compare') }}" class="unset">{{ __('velocity::app.customer.compare.text') }}</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
|
|
|
|||
|
|
@ -52,9 +52,13 @@
|
|||
@endif
|
||||
</div>
|
||||
|
||||
@auth('customer')
|
||||
@if (isset($showCompare) && $showCompare)
|
||||
<compare-component slug="{{ $product->url_key }}"></compare-component>
|
||||
@if (isset($showCompare) && $showCompare)
|
||||
@auth('customer')
|
||||
<compare-component slug="{{ $product->url_key }}" customer="true"></compare-component>
|
||||
@endif
|
||||
|
||||
@guest('customer')
|
||||
<compare-component slug="{{ $product->url_key }}" customer="false"></compare-component>
|
||||
@endif
|
||||
@endif
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue