16 Квітень 2013
1 446
Рубрика: код

Быстрый поиск товаров и заказов в админке Shop-Script (Webasyst) v 1.1.0

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

Полтора года назад я написал небольшую заметку о том, как добавить немного волшебства в админку Shop-Script. Если кто не знает, движок этот от Webasyst один из самых популярных движков для интернет-магазинов в русскоязычном интернете. Количество неудобств, тем не менее, как-то коррелирует с количеством пользователей.

Часть вещей грамотно продумана и сделана очень грамотно, часть же делали очень уставшие программисты в пятницу ночью перед уходом домой. Такое создаётся впечатление.

За полтора года я немного допилил скрипт, а выложить забыл. Нужно исправлять ситуацию.

Что за скрипт?

Это даже не скрипт, а 20 строчек кода. Добавив их в нужное место, в верхней панели админки вы получите форму с удобным поиском товаров и заказов. Выглядит форма так:

shop-script-search-admin

По нажатию Tab переключается тип поиска (товар/заказ), по Enter, начинается поиск.

Как поставить?

Открываем в редакторе файл:

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

И перед закрывающимся тегом </head> пишем следующее:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.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><b>Поиск</b></div>
<div rel="/published/SC/html/scripts/?ukey=&categoryID=&search=&did=14&search_value=">товар</div>
<div rel="/published/SC/html/scripts/?did=21&order_search_type=SearchByOrderID&search=&orderID_textbox=">заказ</div>
<div><input type="text" id="wts" /></div>
<div><input type="button" id="wtd_go" value="Найти" /></div>
</td>

В <style> добавляйте такой код:

#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: linear-gradient(top, #ffffff 0%,#bfbfbf 100%);
}

От предыдущей версии эта отличается тем, что обрабатывается нажатие Enter и Tab.

Давайте заметим: этот скрипт подходит для версий магазина до 5-й. С ней я пока не сталкивался, потому и не знаю, что из себя представляет.

Вопросы/предложения?

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