php字母归类显示列表

ab4cc82c-df1b-4092-a3f4-d04d363e58e5

php部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
public function getIndex()
{
$items = $this->getItems();
if (is_null($items)) {
return null;
}

$this->sortItems($items);

$letters = $this->items2letters($items);

$columnCount = abs(intval($this->getData('columns')));
if (!$columnCount) {
$columnCount = 1;
}
$itemsPerColumn = ceil((sizeof($items) + sizeof($letters)) / max(1, $columnCount));

$col = 0; // current column
$num = 0; // current number of items in column
$index = [];
foreach ($letters as $letter => $items){
$index[$col][$letter] = $items['items'];
$num += $items['count'];
$num++;
if ($num >= $itemsPerColumn){
$num = 0;
$col++;
}
}

return $index;
}

public function getItems()
{
$attribute_code = $this->scopeConfig->getValue('amshopby_brand/general/attribute_code');
if ($attribute_code == '') {
return null;
}

$options = $this->repository->get($attribute_code)->getOptions();
array_shift($options);

$items = [];
foreach ($options as $option) {
$itemUrl = $this->url->getUrl('amshopby/index/index', [
'_query' => [$attribute_code => $option->getValue()],
]);

$filter_code = \Amasty\Shopby\Helper\FilterSetting::ATTR_PREFIX . $attribute_code;
$setting = $this->optionSettingHelper->getSettingByValue($option->getValue(), $filter_code, $this->_storeManager->getStore()->getId());

$items[] = [
'label' => $setting->getLabel(),
'url' => $itemUrl,
'img' => $setting->getImageUrl(),
];
}

return $items;
}

protected function sortItems(array &$items)
{
usort($items, function($a, $b) {
$a['label'] = trim($a['label']);
$b['label'] = trim($b['label']);

$x = substr($a['label'], 0, 1);
$y = substr($b['label'], 0, 1);
if (is_numeric($x) && !is_numeric($y)) return 1;
if (!is_numeric($x) && is_numeric($y)) return -1;

return strcmp(strtoupper($a['label']), strtoupper($b['label']));
});
}

protected function items2letters($items)
{
$letters = [];
foreach ($items as $item) {
if (function_exists('mb_strtoupper')) {
$i = mb_strtoupper(mb_substr($item['label'], 0, 1, 'UTF-8'));
} else {
$i = strtoupper(substr($item['label'], 0, 1));
}

if (is_numeric($i)) { $i = '#'; }

if (!isset($letters[$i]['items'])){
$letters[$i]['items'] = array();
}

$letters[$i]['items'][] = $item;

if (!isset($letters[$i]['count'])){
$letters[$i]['count'] = 0;
}

$letters[$i]['count']++;
}

return $letters;
}

 

view

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<?php $items = $this->getIndex();$k=1;?>

<div class="col-xs-12 col-md-12">
<div class="brands_title">
<?php foreach ($items as $letters): ?>
<?php $letterArr = array_keys($letters);?>
<?php foreach($letterArr as $lable):?>
<?php $k++;?>
<span class="brand_title_link" data_lable="<?php echo $lable ?>" style="cursor:pointer"><?php echo $lable ?></span>

<?php endforeach;?>
<?php endforeach;?>
</div>
<div class="content brands_content_list">
<?php if ($items): ?>
<?php $width = floor(100/count($items)) ?>
<?php foreach ($items as $letters): ?>

<!-- <div style="float:left; width:<?php echo $width ?>%">-->
<?php foreach ($letters as $letter => $options): ?>
<dl class="brands_list_dl">
<dt class="<?php echo "content_".$letter ?>"><?php echo $letter ?></dt>
<dd>

