想要创建一个包含特定类别的大卡特尔产品页面

Question

我目前正在我的大卡特尔网站上创建一个自定义页面。在此页面上，我想显示特定类别的产品列表(即：衬衫，夹克和牛仔裤(。我目前的代码是：

{% 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 %}

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

我在这里看到了一个类似的问题：如何使用BigCartel"变量"来调用不同的产品类别

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

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

同样，这将仅显示类别"衬衫"产品列表。我还想在同一列表中显示"夹克"和"牛仔裤"。这可能吗？

提前谢谢。

Answer 1

我最终设法解决了这个问题，对代码进行了修补。基本上在ul本身中创建 3 个for循环作为li(或每个所需类别的循环(。

下面是完整的示例代码：

<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-er(方法：

{% for category in categories.active %}
  {% if category.name contains 'jacket' or category.name contains 'dress' or category.name contains 'baby-grow' %}
    <h2>{{ category.name }}</h2>
    {% for product in category.products %}
      <p>{{ product.name }}</p>
      <img src="{{ product.image | product_image_url | constrain: '50' }}">
    {% endfor %}
  {% endif %}
{% endfor %}

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