想要創建包含特定類別的大卡特爾產品頁面

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

目前的問題是上面的代碼顯示了我擁有的每個類別的所有產品。

我在這裏看到了類似的問題：How to use BigCartel "Variables" to Call Different Product Categories

它建議如何從所有產品通過編輯開幕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 %} 

循環通過積極的類別，然後檢查每個類別匹配要顯示特定類別之一。如果是，則循環訪問該類別的產品。