compare products in default theme
This commit is contained in:
Shubham Mehrotra
parent
38b65dd78f
commit
15c4e0686b
|
|
@ -69,7 +69,6 @@ class ForgotPasswordController extends Controller
|
|||
|
||||
return redirect()->back();
|
||||
} catch (\Exception $e) {
|
||||
dd($e);
|
||||
report($e);
|
||||
session()->flash('error', trans($e->getMessage()));
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
@extends('shop::layouts.master')
|
||||
|
||||
@include('shop::guest.compare.compare-products')
|
||||
|
||||
@section('page_title')
|
||||
{{ __('velocity::app.customer.compare.compare_similar_items') }}
|
||||
@endsection
|
||||
|
||||
@section('content-wrapper')
|
||||
|
||||
<div class="account-content">
|
||||
@include('shop::customers.account.partials.sidemenu')
|
||||
|
||||
<div class="account-layout">
|
||||
{!! view_render_event('bagisto.shop.customers.account.comparison.list.before') !!}
|
||||
|
||||
<div class="account-items-list">
|
||||
<div class="account-table-content">
|
||||
<compare-product></compare-product>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!! view_render_event('bagisto.shop.customers.account.comparison.list.after') !!}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
|
|
@ -0,0 +1,295 @@
|
|||
@php
|
||||
$attributeRepository = app('\Webkul\Attribute\Repositories\AttributeRepository');
|
||||
$comparableAttributes = $attributeRepository->findByField('is_comparable', 1);
|
||||
@endphp
|
||||
|
||||
@push('css')
|
||||
<style>
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.comparison-component {
|
||||
width: 100%;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.comparison-component > h1 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 15px;
|
||||
min-width: 250px;
|
||||
max-width: 250px;
|
||||
line-height: 30px;
|
||||
vertical-align: top;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.icon.remove-product {
|
||||
top: 15px;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.action > div {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@push('scripts')
|
||||
<script type="text/x-template" id="compare-product-template">
|
||||
<section class="comparison-component">
|
||||
<h1>
|
||||
{{ __('velocity::app.customer.compare.compare_similar_items') }}
|
||||
</h1>
|
||||
|
||||
<button
|
||||
v-if="products.length > 0"
|
||||
class="btn btn-primary btn-md pull-right"
|
||||
@click="removeProductCompare('all')">
|
||||
{{ __('shop::app.customer.account.wishlist.deleteall') }}
|
||||
</button>
|
||||
|
||||
{!! view_render_event('bagisto.shop.customers.account.compare.view.before') !!}
|
||||
|
||||
<table class="compare-products">
|
||||
<template v-if="isProductListLoaded && products.length > 0">
|
||||
@php
|
||||
$comparableAttributes = $comparableAttributes->toArray();
|
||||
|
||||
array_splice($comparableAttributes, 1, 0, [[
|
||||
'code' => 'image',
|
||||
'admin_name' => 'Product Image'
|
||||
]]);
|
||||
|
||||
array_splice($comparableAttributes, 2, 0, [[
|
||||
'code' => 'addToCartHtml',
|
||||
'admin_name' => 'Actions'
|
||||
]]);
|
||||
@endphp
|
||||
|
||||
@foreach ($comparableAttributes as $attribute)
|
||||
<tr>
|
||||
<td>
|
||||
<span class="fs16">{{ $attribute['admin_name'] }}</span>
|
||||
</td>
|
||||
|
||||
<td :key="`title-${index}`" v-for="(product, index) in products">
|
||||
@switch ($attribute['code'])
|
||||
@case('name')
|
||||
<a :href="`${baseUrl}/${product.url_key}`" class="unset remove-decoration active-hover">
|
||||
<h3 class="fw6 fs18" v-text="product['{{ $attribute['code'] }}']"></h3>
|
||||
</a>
|
||||
@break
|
||||
|
||||
@case('image')
|
||||
<a :href="`${baseUrl}/${product.url_key}`" class="unset">
|
||||
<img
|
||||
class="image-wrapper"
|
||||
:src="product['{{ $attribute['code'] }}']"
|
||||
:onerror="`this.src='${baseUrl}/vendor/webkul/ui/assets/images/product/large-product-placeholder.png'`" />
|
||||
</a>
|
||||
@break
|
||||
|
||||
@case('price')
|
||||
<span v-html="product['priceHTML']"></span>
|
||||
@break
|
||||
|
||||
@case('addToCartHtml')
|
||||
<div class="action">
|
||||
<div v-html="product.defaultAddToCart"></div>
|
||||
|
||||
<span class="icon white-cross-sm-icon remove-product" @click="removeProductCompare(product.id)"></span>
|
||||
</div>
|
||||
@break
|
||||
|
||||
@case('color')
|
||||
<span v-html="product.color_label" class="fs16"></span>
|
||||
@break
|
||||
|
||||
@case('size')
|
||||
<span v-html="product.size_label" class="fs16"></span>
|
||||
@break
|
||||
|
||||
@case('description')
|
||||
<span v-html="product.description"></span>
|
||||
@break
|
||||
|
||||
@default
|
||||
@switch ($attribute['type'])
|
||||
@case('boolean')
|
||||
<span
|
||||
v-text="product.product['{{ $attribute['code'] }}']
|
||||
? '{{ __('velocity::app.shop.general.yes') }}'
|
||||
: '{{ __('velocity::app.shop.general.no') }}'"
|
||||
></span>
|
||||
@break;
|
||||
@default
|
||||
<span v-html="product['{{ $attribute['code'] }}'] ? product['{{ $attribute['code'] }}'] : product.product['{{ $attribute['code'] }}'] ? product.product['{{ $attribute['code'] }}'] : '__'" class="fs16"></span>
|
||||
@break;
|
||||
@endswitch
|
||||
|
||||
@break
|
||||
|
||||
@endswitch
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</template>
|
||||
|
||||
<span v-else-if="isProductListLoaded && products.length == 0">
|
||||
{{ __('velocity::app.customer.compare.empty-text') }}
|
||||
</span>
|
||||
</table>
|
||||
|
||||
{!! view_render_event('bagisto.shop.customers.account.compare.view.after') !!}
|
||||
</section>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('compare-product', {
|
||||
template: '#compare-product-template',
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
'products': [],
|
||||
'isProductListLoaded': false,
|
||||
'baseUrl': "{{ url()->to('/') }}",
|
||||
'isCustomer': '{{ auth()->guard('customer')->user() ? "true" : "false" }}' == "true",
|
||||
}
|
||||
},
|
||||
|
||||
mounted: function () {
|
||||
this.getComparedProducts();
|
||||
},
|
||||
|
||||
methods: {
|
||||
'getComparedProducts': function () {
|
||||
let items = '';
|
||||
let url = `${this.baseUrl}/${this.isCustomer ? 'comparison' : 'detailed-products'}`;
|
||||
|
||||
let data = {
|
||||
params: {'data': true}
|
||||
}
|
||||
|
||||
if (! this.isCustomer) {
|
||||
items = this.getStorageValue('compared_product');
|
||||
items = items ? items.join('&') : '';
|
||||
|
||||
data = {
|
||||
params: {
|
||||
items
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
if (this.isCustomer || (! this.isCustomer && items != "")) {
|
||||
this.$http.get(url, data)
|
||||
.then(response => {
|
||||
this.isProductListLoaded = true;
|
||||
|
||||
if (response.data.products.length > 2) {
|
||||
$('.comparison-component').css('overflow-x', 'scroll');
|
||||
}
|
||||
|
||||
this.products = response.data.products;
|
||||
})
|
||||
.catch(error => {
|
||||
this.isProductListLoaded = true;
|
||||
console.log("{{ __('velocity::app.error.something_went_wrong') }}");
|
||||
});
|
||||
} else {
|
||||
this.isProductListLoaded = true;
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
'removeProductCompare': function (productId) {
|
||||
if (this.isCustomer) {
|
||||
this.$http.delete(`${this.baseUrl}/comparison?productId=${productId}`)
|
||||
.then(response => {
|
||||
if (productId == 'all') {
|
||||
this.$set(this, 'products', this.products.filter(product => false));
|
||||
} else {
|
||||
this.$set(this, 'products', this.products.filter(product => product.id != productId));
|
||||
}
|
||||
|
||||
// window.showAlert(`alert-${response.data.status}`, response.data.label, response.data.message);
|
||||
})
|
||||
.catch(error => {
|
||||
console.log("{{ __('velocity::app.error.something_went_wrong') }}");
|
||||
});
|
||||
} else {
|
||||
let existingItems = this.getStorageValue('compared_product');
|
||||
|
||||
if (productId == "all") {
|
||||
updatedItems = [];
|
||||
this.$set(this, 'products', []);
|
||||
} else {
|
||||
updatedItems = existingItems.filter(item => item != productId);
|
||||
this.$set(this, 'products', this.products.filter(product => product.id != productId));
|
||||
}
|
||||
|
||||
this.setStorageValue('compared_product', updatedItems);
|
||||
|
||||
// window.showAlert(
|
||||
// `alert-success`,
|
||||
// "{{ __('velocity::app.shop.general.alert.success') }}",
|
||||
// `${this.__('customer.compare.removed')}`
|
||||
// );
|
||||
}
|
||||
},
|
||||
|
||||
'getDynamicHTML': function (input) {
|
||||
var _staticRenderFns;
|
||||
const { render, staticRenderFns } = Vue.compile(input);
|
||||
|
||||
if (this.$options.staticRenderFns.length > 0) {
|
||||
_staticRenderFns = this.$options.staticRenderFns;
|
||||
} else {
|
||||
_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;
|
||||
},
|
||||
|
||||
'isMobile': function () {
|
||||
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
},
|
||||
|
||||
'getStorageValue': function (key) {
|
||||
let value = window.localStorage.getItem(key);
|
||||
|
||||
if (value) {
|
||||
value = JSON.parse(value);
|
||||
}
|
||||
|
||||
return value;
|
||||
},
|
||||
|
||||
'setStorageValue': function (key, value) {
|
||||
window.localStorage.setItem(key, JSON.stringify(value));
|
||||
|
||||
return true;
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
|
|
@ -1,3 +1,11 @@
|
|||
<script>
|
||||
window.location.href = window.location.href.replace('/comparison', '');
|
||||
</script>
|
||||
@extends('shop::layouts.master')
|
||||
|
||||
@include('shop::guest.compare.compare-products')
|
||||
|
||||
@section('page_title')
|
||||
{{ __('velocity::app.customer.compare.compare_similar_items') }}
|
||||
@endsection
|
||||
|
||||
@section('content-wrapper')
|
||||
<compare-product></compare-product>
|
||||
@endsection
|
||||
|
|
@ -42,6 +42,26 @@
|
|||
|
||||
<ul class="right-content-menu">
|
||||
|
||||
{!! view_render_event('bagisto.shop.layout.header.comppare-item.before') !!}
|
||||
|
||||
<li class="compare-dropdown-container">
|
||||
<a
|
||||
@auth('customer')
|
||||
href="{{ route('velocity.customer.product.compare') }}"
|
||||
@endauth
|
||||
|
||||
@guest('customer')
|
||||
href="{{ route('velocity.product.compare') }}"
|
||||
@endguest
|
||||
style="color: #242424;"
|
||||
>
|
||||
<span class="name">{{ __('velocity::app.customer.compare.text') }}</span>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
{!! view_render_event('bagisto.shop.layout.header.compare-item.after') !!}
|
||||
|
||||
{!! view_render_event('bagisto.shop.layout.header.currency-item.before') !!}
|
||||
|
||||
@if (core()->getCurrentChannel()->currencies->count() > 1)
|
||||
|
|
|
|||
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=a8a0bb91fbd4d49c1cb6",
|
||||
"/js/velocity.js": "/js/velocity.js?id=b795a54f5795ed77fa28",
|
||||
"/css/velocity-admin.css": "/css/velocity-admin.css?id=612d35e452446366eef7",
|
||||
"/css/velocity.css": "/css/velocity.css?id=4109f5e05451bbc83138"
|
||||
"/css/velocity.css": "/css/velocity.css?id=a68c6d04ce36e1455e1e"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -318,6 +318,7 @@ class Helper extends Review
|
|||
'shortDescription' => $product->short_description,
|
||||
'firstReviewText' => trans('velocity::app.products.be-first-review'),
|
||||
'priceHTML' => view('shop::products.price', ['product' => $product])->render(),
|
||||
'defaultAddToCart' => view('shop::products.add-buttons', ['product' => $product])->render(),
|
||||
'addToCartHtml' => view('shop::products.add-to-cart', [
|
||||
'showCompare' => true,
|
||||
'product' => $product,
|
||||
|
|
@ -363,6 +364,7 @@ class Helper extends Review
|
|||
$productMetaDetails['priceHTML'] = $formattedProduct['priceHTML'];
|
||||
$productMetaDetails['addToCartHtml'] = $formattedProduct['addToCartHtml'];
|
||||
$productMetaDetails['galleryImages'] = $formattedProduct['galleryImages'];
|
||||
$productMetaDetails['defaultAddToCart'] = $formattedProduct['defaultAddToCart'];
|
||||
|
||||
$product = array_merge($productFlat->toArray(), $productMetaDetails);
|
||||
|
||||
|
|
|
|||
|
|
@ -58,13 +58,13 @@ $(document).ready(function () {
|
|||
Vue.mixin({
|
||||
data: function () {
|
||||
return {
|
||||
'baseUrl': document.querySelector("script[src$='velocity.js']").getAttribute('baseUrl'),
|
||||
'imageObserver': null,
|
||||
'navContainer': false,
|
||||
'headerItemsCount': 0,
|
||||
'sharedRootCategories': [],
|
||||
'responsiveSidebarTemplate': '',
|
||||
'responsiveSidebarKey': Math.random(),
|
||||
'sharedRootCategories': [],
|
||||
'imageObserver': null,
|
||||
'baseUrl': document.querySelector("script[src$='velocity.js']").getAttribute('baseUrl'),
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -2306,7 +2306,6 @@
|
|||
|
||||
.compare-products {
|
||||
width: 100%;
|
||||
overflow-x: scroll;
|
||||
padding-bottom: 20px;
|
||||
word-break: break-word;
|
||||
margin-left: 0 !important;
|
||||
|
|
|
|||
|
|
@ -74,7 +74,6 @@
|
|||
|
||||
this.disable_button = false;
|
||||
}).catch(error => {
|
||||
debugger
|
||||
this.error_message = error.response.data.message;
|
||||
|
||||
this.disable_button = false;
|
||||
|
|
|
|||
|
|
@ -20,8 +20,8 @@
|
|||
$subMenuCollection['wishlist'] = $menuItem['children']['wishlist'];
|
||||
$subMenuCollection['compare'] = [
|
||||
'key' => 'account.compare',
|
||||
'url' => route('velocity.customer.product.compare'),
|
||||
'name' => 'velocity::app.customer.compare.text',
|
||||
'url' => route('velocity.customer.product.compare'),
|
||||
];
|
||||
$subMenuCollection['reviews'] = $menuItem['children']['reviews'];
|
||||
$subMenuCollection['address'] = $menuItem['children']['address'];
|
||||
|
|
|
|||
|
|
@ -161,6 +161,11 @@
|
|||
this.$http.get(url, data)
|
||||
.then(response => {
|
||||
this.isProductListLoaded = true;
|
||||
|
||||
if (response.data.products.length > 3) {
|
||||
$('.compare-products').css('overflow-x', 'scroll');
|
||||
}
|
||||
|
||||
this.products = response.data.products;
|
||||
})
|
||||
.catch(error => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue