Question

我有一个shopify网站，其中集合页面包含基于标签的过滤器。实际过滤工作正常，但作为UX的一部分，有一个复选框，一旦点击过滤器链接就会被检查（它只是在链接上切换一个类）。我遇到的问题是，只有具有“多个单词”的过滤器链接不会显示正在检查的复选框（它不会切换所需的类）。我尝试使用jQuery快速修复.onClick事件，但由于过滤器链接在单击后加载了ajax，因此无效。我认为班级切换是用液体完成的，但我不确定。如果有人有解决方案，我会非常感激！

这是液体代码：

            <div class="basel-price-filter basel-scroll">
       {%- assign check_tag_hide = true -%}
       <ul class="show-labels-on swatches-normal swatches-display-list basel-scroll-content">
          {%- assign key = block.settings.key_2 | downcase  -%}
          {%- assign key_2 = block.settings.key | downcase  -%}
          {%- if cat_array.size > 0 and block.settings.use_auto_filter_tag -%}
                {%- for i in cat_array -%}
                   {%- assign i = i | downcase  -%}
                   {%- if i == key or i == key_2 -%}
                         {%- for t in tag_arr -%}
                            {%- assign t = t | downcase  -%}
                            {%- assign t_split = t | split:'_' | first -%}
                            {%- if i == t_split -%}
                              {%- if current_tags contains t -%}
                                 {%- assign tag_value_remove = t | remove: i | remove: '_' -%}
                                 {%- capture cat_link_remove -%}{{ tag_value_remove | append: '&nbsp;x' | link_to_remove_tag: t }}{%- endcapture -%}
                                 {%- assign get_link_remove = cat_link_remove | split:'href="' | last | split:'"' | first -%}
                                 <li class="sc-layered-nav-term">
                                   <a class="current-state" href="{{get_link_remove}}">{{ tag_value_remove | upcase }}</a>
                                   {%- if block.settings.use_tag_countdown -%}{%- include 'tag_countdown',tag:t -%}{%- endif -%}
                                </li>
                              {%- else -%}
                               {%- assign tag_value = t | remove: i | remove: '_' -%}
                               {%- capture cat_link -%}{{ tag_value | link_to_add_tag: t }}{%- endcapture -%}
                               {%- assign get_link = cat_link | split:'href="' | last | split:'"' | first -%}
                                <li class="sc-layered-nav-term">
                                   <a href="{{get_link}}">{{ tag_value | upcase }}</a>
                                   {%- if block.settings.use_tag_countdown -%}{%- include 'tag_countdown',tag:t -%}{%- endif -%}
                                </li>
                              {%- endif -%}
                             {%- assign check_tag_hide = false -%}
                           {%- endif -%}
                          {%- endfor -%}
                   {%- break -%}
                   {%- endif -%}
                {%- endfor -%}
         {%- elsif tags.size > 0 -%}
              {%- for t_o in tags -%}
                 {%- assign tag = t_o | downcase  -%}
                 {%- if current_tags contains tag -%}
                     {%- assign tag_value_remove = tag | remove:key_2 | remove:key | remove: '_' -%}
                     {%- capture cat_link_remove -%}{{ tag_value_remove | append: '&nbsp;x' | link_to_remove_tag: tag }}{%- endcapture -%}
                     {%- assign get_link_remove = cat_link_remove | split:'href="' | last | split:'"' | first -%}
                     <li class="sc-layered-nav-term">
                       <a class="current-state" href="{{get_link_remove}}">{{ tag_value_remove | upcase }}</a>
                       {%- if block.settings.use_tag_countdown -%}{%- include 'tag_countdown',tag:t -%}{%- endif -%}
                     </li>
                      {%- assign check_tag_hide = false -%}
                  {%- else -%}
                    {%- for t_d in tag_arr -%}
                       {%- assign t = t_d | downcase -%}
                       {%- if t == tag -%}
                         {%- assign tag_value = t | remove:key_2 | remove:key | remove: '_' -%}
                         {%- capture cat_link -%}{{ tag_value | link_to_add_tag: t }}{%- endcapture -%}
                         {%- assign get_link = cat_link | split:'href="' | last | split:'"' | first -%}
                         <li class="sc-layered-nav-term">
                             <a href="{{get_link}}">{{ tag_value | upcase }}</a>
                             {%- if block.settings.use_tag_countdown -%}{%- include 'tag_countdown',tag:t -%}{%- endif -%}
                          </li>
                          {%- assign check_tag_hide = false -%}
                        {%- endif -%}
                     {%- endfor -%}
                  {%- endif -%}
               {%- endfor -%}
          {%- endif -%}
   </ul>
</div>

这是我尝试过的jquery修复，但是没有用：

          $('.main-page-wrapper').on('click','.sc-layered-nav-term a',function(){
     $(this).toggleClass('current-state');
});

Answer 1

我能够通过为当前过滤器分配一个新组来解决此问题，并使用字符串将空格替换为破折号以便找到标记。然后改变了if语句：

{%- assign tag = t_o | downcase  -%}
{%- assign tag_key = t_o | downcase | replace: ' ', '-' -%}
{%- if current_tags contains tag_key -%}

多字标签在shopify产品过滤中不起作用

1 个答案: