8 Квітень 2012
1 277
Рубрика: код

Shop-Script: быстрый поиск заказов и товаров в админке v 1.1

Добавляем быстрый поиск товаров и заказов в админку Shop-Script.

Помните, я предлагал вам метод для быстрого поиска товаров и заказов через админку в Shop-Script.  Если судить по количеству отзывов, то или мало кто пользуется этим движком, или всех устраивает текущая система поиска. Тем не менее, у нас это экономит кучу времени, поэтому я доработал скрипт и добавил такие удобства (не во дворе):

  • переключение между режимом поиска заказ/товар по нажатию tab
  • поиск по нажатию enter
  • проверка заполненности поля (если пусто, поиск не ведётся)

Выглядит форма поиска теперь так:

Shop-Script: быстрый поиск заказов и товаров в админке v 1.1

Установка

Для того, чтобы установить скрипт, открываем файл:

/published/SC/html/cssbased/sc_tabbar.htm

В любом месте, но желательно в head, чтобы потом не путаться, вставляем скрипт. Если у вас установлена предыдущая версия, рекомендую её полностью удалить и ставить заново. Код такой:

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

$('#wts').keydown(function (e) {
if (e.keyCode == 13) {
$("#wtd_go").click();
return false;
}

if (e.keyCode == 9) {
$("#srch .capt").toggleClass("act");
return false;
}

});

$("#wtd_go").click(function() {
var str = $("#wts").val();
var frm = $("#srch .act").attr("rel");
go = frm + str;

if (str.length > 2) {
$.get(go, function(data) {
$("#sc_frame").attr("src",go);
});
}
});

$("#srch .capt").click(function() {
$("#srch .capt").removeClass("act");
$(this).addClass("act");
});

});
</script>

Дальше ищем:

<td>
<? wbs_button caption=$scStrings.sc_tab_open_storefront target='_blank' link=$SHOP_URL ?>
</td>

И после этой строки добавляем саму форму:

<td id="srch">
<div class="ln"><b>Поиск</b></div>
<div class="ln act capt" rel="/published/SC/html/scripts/?ukey=&categoryID=&search=&did=14&search_value=">товар</div>
<div class="ln capt" rel="/published/SC/html/scripts/?did=21&order_search_type=SearchByOrderID&search=&orderID_textbox=">заказ</div>
<div class="ln"><input type="text" id="wts" /></div>
<div class="ln"><input type="button" id="wtd_go" value="Найти" /></div>
</td>

И дальше в style добавляем стили для формы. Здесь предлагаю немножко повыёживаться и сделать css-градиент. Работать будет в FF, Chrome, Opera, а в IE 6-9 форма будет отображаться с градиентом и без скруглений:

/* поиск */
#srch .ln {
 display: inline;
 text-shadow: 1px 1px #fff !important;
 float: left;
 height: auto;
}
#srch .capt {
 cursor: pointer;
}
#srch .capt:hover {
 cursor: pointer;
 background: #f1f1f1;
}
#srch .act {
 background: #eee;
 color: darkgreen;
}#srch input[type="text"] {
 font-size: 12px;
 width: 80px;
 margin: 0;
 padding: 3px 3px;
 border: 1px solid #aaa;
}
#srch input[type="button"] {
 font-size: 12px;
 width: 80px;
 margin: 0;
 padding: 3px 0;
 color: darkgreen;
 border: 1px solid #aaa;
 text-shadow: 1px 1px #eee;
 border-radius: 2px;

background: -moz-linear-gradient(top, #ffffff 0%, #bfbfbf 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#bfbfbf)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#bfbfbf 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#bfbfbf 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#bfbfbf 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#bfbfbf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#bfbfbf',GradientType=0 ); /* IE6-9 */
}

Это всё, после этого почистите кэш и вперёд к звёздам.

Жду ваших коментов с багами и фичами и желаю вам хорошего воскресенья.

Апдейт 2012-11-22: обновил код вызова jquery, чтобы автоматически загружалась самая свежая версия. Обновлена первая строка кода.

Тепер я хочу бачити коментарі 1