如何自定义集合过滤器以将颜色显示为色样？

Question

我正在尝试从头开始构建 Shopify 主题，但我对此很陌生。我已经使用店面过滤来过滤集合。它工作正常，我想自定义集合过滤器以将颜色显示为颜色样本而不是文本标签。现在，过滤器正在将颜色渲染为文本，但我希望隐藏复选框并将颜色显示为可单击的样本。我的代码查看的是 Shopify 文档

https://shopify.dev/docs/storefronts/themes/navigation-search/filtering/storefront-filtering/support-storefront-filtering#the-filter-display

我尝试将颜色条件添加为：

{%- when 'color' -%}

并添加内联样式以将过滤器颜色标签中的背景设置为

<span class="color-swatch" style="background-color: {{ filter_value.label | downcase }};"></span>

它不会更改渲染的 html 上的任何内容。我现在的代码如下所示：

<form class="filters-form-container">
                    <div class="active-filters">
                        <a href="{{ collection.url }}?sort_by={{ collection.sort_by }}" class="clear-all-filters">Clear all</a>

                        {%- for filter in collection.filters -%} 
                            <details class="filter-group">
                                <summary>
                                    <div>
                                        <span>{{ filter.label }}</span>
                                        {%- if filter.active_values.size > 0 -%}
                                            <span>({{ filter.active_values.size }})</span>
                                        {%- endif -%}
                                    </div>
                                </summary>
                        
                                    {%- case filter.type -%}
                                        {%- when 'price_range' -%}
                                            <div class="price-range-slider">
                                                <div class="price-inputs">
                                                    <div class="price-input">
                                                        <span>{{ cart.currency.symbol }}</span>
                                                        <input 
                                                            name="{{ filter.min_value.param_name }}"
                                                            id="Filter-{{ filter.min_value.param_name }}"
                                                            class="min-price-input"
                                                            {% if filter.min_value.value -%}
                                                            value="{{ filter.min_value.value | money_without_currency | replace: ',', '' | divided_by: 100 }}"
                                                            {%- endif %}
                                                            type="number"
                                                            placeholder="0"
                                                            min="0"
                                                            max="{{ filter.range_max | money_without_currency | replace: ',', '' | divided_by: 100 }}"
                                                        >
                                                    </div>
                                                    <div class="price-input">
                                                        <span>{{ cart.currency.symbol }}</span>
                                                        <input 
                                                            name="{{ filter.max_value.param_name }}"
                                                            id="Filter-{{ filter.max_value.param_name }}"
                                                            class="max-price-input"
                                                            {% if filter.max_value.value -%}
                                                            value="{{ filter.max_value.value | money_without_currency | replace: ',', '' | divided_by: 100 }}"
                                                            {%- endif %}
                                                            type="number"
                                                            placeholder="{{ filter.range_max | money_without_currency | replace: ',', '' | divided_by: 100 }}"
                                                            min="0"
                                                            max="{{ filter.range_max | money_without_currency | replace: ',', '' | divided_by: 100 }}"
                                                        >
                                                    </div>
                                                </div>
                        
                                                <div class="range-slider">
                                                    <input 
                                                        type="range" 
                                                        class="min-price" 
                                                        value="{{ filter.min_value.value | default: 0 | money_without_currency | replace: ',', '' | divided_by: 100 }}"
                                                        min="0" 
                                                        max="{{ filter.range_max | money_without_currency | replace: ',', '' | divided_by: 100 }}"
                                                    >
                                                    <input 
                                                        type="range" 
                                                        class="max-price" 
                                                        value="{{ filter.max_value.value | default: filter.range_max | money_without_currency | replace: ',', '' | divided_by: 100 }}"
                                                        min="0" 
                                                        max="{{ filter.range_max | money_without_currency | replace: ',', '' | divided_by: 100 }}"
                                                    >
                                                </div>
                        
                                                <button type="submit" class="filter-submit">Apply</button>
                                            </div>
                                        {%- when 'boolean' -%}
                                            <div class="filter-header">
                                                <p>{{ filter.active_values.size }} selected</p>
                                                {%- if filter.active_values.size > 0 -%}
                                                    <p><a href="{{ filter.url_to_remove }}" class="reset-link">Reset</a></p>
                                                {%- endif -%}
                                            </div>
                                            <ul class="filter-group">
                                                <li>
                                                    <input type="checkbox"
                                                           name="{{ filter.param_name }}"
                                                           value="{{ filter.true_value.value }}"
                                                           id="Filter-{{ filter.param_name }}"
                                                           {% if filter.true_value.active -%}checked{%- endif %}
                                                           {% if filter.true_value.count == 0 and filter.true_value.active == false -%}disabled{%- endif %}>
                                                    <label for="Filter-{{ filter.param_name }}">{{ filter.true_value.label }}</label>
                                                </li>
                                                <li>
                                                    <input type="checkbox"
                                                           name="{{ filter.param_name }}"
                                                           value="{{ filter.false_value.value }}"
                                                           id="Filter-{{ filter.param_name }}-false"
                                                           {% if filter.false_value.active -%}checked{%- endif %}
                                                           {% if filter.false_value.count == 0 and filter.false_value.active == false -%}disabled{%- endif %}>
                                                    <label for="Filter-{{ filter.param_name }}-false">{{ filter.false_value.label }}</label>
                                                </li>
                                            </ul>
                                            <button type="submit" class="filter-submit">Apply</button>
                                        {%- when 'color' -%}
                                            <div class="filter-header">
                                                <p>{{ filter.active_values.size }} selected</p>
                                                {%- if filter.active_values.size > 0 -%}
                                                    <p><a href="{{ filter.url_to_remove }}" class="reset-link">Reset</a></p>
                                                {%- endif -%}
                                            </div>
                                            <ul class="filter-group teste-cores" syle="background: red;">
                                                {%- for filter_value in filter.values -%}
                                                    <li>
                                                        <input type="checkbox"
                                                                name="{{ filter_value.param_name }}"
                                                                value="{{ filter_value.value }}"
                                                                id="Filter-{{ filter.param_name }}-{{ forloop.index }}"
                                                                {% if filter_value.active -%}checked{%- endif %}>
                                                        <label for="Filter-{{ filter.param_name }}-{{ forloop.index }}">
                                                            <span class="color-swatch" style="background-color: {{ filter_value.label | downcase }};"></span>
                                                            {{ filter_value.label }}
                                                        </label>
                                                    </li>
                                                {%- endfor -%}
                                            </ul>
                                            <button type="submit" class="filter-submit">Apply</button>
                                                                                                            
                                        {%- when 'list' -%}
                                            <div class="filter-header">
                                                <p>{{ filter.active_values.size }} selected</p>
                                                {%- if filter.active_values.size > 0 -%}
                                                    <p><a href="{{ filter.url_to_remove }}" class="reset-link">Reset</a></p>
                                                {%- endif -%}
                                            </div>
                                            <ul class="filter-group">
                                                {%- for filter_value in filter.values -%}
                                                    <li>
                                                        <input type="checkbox"
                                                               name="{{ filter_value.param_name }}"
                                                               value="{{ filter_value.value }}"
                                                               id="Filter-{{ filter.param_name }}-{{ forloop.index }}"
                                                               {% if filter_value.active -%}checked{%- endif %}
                                                               {% if filter_value.count == 0 and filter_value.active == false -%}disabled{%- endif %}>
                                                        <label for="Filter-{{ filter.param_name }}-{{ forloop.index }}">
                                                            <span class="visual-display">

                                                            </span>
                                                            {{ filter_value.label }}
                                                        </label>
                                                    </li>
                                                {%- endfor -%}
                                            </ul>
                                            <button type="submit" class="filter-submit">Apply</button>
                        
                                        {%- else -%}
                                            <div class="filter-header">
                                                <p>{{ filter.active_values.size }} selected</p>
                                                {%- if filter.active_values.size > 0 -%}
                                                    <p><a href="{{ filter.url_to_remove }}" class="reset-link">Reset</a></p>
                                        {%- endif -%}
                                            </div>
                                    {%- endcase -%}
                            </details>
                        {%- endfor -%}
                    </div>    
                </form>

