Made sorting menu dynamic

7 files changed, 57 insertions, 37 deletions

diff --git a/saleor/product/filters.py b/saleor/product/filters.py
index df9a5eb6..3c29bd73 100644
--- a/saleor/product/filters.py
+++ b/saleor/product/filters.py
@@ -10,8 +10,8 @@ from django_prices.models import PriceField
 
 from .models import Product, ProductAttribute
 
-SORT_BY_FIELDS = (('price', pgettext_lazy('Sort by filter', 'price')),
-                  ('name', pgettext_lazy('Sort by filter', 'name')))
+SORT_BY_FIELDS = (('name', pgettext_lazy('Sort by filter', 'name')),
+                  ('price', pgettext_lazy('Sort by filter', 'price')))
 
 
 class ProductFilter(FilterSet):
diff --git a/saleor/product/templatetags/sort_by.py b/saleor/product/templatetags/sort_by.py
index 490e09fe..8b590a3e 100644
--- a/saleor/product/templatetags/sort_by.py
+++ b/saleor/product/templatetags/sort_by.py
@@ -5,6 +5,7 @@ register = template.Library()
 
 @register.inclusion_tag('category/_sort_by.html', takes_context=True)
 def sort_by(context, attribute):
-    context['ascending_attribute'] = attribute
-    context['descending_attribute'] = '-' + str(attribute)
+    context['label'] = attribute['label']
+    context['ascending_attribute'] = attribute['value']
+    context['descending_attribute'] = '-' + str(attribute['value'])
     return context
diff --git a/saleor/product/templatetags/sort_menu.py b/saleor/product/templatetags/sort_menu.py
new file mode 100644
index 00000000..0d0f1ef7
--- /dev/null
+++ b/saleor/product/templatetags/sort_menu.py
@@ -0,0 +1,17 @@
+from django import template
+
+register = template.Library()
+
+
+@register.inclusion_tag('category/_sort_menu.html', takes_context=True)
+def sort_menu(context, attribute):
+    t = []
+    for attr in [a[0] for a in attribute]:
+        t.append(attr)
+        t.append('-' + str(attr))
+    choices = [a[1] for a in attribute]
+    context['sort_by_choices'] = [{'label': a[1],
+                                   'value': a[0]} for a in attribute]
+    context['choice'] = choices[int(t.index(context['request'].GET.get('sort_by', 'name')) / 2)]
+    context['arrow_up'] = (context['request'].GET.get('sort_by', 'name')[0] != '-')
+    return context
diff --git a/saleor/product/views.py b/saleor/product/views.py
index 6768be0d..c0c9f8de 100644
--- a/saleor/product/views.py
+++ b/saleor/product/views.py
@@ -129,6 +129,6 @@ def category_index(request, path, category_id):
     ctx = {'category': category, 'filter': product_filter,
            'products': products_and_availability,
            'products_paginated': products_paginated,
-           'sort_by_choices': [choice[1] for choice in SORT_BY_FIELDS],
-           'show_pagination': True if len(products) > PAGINATE_BY else False}
+           'sort_by_choices': SORT_BY_FIELDS,
+           'show_pagination': len(products) > PAGINATE_BY }
     return TemplateResponse(request, 'category/index.html', ctx)
diff --git a/templates/category/_sort_by.html b/templates/category/_sort_by.html
index eedaf59a..e0e4cf88 100644
--- a/templates/category/_sort_by.html
+++ b/templates/category/_sort_by.html
@@ -5,7 +5,7 @@
 <li>
   <div class="row">
     <div class="col-6">
-      Sort by: <strong>{{ ascending_attribute }}</strong>
+      Sort by: <strong>{{ label }}</strong>
     </div>
     <div class="col-6">
       <div>
diff --git a/templates/category/_sort_menu.html b/templates/category/_sort_menu.html
new file mode 100644
index 00000000..185aa882
--- /dev/null
+++ b/templates/category/_sort_menu.html
@@ -0,0 +1,30 @@
+{% load sort_by from sort_by %}
+{% load staticfiles %}
+{% load i18n %}
+{% load shop %}
+
+<div class="sort-by">
+  <div class="click-area d-none"></div>
+  <button class="btn btn-link">
+    <div>
+      <span>
+        Sort by:&nbsp;
+        <strong>
+          {{ choice }}
+        </strong>
+      </span>
+      <div class="sort-order-icon">
+        {% if arrow_up %}
+          <svg data-src="{% static "assets/arrow_up.svg" %}">
+        {% else %}
+          <svg data-src="{% static "assets/arrow_down.svg" %}">
+        {% endif %}
+      </div>
+    </div>
+  </button>
+  <ul class="sort-list d-none">
+    {% for choice in sort_by_choices %}
+      {% sort_by choice %}
+    {% endfor %}
+  </ul>
+</div>
diff --git a/templates/category/index.html b/templates/category/index.html
index 8313f2ba..aa511f1e 100644
--- a/templates/category/index.html
+++ b/templates/category/index.html
@@ -3,7 +3,7 @@
 {% load i18n %}
 {% load shop %}
 {% load staticfiles %}
-{% load sort_by from sort_by %}
+{% load sort_menu from sort_menu %}
 {% load render_bundle from webpack_loader %}
 {% load prices_i18n %}
 
@@ -45,35 +45,7 @@
               <span class="filters-menu__label d-sm-none">Filters</span>
             </div>
             <div class="col-6 col-md-10 col-lg-6">
-              <div class="sort-by">
-                <div class="click-area d-none"></div>
-                <button class="btn btn-link">
-                  <div>
-                    <span>
-                      Sort by:&nbsp;
-                      <strong>
-                        {% if request.GET.sort_by in sort_by_choices %}
-                          {% trans "name" context "Product name" %}
-                        {% elif request.GET.sort_by == 'price' or request.GET.sort_by == '-price' %}
-                          {% trans "price" context "Product price" %}
-                        {% endif %}
-                      </strong>
-                    </span>
-                    <div class="sort-order-icon">
-                      {% if request.GET.sort_by == '-name' or request.GET.sort_by == '-price' %}
-                        <svg data-src="{% static "assets/arrow_down.svg" %}">
-                      {% else %}
-                        <svg data-src="{% static "assets/arrow_up.svg" %}">
-                      {% endif %}
-                    </div>
-                  </div>
-                </button>
-                <ul class="sort-list d-none">
-                  {% for choice in sort_by_choices %}
-                    {% sort_by choice %}
-                  {% endfor %}
-                </ul>
-              </div>
+              {% sort_menu sort_by_choices %}
             </div>
           </div>
         </div>