Magento2 Hyva主题Layered Navigation搜索输入功能异常排查

问题根源 #

Hyva主题中Magento的FilterItem对象被包装成了Proxy代理对象，直接将PHP的$filterItems转换为JS变量时，得到的是Proxy实例而非普通数组，导致无法正常遍历和筛选。

解决方案步骤 #

1. 在PHP中提取纯数组数据 #

修改app/design/frontend/Owner/sitename/Magento_LayeredNavigation/templates/layer/filter.phtml，先将$filterItems转换为不含Proxy的纯关联数组，再转成JSON：

<?php
// 提取FilterItem的核心字段到纯数组
$pureFilterItems = [];
foreach ($filterItems as $item) {
    $pureFilterItems[] = [
        'label'       => $item->getLabel(),
        'value'       => $item->getValue(),
        'count'       => $item->getCount(),
        'url'         => $item->getUrl(),
        'is_selected' => $item->isSelected()
    ];
}
// 转换为JSON（添加JSON_UNESCAPED_UNICODE确保中文显示正常）
$filterItemsJson = json_encode($pureFilterItems, JSON_UNESCAPED_UNICODE);
?>

2. 用Alpine.js实现搜索筛选逻辑 #

在模板中编写Alpine组件，使用纯JSON数组初始化数据，实现实时筛选：

<!-- 搜索输入框 + 筛选结果列表 -->
<div x-data="{
    allItems: <?= $filterItemsJson ?>,
    searchTerm: '',
    // 计算属性：返回匹配的子分类
    get filteredItems() {
        if (!this.searchTerm.trim()) return this.allItems;
        const term = this.searchTerm.toLowerCase();
        return this.allItems.filter(item => 
            item.label.toLowerCase().includes(term)
        );
    }
}">
    <!-- 搜索输入框 -->
    <input 
        type="text" 
        x-model="searchTerm"
        placeholder="搜索子分类..."
        class="w-full p-2 border rounded"
    >

    <!-- 筛选后的子分类列表 -->
    <ul class="mt-2">
        <template x-for="item in filteredItems" :key="item.value">
            <li class="py-1">
                <a 
                    :href="item.url"
                    x-text="`${item.label} (${item.count})`"
                    :class="{'font-bold text-blue-600': item.is_selected}"
                ></a>
            </li>
        </template>
    </ul>
</div>

3. 验证效果 #

刷新页面后，控制台输出的allItems会是普通JS数组，而非Proxy对象，此时输入搜索关键词即可实时筛选子分类标签。

额外提示 #

• 如果需要更多字段（比如自定义属性），直接在PHP的$pureFilterItems数组中添加对应的取值逻辑即可。
• 若搜索需要更精准的匹配（比如前缀/后缀匹配），修改filteredItems中的判断条件即可。

内容的提问来源于stack exchange，提问作者D.D.