Модуль живого поиска с картинками для Shopcms

Добрый день! Ну вот собственно и пришло время для второго поста в моем разделе блога о ShopCMS.

Так вот если Вы сталкивались с коммерцией в интернете, а именно с интернет-магазинами и их покупателями. Значит имеете представление, что необходимо для успешных продаж в интернете. Это дизайн, юзабилити, и много других очень важных факторов. В сегодняшней статье речь пойдет именно о Поиске для интернет-магазина. Поиск это как по мне очень важный момент в интернет коммерции, так как на Вашем проекте может быть множество разного товара а покупатель должен найти именно то, что конкретно он ищет. А это важно!

Поехали)

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

Файлы:

  • jquery.autocomplete.css
  • jquery.autocomplete.pack.js
  • jquery.easing.1.3.js

Кладем в папочку — data/[название_Вашего_шаблона]/

1. Идем в каталог core/tpl/user/[название_Вашего_шаблона]/head.tpl.html, открываем и редактируем файл head.tpl.html, после строки {* подключение скриптов *} вставляем такое вот:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript' src='data/{$smarty.const.TPL}/jquery.autocomplete.pack.js'></script>
<link rel="stylesheet" type="text/css" href="data/{$smarty.const.TPL}/jquery.autocomplete.css" />
{literal}
<script type="text/javascript">
$().ready(function() {

function liFormat (row, i, num) {
 var result = "<table cellpadding='0' cellspacing='0'><tr valign='middle'><td align='center' width='65' rowspan='2'></td><td>"+row[1]+"</td></tr><tr><td>"+row[2]+"</td></tr></table>";
 return result;
 }

$("#targetDiv").autocomplete("/devsearch.php", {
 max: 30,
 highlight: false,
 scroll: true,
 scrollHeight: 600,
 width:250,
 formatItem:liFormat
 });
$("#targetDiv").result(function () {
 $('#formpoisk').submit();
 });
});
</script>
{/literal}

Кстати, тут-же можно изменить отображение нашего выпадающего списка с картинками! Если Вы внимательно присмотритесь к коду, то увидите примерно следующее:

var result = "<table cellpadding='0' cellspacing='0'>
  <tr valign='middle'>
    <td align='center' width='65' rowspan='2'><img src="+row[3]+">
  </td>
    <td>"+row[1]+"</td>
  </tr>
  <tr>
    <td>"+row[2]+"</td>
  </tr>
</table>";

2. Далее идем в core/tpl/user/[название_Вашего_шаблона]/index.tpl.html, находим там:

<input type="text" name="searchstring" class="pform" value="{$searchstring}"></td>

и меняем на:

<input type="text" name="searchstring" id="targetDiv" value="{$searchstring}"></td>

3. Теперь берем файл devsearch.php и кладем его в корень нашего интернет-магазина

<?php
header("Content-Type: text/html;charset=windows-1251");
require_once "core/config/connect.inc.php";
require_once "core/includes/database/".DBMS.".php";
require_once "core/functions/functions.php";

db_connect(DB_HOST,DB_USER,DB_PASS) or die (db_error());
db_select_db(DB_NAME) or die (db_error());
$q = xEscSQL (iconv('UTF-8','CP1251',$_GET["q"]));

$filter = "";
foreach (explode(" ",$q) as $word)
        $filter .= "t1.name like '%$word%' AND ";
$data = db_query("SELECT t1.product_code,t1.name,t1.price,t2.filename
                                  FROM ".DB_PRFX."products t1
                                  LEFT JOIN ".DB_PRFX."product_pictures t2 ON t1.default_picture = t2.photoID
                                  WHERE $filter t1.enabled = '1' AND t1.categoryID <> '1'
                                  LIMIT ".$_GET['limit']) or die( db_error() );
while( $row = db_fetch_assoc( $data ))
        {echo html_entity_decode ($row['name'],ENT_QUOTES)."|".$row['name']."|".show_price($row['price'],5)."|".($row['filename']?'/data/small/'.$row['filename']:'/data/empty.gif')."\n";}
db_disconnect();
?>

Вроде все. Теперь можете пользоваться интересным вариантом живого поиска с картинками в своих интернет-магазинах!) Только не забываем делать все уникальным, менять стили отображения поиска на свои. Кстати, выглядит это примерно так:

Пример модуля для ShopCMS - живой поиск с картинками товара

Все вопросы пишите в комментариях. Модуль написан не мной, часть файлов «devsearch.php», я взял с одного форума, а такие файлы как: «jquery.autocomplete», «jquery.easing.1.3.js», я вытянул с рабочих интернет-магазинов, ну и конечно разжевал для Вас.

Кстати, можете разбавить расширенный поиск товаров в интернет-магазине модулем фильтра товаров по алфавиту.

Похожие заметки
Последние заметки
Если вам понравилась статья, вы можете подписаться на RSS или e-mail рассылку. Для получения обновлений по электронной почте, введите ваш e-mail адрес в эту форму (доставка от SmartResponder):

