Фильтр товаров тега Shopify не работает с установленным флажком - PullRequest
Новая
       15

Фильтр товаров тега Shopify не работает с установленным флажком

0 голосов
/ 25 октября 2018

Я пытаюсь создать набор фильтров товаров, которые будут работать индивидуально или как несколько вариантов выбора.Для целей тестирования я добавил два набора флажков, которые разделяют различные типы параметров фильтрации;Категория и размер.

Когда вы устанавливаете один из флажков, страница перезагружается, но со всеми доступными параметрами фильтрации, а не только с одним.То же самое касается нескольких вариантов, все они отображаются в URL следующим образом: / collection / trending-products / ecommerce + woocommerce + wordpress + magento-2 + xs + s + m + l + xl

Вот тестовый фильтр, который я создал до сих пор.Первый блок содержит мои теги HTML и Liquid для добавления назначенных тегов продукта и отображения их в виде флажков с меткой (что работает).Второй блок содержит мой JavaScript.Сценарий, кажется, работает нормально , если Я отображаю свои файлеры в качестве выбора, а не флажка ... Основная проблема, с которой я сталкиваюсь, заключается в том, что флажки, кажется, не назначают выбранный тег URL втак же, как выбор, но я не могу понять, в чем проблема.

Любая помощь / совет с этим будет с благодарностью:)

Спасибо 

Shopify.queryParams = {};
  if (location.search.length) {
    for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); i < aCouples.length; i++) {
      aKeyValue = aCouples[i].split('=');
      if (aKeyValue.length > 1) {
        Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
      }
    }
  }
  jQuery('.coll-picker').change(function() {
    if (jQuery(this).val()) {
      location.href = '/collections/' + jQuery(this).val();
    }
    else {
      location.href = '/collections/all';
    }
  });
  var collFilters = jQuery('.coll-filter');
  collFilters.change(function() {
    delete Shopify.queryParams.page;
    var newTags = [];
    collFilters.each(function() {
      if (jQuery(this).val()) {
        newTags.push(jQuery(this).val());
      }
    });
    {% if collection.handle %}
    var newURL = '/collections/{{ collection.handle }}';
    if (newTags.length) {
      newURL += '/' + newTags.join('+');
    }
    var search = jQuery.param(Shopify.queryParams);
    if (search.length) {
      newURL += '?' + search;
    }
    location.href = newURL;
    {% else %}
    if (newTags.length) {
      Shopify.queryParams.constraint = newTags.join('+');
    }
    else {
      delete Shopify.queryParams.constraint;
    }
    location.search = jQuery.param(Shopify.queryParams);
    {% endif %}
  });
<form class="lmwd-filter" method="get">
  <ul class="clearfix filter-category">
    <li>
      <p>Category</p>
      {% assign tags = 'Ecommerce, Woocommerce, WordPress, Magento 2' | split: ',' %}
      {% for t in tags %}
      {% assign tag = t | strip %}
      {% if current_tags contains tag %}
      <label>
        <input type="checkbox" class="coll-filter" name="{{ tag | handle }}" value="{{ tag | handle }}" checked />
        {{ tag }}
      </label>
      {% else %}
      <label>
        <input type="checkbox" class="coll-filter" name="{{ tag | handle }}" value="{{ tag | handle }}" />
        {{ tag }}
      </label>
      {% endif %}
      {% endfor %}
    </li>
    <li>
      <p>Size</p>
      {% assign tags = 'XS, S, M, L, XL' | split: ',' %}
      {% for t in tags %}
      {% assign tag = t | strip %}
      <label>
        <input type="checkbox" class="coll-filter" name="{{ tag | handle }}" value="{{ tag | handle }}" />
        {{ tag }}
      </label>
      {% endfor %}
    </li>
  </ul>
</form>
...