Merge pull request #4126 from devansh-webkul/lighthouse_work

Light House Work
This commit is contained in:
Jitendra Singh 2020-10-20 19:05:11 +05:30 committed by GitHub
commit eba3e6ac90
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 246 additions and 233 deletions

View File

@ -230,7 +230,7 @@
<input type="file" :id="'image-search-container-' + _uid" ref="image_search_input" v-on:change="uploadImage()"/>
<img :id="'uploaded-image-url-' + + _uid" :src="uploaded_image_url" alt=""/>
<img :id="'uploaded-image-url-' + + _uid" :src="uploaded_image_url" alt="" width="20" height="20" />
</label>
</div>
</script>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,5 +1,5 @@
{
"/js/velocity.js": "/js/velocity.js?id=ea742e9269dc43e70f30",
"/js/velocity.js": "/js/velocity.js?id=497d255676e26e428e3c",
"/css/velocity-admin.css": "/css/velocity-admin.css?id=4322502d80a0e4a0affd",
"/css/velocity.css": "/css/velocity.css?id=04842769d735aa9ef393"
"/css/velocity.css": "/css/velocity.css?id=301123496ed765590b59"
}

View File

@ -168,6 +168,7 @@ class ShopController extends Controller
'name' => $category->name,
'children' => $formattedChildCategory,
'category_icon_path' => $category->category_icon_path,
'image' => $category->image
];
}

View File

@ -0,0 +1,98 @@
<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>

View File

@ -0,0 +1,58 @@
<template>
<div class="col-lg-3 col-md-12 hot-category-wrapper" v-if="hotCategoryDetails">
<div class="card">
<div class="row velocity-divide-page">
<div class="left">
<img :src="`${$root.baseUrl}/storage/${hotCategoryDetails.category_icon_path}`" alt="" />
</div>
<div class="right">
<h3 class="fs20 clr-light text-uppercase">
<a href="${slug}" class="unset">
{{ hotCategoryDetails.name }}
</a>
</h3>
<ul type="none">
<li :key="index" v-for="(subCategory, index) in hotCategoryDetails.children">
<a :href="`${slug}/${subCategory.slug}`" class="remove-decoration normal-text">
{{ subCategory.name }}
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: [
'slug'
],
data: function () {
return {
'hotCategoryDetails': null
}
},
mounted: function () {
this.getHotCategories();
},
methods: {
'getHotCategories': function () {
this.$http.get(`${this.baseUrl}/fancy-category-details/${this.slug}`)
.then(response => {
if (response.data.status)
this.hotCategoryDetails = response.data.categoryDetails;
})
.catch(error => {
console.log('something went wrong');
})
}
}
}
</script>

View File

@ -0,0 +1,53 @@
<template>
<div class="col-lg-3 col-md-12 popular-category-wrapper" v-if="popularCategoryDetails">
<div class="card col-12 no-padding">
<div class="category-image">
<img :data-src="`${$root.baseUrl}/storage/${popularCategoryDetails.image}`" class="lazyload" alt="" />
</div>
<div class="card-description">
<h3 class="fs20">{{ popularCategoryDetails.name }}</h3>
<ul class="font-clr pl30">
<li :key="index" v-for="(subCategory, index) in popularCategoryDetails.children">
<a :href="`${slug}/${subCategory.slug}`" class="remove-decoration normal-text">
{{ subCategory.name }}
</a>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
props: [
'slug'
],
data: function () {
return {
'popularCategoryDetails': null
}
},
mounted: function () {
this.getPopularCategories();
},
methods: {
'getPopularCategories': function () {
this.$http.get(`${this.baseUrl}/fancy-category-details/${this.slug}`)
.then(response => {
if (response.data.status) {
this.popularCategoryDetails = response.data.categoryDetails;
}
})
.catch(error => {
console.log('something went wrong');
})
}
}
}
</script>

View File

@ -26,7 +26,8 @@
<img
v-if="category.category_icon_path"
:src="`${$root.baseUrl}/storage/${category.category_icon_path}`" />
:src="`${$root.baseUrl}/storage/${category.category_icon_path}`"
width="20" height="20" />
</div>
<span class="category-title">{{ category['name'] }}</span>

View File

@ -52,6 +52,9 @@ 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('hot-category', require('./UI/components/hot-category'));
Vue.component('popular-category', require('./UI/components/popular-category'));
window.eventBus = new Vue();

