Sort by as dropdown in Modern FIXED

[Adyyda]

Hello. I have searched over and over again and i did not find a working solution.

For instance, with

Code: [Select]

<form>
<select onChange="window.location.replace(this.options[this.selectedIndex].value)">
<option value=""><?php _e('Sort by', 'modern'); ?></option>
<?php $i = 0; ?>
<?php $orders = osc_list_orders();
foreach($orders as $label => $params) {
$orderType = ($params['iOrderType'] == 'asc') ? '0' : '1'; ?>
<?php if(osc_search_order() == $params['sOrder'] && osc_search_order_type() == $orderType) { ?>
<option value="<?php echo osc_update_search_url($params); ?>"><?php echo $label; ?></option>
<?php } else { ?>
<option value="<?php echo osc_update_search_url($params); ?>"><?php echo $label; ?></option>
<?php } ?>
<?php $i++; ?>
<?php } ?>
</select>
</form>
you will get a dropdown that seems ok except the fact that it does not retain the name of the option you selected.

So, did anyone managed to find a solution similar to the one from bender theme?

[Adyyda]

No one was willing to share this so i dig it out and managed to find the proper solution, from bender, and i would like to give back something to the community.

Step 1

Go do oc-content/themes/modern/js/global.js and insert at the bottom of the page, before the last

Code: [Select]

}); this lines

Code: [Select]

    $('.see_by').hover(function(){
        $(this).addClass('hover');
    },function(){
        $(this).removeClass('hover');
    })
Step 2

Go to oc-content/themes/modern/search.php

and replace

Code: [Select]

                            <p class="see_by">
                                <?php _e('Sort by', 'modern'); ?>:
                                <?php $i = 0; ?>
                                <?php $orders = osc_list_orders();
                                foreach($orders as $label => $params) {
                                    $orderType = ($params['iOrderType'] == 'asc') ? '0' : '1'; ?>
                                    <?php if(osc_search_order() == $params['sOrder'] && osc_search_order_type() == $orderType) { ?>
                                        <a class="current" href="<?php echo osc_esc_html(osc_update_search_url($params)); ?>"><?php echo $label; ?></a>
                                    <?php } else { ?>
                                        <a href="<?php echo osc_esc_html(osc_update_search_url($params)); ?>"><?php echo $label; ?></a>
                                    <?php } ?>
                                    <?php if ($i != count($orders)-1) { ?>
                                        <span>|</span>
                                    <?php } ?>
                                    <?php $i++; ?>
                                <?php } ?>
                            </p>
with

Code: [Select]

            <!--     START sort by       -->
            <span class="see_by">
              <span><?php _e('Sort by', 'bender'); ?>:</span>
              <?php
              $orders = osc_list_orders();
              $current = '';
              foreach($orders as $label => $params) {
                  $orderType = ($params['iOrderType'] == 'asc') ? '0' : '1';
                  if(osc_search_order() == $params['sOrder'] && osc_search_order_type() == $orderType) {
                      $current = $label;
                  }
              }
              ?>
              <label><?php echo $current; ?><b class="arrow-envelope"><b class="arrow-down"></b></b></label>
              <?php $i = 0; ?>
              <ul>
                  <?php
                  foreach($orders as $label => $params) {
                      $orderType = ($params['iOrderType'] == 'asc') ? '0' : '1'; ?>
                      <?php if(osc_search_order() == $params['sOrder'] && osc_search_order_type() == $orderType) { ?>
                          <li><a class="current" href="<?php echo osc_esc_html(osc_update_search_url($params)); ?>"><?php echo $label; ?></a></li>
                      <?php } else { ?>
                          <li><a href="<?php echo osc_esc_html(osc_update_search_url($params)); ?>"><?php echo $label; ?></a></li>
                      <?php } ?>
                      <?php $i++; ?>
                  <?php } ?>
                </ul>
            </span>
            <!--     END sort by       -->
Step 3

Go to oc-content/themes/modern/style.css

and insert at the end of all code this

Code: [Select]

.see_by {
    float: right;
    border: solid 1px #D1D1D1;
    background-color: #F7F7F7;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    cursor: default;
    font-size: 13px;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    height: 16px;
    outline: 0;
    padding: 5px 6px;
    display: block;
    margin-right: 10px;
    position: relative
}
.see_by span {
    float: left
}
.see_by label {
    float: right;
    margin: 0;
    padding: 0 18px 0 5px;
    color: #1b7e8d
}
.see_by ul {
    position: absolute;
    right: -1px;
    margin: 22px 0 0;
    padding: 8px 10px;
    list-style: none;
    text-align: right;
    background-color: #35c3d9;
    border: solid 1px #23a4b8;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    display: none
}
.see_by ul a {
    font-size: 1em;
    font-weight: 500;
    text-decoration: none;
    color: #fff
}
.see_by .arrow-down {
    position: absolute;
    right: 6px;
    top: 11px
}
.arrow-down {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #35c3d9;
    height: 0;
    width: 0;
}
.arrow-envelope {
    position: absolute;
    right: -1px;
    top: -1px
}
.hover .arrow-envelope {
    background-color: #35c3d9;
    border: solid 1px #23a4b8;
    width: 21px;
    height: 28px;
    border-bottom: none;
    z-index: 3
}
.hover ul {
    display: block
}
Olso, find and remove

Code: [Select]

.ad_list #list_head .see_by {
    float: right;
    font-size: 11px;
    margin: 5px 10px 0 0;
}
.ad_list #list_head .see_by span {
    color: #ccc;
    margin: 0 5px;
}
.ad_list #list_head .see_by a.current {
    background: rgba(0, 0, 0, 0) url("images/order_by_current.gif") no-repeat scroll right 45%;
    padding-right: 12px;
}
.ad_list #list_head .see_by a {
    text-decoration: none;
}


[Adyyda]

Let me know if you have any issues

[Adyyda]

You may want to replace that ugly green color with another when you add the new css code