Order by category and add a header for each category.

shop/templates/shop_index.html

@@ -27,22 +27,30 @@
       <thead>
         <tr>
           <th>Product</th>
-          <th>Category</th>
           <th class="pull-right">Price</th>
         </tr>
       </thead>
       <tbody>
 
       {% for product in products %}
+
+        {% ifchanged product.category %}
+        <tr style="background-color: #cccccc">
+          <td colspan="2">
+            <strong>
+              {{ product.category }}
+            </strong>
+          </td>
+          </td>
+        </tr>
+        {% endifchanged %}
+
         <tr {% if not product.is_available %}class="text-muted"{% endif %}>
           <td>
             <a href="{% url 'shop:product_detail' slug=product.slug %}">
             {{ product.name }}
             </a>
           </td>
-          <td>
-            {{ product.category }}
-          </td>
           <td>
             <div class="pull-right">
               {{ product.price|currency }}

shop/views.py

@@ -141,6 +141,10 @@ class ShopIndexView(ListView):
     template_name = "shop_index.html"
     context_object_name = 'products'
 
+    def get_queryset(self):
+        queryset = super(ShopIndexView, self).get_queryset()
+        return queryset.order_by('category__name', 'price')
+
     def get_context_data(self, **kwargs):
         context = super(ShopIndexView, self).get_context_data(**kwargs)