View File

@ -482,6 +482,7 @@ header {
}
.mini-cart-container {
width: 125px;
height: 50px;
padding: 5px 17px;

View File

@ -72,7 +72,7 @@
<img
class="category-icon"
v-if="category.category_icon_path"
:src="`${$root.baseUrl}/storage/${category.category_icon_path}`" alt="" />
:src="`${$root.baseUrl}/storage/${category.category_icon_path}`" alt="" width="20" height="20" />
</div>
<span v-text="category.name"></span>
</a>
@ -213,7 +213,7 @@
<img
class="category-icon"
v-if="nestedSubCategory.category_icon_path"
:src="`${$root.baseUrl}/storage/${nestedSubCategory.category_icon_path}`" alt="" />
:src="`${$root.baseUrl}/storage/${nestedSubCategory.category_icon_path}`" alt="" width="20" height="20" />
</div>
<span>@{{ nestedSubCategory.name }}</span>
</a>
@ -234,7 +234,7 @@
<img
class="category-icon"
v-if="thirdLevelCategory.category_icon_path"
:src="`${$root.baseUrl}/storage/${thirdLevelCategory.category_icon_path}`" alt="" />
:src="`${$root.baseUrl}/storage/${thirdLevelCategory.category_icon_path}`" alt="" width="20" height="20" />
</div>
<span>@{{ thirdLevelCategory.name }}</span>
</a>
@ -266,14 +266,14 @@
<div class="category-logo">
<img
class="category-icon"
src="{{ asset('/themes/velocity/assets/images/flags/en.png') }}" alt="" />
src="{{ asset('/themes/velocity/assets/images/flags/en.png') }}" alt="" width="20" height="20" />
</div>
@else
<div class="category-logo">
<img
class="category-icon"
src="{{ asset('/storage/' . $locale->locale_image) }}" alt="" />
src="{{ asset('/storage/' . $locale->locale_image) }}" alt="" width="20" height="20" />
</div>
@endif

View File

@ -54,9 +54,9 @@
aria-label="Logo">
@if ($logo = core()->getCurrentChannel()->logo_url)
<img class="logo" src="{{ $logo }}" alt="" />
<img class="logo" src="{{ $logo }}" alt="" width="200" height="50" />
@else
<img class="logo" src="{{ asset('themes/velocity/assets/images/logo-text.png') }}" alt="" />
<img class="logo" src="{{ asset('themes/velocity/assets/images/logo-text.png') }}" alt="" width="200" height="50" />
@endif
</a>
</script>
@ -187,7 +187,7 @@
<img
class="d-none"
id="uploaded-image-url"
:src="uploadedImageUrl" alt="" />
:src="uploadedImageUrl" alt="" width="20" height="20" />
</label>
</div>
</script>

View File

@ -1,116 +1,4 @@
@inject ('productRepository', 'Webkul\Product\Repositories\ProductRepository')
<category-products
category-slug="{{ $category }}"
></category-products>
@push('scripts')
<script type="text/x-template" id="category-products-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="{{ core()->getCurrentLocale()->direction == 'rtl' ? 'rtl' : 'ltr' }}"
: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="{{ core()->getCurrentLocale()->direction == 'rtl' ? 'rtl' : 'ltr' }}"
: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>
</script>
<script type="text/javascript">
(() => {
Vue.component('category-products', {
template: '#category-products-template',
props: [
'categorySlug',
],
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;
// setTimeout(() => {
// let imagesCollection = document.querySelectorAll('img.lzy_img');
// imagesCollection.forEach((image) => {
// this.$root.imageObserver.observe(image);
// });
// }, 0);
}
this.isLoading = false;
})
.catch(error => {
this.isLoading = false;
console.log(this.__('error.something_went_wrong'));
});
}
}
})
})()
</script>
@endpush
locale-direction="{{ core()->getCurrentLocale()->direction == 'rtl' ? 'rtl' : 'ltr' }}">
</category-products>

View File

