13 Грудень 2011
1 810
Рубрика: код

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

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

Если вам довелось работать с движком для магазинов Shop-Script от Webasyst, то вы вероятно были приятно удивлены функционалом и мощностью этой махины. С другой стороны каждый, кто работает с этим, да и с любым другим скриптом веб-торговли, сталкивается с вопросом приведения возможностей магазина под свои нужды. В частности, упрощение заказа, оплата электронными деньгами, ускорение работы за счёт использования js-запросов без перезагрузки страниц и прочее.

Немаловажно также упростить ту часть сайта, которую не видят пользователи, но которая непосредственным образом влияет на удобство работы с сайтом — панель управления или проще админку. В SS админка сделана вполне сносно, если не считать средневекового дизайна и малопродуманного построения навигации. С другой стороны, популярный osCommerce (VamShop) не сможет похвастаться даже этим. Переходя от слов к делу, предлагаю добавить быстрый поиск товаров и заказов из верхней панели админки, который будет всегда на виду.

Вот как это будет выглядеть:

Что делать?

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

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

…и после закрытия стилей CSS добавляем скрипт обработки событий:

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

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

$.get(go, function(data) {
$("#sc_frame").attr("src",go);
});
});

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

});
</script>

Обратите внимание, что первая строка вызывает библиотеку jQuery. Путь в первой строке нужно сменить на тот, по которому у вас лежит ваш jQuery.

Далее ищем строку:

<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>

И также не забываем добавить стили для грамотного отображения формы:

#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;
border: 1px solid #aaa;
font-weight: bold;
color: darkgreen;
}

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

P.S. Если вы решили купить движок Shop-script, я могу помочь сделать это с существенной скидкой: примерно за 130$ вместо 200.

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