价格筛选

适用范围：商城商品列表页

标签作用：输出价格区间筛选表单，配合列表页筛选一起提交

基础用法

{shop:pricefilter /}

自定义文案

{shop:pricefilter
  title="价格"
  minlabel="最低"
  maxlabel="最高"
  button="确定"
  formid="shop-filter-form"
/}

控制参数

参数描述默认值
title筛选标题价格
minlabel最低价输入框标签最低
maxlabel最高价输入框标签最高
button提交按钮文字筛选
formid表单 ID，需与列表页其它筛选表单保持一致shop-filter-form

提交参数

表单提交后会带上以下 GET 参数，由商品列表自动解析：

参数描述
price_min最低价
price_max最高价
filter[ext_***][]扩展字段筛选项（由其它筛选控件提交）
keyword关键词

说明

  • 该标签依赖列表页的 $shop_filters.price 数据，仅在商城栏目列表页有效。
  • 输出的表单带 data-shop-price-filter 与价格滑块结构，需要商城前端 JS 配合初始化。
  • 标签为单标签（自闭合），无需结束标签。
  • 其它扩展字段筛选（复选框等）可自行使用 $shop_filters.groups 渲染，
    其 name 使用 filter[{$group.name}][]，并设置 form="shop-filter-form"。

使用示例

<aside>
  {shop:pricefilter title="价格筛选" /}

  {if !empty($shop_filters.groups)}
  {volist name="$shop_filters.groups" id="group"}
  <fieldset>
    <legend>{$group.title}</legend>
    {volist name="$group.options" id="option"}
    <label>
      <input type="checkbox" form="shop-filter-form"
        name="filter[{$group.name}][]" value="{$option.value}"
        {if $option.checked}checked{/if} onchange="this.form.submit()">
      <span>{$option.value}</span>
    </label>
    {/volist}
  </fieldset>
  {/volist}
  {/if}
</aside>

更新时间：2026-09-19

更新时间：2026-09-19 17:12:42

文章目录