多词标签在 shopify 产品过滤中不起作用答案

【问题标题】：Multi Word tags do not work in shopify product filtering多词标签在 shopify 产品过滤中不起作用
【发布时间】：2018-04-05 08:47:36
【问题描述】：

我有一个 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');
});

【问题讨论】：

标签： jquery ajax shopify liquid

【解决方案1】：

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

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

【讨论】：