@ -8,65 +8,3 @@
@endforeach
</div>
</div>
@push('scripts')
<script type="text/x-template" id="hot-category-template">
<div class="col-lg-3 col-md-12 hot-category-wrapper" v-if="hotCategoryDetails">
<div class="card">
<div class="row velocity-divide-page">
<div class="left">
<img :src="`${$root.baseUrl}/storage/${hotCategoryDetails.category_icon_path}`" alt="" />
</div>
<div class="right">
<h3 class="fs20 clr-light text-uppercase">
<a href="${slug}" class="unset">
@{{ hotCategoryDetails.name }}
</a>
</h3>
<ul type="none">
<li :key="index" v-for="(subCategory, index) in hotCategoryDetails.children">
<a :href="`${slug}/${subCategory.slug}`" class="remove-decoration normal-text">
@{{ subCategory.name }}
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</script>
<script type="text/javascript">
(() => {
Vue.component('hot-category', {
template: '#hot-category-template',
props: ['slug'],
data: function () {
return {
'hotCategoryDetails': null
}
},
mounted: function () {
this.getHotCategories();
},
methods: {
'getHotCategories': function () {
this.$http.get(`${this.baseUrl}/fancy-category-details/${this.slug}`)
.then(response => {
if (response.data.status)
this.hotCategoryDetails = response.data.categoryDetails;
})
.catch(error => {
console.log('something went wrong');
})
}
}
})
})()
</script>
@endpush

View File

@ -4,33 +4,7 @@
<div class="row">
@foreach ($category as $slug)
@php
$categoryDetails = app('Webkul\Category\Repositories\CategoryRepository')->findByPath($slug);
@endphp
@if ($categoryDetails)
<div class="col-lg-3 col-md-12 popular-category-wrapper">
<div class="card col-12 no-padding">
<div class="category-image">
<img data-src="{{ asset('/storage/' . $categoryDetails->image) }}" class="lazyload" alt="" />
</div>
<div class="card-description">
<h3 class="fs20">{{ $categoryDetails->name }}</h3>
<ul class="font-clr pl30">
@foreach ($categoryDetails->children as $subCategory)
<li>
<a href="{{ $subCategory->slug }}" class="remove-decoration normal-text">
{{ $subCategory->name }}
</a>
</li>
@endforeach
</ul>
</div>
</div>
</div>
@endif
<popular-category slug="{{ $slug }}"></popular-category>
@endforeach
</div>
</div>

View File

@ -29,7 +29,7 @@
<img
class="col-12 no-padding banner-icon"
src="{{ url()->to('/') . '/storage/' . $slider['path'] }}"
alt=""/>
alt="" width="1298" height="450" />
<div class="show-content" v-html="'{{ $textContent }}'">
</div>

View File

@ -4,11 +4,11 @@
@if ($logo = core()->getCurrentChannel()->logo_url)
<img
src="{{ $logo }}"
class="logo full-img" alt="" />
class="logo full-img" alt="" width="200" height="50" />
@else
<img
src="{{ asset('themes/velocity/assets/images/static/logo-text-white.png') }}"
class="logo full-img" alt="" />
class="logo full-img" alt="" width="200" height="50" />
@endif
</a>

View File

@ -1,5 +1,5 @@
<a href="{{ route('shop.home.index') }}">
<img
src="{{ asset('themes/velocity/assets/images/static/logo-text-white.png') }}"
class="logo full-img" alt="" />
class="logo full-img" alt="" width="200" height="50" />
</a>

View File

@ -51,8 +51,6 @@
@include('shop::UI.particals')
<div id="app">
{{-- <responsive-sidebar v-html="responsiveSidebarTemplate"></responsive-sidebar> --}}
<product-quick-view v-if="$root.quickView"></product-quick-view>
<div class="main-container-wrapper">

View File

@ -41,9 +41,9 @@
<div class="locale-icon">
@if ($localeImage)
<img src="{{ asset('/storage/' . $localeImage) }}" onerror="this.src = '{{ asset($localeImage) }}'" alt="" />
<img src="{{ asset('/storage/' . $localeImage) }}" onerror="this.src = '{{ asset($localeImage) }}'" alt="" width="20" height="20" />
@elseif (app()->getLocale() == 'en')
<img src="{{ asset('/themes/velocity/assets/images/flags/en.png') }}" alt="" />
<img src="{{ asset('/themes/velocity/assets/images/flags/en.png') }}" alt="" width="20" height="20" />
@endif
</div>

View File

@ -83,7 +83,7 @@
<div class="col-12 no-padding">
<div class="hero-image">
@if (!is_null($category->image))
<img class="logo" src="{{ $category->image_url }}" alt="" />
<img class="logo" src="{{ $category->image_url }}" alt="" width="20" height="20" />
@endif
</div>
</div>