Стандартный поиск + google [Решено]

Тема в разделе "XenForo", создана пользователем WiZXaK, 5 дек 2014.

Информация :
Хотите добавить продукт, следуйте правилам:
1)Добавить скриншот.
2)Добавить описание (Описание на английском языке использовать - запрещено).
3)Ссылка на скачивание должна вести на сторонний файлообменник (использовать вложения - запрещено).
Модераторы: DMS
  1. WiZXaK

    WiZXaK Причиняю добро

    Регистр.:
    8 сен 2012
    Сообщения:
    582
    Симпатии:
    808
    Интересует интеграция стандартного поиска xenforo (1.4.3) с поиском google (или яндекс).

    Так же как это реализовано на данном форуме.
    1) - вбиваем один запрос в стандартную форму поиска.
    2) - получаем результаты поиска по форуму + результаты поиска по средством http://www.google.ru/cse/

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

    p.s: стандартные способы прикрутить поиск (отдельно) от поисковиков мне известны,
    благодарю.
     
  2. Bezhev

    Bezhev

    Регистр.:
    26 дек 2012
    Сообщения:
    364
    Симпатии:
    124
    WiZXaK нравится это.
  3. WiZXaK

    WiZXaK Причиняю добро

    Регистр.:
    8 сен 2012
    Сообщения:
    582
    Симпатии:
    808
    Нет, зачем плагин, не настолько... :tut:
    Решение не совсем готовое, пришлось немножко его допилить:

    1) Регистрируем свои поисковую форму на сайте: https://www.google.ru/cse/all [ADD] - заполняем нужные поля.
    2) Есть два стандартных варианта кода от Google который предлагается разместить у себя в шаблоне.
    Код:
    <script>
      (function() {
        var cx = 'Ваш номер';
        var gcse = document.createElement('script');
        gcse.type = 'text/javascript';
        gcse.async = true;
        gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
            '//www.google.com/cse/cse.js?cx=' + cx;
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(gcse, s);
      })();
    </script>
    <gcse:search></gcse:search>
    Первый вариант кода можно подробно настроить через визуальную часть google https://www.google.ru/cse/all - Пункт с лева "Изменение поисковой системы".

    Второй варианта кода от Google:

    [​IMG]
    Код:
    <div id='cse' style='width: 100%;'>Loading</div>
    <script src='//www.google.com/jsapi' type='text/javascript'></script>
    <script type='text/javascript'>
    google.load('search', '1', {language: 'ru', style: google.loader.themes.V2_DEFAULT});
    google.setOnLoadCallback(function() {
      var customSearchOptions = {};
      var orderByOptions = {};
      orderByOptions['keys'] = [{label: 'Relevance', key: ''} , {label: 'Date', key: 'date'}];
      customSearchOptions['enableOrderBy'] = true;
      customSearchOptions['orderByOptions'] = orderByOptions;
      var imageSearchOptions = {};
      imageSearchOptions['layout'] = 'google.search.ImageSearch.LAYOUT_POPUP';
      customSearchOptions['enableImageSearch'] = true;
      customSearchOptions['overlayResults'] = true;
      var customSearchControl =   new google.search.CustomSearchControl('Ваш номер', customSearchOptions);
      customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
      var options = new google.search.DrawOptions();
      options.setAutoComplete(true);
      customSearchControl.draw('cse', options);
    }, true);
    </script>
    <style type='text/css'>
      .gsc-control-cse {
        font-family: Arial, sans-serif;
        border-color: #FFFFFF;
        background-color: #FFFFFF;
      }
      .gsc-control-cse .gsc-table-result {
        font-family: Arial, sans-serif;
      }
      input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
        border-color: #D9D9D9;
      }
      input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
        border-color: #666666;
        background-color: #CECECE;
        background-image: none;
        filter: none;
    
      }
      .gsc-tabHeader.gsc-tabhInactive {
        border-color: #FF9900;
        background-color: #FFFFFF;
      }
      .gsc-tabHeader.gsc-tabhActive {
        border-color: #E9E9E9;
        background-color: #E9E9E9;
        border-bottom-color: #FF9900
      }
      .gsc-tabsArea {
        border-color: #FF9900;
      }
      .gsc-webResult.gsc-result, .gsc-results .gsc-imageResult {
        border-color: #FFFFFF;
        background-color: #FFFFFF;
      }
      .gsc-webResult.gsc-result:hover, .gsc-imageResult:hover {
        border-color: #FFFFFF;
        background-color: #FFFFFF;
      }
      .gs-webResult.gs-result a.gs-title:link, .gs-webResult.gs-result a.gs-title:link b, .gs-imageResult a.gs-title:link, .gs-imageResult a.gs-title:link b  {
        color: #0000CC;
      }
      .gs-webResult.gs-result a.gs-title:visited, .gs-webResult.gs-result a.gs-title:visited b, .gs-imageResult a.gs-title:visited, .gs-imageResult a.gs-title:visited b {
        color: #0000CC;
      }
      .gs-webResult.gs-result a.gs-title:hover, .gs-webResult.gs-result a.gs-title:hover b, .gs-imageResult a.gs-title:hover, .gs-imageResult a.gs-title:hover b {
        color: #0000CC;
      }
      .gs-webResult.gs-result a.gs-title:active, .gs-webResult.gs-result a.gs-title:active b, .gs-imageResult a.gs-title:active, .gs-imageResult a.gs-title:active b {
        color: #0000CC;
      }
      .gsc-cursor-page {
        color: #0000CC;
      }
      a.gsc-trailing-more-results:link {
        color: #0000CC;
      }
      .gs-webResult .gs-snippet, .gs-imageResult .gs-snippet, .gs-fileFormatType {
        color: #000000;
      }
      .gs-webResult div.gs-visibleUrl, .gs-imageResult div.gs-visibleUrl {
        color: #008000;
      }
      .gs-webResult div.gs-visibleUrl-short {
        color: #008000;
      }
      .gs-webResult div.gs-visibleUrl-short  {
        display: none;
      }
      .gs-webResult div.gs-visibleUrl-long {
        display: block;
      }
      .gs-promotion div.gs-visibleUrl-short {
        display: none;
      }
      .gs-promotion div.gs-visibleUrl-long  {
        display: block;
      }
      .gsc-cursor-box {
        border-color: #FFFFFF;
      }
      .gsc-results .gsc-cursor-box .gsc-cursor-page {
        border-color: #E9E9E9;
        background-color: #FFFFFF;
        color: #0000CC;
      }
      .gsc-results .gsc-cursor-box .gsc-cursor-current-page {
        border-color: #FF9900;
        background-color: #FFFFFF;
        color: #0000CC;
      }
      .gsc-webResult.gsc-result.gsc-promotion {
        border-color: #336699;
        background-color: #FFFFFF;
      }
      .gsc-completion-title {
        color: #0000CC;
      }
      .gsc-completion-snippet {
        color: #000000;
      }
      .gs-promotion a.gs-title:link,.gs-promotion a.gs-title:link *,.gs-promotion .gs-snippet a:link  {
        color: #0000CC;
      }
      .gs-promotion a.gs-title:visited,.gs-promotion a.gs-title:visited *,.gs-promotion .gs-snippet a:visited {
        color: #0000CC;
      }
      .gs-promotion a.gs-title:hover,.gs-promotion a.gs-title:hover *,.gs-promotion .gs-snippet a:hover  {
        color: #0000CC;
      }
      .gs-promotion a.gs-title:active,.gs-promotion a.gs-title:active *,.gs-promotion .gs-snippet a:active {
        color: #0000CC;
      }
      .gs-promotion .gs-snippet, .gs-promotion .gs-title .gs-promotion-title-right, .gs-promotion .gs-title .gs-promotion-title-right * {
        color: #000000;
      }
      .gs-promotion .gs-visibleUrl,.gs-promotion .gs-visibleUrl-short  {
        color: #008000;
      }
    </style>
    Второй вариант кода от Google хорош простым способом отключения ненужных функций: отключаем ненужные функции - заменой true на false.

    К примеру замена
    customSearchOptions['overlayResults'] = true;
    на
    customSearchOptions['overlayResults'] = false;
    отключит показ результатов поиска в всплывающем окне.

    Ваш номер - это уникальный ID выдающийся вам от Google.

    Берем первый или второй вариант кода и вставляем его в желаемое место форума:
    Что бы добиться расположения поискового результата от Google ниже чем стандартный результат поиска Xenforo (как на nulled.cc) я вставил второй вариант кода в шаблон: ad_below_bottom_breadcrumb после кода: <xen:hook name="ad_below_bottom_breadcrumb" />.
     
    Последнее редактирование: 13 дек 2014