<?php foreach ($options as $o): ?>
<?php $url = $this->getBaseUrl().substr($o['url'],strripos($o['url'],"/")+1);
?>* [" >
<?php if ($o['img']): ?>
![](<?php echo $o[)" />
<?php else: ?>
<?php echo $this->escapeHtml($o['label']) ?>
<?php endif ?>
<?php if ($this->getShowCounts()) { echo '&nbsp;<span class="count">('.$o['cnt'].')</span>'; } ?>
](<?php echo $url//$o[)
</dd>
</dl>
<?php endforeach ?>
<!-- </div> -->

<?php endforeach ?>
<div style="clear:both;"></div>
<?php else: ?>
Please select brand attribute in Stores -> Configuration -> Amasty Extensions -> Improved Layered Navigation: Brands.
<?php endif ?>
</div>
</div>

<script type="text/javascript">
require(['jquery'],function ($) {
$(document).on("click",".brand_title_link",function(){
var label = $(this).attr("data_lable");
var content_class="content_"+label;
$("html,body").stop(true);
$("html,body").animate({scrollTop:$("."+content_class).offset().top - $('.nav-sections').offset().top},1000);
});
});
</script>

或者用js点击字母显示隐藏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<?php
$items = $this->getIndex();
$brandLetters = $this->getAllLetters();
$isShowCount = false;//$this->getData('show_count');
$isShowImages = true;//$this->getData('show_images');
$imgWidth = 100;//abs($this->getData('image_width'));
$imgHeight = 40;//abs($this->getData('image_height'));
?>
<style>
ul.bare-list img {
<?php if ($imgWidth): ?>
max-width: <?php echo $imgWidth;?>px;
<?php endif;?>
<?php if ($imgHeight): ?>
max-height: <?php echo $imgHeight;?>px;
<?php endif;?>
}
</style>

<div class="content">
<?php if ($items): ?>
<div class="brands-filters">
<div class="letters">
<div class="letters-box">
[<?php echo __('All Brands')?>](javascript:void(0))
</div>
<div class="letters-box">
<?php foreach ($brandLetters as $letter) :?>
["><?php echo $letter?>](javascript:void(0))
<?php endforeach; ?>
</div>
</div>
</div>
<?php $width = floor(100/count($items)) ?>
<?php foreach ($items as $letters): ?>
<div class="<?php if($isShowImages) echo 'brand-images'?>"style="float:left; width:<?php echo $width ?>%">
<?php foreach ($letters as $letter => $options): ?>
<dl class="brands-letter letter-<?php echo $letter?>">
<dt><?php echo $letter ?></dt>
<dd>

<?php foreach ($options as $o): ?>* [">
<?php if ($o['img'] && $isShowImages): ?>
![](<?php echo $o[)" />
<?php endif ?>
<?php echo $this->escapeHtml($o['label']) ?>
<?php if ($isShowCount) { echo '&nbsp;<span class="count">('.$o['cnt'].')</span>'; } ?>
](<?php echo $o[)
</dd>
</dl>
<?php endforeach ?>
</div>
<?php endforeach ?>
<div style="clear:both;"></div>
<?php else: ?>

</div>
<?php endif ?>

<script>
require([
'jquery',
'Iggo_Ponkes/js/brand-filter',
'domReady!'
], function ($) {
$(".letters-box a").click(function(e) {
e.preventDefault();
$(this).applyBrandFilter('.brands-letter');
});
});
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
define([
"jquery",
], function ($) {
var BrandFilter = function () {
return {
apply: function (containerSelector) {
var elements = $(containerSelector);
elements.each( function() {
$(this).show();
});

if (! $(this).hasClass('letter-all')) {
var letter = '';
var classList = $(this).attr('class').split(/\s+/);
$.each(classList, function(index, item) {
if (item.indexOf("letter-") >= 0) {
return letter = item;
}
});

elements.each( function() {
if (! $(this).hasClass(letter)) {
$(this).hide();
}
});
}

$(this).parent().siblings().addBack().each(function() {
$(this).children("[class*='letter-']").each(function() {
$(this).removeClass('active');
});
});
return $(this).addClass('active');
}
};
} ();
$.fn.extend({
applyBrandFilter: BrandFilter.apply
});
});

 

坚持原创技术分享,您的支持将鼓励我继续创作!