Shopify集合筛选添加独立价格复选框（无需标签）的修复需求

• 价格选项重复：代码直接逐商品遍历collection.products生成价格选项，未对相同价格值去重，同一价位的N个商品会生成N个完全一致的选项，造成重复展示。
• 点击后无法筛选：复用了分类标签筛选的全局事件逻辑（data-action="toggle-tag"），尝试将价格值伪装成标签走Shopify标签路由筛选，但价格本身并非商品标签，路由无法匹配到有效商品集，自然无法返回正确结果。
• 选中状态串到分类模块：激活筛选条目区域未做独立作用域隔离，复用了分类筛选全局的激活状态渲染逻辑，没有单独为价格筛选维护独立的状态存储与渲染容器，导致选中条目被渲染到分类筛选的DOM区域下。

<div class="card__section card__section--tight price-filter-block">
    <p class="card__title--small heading">Price</p>

    {% comment %} 独立维护价格筛选的激活条目区域，仅在Price模块下渲染，不与分类筛选共享DOM {% endcomment %}
    <div class="collection__active-filters price-active-filters">
        {% if request.params.min_price %}
            {% assign selected_price = request.params.min_price | times: 1 %}
            <div class="collection__active-filter-item">
                <button class="collection__active-filter-cross"
                        data-action="clear-price-filter"
                >{% render 'icon', icon: 'close' %}
                </button>
                {{ selected_price | money_without_trailing_zeros }}
            </div>
            <button class="collection__clear-filter button button--small button--transparent button--full"
                    data-action="clear-price-filter">{{ 'collection.filter.clear_all' | t }}</button>
        {% endif %}
    </div>

    <div class="collection__filter-group">
        <ul class="collection__filter-checkbox-list">
            {% comment %} 提取所有商品的价格值做去重排序，从根源解决选项重复问题 {% endcomment %}
            {% assign unique_prices = collection.products | map: 'price' | uniq | sort | reverse %}
            {% for price_val in unique_prices %}
                <li class="collection__filter-checkbox">
                    <div class="checkbox-wrapper">
                        <input type="radio" 
                               class="checkbox price-filter-input" 
                               id="price-{{ price_val }}"
                               name="price-filter" 
                               data-action="filter-by-price" 
                               data-price="{{ price_val }}"
                               {% if request.params.min_price == price_val %}
                               checked="checked"
                               {% endif %}>
                        {% render 'icon', icon: 'check' %}
                    </div>
                    <label for="price-{{ price_val }}">{{ price_val | money_without_trailing_zeros }}</label>
                </li>
            {% endfor %}
        </ul>
    </div>
</div>

• 价格筛选完全脱离标签系统：所有筛选状态通过Shopify集合原生支持的min_price/max_priceURL参数传递，不侵入原有分类筛选的标签路由逻辑，两者状态完全独立，互不干扰。
• 配套JS仅需新增两个独立事件监听，不修改原有分类筛选的代码：
  • 监听data-action="filter-by-price"元素的点击事件，将获取到的价格值同时作为最小、最大价格参数，构造当前集合带?min_price=xxx&max_price=xxx的完整URL并跳转，由Shopify后端直接匹配对应价格的商品。
  • 监听data-action="clear-price-filter"元素的点击事件，移除URL上的min_price、max_price参数后跳转回默认集合页，清除价格选中状态。
• 所有价格相关的选中条目仅在.price-active-filters容器内渲染，不会被全局的分类筛选激活逻辑抓取渲染，从DOM层面避免状态串扰。

内容的提问来源于stack exchange，提问作者Amy Arnold