From b3c018130d16a760f357c2b65776571b08fb8e3a Mon Sep 17 00:00:00 2001
From: Eugeny Galkovskiy <zhegal@gmail.com>
Date: Thu, 1 Jun 2017 17:03:00 +0300
Subject: [PATCH] Вёрстка сортировки товаров

---
 frontend/views/category/view.php | 15 ++++++++++++++-
 frontend/web/css/style.css       | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 frontend/web/js/script.js        | 16 ++++++++++++++++
 3 files changed, 90 insertions(+), 1 deletion(-)

diff --git a/frontend/views/category/view.php b/frontend/views/category/view.php
index 77c8c11..b7a2e20 100755
--- a/frontend/views/category/view.php
+++ b/frontend/views/category/view.php
@@ -324,7 +324,20 @@ _________________________________________________________ -->
 _________________________________________________________ -->
       
       <div class="col-sm-9">
-          
+          <div class="col-md-12 sort-cat-wr">
+              <p>Сортировка:</p>
+              <div class="sort-cat">
+                  <a id="category-sort" href="#3">
+                      <span>по имени от А до Я</span>
+                      <i class="fa fa-angle-down" aria-hidden="true"></i>
+                  </a>
+                  <ul class="sorter">
+                      <li><a href="#1">по цене по уменьшению</a></li>
+                      <li><a href="#2">по цене по возрастанию</a></li>
+                      <li><a href="#4">по имени от Я до А</a></li>
+                  </ul>
+              </div>
+          </div>
           <?php
               echo ListView::widget(
                   [
diff --git a/frontend/web/css/style.css b/frontend/web/css/style.css
index 098f8c0..695480b 100755
--- a/frontend/web/css/style.css
+++ b/frontend/web/css/style.css
@@ -4769,4 +4769,64 @@ a i.fa, button i.fa, span.fa {
 .owl-carousel.brand-carousel .owl-item {
     float: none;
     display: inline-block;
+}
+
+.sort-cat-wr p, .sort-cat-wr .sort-cat{
+    float: left;
+}
+
+.sort-cat-wr{
+    position: relative;
+}
+
+.sort-cat-wr{
+    z-index: 10;
+    margin-bottom: 25px;
+}
+.sort-cat-wr ul.sorter{
+    width: auto;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    left: 0px;
+    margin-top: 5px;
+    background-color: #fff;
+}
+.sorter li {
+    padding: 5px 0;
+}
+
+.sort-cat{
+    margin: 0 5px;
+    position: absolute;
+    left: 100px;
+    padding: 17px 20px;
+    top: -17px;
+}
+.sort-cat a{
+    background-color: #fff;
+    color: #005bac;
+}
+.sort-cat a span{
+    font-weight: bold;
+}
+.sort-cat.active{
+    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
+    border-radius: 5px;
+    background-color: #fff;
+}
+.sort-cat .sorter{
+    display: none;
+}
+.sort-cat.active .sorter{
+    display: block;
+}
+.sort-cat.active a#category-sort{
+    color:#000;
+}
+.sort-cat a#category-sort i.fa-angle-down{
+    transition: 0.2s;
+}
+.sort-cat.active a#category-sort i.fa-angle-down{
+    transform: rotate(180deg);
 }
\ No newline at end of file
diff --git a/frontend/web/js/script.js b/frontend/web/js/script.js
index 258d628..af5c250 100755
--- a/frontend/web/js/script.js
+++ b/frontend/web/js/script.js
@@ -248,6 +248,22 @@ $(function() {
                 );
             }
         );
+    $(document).on('click', '#category-sort', function(e){
+        $(this).parent().toggleClass("active");
+        return false;
+    });
+    $(document).on('click', '.sorter li a', function(e){
+        var sortclick   =   $(this).text();
+            parentsort  =   $(".sort-cat a span");
+            pstext      =   $(parentsort).text();
+            mainlink    =   $(".sort-cat a").attr('href');
+            newmainlink =   $(this).attr('href');
+        $(parentsort).text(sortclick);
+        $(".sort-cat a#category-sort").attr('href', newmainlink);
+        $(this).text(pstext);
+        $(this).attr('href', mainlink);
+        $("#category-sort").click();
+    });
 
 });
 function showLoader(container) {
--
libgit2 0.21.4