优化分类筛选等

This commit is contained in:
pushuo 2023-01-12 09:24:27 +08:00
parent 71ab7a5da8
commit 2f66a6b945
16 changed files with 189 additions and 118 deletions

View File

@ -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%;

View File

@ -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: '', // 使用积分系数

View File

@ -100,7 +100,7 @@ body.page-account-order-info {
font-size: .9375rem;
.name {
font-weight: bold;
// font-weight: bold;
margin-bottom: .4rem;
color: #1a1a1a;
}

View File

@ -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;
}
}
}

View File

@ -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',

View File

@ -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',

View File

@ -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',

View File

@ -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',

View File

@ -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',

View File

@ -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' => '作成時間',

View File

@ -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' => 'время создания',

View File

@ -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' => '创建时间',

View File

@ -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' => '創建時間',

View File

@ -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;

View File

@ -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>

View File

@ -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