Просмотр сообщений

Итак описываю как сделал.

Нам понадобится http://www.web-otvet.net/files/searchfield.zip - Сразу скажу что лишние стили и оформления мы убираем!
То как настроить дизайн я рассказывать не буду. Можно вообще создать тестовый шаблон с index файлом из архива.

Делается эта функция в два этапа.
1. Вывести все проиндексированные слова
2. Сделать так чтобы они появлялись в подсказке при наборе в поиске.

Первый этап осуществляется с помощью модуля "Произвольный код" (evalmod)

Идем в "модуле" там создаем модуль произвольного кода.
В окне самого модуля мы прописываем такой php код:

Цитировать

$sql = "SELECT * FROM `имя таблицы`";
$result = mysql_query($sql) or die(mysql_error() ."<br/>". $sql);
$table = "";

while ($row = mysql_fetch_assoc($result))
{
$table .= "".$row['word'].",";
}
$table .= "";
echo $table;

Эта функция выведет все ключевые, проиндексированные слова.
Далее!
В шаблоне всталяем код яваскрипта:

Цитировать

<script type="text/javascript">

this.searchfield = function(){
var id = "searchfield";
var defaultText = "Воспользуйтесь поиском";
var suggestion = true;
var suggestionText = "[#eval#]";

   var field = document.getElementById(id);
   var classInactive = "sf_inactive";
   var classActive = "sf_active";
   var classText = "sf_text";
   var classSuggestion = "sf_suggestion";
   this.safari = ((parseInt(navigator.productSub)>=20020000)&&(navigator.vendor.indexOf("Apple Computer")!=-1));
   if(field && !safari){
      field.value = defaultText;
      field.c = field.className;
      field.className = field.c + " " + classInactive;
      field.onfocus = function(){
         this.className = this.c + " " + classActive;
         this.value = (this.value == "" || this.value == defaultText) ? "" : this.value;
      };
      field.onblur = function(){
         this.className = (this.value != "" && this.value != defaultText) ? this.c + " " + classText : this.c + " " + classInactive;
         this.value = (this.value != "" && this.value != defaultText) ? this.value : defaultText;
         clearList();
      };
      if (suggestion){

         var selectedIndex = 0;

         field.setAttribute("autocomplete", "off");
         var div = document.createElement("div");
         var list = document.createElement("ul");
         list.style.display = "none";
         div.className = classSuggestion;
         list.style.width = field.offsetWidth + "px";
         div.appendChild(list);
         field.parentNode.appendChild(div);

         field.onkeypress = function(e){

            var key = getKeyCode(e);

            if(key == 13){ // enter
               selectList();
               selectedIndex = 0;
               return false;
            };
         };

         field.onkeyup = function(e){

            var key = getKeyCode(e);

            switch(key){
            case 13:
               return false;
               break;
            case 27: // esc
               field.value = "";
               selectedIndex = 0;
               clearList();
               break;
            case 38: // up
               navList("up");
               break;
            case 40: // down
               navList("down");
               break;
            default:
               startList();
               break;
            };
         };

         this.startList = function(){
            var arr = getListItems(field.value);
            if(field.value.length > 0){
               createList(arr);
            } else {
               clearList();
            };
         };

         this.getListItems = function(value){
            var arr = new Array();
            var src = suggestionText;
            var src = src.replace(/, /g, ",");
            var arrSrc = src.split(",");
            for(i=0;i<arrSrc.length;i++){
               if(arrSrc.substring(0,value.length).toLowerCase() == value.toLowerCase()){
                  arr.push(arrSrc);
               };
            };
            return arr;
         };

         this.createList = function(arr){
            resetList();
            if(arr.length > 0) {
               for(i=0;i<arr.length;i++){
                  li = document.createElement("li");
                  a = document.createElement("a");
                  a.href = "javascript:void(0);";
                  a.i = i+1;
                  a.innerHTML = arr;
                  li.i = i+1;
                  li.onmouseover = function(){
                     navListItem(this.i);
                  };
                  a.onmousedown = function(){
                     selectedIndex = this.i;
                     selectList(this.i);
                     return false;
                  };
                  li.appendChild(a);
                  list.setAttribute("tabindex", "-1");
                  list.appendChild(li);
               };
               list.style.display = "block";
            } else {
               clearList();
            };
         };

         this.resetList = function(){
            var li = list.getElementsByTagName("li");
            var len = li.length;
            for(var i=0;i<len;i++){
               list.removeChild(li[0]);
            };
         };

         this.navList = function(dir){
            selectedIndex += (dir == "down") ? 1 : -1;
            li = list.getElementsByTagName("li");
            if (selectedIndex < 1) selectedIndex = li.length;
            if (selectedIndex > li.length) selectedIndex = 1;
            navListItem(selectedIndex);
         };

         this.navListItem = function(index){
            selectedIndex = index;
            li = list.getElementsByTagName("li");
            for(var i=0;i<li.length;i++){
               li.className = (i==(selectedIndex-1)) ? "selected" : "";
            };
         };

         this.selectList = function(){
            li = list.getElementsByTagName("li");
            a = li[selectedIndex-1].getElementsByTagName("a")[0];
            field.value = a.innerHTML;
            clearList();
         };

      };
   };

   this.clearList = function(){
      if(list){
         list.style.display = "none";
         selectedIndex = 0;
      };
   };
   this.getKeyCode = function(e){
      var code;
      if (!e) var e = window.event;
      if (e.keyCode) code = e.keyCode;
      return code;
   };

};

