Блог

Я пытаюсь создать раздел в «простой» теме Shopify, который фильтрует коллекции на основе тегов клиентов. Например, у клиента есть следующие теги «Foo», «Bar». В свою очередь, отображаются следующие коллекции «Foo», «Bar».

Я не слишком знаком с liquid, поэтому стараюсь максимально упростить задачу. Таким образом, я продублировал collection-list.liquid из «Простой темы» для моей базы и внес следующие изменения в файл.

Мои изменения

   <!-- the magic -->
  <div class="collection-grid">
    <div class="grid grid--uniform">
      
        {% for tag in customer.tags %} // check customer tags.
      
        {% capture tag_handle %} // capture tag URL handle e.g. /t-shirts in a variable 'tag_handle'
            {{ tag | handle }}
        {% endcapture %}
      
          {% unless collection.handle contains tag_handle %} // check collection handles against the current tag handle to find a match. If so then do.

            <div class="grid__item {{ grid_item_width }} slide-up-animation animated" {{ block.shopify_attributes }} role="listitem">
              {% assign collection = collection.handle %} // Assign correct collection. I suspect this to be my stumbling block. See below for reason why.
              {% include 'collection-grid-item' %}
            </div>

          {% endunless %}
        {% endfor %} 

    </div>
  </div>
  <!-- / the magic -->  
 

С текущим фрагментом кода я получаю результаты, равные количеству тегов клиентов. Проблема в том, что результаты пусты или, по крайней мере, назначенная переменная коллекции пуста.

Любая помощь в этом была бы весьма признательна. Заранее спасибо.

Если вы не хотите настраивать и поддерживать блоки разделов, как насчет чего-то подобного?

 <!-- the magic -->
<div class="collection-grid">
  <div class="grid grid--uniform">
    
    {% for tag in customer.tags %} // for each customer tag do
      {% assign tag_handle = tag | handle %} // get the tag handle (I.e. no spaces amp; lowercase)

      {% assign collection = collections[tag_handle] %}
      {% if collection == blank %}
        {% continue %}
      {% endif %}

      <div class="grid__item {{ grid_item_width }} slide-up-animation animated" role="listitem">
        {% include 'collection-grid-item' %}
      </div>


    {% endfor %} 
  </div>
</div>
<!-- / the magic -->
 

Такой подход позволит:

• Пройдите по всем тегам клиентов, как и раньше, затем
• Принимает обработанную версию тега и выполняет поиск коллекции
• Переходит к следующему тегу, если не было найдено соответствующей коллекции
• Отображает элемент таблицы коллекции, если существует соответствующая коллекция

Если вы ожидаете, что у клиентов будет много тегов, но только несколько тегов, связанных с коллекцией, одним из возможных улучшений может быть использование специального префикса для тегов, связанных с коллекцией, который можно проверить и перейти к следующему тегу, если префикс отсутствует. Я также знаю, что Shopify имеет ограничение в 50 использований all_products поиска на страницу, но я не знаю, существует ли аналогичный предел для поиска коллекции. В любом случае, для повышения производительности страницы, вероятно, будет лучше, если количество поисковых запросов по тегам и коллекциям будет достаточно небольшим.

Кроме того, одна из вещей, которая может вас беспокоить, — это время загрузки страницы. Слишком много дорогостоящих операций с ликвидностью может привести к тому, что серверы Shopify будут иметь небольшую задержку при обслуживании страниц вашего сайта. Пока вы пробуете и тестируете решения, одним из чрезвычайно полезных инструментов, которым вы можете воспользоваться, является плагин «Shopify Theme Inspector» для Chrome. Это даст вам наглядное представление о том, сколько времени требуется Shopify, чтобы собрать вашу страницу на серверной части. (Я вообще не связан с плагином, это просто полезный инструмент, который я использовал несколько раз при оценке производительности сайта)

Итак, я смог решить свою проблему, применив несколько иной подход, основанный на вопросе @Bilal Akbar. Поскольку существующий подход работал в оригинале Simple Theme , зачем пытаться его изменить? Почему бы не разрешить администратору загружать все коллекции и просто фильтровать результаты во время вывода.

 <!-- the magic -->
<div class="collection-grid">
  <div class="grid grid--uniform">
    
    {% for tag in customer.tags %} // for each customer tag do
      {% assign tag_handle = tag | handle %} // get the tag handle (I.e. no spaces amp; lowercase)

      {% for block in section.blocks limit: section.blocks.size %} // keeping the original loop from the original file.
        {% if block.settings.collection == tag_handle %} // check the collections list within the block to see If it matches the tag handle. if so then do.

          <div class="grid__item {{ grid_item_width }} slide-up-animation animated" {{ block.shopify_attributes }} role="listitem">
            {% assign collection = collections[block.settings.collection] %}
            {% include 'collection-grid-item' %}
          </div>

        {% endif %} 
      {% endfor %} 
    {% endfor %} 
    
  </div>
</div>
<!-- / the magic -->
 

Опять же, я не слишком разбираюсь в liquid, если у кого-нибудь есть какой-либо альтернативный или, может быть, даже лучший способ достичь желаемого результата. Мне было бы интересно услышать об этом. Еще раз спасибо.