Выпадающая сортировка товара

Сортировка товара в магазине Shop-Script как на сайте М.видео. Особенность - разделение кнопок на по возрастанию и по убыванию.

Html/smarty

<!-- sorting -->
{$sort_fields = [
'price' => 'По цене',
'name' => 'По названию',
'total_sales' => 'По хитам']}

{if !isset($active_sort)}
    {$get = waRequest::get()}
    {$active_sort = ifset($get['sort'], 'create_datetime')}
    {$active_order = ifset($get['order'])}
    {$sort_order = "`$active_sort`_`$active_order`"}
{/if}

<form method="get" action="{$category.og.url}" 
    data-loading="{$wa_parent_theme_url}/img/loading32.gif">
    
    <input type="hidden" name="sort" />
    <input type="hidden" name="order" />
    <!-- Нужны в случае аякс -->
    <input type="hidden" name="page" value="{ifset($wa->get('page'), '')}" />
    <input type="hidden" name="query" value="{ifset($wa->get('query'), '')}" />
    <input type="hidden" name="list" value="{ifset($wa->get('list'), '')}" />
    
    <div class="select-sorting">

        <ul class="sorting drop">
            {if !empty($category) && !$category.sort_products}
                <li{if !$active_sort} class="selected"{/if}>
                    <a href="{$wa->currentUrl(0, 1)}">
                        <i class="sort-asc"></i> 
                        По популярности
                    </a>
                </li>
            {/if}
            {foreach $sort_fields as $sort => $name}
                <li{if $sort_order == "`$sort`_asc"} class="selected"{/if} 
                    data-sort="{$sort}" data-order="asc">
                    <a href="?sort={$sort}&order=asc">
                        <i class="sort-asc"></i> 
                        {$name}
                    </a>
                </li>
                <li{if $sort_order == "`$sort`_desc"} class="selected"{/if} 
                    data-sort="{$sort}" data-order="desc">
                    <a href="?sort={$sort}&order=desc">
                        <i class="sort-desc"></i> 
                        {$name}
                    </a>
                </li>
                {if $active_sort == $sort}
                    {$active_name = $name}
                {/if}
                {if $wa->get('sort') == $sort}
                    {$wa->title( $wa->title()|cat:' - '|cat:$name)}
                {/if}
            {/foreach}
        </ul>

        <div class="slct nowrap">
            {if ifset($active_name)}
                <i class="sort-{if $active_order == "desc"}desc{else}asc{/if}"></i> 
                {$active_name}
            {else}
                <i class="sort-asc"></i> 
                По популярности
            {/if}
        </div>
    </div>
    
</form>

Js

$(document).ready(function(){

//PRODUCT SORTING 
    $('body').on('click', '.sorting a', function(){ 
        $this = $(this); 
        sort = $this.parent().data('sort'); 
        order = $this.parent().data('order');
        $this.parent().addClass('selected').siblings().removeClass('selected');
        $('input[name="sort"]').val(sort); 
        $('input[name="order"]').val(order); 
        if ($('.filters.ajax').length){
            ajax_form_callback_mega($('.filters.ajax form').closest('form'), true);
        } else {
            ajax_form_callback_mega($(this).closest('form'), true);
        }
        return false;
    })

// Select
    $('body').on('click', '.select-sorting', function() {
        var dropBlock = $(this).find('.drop');
        if( dropBlock.is(':hidden') ) {
            dropBlock.slideDown(200);
            $(this).addClass('active');
            dropBlock.find('li').click(function(){
                var preResult = $(this).html().replace(/<a>(.*?)<\/a>/,""),
                    selectResult = $(preResult).html();
                $(this).parent().parent().removeClass('active').find('.slct').html(selectResult);
                dropBlock.slideUp(200);
            });
        } else {
            $(this).removeClass('active');
            dropBlock.slideUp(200);
        }
        return false;
    })
    .on('click', function(e) { 
          $('.select-sorting.active').removeClass('active').find('.drop').slideUp(200);
    });

});