// script initiates on page load.

this.addEvent = function(obj,type,fn){
   if(obj.attachEvent){
      obj['e'+type+fn] = fn;
      obj[type+fn] = function(){obj['e'+type+fn](window.event );}
      obj.attachEvent('on'+type, obj[type+fn]);
   } else {
      obj.addEventListener(type,fn,false);
   };
};
addEvent(window,"load",searchfield);
</script>

Далее идем в админку! И видим что появилась метка eval применяем к ней вывод произвольного кода!

Второй этап:

Замена шаблона формы поиска и подключение css файла из архива.
вот мой шаблон формы:

Цитировать

<link href="design/images/searchfield.css" rel="stylesheet" type="text/css" media="screen" />
<div class="top_search">
<div class="search_text">
<form id="searchform" action="%action%" method="post">
<input type="text" id="searchfield" name="search" title="Поиск" /><input title="Поиск" type="image" src="design/images/search.gif" class="search_bt"/>
</form>
</div></div>

Фаил CSS я положил в папку images

Вроде ничего не забыл

Если что поправляйте...

PS - хотелось бы посоветовать разработчикам чтобы сделали метку %words% которая выводила бы все ключевые проиндексированные слова, для вот таких решений.

Модуль "Каталог товаров" / Re: Поиск с AJAX

« : 01 Март 2011, 23:24:06 »

прикрутил поиск и подсказки. Все работает. Можно посмотреть на тестовом сайте http://len.web-otvet.net/nav1.html дизайн только поиска надо настроить.

Модуль "Каталог товаров" / Re: Не вывести фильтр на сайте

« : 01 Март 2011, 23:23:14 »

Я фильтр использовал чтобы выводились все товары по убыванию. То есть новинки выводятся в начале.

Другие вопросы и ошибки / Re: Santafox и M-HOSTER

« : 01 Март 2011, 23:21:14 »

Поверь что на большенстве хостеров работает отлично... У меня Инфобокс.
Скинь им требование к хостингу, с сайта санты.

Модуль "Каталог товаров" / Re: Вывод всех продуктов из каталога на одной странице

« : 01 Март 2011, 23:17:09 »

<div style="position: static; display:inline-block; float:left; width: 100px; height: 100px; z-index: 1">
<ul><li>%name%</li>
<li>%show_items_list[cat-tovary.html]%</li></ul></div>

<div style="position: static; display:inline-block; float:left; width: 100px; height: 100px; z-index: 1">
<ul><li>%name%
<a href="%link%"><img src="%image_value%" /></a>
</li>
<li>%show_items_list[cat-tovary.html]%</li></ul></div>

<div style="position: static; display:inline-block; float:left; width: 100px; height: 100px; z-index: 1">
<ul><li>%name%
<a href="%link%"><img src="%image_value%" /></a>
</li>
<li>%show_items_list[cat-tovary.html]%</li></ul></div>
<br style="clear:both">

<div style="position: static; display:inline-block; float:left; width: 100px; height: 100px; z-index: 1">
<ul><li>%name%</li>
<li>%show_items_list[cat-tovary.html]%</li></ul></div>

<div style="position: static; display:inline-block; float:left; width: 100px; height: 100px; z-index: 1">
<ul><li>%name%
<a href="%link%"><img src="%image_value%" /></a>
</li>
<li>%show_items_list[cat-tovary.html]%</li></ul></div>

