wuhui_zzw
/
wyyl
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化筛选 ui

This commit is contained in:
pushuo 2023-01-11 19:30:32 +08:00
parent fe66b21e9c
commit 5919f0d971
15 changed files with 202 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
resources/beike/shop/default/css/page-categories.scss vendored
View File

@ -28,7 +28,7 @@ body.page-categories {
}
.style-wrap {
span {
label {
cursor: pointer;
&.active {
svg {
@ -68,8 +68,10 @@ body.page-categories {
}
.product-tool {
.order-wrap {
min-width: 150px;
@media (min-width: 992px) {
.order-select {
min-width: 170px;
}
}
}
@ -106,3 +108,88 @@ body.page-categories {
}
}
.sidebar-widget {
list-style: none;
padding: 0 0 1.4rem;
border-bottom: 1px solid #E6E6E6;
> li {
padding-top: 0.3rem;
padding-bottom: 0.3rem;
// border-bottom: 1px solid #e9ecef;
&:last-of-type {
border-bottom: none;
}
.category-href {
display: inline-block;
position: relative;
color: #333;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
width: calc(100% - 36px);
}
&.active {
> a {
font-weight: bold;
color: $primary;
}
}
}
ul {
padding-left: 12px;
list-style: none;
li {
margin-top: 0;
ul {
margin-top: 8px;
padding-left: 14px;
}
&:last-of-type {
border: none;
}
&.active {
> a {
color: $primary;
font-weight: bold;
}
}
a {
color: #868e96;
&:first-of-type {
width: calc(100% - 26px);
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
display: inline-block;
}
&:hover {
color: $primary;
}
}
}
}
.toggle-icon {
float: right;
font-size: 16px;
padding: 0 6px;
i {
color: #aaa;
}
&.collapsed {
transform: rotate(-180deg);
}
}
}

7
resources/beike/shop/default/css/page-product.scss vendored
View File

@ -15,6 +15,13 @@ body.page-product {
}
}
#product-description {
img {
max-width: 100%;
height: auto;
}
}
.product-image {
#swiper {
height: 250px;

5
resources/beike/shop/default/css/product-style.scss vendored
View File

@ -47,6 +47,11 @@
transition: all 0.3s ease-in-out;
}
.product-name {
height: auto;
margin-bottom: 20px;
}
.product-bottom-info {
padding-top: 10px;
padding-left: 20px;

4
resources/lang/de/common.php
View File

@ -67,6 +67,10 @@ return [
'menu' => 'Menü',
'whether_open' => 'ob öffnen',
'to_setting' => 'zu konfigurieren',
'low' => 'niedrig',
'high' => 'hoch',
'sales' => 'Verkauf',
'showing_page' => 'Showing 1-:per_page of :total item(s)',
'id' => 'ID',
'created_at' => 'Erstellungszeit',

1
resources/lang/en/common.php
View File

@ -71,6 +71,7 @@ return [
'low' => 'Low',
'high' => 'High',
'sales' => 'Sales',
'showing_page' => 'Showing 1-:per_page of :total item(s)',
'id' => 'ID',
'created_at' => 'Created At',

4
resources/lang/es/common.php
View File

@ -67,6 +67,10 @@ return [
'menu' => 'menú',
'whether_open' => 'Ya sea para abrir',
'to_setting' => 'para configurar',
'low' => 'bajo',
'high' => 'alto',
'sales' => 'ventas',
'showing_page' => 'Showing 1-:per_page of :total item(s)',
'id' => 'ID',
'created_at' => 'tiempo de creación',

4
resources/lang/fr/common.php
View File

@ -67,6 +67,10 @@ return [
'menu' => 'menu',
'whether_open' => 'Que ce soit pour ouvrir',
'to_setting' => 'pour configurer',
'low' => 'faible',
'high' => 'élevé',
'sales' => 'ventes',
'showing_page' => 'Showing 1-:per_page of :total item(s)',
'id' => 'ID',
'created_at' => 'temps de creation',

4
resources/lang/it/common.php
View File

@ -67,6 +67,10 @@ return [
'menu' => 'menù',
'whether_open' => 'Se aprire',
'to_setting' => 'configurare',
'low' => 'basso',
'high' => 'alto',
'sales' => 'vendite',
'showing_page' => 'Showing 1-:per_page of :total item(s)',
'id' => 'ID',
'created_at' => 'tempo di creazione',

4
resources/lang/ja/common.php
View File

@ -67,6 +67,10 @@ return [
'menu' => 'メニュー',
'whether_open' => '開くかどうか',
'to_setting' => '設定する',
'low' => '低い',
'high' => '高い',
'sales' => '売上',
'showing_page' => 'Showing 1-:per_page of :total item(s)',
'id' => 'ID',
'created_at' => '作成時間',

4
resources/lang/ru/common.php
View File

@ -67,6 +67,10 @@ return [
'menu' => 'меню',
'whether_open' => 'открывать ли',
'to_setting' => 'настроить',
'low' => 'низкий',
'high' => 'высокий',
'sales' => 'продажи',
'showing_page' => 'Showing 1-:per_page of :total item(s)',
'id' => 'ID',
'created_at' => 'время создания',

1
resources/lang/zh_cn/common.php
View File

@ -71,6 +71,7 @@ return [
'low' => '低',
'high' => '高',
'sales' => '销量',
'showing_page' => '1-:per_page 共 :total 条数据',
'id' => 'ID',
'created_at' => '创建时间',

1
resources/lang/zh_hk/common.php
View File

@ -70,6 +70,7 @@ return [
'low' => '低',
'high' => '高',
'sales' => '銷量',
'showing_page' => '1-:per_page 共 :total 条数据',
'id' => 'ID',
'created_at' => '創建時間',

69
themes/default/category.blade.php
View File

@ -16,6 +16,27 @@
<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">
@ -70,35 +91,7 @@
</ul>
</div>
<div class="product-tool d-flex justify-content-between align-items-center mb-4">
<div class="style-wrap">
<span class="{{ !request('style_list') || request('style_list') == 'grid' ? 'active' : ''}}">
<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>
</span>
<span class="ms-1 class="{{ request('style_list') == 'list' ? 'active' : ''}}">
<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>
</span>
</div>
<div class="d-flex">
{{-- <div>Showing 1-19 of 20 item(s)</div> --}}
<select class="form-select perpage-select">
@foreach ($per_pages as $val)
<option value="{{ $val }}" {{ request('per_page') == $val ? 'selected' : '' }}>{{ $val }}</option>
@endforeach
</select>
<select class="form-select order-select ms-2">
<option value="">{{ __('common.default') }}</option>
<option value="products.sales|asc" {{ request('sort') == 'products.sales' && request('order') == 'asc' ? 'selected' : '' }}>{{ __('common.sales') }} ({{ __('common.low') . '-' . __('common.high')}})</option>
<option value="products.sales|desc" {{ request('sort') == 'products.sales' && request('order') == 'desc' ? 'selected' : '' }}>{{ __('common.sales') }} ({{ __('common.high') . '-' . __('common.low')}})</option>
<option value="pd.name|asc" {{ request('sort') == 'pd.name' && request('order') == 'asc' ? 'selected' : '' }}>{{ __('common.name') }} (A - Z)</option>
<option value="pd.name|desc" {{ request('sort') == 'pd.name' && request('order') == 'desc' ? 'selected' : '' }}>{{ __('common.name') }} (Z - A)</option>
<option value="product_skus.price|asc" {{ request('sort') == 'product_skus.price' && request('order') == 'asc' ? 'selected' : '' }}>{{ __('product.price') }} ({{ __('common.low') . '-' . __('common.high')}})</option>
<option value="product_skus.price|desc" {{ request('sort') == 'product_skus.price' && request('order') == 'desc' ? 'selected' : '' }}>{{ __('product.price') }} ({{ __('common.high') . '-' . __('common.low')}})</option>
</select>
</div>
</div>
@include('shared.filter_bar_block')
@if (count($products_format))
<div class="row {{ request('style_list') == 'list' ? 'product-list-wrap' : ''}}">
@ -142,8 +135,8 @@
$(document).ready(function () {
$("#slider").slider({
range: true,
min: {{ $filter_data['price']['min'] }},
max: {{ $filter_data['price']['max'] }},
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])
@ -156,13 +149,20 @@
});
});
$('.child-category').each(function(index, el) {
if ($(this).hasClass('active')) {
$(this).parent('ul').addClass('show').siblings('button').removeClass('collapsed')
$(this).parents('li').addClass('active')
}
});
$('.attr-value-check').change(function(event) {
let [attr, val] = [$(this).data('attr'),$(this).data('attrval')];
filterAttr[attr].values[val].selected = $(this).is(":checked");
filterProductData();
});
$('.form-select').change(function(event) {
$('.form-select, input[name="style_list"]').change(function(event) {
filterProductData();
});
@ -190,6 +190,7 @@
let [priceMin, priceMax] = [$('.price-min').val(), $('.price-max').val()];
let order = $('.order-select').val();
let perpage = $('.perpage-select').val();
let styleList = $('input[name="style_list"]:checked').val();
layer.load(2, {shade: [0.3,'#fff'] })
@ -211,6 +212,10 @@
url = bk.updateQueryStringParameter(url, 'per_page', perpage);
}
if (styleList) {
url = bk.updateQueryStringParameter(url, 'style_list', styleList);
}
location = url;
}

35
themes/default/shared/filter_bar_block.blade.php Normal file
View File

@ -0,0 +1,35 @@
<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">
<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">
<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>
</div>
@endif
<div class="d-flex align-items-center">
<div class="text-nowrap text-secondary">
{{ __('common.showing_page', ['per_page' => request('per_page'), 'total' => $products->total()]) }}
</div>
<select class="form-select perpage-select ms-3">
@foreach ($per_pages as $val)
<option value="{{ $val }}" {{ request('per_page') == $val ? 'selected' : '' }}>{{ $val }}</option>
@endforeach
</select>
<select class="form-select order-select ms-2">
<option value="">{{ __('common.default') }}</option>
<option value="products.sales|asc" {{ request('sort') == 'products.sales' && request('order') == 'asc' ? 'selected' : '' }}>{{ __('common.sales') }} ({{ __('common.low') . '-' . __('common.high')}})</option>
<option value="products.sales|desc" {{ request('sort') == 'products.sales' && request('order') == 'desc' ? 'selected' : '' }}>{{ __('common.sales') }} ({{ __('common.high') . '-' . __('common.low')}})</option>
<option value="pd.name|asc" {{ request('sort') == 'pd.name' && request('order') == 'asc' ? 'selected' : '' }}>{{ __('common.name') }} (A - Z)</option>
<option value="pd.name|desc" {{ request('sort') == 'pd.name' && request('order') == 'desc' ? 'selected' : '' }}>{{ __('common.name') }} (Z - A)</option>
<option value="product_skus.price|asc" {{ request('sort') == 'product_skus.price' && request('order') == 'asc' ? 'selected' : '' }}>{{ __('product.price') }} ({{ __('common.low') . '-' . __('common.high')}})</option>
<option value="product_skus.price|desc" {{ request('sort') == 'product_skus.price' && request('order') == 'desc' ? 'selected' : '' }}>{{ __('product.price') }} ({{ __('common.high') . '-' . __('common.low')}})</option>
</select>
</div>
</div>

2
themes/default/shared/product.blade.php
View File

@ -1,4 +1,4 @@
<div class="product-wrap {{ $style_list ?? '' }}">
<div class="product-wrap {{ request('style_list') ?? '' }}">
<div class="image">
<a href="{{ $product['url'] }}">
<div class="image-old">