基于shopify的在线商店的集合过滤器错误

问题描述

我正在开发基于 shopify 的在线商店的主题。有一个与过滤器相关的问题..它显示相同选项的多个标签,例如尺寸过滤器它同时显示 2XL 和 XXL。我不是能够在代码中找到故障。请帮助我解决这个问题。

''' {%- endcomment -%}

  {%- if show_filters -%}
    {%- comment -%}
    Implementation note: the filters can be displayed in two different ways: in a sidebar menu,always visible,or in a drawer. Due to that,we are
    setting the general code here,and then we will output it twice.
    {%- endcomment -%}

    {%- assign quick_links = linklists[section.settings.filter_menu] -%}

    {%- capture filters_content -%}
      {%- if quick_links != empty -%}
        <div class="Collapsible Collapsible--padded Collapsible--autoExpand">
          <button type="button" class="Collapsible__Button heading u-h6" data-action="toggle-collapsible" aria-expanded="false">
            {{- quick_links.title | escape -}} <span class="Collapsible__Plus"></span>
          </button>

          <div class="Collapsible__Inner">
            <div class="Collapsible__Content">
              <ul class="Linklist">
                {%- for link in quick_links.links -%}
                  <li class="Linklist__Item {% if link.active %}is-selected{% endif %}">
                    <a href="{{ link.url }}" class="Link Link--primary Text--subdued {% if link.active %}is-active{% endif %}">{{ link.title | escape }}</a>
                  </li>
                {%- endfor -%}
              </ul>
            </div>
          </div>
        </div>
      {%- endif -%}

      {%- if has_visible_tags -%}
        {%- if section.settings.filter_mode == 'tag' -%}
          <div class="Collapsible Collapsible--padded Collapsible--autoExpand">
            <button type="button" class="Collapsible__Button heading u-h6" data-action="toggle-collapsible" aria-expanded="false">
              {{- 'collection.filter.all' | t -}} <span class="Collapsible__Plus"></span>
            </button>

            <div class="Collapsible__Inner">
              <div class="Collapsible__Content">
                <ul class="Linklist">
                  {%- for tag in collection.all_tags -%}
                    {%- if tag contains '__' -%}
                      {%- continue -%}
                    {%- endif -%}

                    <li class="Linklist__Item {% if current_tags contains tag %}is-selected{% endif %}">
                      <button type="button" class="Link Link--primary Text--subdued {% if current_tags contains tag %}is-active{% endif %}" data-tag="{{ tag | handle }}" data-action="toggle-tag">
                        {{- tag -}}
                      </button>
                    </li>
                  {%- endfor -%}
                </ul>
              </div>
            </div>
          </div>
        {%- else -%}
          {%- assign groups = '' -%}

          {%- for tag in collection.all_tags -%}
            {%- assign tag_parts = tag | split: '_' -%}

            {%- if tag_parts.size != 2 -%}
              {%- continue -%}
            {%- endif -%}

            {%- assign groups = groups | append: tag_parts.first | append: ',' -%}
          {% endfor %}

          {%- assign color_label = 'color,colour,couleur,colore,farbe,색,色,färg,farve' | split: ',' -%}
          {%- assign groups = groups | split: ',' | compact | uniq -%}

          {%- for group in groups -%}
            {%- assign group_downcase = group | downcase -%}

            {%- if color_label contains group_downcase and section.settings.show_filter_color_swatch -%}
              {%- assign show_color_swatch = true -%}
            {%- else -%}
              {%- assign show_color_swatch = false -%}
            {%- endif -%}

            <div class="Collapsible Collapsible--padded Collapsible--autoExpand">
              <button type="button" class="Collapsible__Button heading u-h6" data-action="toggle-collapsible" aria-expanded="false">
                {{- group | escape -}} <span class="Collapsible__Plus"></span>
              </button>

              <div class="Collapsible__Inner">
                <div class="Collapsible__Content">
                  <ul class="{% if show_color_swatch %}ColorSwatchList horizontallist horizontallist--spacingTight{% else %}Linklist{% endif %}">
                    {%- for tag in collection.all_tags -%}
                      {%- assign tag_parts = tag | split: '_' -%}

                      {%- if tag_parts.size != 2 or tag_parts.first != group -%}
                        {%- continue -%}
                      {%- endif -%}

                      {%- if show_color_swatch -%}
                        <li class="horizontallist__Item">
                          {%- assign color_swatch_name = tag_parts.last | handle | append: '.png' -%}
                          {%- assign color_swatch_image = images[color_swatch_name] -%}

                          <button type="button" class="ColorSwatch {% if current_tags contains tag %}is-active{% endif %}" data-tag="{{ tag | handle }}" data-action="toggle-tag" data-tooltip="{{ tag_parts.last | escape }}" style="background-color: {{ tag_parts.last | replace: ' ','' | downcase }}; {% if color_swatch_image != blank %}background-image: url({{ color_swatch_image | img_url: '64x64' }}){% endif %}">
                            <span class="u-visually-hidden">{{ tag_parts.last }}</span>
                          </button>
                        </li>
                      {%- else -%}
                        <li class="Linklist__Item {% if current_tags contains tag %}is-selected{% endif %}">
                          <button type="button" class="Text--subdued Link Link--primary {% if current_tags contains tag %}is-active{% endif %}" data-tag="{{ tag | handle }}" data-action="toggle-tag">
                            {{- tag_parts.last -}}
                          </button>
                        </li>
                      {%- endif -%}
                    {%- endfor -%}
                  </ul>
                </div>
              </div>
            </div>
          {%- endfor -%}
        {%- endif -%}
      {%- endif -%}
    {%- endcapture -%}

    <div id="collection-filter-drawer" class="CollectionFilters Drawer Drawer--secondary Drawer--fromright" aria-hidden="true">
      <header class="Drawer__Header Drawer__Header--bordered Drawer__Header--center Drawer__Container">
        <span class="Drawer__Title heading u-h4">{{ 'collection.filter.all' | t }}</span>

        <button class="Drawer__Close Icon-Wrapper--clickable" data-action="close-drawer" data-drawer-id="collection-filter-drawer" aria-label="{{ 'header.navigation.close_sidebar' | t }}">
          {%- render 'icon' with 'close' -%}
        </button>
      </header>

      <div class="Drawer__Content">
        <div class="Drawer__Main" data-scrollable>
          {{ filters_content }}
        </div>

        <div class="Drawer__Footer Drawer__Footer--padded" data-drawer-animated-bottom>
          <div class="ButtonGroup">
            <button type="button" class="ButtonGroup__Item Button Button--secondary" data-action="reset-tags" {% if current_tags == blank %}style="display: none"{% endif %}>{{ 'collection.filter.reset' | t }}</button>
            <button type="button" class="ButtonGroup__Item ButtonGroup__Item--expand Button Button--primary" data-action="apply-tags">{{ 'collection.filter.apply' | t }}</button>
          </div>
        </div>
      </div>
    </div>
  {%- endif -%}

  {%- if section.settings.show_sort_by -%}
    <div id="collection-sort-popover" class="Popover" aria-hidden="true">
      <header class="Popover__Header">
        <button class="Popover__Close Icon-Wrapper--clickable" data-action="close-popover">{% render 'icon' with 'close' %}</button>
        <span class="Popover__Title heading u-h4">{{ 'collection.sorting.title' | t }}</span>
      </header>

      <div class="Popover__Content">
        <div class="Popover__ValueList" data-scrollable>
          {% assign collection_sort_by = collection.sort_by | default: collection.default_sort_by %}

          {%- for option in collection.sort_options -%}
            <button class="Popover__Value {% if option.value == collection_sort_by %}is-selected{% endif %} heading Link Link--primary u-h6" data-value="{{ option.value }}" data-action="select-value">
              {{ option.name }}
            </button>
          {%- endfor -%}
        </div>
      </div>
    </div>
  {%- endif -%}

  {%- comment -%}[enter image description here][1]

''' [1]:https://i.stack.imgur.com/epQsN.jpg

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)