how to order products by category? - bigcartel

Question

On my products page, i would like to show the products ordered by category. I tried a loop like that but have an error unknown category tag. Any clue ?
{% for category in categories.active %}
<h2>{{ category.name }}</h2>
{% for product in category.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_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>
<div class="product_thumb">
<img src="{{ product.image | product_image_url | constrain: '560' }}" class="fade_in" alt="Image of {{ product.name | escape }}">
</div>
</a>
</li>
{% if forloop.last %}
</ul>
{% endif %}
{% endfor %}
{% endfor %}

Answer 1

Ok just managed to do what i wanted. was on the right trail but something was messing all around. i copy it here.
{% for category in categories.active %}
<h2>{{ category.name }}</h2>
{% for product in category.products %}
{% if forloop.first %}
<ul id="products">
{% endif %}
<li id="product_{{ product.id }}" class="product">
<a href="{{ product.url }}" title="View {{ product.name | escape }}">
<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>
<div class="product_thumb">
<img src="{{ product.image | product_image_url | constrain: '560' }}" class="fade_in" alt="Image of {{ product.name | escape }}">
</div>
</a>
</li>
{% if forloop.last %}
</ul>
{% endif %}
{% endfor %}
{% endfor %}