我感觉是Shopify自动生成的。我想学习如何自定义颜色，这样我也可以更改尺寸的样式。

我想将样式更改为接近的样式：https://themes.shopify.com/themes/king/styles/castle/preview?surface_detail=new-themes&surface_inter_position=1&surface_intra_position=3&surface_type=all

Answer 1

 1. Correct the style tag on the template first
        <details class="filter-group">
            <summary>
                <div>
                    <span>{{ filter.label }}</span> {%- if filter.active_values.size > 0 -%}
                    <span>({{ filter.active_values.size }})</span> {%- endif -%}
                </div>
            </summary>
            {%- case filter.type -%} {%- when 'color' -%}
            <div class="filter-header">
                <p>{{ filter.active_values.size }} selected</p>
                {%- if filter.active_values.size > 0 -%}
                <p><a href="{{ filter.url_to_remove }}" class="reset-link">Reset</a></p>
                {%- endif -%}
            </div>
            <ul class="filter-group color-swatches">
                {%- for filter_value in filter.values -%}
                <li>
                    <input type="checkbox" name="{{ filter_value.param_name }}" value="{{ filter_value.value }}" id="Filter-{{ filter.param_name }}-{{ forloop.index }}" {% if filter_value.active -%}checked{%- endif %} class="color-checkbox">
                    <label for="Filter-{{ filter.param_name }}-{{ forloop.index }}" class="color-label"> 
                        <span class="color-swatch" style="background-color: {{ filter_value.label | downcase }};"></span>
                    </label>
                </li>
                {%- endfor -%}
            </ul>
            <button type="submit" class="filter-submit">Apply</button>
            {%- endcase -%}
        </details>        

 2. Add the CSS in style.css or any theme related CSS:
 .color-checkbox {
      display: none;
    }
    
    .color-label {
      display: inline-block;
      cursor: pointer;
    }
    
    .color-swatch {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 1px solid #ccc; 
      border-radius: 50%;
      margin-right: 5px;
      vertical-align: middle;
    }
    
    .color-checkbox:checked + .color-label .color-swatch {
      border-color: #333; 
    }