Shopify Liquid: последовательно для циклов, повторяющихся из строя - PullRequest
Новая
       39

Shopify Liquid: последовательно для циклов, повторяющихся из строя

0 голосов
/ 28 сентября 2019

Я пытаюсь изменить тему Shopify, которая отображает товары, просматривая коллекцию.Я хотел отобразить товары, отсутствующие в наличии, после остальных, поэтому я создал цикл for для итерации по товарам в наличии, а затем еще один, чтобы выполнить итерации по товарам, которых нет в наличии.Тем не менее, всегда есть один листинг на складе, который появляется после всех листингов на складе.

В попытке отладить его я добавил html-теги в список товаров и до, и после цикла ликвидности.

Как в листинге может быть комментарий "толком", но после комментария "КОНЕЦ доступных товаров"?

Красный: доступные продукты

Синий: недоступные продукты

Annotated image of chrome inspector

<div id="product-loop" {% if settings.collection-sidebar %}class="desktop-10 tablet-5 mobile-3"{% endif %}>
  {% assign products-per-row = settings.products-per-row %}

  <!-- Available Products -->
  {% for product in collection.products %}
    {% assign outofstock = true %}
    {% for variant in product.variants %}
        {% if variant.inventory_quantity > 0 %}
            {% assign outofstock = false %}
        {% endif %}
    {% endfor %}

    {% if outofstock == false %}
      {% if current_tags != null %}
          <!-- Tag section removed for brevity -->
      {% endif %}

      <div class="product-index {% if template == 'index' and settings.homepage-product-display == 'carousel' %}{% else %}{% if products-per-row == "6" %}desktop-2{% cycle ' first', '', '', '', '', ' last' %}{% elsif products-per-row == "4" %}desktop-3{% cycle ' first', '', '', ' last' %}{% elsif products-per-row == "3" %}desktop-4{% cycle ' first', '', ' last' %}{% elsif products-per-row == "5" %}desktop-fifth{% cycle ' first', '', '', '', ' last' %}{% elsif products-per-row == "2" %}desktop-6{% cycle ' first', ' last' %}{% endif %} tablet-half mobile-half{% endif %}" data-alpha="{{ product.title }}" data-price="{{ product.price }}">
        <!-- avail -->
        {% include 'product-listing' %}
        {% include "panda-swatch" %}
      </div>

    {% endif %}
  {% endfor %}
  <!-- END Available Products -->

  <!-- Unavailable Products -->
  {% for product in collection.products %}
    {% assign outofstock = true %}
    {% for variant in product.variants %}
        {% if variant.inventory_quantity > 0 %}
        {% assign outofstock = false %}
        {% endif %}
    {% endfor %}

    {% if outofstock == true %}
      {% if current_tags != null %}
          <!-- Tag section removed for brevity -->
      {% endif %}

      <div class="product-index {% if template == 'index' and settings.homepage-product-display == 'carousel' %}{% else %}{% if products-per-row == "6" %}desktop-2{% cycle ' first', '', '', '', '', ' last' %}{% elsif products-per-row == "4" %}desktop-3{% cycle ' first', '', '', ' last' %}{% elsif products-per-row == "3" %}desktop-4{% cycle ' first', '', ' last' %}{% elsif products-per-row == "5" %}desktop-fifth{% cycle ' first', '', '', '', ' last' %}{% elsif products-per-row == "2" %}desktop-6{% cycle ' first', ' last' %}{% endif %} tablet-half mobile-half{% endif %}" data-alpha="{{ product.title }}" data-price="{{ product.price }}">
        <!-- no avail -->
        {% include 'product-listing' %}
        {% include "panda-swatch" %}
      </div>

    {% endif %}
  {% endfor %}
  <!-- END Unavailable Products -->

</div>
...