<div style="position: static; display:inline-block; float:left; width: 100px; height: 100px; z-index: 1">
<ul><li>%name%
<a href="%link%"><img src="%image_value%" /></a>
</li>
<li>%show_items_list[cat-tovary.html]%</li></ul></div>
<br style="clear:both">

<div style="position: static; display:inline-block; float:left; width: 100px; height: 100px; z-index: 1">
<ul><li>%name%</li>
<li>%show_items_list[cat-tovary.html]%</li></ul></div>

<div style="position: static; display:inline-block; float:left; width: 100px; height: 100px; z-index: 1">
<ul><li>%name%
<a href="%link%"><img src="%image_value%" /></a>
</li>
<li>%show_items_list[cat-tovary.html]%</li></ul></div>

<div style="position: static; display:inline-block; float:left; width: 100px; height: 100px; z-index: 1">
<ul><li>%name%
<a href="%link%"><img src="%image_value%" /></a>
</li>
<li>%show_items_list[cat-tovary.html]%</li></ul></div>
<br style="clear:both">

Стили только надо вывести в CSS.
Я не стал прописывать.

Если не так понял то поясни подробнее.

Модуль "Каталог товаров" / Re: Вывод всех продуктов из каталога на одной странице

« : 01 Март 2011, 22:52:01 »

<table width="900" cellpadding="0" cellspacing="0" border=0>
<tr>
<td width="250">
   %name%  </td><td align=left width="650" valign=top> %show_items_list[cat-tovary.html]%</td>
  </tr>
<tr><td colspan=2><div class=p></div></td></tr>

</table>

<table width="900" cellpadding="0" cellspacing="0" border=0 class=semi-text>
<tr>
<td width="250">
   %name%  <a href="%image_source%"><img src="%image_value%" /></a>
</td><td align=left width="650"> %show_items_list[cat-tovary.html]%</td>
  </tr> <tr><td colspan=2><div class=p></div></td></tr>
   </table>

<table width="900" cellpadding="0" cellspacing="0" border=0 class=semi-text>
<tr>
<td width="250">
   %name%  <a href="%image_source%"><img src="%image_value%" /></a></td><td align=left width="650"> %show_items_list[cat-tovary.html]%</td>
  </tr><tr><td colspan=2><div class=p></div></td></tr>
   </table>

<table width="900" cellpadding="0" cellspacing="0" border=0 class=semi-text>
<tr>
<td width="250">
   %name%  </td><td align=left width="650"> %show_items_list[cat-tovary.html]%</td>
  </tr> <tr><td colspan=2><div class=p></div></td></tr>
</table>

<table width="900" cellpadding="0" cellspacing="0" border=0 class=semi-text>
<tr>
<td width="250">
   %name%  <a href="%image_source%"><img src="%image_value%" /></a></td><td align=left width="650"> %show_items_list[cat-tovary.html]%</td>
  </tr><tr><td colspan=2><div class=p></div></td></tr>
   </table>

<table width="900" cellpadding="0" cellspacing="0" border=0 class=semi-text>
<tr>
<td width="250">
   %name%  <a href="%image_source%"><img src="%image_value%" /></a></td><td align=left width="650"> %show_items_list[cat-tovary.html]%</td>
  </tr><tr><td colspan=2><div class=p></div></td></tr>
   </table>
  
<table width="900" cellpadding="0" cellspacing="0" border=0 class=semi-text>
<tr>
<td width="250">
   %name%  </td><td align=left width="650"> %show_items_list[cat-tovary.html]%</td>
  </tr> <tr><td colspan=2><div class=p></div></td></tr>
</table>

<table width="900" cellpadding="0" cellspacing="0" border=0 class=semi-text>
<tr>
<td width="250">
   %name%  <a href="%image_source%"><img src="%image_value%" /></a></td><td align=left width="650"> %show_items_list[cat-tovary.html]%</td>
  </tr><tr><td colspan=2><div class=p></div></td></tr>
   </table>

<table width="900" cellpadding="0" cellspacing="0" border=0 class=semi-text>
<tr>
<td width="250">
   %name%  <a href="%image_source%"><img src="%image_value%" /></a></td><td align=left width="650"> %show_items_list[cat-tovary.html]%</td>
  </tr><tr><td colspan=2><div class=p></div></td></tr>
   </table>


%name_value%

Но они выводятся в столбик...

Если надо в ряд то щас напишу... И таблицы тут не вариант... Надо в Див...

Страницы: 1 2 3 [4] 5 6 7 ... 14

Santafox CMS