Если вам довелось работать с движком для магазинов 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 Комментарий на "Интернет-магазин Shop-Script: быстрый поиск заказов и товаров в админке v 1.0"

    Уведомлять
    avatar
    5000
    Сергей
    Гость

    Спасибо, не досмотрел )

    Сергей
    Гость

    Добрый день! Как сделать так, что при нажатии на клавишу enter (фокус находится в поле поиск), начался поиск. Сейчас при нажатии на enter перебрасывает на “заказы”. То есть нужно нажимать на кнопку “найти”. Прошу откликнуться, тех кто сумеет помочь. Заранее благодарен, Сергей.

    Александр
    Гость

    Евгений, какой кошмар! “три часа смотрю на кота – ну ничего не делает!” так это называется… пока вы возмущались и писали свой пост, можно было элементарно разобраться….

    Максим
    Гость

    Спасибо
    Установил за 5 минут
    У кого проблемы с подключением jQuery, вставьте “http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js”

    Евгений
    Гость

    Очень поверхностный урок. Часа два бился, так как поле поиска и кнопка ставла, но поиск не работает, хотя jquery подключил. Думаю вы элементарно не умеете создавать уроки. То что вам кажется элементарным, я угадывать не могу.

    wpDiscuz