Вёрстка сортировки товаров

Eugeny Galkovskiy
1 parent fc66ded4
Showing 3 changed files with 90 additions and 1 deletions Show diff stats
frontend/views/category/view.php
frontend/web/css/style.css
frontend/web/js/script.js
@@ -324,7 +324,20 @@ _________________________________________________________ --&gt;
 _________________________________________________________ -->
       <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(
                   [
@@ -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
@@ -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) {