优化分类筛选等
This commit is contained in:
parent
71ab7a5da8
commit
2f66a6b945
|
|
@ -20,14 +20,21 @@
|
|||
|
||||
.header-left {
|
||||
width: 190px;
|
||||
display: flex;
|
||||
align-items: center; // flex-start | center
|
||||
justify-content: center; // flex-end | center | space-between
|
||||
// flex-wrap: wrap;
|
||||
|
||||
.logo {
|
||||
max-width: 76%;
|
||||
max-height: 30px;
|
||||
a {
|
||||
max-width: 76%;
|
||||
height: 40px;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center; // flex-start | center
|
||||
justify-content: center; // flex-end | center | space-between
|
||||
|
||||
img {
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -146,8 +153,14 @@
|
|||
box-shadow: 0 2px 14px 0 rgba(0, 0, 0, .05);
|
||||
|
||||
> .logo {
|
||||
max-width: 150px;
|
||||
max-height: 30px;
|
||||
a {
|
||||
max-width: 150px;
|
||||
height: 40px;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center; // flex-start | center
|
||||
justify-content: center; // flex-end | center | space-between
|
||||
}
|
||||
|
||||
img {
|
||||
max-height: 100%;
|
||||
|
|
|
|||
|
|
@ -62,6 +62,7 @@
|
|||
</el-form-item>
|
||||
</el-form-item>
|
||||
|
||||
@if (0)
|
||||
<el-form-item label="{{ __('customer_group.level') }}">
|
||||
<el-input class="mb-0" v-model="dialog.form.level" placeholder="{{ __('customer_group.level') }}"></el-input>
|
||||
</el-form-item>
|
||||
|
|
@ -81,6 +82,7 @@
|
|||
<el-form-item label="{{ __('admin/customer_group.integral_factor') }}">
|
||||
<el-input class="mb-0" type="number" v-model="dialog.form.use_point_factor" placeholder="{{ __('admin/customer_group.integral_factor') }}"></el-input>
|
||||
</el-form-item>
|
||||
@endif
|
||||
|
||||
<el-form-item>
|
||||
<div class="d-flex d-lg-block">
|
||||
|
|
@ -115,6 +117,7 @@
|
|||
name: {},
|
||||
description: {},
|
||||
total: '', //消费额度
|
||||
level: '1',
|
||||
discount_factor: '', // 折扣率
|
||||
reward_point_factor: '', // 奖励积分系数使用积分系数
|
||||
use_point_factor: '', // 使用积分系数
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ body.page-account-order-info {
|
|||
font-size: .9375rem;
|
||||
|
||||
.name {
|
||||
font-weight: bold;
|
||||
// font-weight: bold;
|
||||
margin-bottom: .4rem;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,13 +9,13 @@
|
|||
*/
|
||||
|
||||
body.page-categories {
|
||||
.right-column {
|
||||
.col-lg-9.right-column {
|
||||
@media (min-width: 992px) {
|
||||
width: 78%;
|
||||
}
|
||||
}
|
||||
|
||||
.left-column {
|
||||
.col-lg-3.left-column {
|
||||
@media (min-width: 992px) {
|
||||
width: 22%;
|
||||
}
|
||||
|
|
@ -89,12 +89,17 @@ body.page-categories {
|
|||
position: absolute;
|
||||
top: 50%;
|
||||
border-radius: 0;
|
||||
height: 2px;
|
||||
margin-top: -1px;
|
||||
height: 3px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
.ui-slider-active {
|
||||
border: none;
|
||||
.slider-bg {
|
||||
background: #e3e3e3;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
.ui-slider-handle {
|
||||
|
|
@ -104,6 +109,7 @@ body.page-categories {
|
|||
border: none !important;
|
||||
border-radius: 0;
|
||||
background: $primary;
|
||||
outline: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -71,6 +71,10 @@ return [
|
|||
'high' => 'hoch',
|
||||
'sales' => 'Verkauf',
|
||||
'showing_page' => 'Showing 1-:per_page of :total item(s)',
|
||||
'text_grid' => 'Gitter',
|
||||
'text_list' => 'Liste',
|
||||
'text_form' => 'von',
|
||||
'text_to' => 'an',
|
||||
|
||||
'id' => 'ID',
|
||||
'created_at' => 'Erstellungszeit',
|
||||
|
|
|
|||
|
|
@ -71,7 +71,11 @@ return [
|
|||
'low' => 'Low',
|
||||
'high' => 'High',
|
||||
'sales' => 'Sales',
|
||||
'showing_page' => 'Showing 1-:per_page of :total item(s)',
|
||||
'showing_page' => 'Showing 1-:per_page of :total products',
|
||||
'text_grid' => 'Grid',
|
||||
'text_list' => 'List',
|
||||
'text_form' => 'From',
|
||||
'text_to' => 'To',
|
||||
|
||||
'id' => 'ID',
|
||||
'created_at' => 'Created At',
|
||||
|
|
|
|||
|
|
@ -71,6 +71,10 @@ return [
|
|||
'high' => 'alto',
|
||||
'sales' => 'ventas',
|
||||
'showing_page' => 'Showing 1-:per_page of :total item(s)',
|
||||
'text_grid' => 'cuadrícula',
|
||||
'text_list' => 'lista',
|
||||
'text_form' => 'desde',
|
||||
'texto_a' => 'a',
|
||||
|
||||
'id' => 'ID',
|
||||
'created_at' => 'tiempo de creación',
|
||||
|
|
|
|||
|
|
@ -71,6 +71,10 @@ return [
|
|||
'high' => 'élevé',
|
||||
'sales' => 'ventes',
|
||||
'showing_page' => 'Showing 1-:per_page of :total item(s)',
|
||||
'text_grid' => 'grille',
|
||||
'text_list' => 'liste',
|
||||
'text_form' => 'de',
|
||||
'text_to' => 'à',
|
||||
|
||||
'id' => 'ID',
|
||||
'created_at' => 'temps de creation',
|
||||
|
|
|
|||
|
|
@ -71,6 +71,10 @@ return [
|
|||
'high' => 'alto',
|
||||
'sales' => 'vendite',
|
||||
'showing_page' => 'Showing 1-:per_page of :total item(s)',
|
||||
'text_grid' => 'griglia',
|
||||
'text_list' => 'lista',
|
||||
'text_form' => 'da',
|
||||
'text_to' => 'a',
|
||||
|
||||
'id' => 'ID',
|
||||
'created_at' => 'tempo di creazione',
|
||||
|
|
|
|||
|
|
@ -71,6 +71,10 @@ return [
|
|||
'high' => '高い',
|
||||
'sales' => '売上',
|
||||
'showing_page' => 'Showing 1-:per_page of :total item(s)',
|
||||
'text_grid' => 'グリッド',
|
||||
'text_list' => 'リスト',
|
||||
'text_form' => 'From',
|
||||
'text_to' => 'To',
|
||||
|
||||
'id' => 'ID',
|
||||
'created_at' => '作成時間',
|
||||
|
|
|
|||
|
|
@ -71,6 +71,10 @@ return [
|
|||
'high' => 'высокий',
|
||||
'sales' => 'продажи',
|
||||
'showing_page' => 'Showing 1-:per_page of :total item(s)',
|
||||
'text_grid' => 'сетка',
|
||||
'text_list' => 'список',
|
||||
'text_form' => 'от',
|
||||
'text_to' => 'кому',
|
||||
|
||||
'id' => 'ID',
|
||||
'created_at' => 'время создания',
|
||||
|
|
|
|||
|
|
@ -72,6 +72,10 @@ return [
|
|||
'high' => '高',
|
||||
'sales' => '销量',
|
||||
'showing_page' => '1-:per_page 共 :total 条数据',
|
||||
'text_grid' => '网格',
|
||||
'text_list' => '列表',
|
||||
'text_form' => '从',
|
||||
'text_to' => '到',
|
||||
|
||||
'id' => 'ID',
|
||||
'created_at' => '创建时间',
|
||||
|
|
|
|||
|
|
@ -71,6 +71,10 @@ return [
|
|||
'high' => '高',
|
||||
'sales' => '銷量',
|
||||
'showing_page' => '1-:per_page 共 :total 条数据',
|
||||
'text_grid' => '網格',
|
||||
'text_list' => '列表',
|
||||
'text_form' => '從',
|
||||
'text_to' => '到',
|
||||
|
||||
'id' => 'ID',
|
||||
'created_at' => '創建時間',
|
||||
|
|
|
|||
|
|
@ -4,75 +4,14 @@
|
|||
@section('keywords', $category->description->meta_keywords ?: system_setting('base.meta_keyword'))
|
||||
@section('description', $category->description->meta_description ?: system_setting('base.meta_description'))
|
||||
|
||||
@push('header')
|
||||
<script src="{{ asset('vendor/jquery/jquery-ui/jquery-ui.min.js') }}"></script>
|
||||
<link rel="stylesheet" href="{{ asset('vendor/jquery/jquery-ui/jquery-ui.min.css') }}">
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="container">
|
||||
|
||||
<x-shop-breadcrumb type="category" :value="$category" />
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-3 pe-lg-4 left-column">
|
||||
<div class="mb-4 module-category-wrap">
|
||||
<h4 class="mb-3"><span>{{ __('product.category') }}</span></h4>
|
||||
<ul class="sidebar-widget mb-0" id="category-one">
|
||||
@foreach ($all_categories as $key_a => $category_all)
|
||||
<li class="{{ $category_all['id'] == $category->id ? 'active' : ''}}">
|
||||
<a href="{{ shop_route('categories.show', [$category_all['id']]) }}" title="{{ $category_all['name'] }}" class="category-href">{{ $category_all['name'] }}</a>
|
||||
@if ($category_all['children'])
|
||||
<button class="toggle-icon btn {{ $category_all['id'] == $category->id ? '' : 'collapsed'}}" data-bs-toggle="collapse" href="#category-{{ $key_a }}"><i class="bi bi-chevron-up"></i></button>
|
||||
<ul id="category-{{ $key_a }}" class="accordion-collapse collapse {{ $category_all['id'] == $category->id ? 'show' : ''}}" data-bs-parent="#category-one">
|
||||
@foreach ($category_all['children'] as $key_b => $child)
|
||||
<li class="{{ $child['id'] == $category->id ? 'active' : ''}} child-category">
|
||||
<a href="{{ shop_route('categories.show', [$child['id']]) }}" title="{{ $child['name'] }}">{{ $child['name'] }}</a>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
@endif
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="filter-box">
|
||||
@if ($filter_data['price']['min'] != $filter_data['price']['max'])
|
||||
<div class="card">
|
||||
<div class="card-header p-0">
|
||||
<h4 class="mb-3">{{ __('product.price') }}</h4>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="text-secondary mb-3 price-range">
|
||||
{{ currency_format($filter_data['price']['select_min'], current_currency_code()) }}
|
||||
-
|
||||
{{ currency_format($filter_data['price']['select_max'], current_currency_code()) }}
|
||||
</div>
|
||||
<input value="{{ $filter_data['price']['select_min'] }}" class="price-min d-none">
|
||||
<input value="{{ $filter_data['price']['select_max'] }}" class="price-max d-none">
|
||||
<div id="slider" class="mb-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@foreach ($filter_data['attr'] as $index => $attr)
|
||||
<div class="card">
|
||||
<div class="card-header fw-bold p-0">
|
||||
<h4 class="mb-3">{{ $attr['name'] }}</h4>
|
||||
</div>
|
||||
<ul class="list-group list-group-flush attribute-item" data-attribute-id="{{ $attr['id'] }}">
|
||||
@foreach ($attr['values'] as $value_index => $value)
|
||||
<li class="list-group-item border-0 px-0">
|
||||
<label class="form-check-label d-block">
|
||||
<input class="form-check-input attr-value-check me-2" data-attr="{{ $index }}" data-attrval="{{ $value_index }}" {{ $value['selected'] ? 'checked' : '' }} name="6" type="checkbox" value="{{ $value['id'] }}">{{ $value['name'] }}
|
||||
</label>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
<div class="col-12 col-lg-3 pe-lg-4 left-column d-none d-lg-block">
|
||||
@include('shared.filter_sidebar_block')
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-9 right-column">
|
||||
|
|
@ -120,8 +59,7 @@
|
|||
$('.filter-value-wrap li').click(function(event) {
|
||||
let [attr, val] = [$(this).data('attr'),$(this).data('attrval')];
|
||||
if ($(this).hasClass('delete-all')) {
|
||||
deleteFilterAll();
|
||||
return;
|
||||
return deleteFilterAll();
|
||||
}
|
||||
|
||||
filterAttr[attr].values[val].selected = false;
|
||||
|
|
@ -132,23 +70,6 @@
|
|||
$('.filter-value-wrap').removeClass('d-none')
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
$("#slider").slider({
|
||||
range: true,
|
||||
min: {{ $filter_data['price']['min'] ?? 0 }},
|
||||
max: {{ $filter_data['price']['max'] ?? 0 }},
|
||||
values: [{{ $filter_data['price']['select_min'] }}, {{ $filter_data['price']['select_max'] }}],
|
||||
change: function(event, ui) {
|
||||
$('input.price-min').val(ui.values[0])
|
||||
$('input.price-max').val(ui.values[1])
|
||||
filterProductData();
|
||||
},
|
||||
slide: function(event, ui) {
|
||||
$('.price-range').html(`${ui.values[0]} - ${ui.values[1]}`)
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('.child-category').each(function(index, el) {
|
||||
if ($(this).hasClass('active')) {
|
||||
$(this).parent('ul').addClass('show').siblings('button').removeClass('collapsed')
|
||||
|
|
@ -166,25 +87,6 @@
|
|||
filterProductData();
|
||||
});
|
||||
|
||||
function filterAttrChecked(data) {
|
||||
let filterAtKey = [];
|
||||
data.forEach((item) => {
|
||||
let checkedAtValues = [];
|
||||
|
||||
item.values.forEach((val) => {
|
||||
if (val.selected) {
|
||||
checkedAtValues.push(val.id)
|
||||
}
|
||||
})
|
||||
|
||||
if (checkedAtValues.length) {
|
||||
filterAtKey.push(`${item.id}:${checkedAtValues.join('/')}`)
|
||||
}
|
||||
})
|
||||
|
||||
return filterAtKey.join('|')
|
||||
}
|
||||
|
||||
function filterProductData() {
|
||||
let url = bk.removeURLParameters(window.location.href, 'attr', 'price', 'sort', 'order');
|
||||
let [priceMin, priceMax] = [$('.price-min').val(), $('.price-max').val()];
|
||||
|
|
@ -219,6 +121,19 @@
|
|||
location = url;
|
||||
}
|
||||
|
||||
function filterAttrChecked(data) {
|
||||
let filterAtKey = [];
|
||||
data.forEach((item) => {
|
||||
let checkedAtValues = [];
|
||||
item.values.forEach((val) => val.selected ? checkedAtValues.push(val.id) : '')
|
||||
if (checkedAtValues.length) {
|
||||
filterAtKey.push(`${item.id}:${checkedAtValues.join('/')}`)
|
||||
}
|
||||
})
|
||||
|
||||
return filterAtKey.join('|')
|
||||
}
|
||||
|
||||
function deleteFilterAll() {
|
||||
let url = bk.removeURLParameters(window.location.href, 'attr', 'price');
|
||||
location = url;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,19 @@
|
|||
<div class="product-tool d-flex justify-content-between align-items-center mb-4">
|
||||
@if (!is_mobile())
|
||||
<div class="style-wrap">
|
||||
<label class="{{ !request('style_list') || request('style_list') == 'grid' ? 'active' : ''}} grid">
|
||||
<label class="{{ !request('style_list') || request('style_list') == 'grid' ? 'active' : ''}} grid"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="top"
|
||||
title="{{ __('common.text_grid') }}"
|
||||
>
|
||||
<svg viewBox="0 0 19 19" xmlns="http://www.w3.org/2000/svg" width="18" height="18"><rect width="5" height="5"></rect><rect x="7" width="5" height="5"></rect><rect x="14" width="5" height="5"></rect><rect y="7" width="5" height="5"></rect><rect x="7" y="7" width="5" height="5"></rect><rect x="14" y="7" width="5" height="5"></rect><rect y="14" width="5" height="5"></rect><rect x="7" y="14" width="5" height="5"></rect><rect x="14" y="14" width="5" height="5"></rect></svg>
|
||||
<input class="d-none" value="grid" type="radio" name="style_list">
|
||||
</label>
|
||||
<label class="ms-1 {{ request('style_list') == 'list' ? 'active' : '' }} list">
|
||||
<label class="ms-1 {{ request('style_list') == 'list' ? 'active' : '' }} list"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="top"
|
||||
title="{{ __('common.text_list') }}"
|
||||
>
|
||||
<svg viewBox="0 0 19 19" xmlns="http://www.w3.org/2000/svg" width="18" height="18"><rect width="5" height="5"></rect><rect x="7" height="5" width="12"></rect><rect y="7" width="5" height="5"></rect><rect x="7" y="7" height="5" width="12"></rect><rect y="14" width="5" height="5"></rect><rect x="7" y="14" height="5" width="12"></rect></svg>
|
||||
<input class="d-none" value="list" type="radio" name="style_list">
|
||||
</label>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,90 @@
|
|||
<div class="mb-4 module-category-wrap">
|
||||
<h4 class="mb-3"><span>{{ __('product.category') }}</span></h4>
|
||||
<ul class="sidebar-widget mb-0" id="category-one">
|
||||
@foreach ($all_categories as $key_a => $category_all)
|
||||
<li class="{{ $category_all['id'] == $category->id ? 'active' : ''}}">
|
||||
<a href="{{ shop_route('categories.show', [$category_all['id']]) }}" title="{{ $category_all['name'] }}" class="category-href">{{ $category_all['name'] }}</a>
|
||||
@if ($category_all['children'])
|
||||
<button class="toggle-icon btn {{ $category_all['id'] == $category->id ? '' : 'collapsed'}}" data-bs-toggle="collapse" href="#category-{{ $key_a }}"><i class="bi bi-chevron-up"></i></button>
|
||||
<ul id="category-{{ $key_a }}" class="accordion-collapse collapse {{ $category_all['id'] == $category->id ? 'show' : ''}}" data-bs-parent="#category-one">
|
||||
@foreach ($category_all['children'] as $key_b => $child)
|
||||
<li class="{{ $child['id'] == $category->id ? 'active' : ''}} child-category">
|
||||
<a href="{{ shop_route('categories.show', [$child['id']]) }}" title="{{ $child['name'] }}">{{ $child['name'] }}</a>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
@endif
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="filter-box">
|
||||
@if ($filter_data['price']['min'] != $filter_data['price']['max'])
|
||||
@push('header')
|
||||
<script src="{{ asset('vendor/jquery/jquery-ui/jquery-ui.min.js') }}"></script>
|
||||
<link rel="stylesheet" href="{{ asset('vendor/jquery/jquery-ui/jquery-ui.min.css') }}">
|
||||
@endpush
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header p-0">
|
||||
<h4 class="mb-3">{{ __('product.price') }}</h4>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div id="price-slider" class="mb-2"><div class="slider-bg"></div></div>
|
||||
<div class="text-secondary price-range d-flex justify-content-between">
|
||||
<div>
|
||||
{{ __('common.text_form') }}
|
||||
<span class="min">{{ currency_format($filter_data['price']['select_min'], current_currency_code()) }}</span>
|
||||
</div>
|
||||
<div>
|
||||
{{ __('common.text_to') }}
|
||||
<span class="max">{{ currency_format($filter_data['price']['select_max'], current_currency_code()) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<input value="{{ $filter_data['price']['select_min'] }}" class="price-min d-none">
|
||||
<input value="{{ $filter_data['price']['select_max'] }}" class="price-max d-none">
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@foreach ($filter_data['attr'] as $index => $attr)
|
||||
<div class="card">
|
||||
<div class="card-header fw-bold p-0">
|
||||
<h4 class="mb-3">{{ $attr['name'] }}</h4>
|
||||
</div>
|
||||
<ul class="list-group list-group-flush attribute-item" data-attribute-id="{{ $attr['id'] }}">
|
||||
@foreach ($attr['values'] as $value_index => $value)
|
||||
<li class="list-group-item border-0 px-0">
|
||||
<label class="form-check-label d-block">
|
||||
<input class="form-check-input attr-value-check me-2" data-attr="{{ $index }}" data-attrval="{{ $value_index }}" {{ $value['selected'] ? 'checked' : '' }} name="6" type="checkbox" value="{{ $value['id'] }}">{{ $value['name'] }}
|
||||
</label>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
@push('add-scripts')
|
||||
<script>
|
||||
$("#price-slider").slider({
|
||||
range: true,
|
||||
step: 0.01,
|
||||
min: {{ $filter_data['price']['min'] ?? 0 }},
|
||||
max: {{ $filter_data['price']['max'] ?? 0 }},
|
||||
values: [{{ $filter_data['price']['select_min'] }}, {{ $filter_data['price']['select_max'] }}],
|
||||
change: function(event, ui) {
|
||||
$('input.price-min').val(ui.values[0])
|
||||
$('input.price-max').val(ui.values[1])
|
||||
filterProductData();
|
||||
},
|
||||
slide: function(event, ui) {
|
||||
let min = $('.price-range .min').html();
|
||||
let max = $('.price-range .max').html();
|
||||
$('.price-range .min').html(min.replace(min.replace(/[^0-9.]/g, ''), ui.values[0]));
|
||||
$('.price-range .max').html(max.replace(max.replace(/[^0-9.]/g, ''), ui.values[1]));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
Loading…
Reference in New Issue