24 комментария

  1. Александр,
    1

    Что то не работает этот поиск

  2. Что конкретно не получается? Все должно работать, так как каждый способ описанный на моем блоге проверяю лично!

  3. Styud,
    3

    неплохо. подпишусь. жду продолжения

  4. Александр,
    4

    картинки не отображаються

  5. Евгений Москаленко,
    5

    Значит что-то сделали не так! Все должно отображаться...)

  6. Александр,
    6

    Добрый день! Спасибо за модуль. Только почему-то не отображаются картинки... Подскажите пожалуйста в чем может быть проблема? Заранее благодарю за ответ!

  7. Евгений Москаленко,
    7

    Может не в той папке лежат? Скорей всего что-то не так сделали, смотрел код выдачи поиска, так там примерно такое:

    <tr valign="middle"> <td align="center" width="65" rowspan="2"> Тут должна быть картинка, а в коде пусто, значит картинка не выводится </td> <td> Название товара </td> </tr>

  8. Александр,
    8

    Благодарю за ответ! Да вроде в той папке (/data/small/)

  9. Евгений Москаленко,
    9

    Значит чето ен так сделали, потому что картинки не выводятся!

  10. Kira,
    10

    Здравствуйте,в коде есть косяк.Добавьте между тегами и картинки появятся Тут должна быть картинка

  11. Антон,
    11

    Такой же трабл с картинками. В чем может быть проблема?

  12. Евгений Москаленко,
    12

    Антон у Вас очень красиво получилось реализовать картинки в поиске! Я когда найду силы и куски кода, я еще по ShopCMS-у выложу парочку решений, которых нет в паблике, таких как создание статей, блок «Просмотренные товары» и так далее. Так что подписывайтесь!)

  13. Kira,
    13

    Здравствуйте,в коде есть косяк,у кого не появляются картинки,я писал уже,похоже тут фильтруются входящие данные сообщение не дошло ,нужно заменить var result на это:

    var result="<table cellpadding='0' cellspacing='0'> <tr valign='middle'> <td align='center' width='65' rowspan='2'> <img src="+row[3]+"></td><td>"+row[1]+"</td></tr><tr><td>"+row[2]+" </td> </tr> </table>";

  14. Kira,
    14

    У кого проблема с картинками пишите отвечу ,не получается нормально выложить тут код.

  15. Есть кнопочка код, в эти теги надо обернуть код и все будет работать!

  16. Алексей,
    16

    Добрый вечер, помогите пожалуйста как всё таки вывести картинки и цену без доллара. Заранее спасибо

  17. Евгений Москаленко,
    17

    Алексей, картинки выводятся методом, который описан в статье. Он рабочий, сам тестил. Значит вы что-то делаете не верно.

    На счет цены, то в админке в курсах доллара, в разделе «Настройка валют» укажите отношение правильное. Если 1 гривна = 8-ми долларам, то в поле доллара ставите значение «0,125» (без кавычек, считается по формуле 1-ин разделить / на 8-ем). А также в настройках движка, в «общих настройках». Укажите что «Валюта по умолчанию» гривны или рубли.

  18. Алексей,
    18

    Доброе утро,

    Видимо да, просто картинки выводит массив «+row[3]+». У меня ещё версия shopcms 3.0 rc2

    Но тут я думаю разберусь.

    По поводу валюты вы возможно меня не правильно поняли. Массив «+row[3]+» выводит цены со знаком «$». А мне нужно «руб»

  19. Антон,
    19

    Имена файлов картинок в массиве «+row[3]+», соответственно должно быть

  20. Kot,
    20

    Кто знает:

    1) Как в выпадающем списке найденных товаров внизу добавить кнопку-ссылку «Все результаты»? Нажимаем на эту кнопку и начинает работать обычный поиск по введенным только что значениям.

    2) Когда используешь модуль живого поиска, то в выпадающем списке первый товар становится активным, т.е. если нажать ENTER, то выбирается именно это товар! А нужно, чтобы не активировался первый верхний товар?

  21. Евгений Москаленко,
    21

    Суть в том, что не надо «Enter» нажимать, надо ввести похожее слово и потом выбрать необходимый товар. Зачем все усложнять? :)

  22. Kira,
    22

    Привет всем извините за поздний ответ если кому то еще интересно вот что должно быть в:

    var result = "<table cellpadding='0' cellspacing='0'>
      <tr valign='middle'>
        <td align='center' width='65' rowspan='2'><img src="+row[3]+">
      </td>
        <td>"+row[1]+"</td>
      </tr>
      <tr>
        <td>"+row[2]+"</td>
      </tr>
    </table>";

  23. Allex,
    23

    К сожалению, в Опере (12,6) не достаточно корректно работает: когда подтираешь символы, данные не обновляются.

    (тоесть, набираешь авто — допустим, 6 результатов, продолжаешь набирать автосал — три результата, — начинаешь стирать символы — остается три результата, но должно обновить к 6-ти. В хроме и мозиле работает)

  24. Сложно так сказать, надо смотреть код, тестировать. Давно уже делал все эти вещи.

Оставить комментарий