Question

我目前正在Big Cartel网站上创建自定义页面。在这个页面上，我想展示一个特定类别的产品清单（即：衬衫，夹克和牛仔裤）。我目前的代码是：

{% for product in products %}
  {% if forloop.first %}
    <ul id="products" class="{% if forloop.length == 1 %}single_product{% endif %}{% if forloop.length == 2 %}double_product{% endif %}">
  {% endif %}
  <li id="product_{{ product.id }}" class="product">
    <a href="{{ product.url }}" title="View {{ product.name | escape }}">
      <div class="product_thumb">
        <img src="{{ product.image | product_image_url | constrain: '560' }}" class="fade_in" alt="Image of {{ product.name | escape }}">
      </div>
      <div class="product_header">
        <h2>{{ product.name }}</h2>
        <span class="dash"></span>            
        <h3>{{ product.default_price | money_with_sign }}</h3>
        {% case product.status %}
        {% when 'active' %}
          {% if product.on_sale %}<h5 class="mmi-accent">On Sale</h5>{% endif %}
        {% when 'sold-out' %}
            <h5 class="mmi-accent">Sold Out</h5>
        {% when 'coming-soon' %}
            <h5 class="mmi-accent">Coming Soon</h5>
        {% endcase %}
      </div>
    </a>
  </li>
  {% if forloop.last %}
    </ul>
  {% endif %}
{% endfor %}

目前的问题是上面的代码显示了我所有类别的所有产品。

我在这里看到了类似的问题：How to use BigCartel "Variables" to Call Different Product Categories

它建议如何通过编辑开始for循环从所有产品更改为特定的单个类别。所以它看起来像这样：

{% for product in categories.shirts.products %}

同样，这只会显示“衬衫”类别的产品列表。我还想在同一个名单中展示'夹克'和'牛仔裤'。这可能吗？

提前致谢。

Answer 1

我设法最终解决了问题，修改了代码。基本上在for内创建li个ul循环（或每个类别的循环）。

下面是完整的示例代码：

<ul id="products">

  {% for product in categories.jacket.products %}
  <li id="product_{{ product.id }}" class="product">
    <a href="{{ product.url }}" title="View {{ product.name | escape }}">
      <div class="product_thumb">
        <img src="{{ product.image | product_image_url | constrain: '560' }}" class="fade_in" alt="Image of {{ product.name | escape }}">
      </div>
      <div class="product_header">
        <h2>{{ product.name }}</h2>
        <span class="dash"></span>            
        <h3>{{ product.default_price | money_with_sign }}</h3>
        {% case product.status %}
        {% when 'active' %}
          {% if product.on_sale %}<h5>On Sale</h5>{% endif %}
        {% when 'sold-out' %}
            <h5>Sold Out</h5>
        {% when 'coming-soon' %}
            <h5>Coming Soon</h5>
        {% endcase %}
      </div>
    </a>
  </li>
  {% endfor %}

 {% for product in categories.dress.products %}
  <li id="product_{{ product.id }}" class="product">
    <a href="{{ product.url }}" title="View {{ product.name | escape }}">
      <div class="product_thumb">
        <img src="{{ product.image | product_image_url | constrain: '560' }}" class="fade_in" alt="Image of {{ product.name | escape }}">
      </div>
      <div class="product_header">
        <h2>{{ product.name }}</h2>
        <span class="dash"></span>            
        <h3>{{ product.default_price | money_with_sign }}</h3>
        {% case product.status %}
        {% when 'active' %}
          {% if product.on_sale %}<h5>On Sale</h5>{% endif %}
        {% when 'sold-out' %}
            <h5>Sold Out</h5>
        {% when 'coming-soon' %}
            <h5>Coming Soon</h5>
        {% endcase %}
      </div>
    </a>
  </li>
  {% endfor %}

  {% for product in categories.baby-grow.products %}
  <li id="product_{{ product.id }}" class="product">
    <a href="{{ product.url }}" title="View {{ product.name | escape }}">
      <div class="product_thumb">
        <img src="{{ product.image | product_image_url | constrain: '560' }}" class="fade_in" alt="Image of {{ product.name | escape }}">
      </div>
      <div class="product_header">
        <h2>{{ product.name }}</h2>
        <span class="dash"></span>            
        <h3>{{ product.default_price | money_with_sign }}</h3>
        {% case product.status %}
        {% when 'active' %}
          {% if product.on_sale %}<h5>On Sale</h5>{% endif %}
        {% when 'sold-out' %}
            <h5>Sold Out</h5>
        {% when 'coming-soon' %}
            <h5>Coming Soon</h5>
        {% endcase %}
      </div>
    </a>
  </li>
  {% endfor %}

</ul>

希望能帮助其他人。

Answer 2

这是另一种（DRY - 呃）方式：

{{1}}

循环显示活动类别，然后检查每个类别是否与您要显示的特定类别之一匹配。如果是，请浏览该类别的产品。

想要创建包含特定类别

2 个答案: