xF2 Tích hợp Google Custom Search cho xenForo 2

  • Bạn không tìm được Add-on hay Style xenForo 1 trên hệ thống xFv2 hiện tại ?
    Đăng bài yêu cầu ngay !
  • Can't find your Add-on or Style on xFv2 ?
    Request now !

datdaik000

A boy learn to be a man
Staff member
7/2/18
64
82
18
Nam Định
dcforo.com
Ở xenForo 1 đã có bài hướng dẫn chi tiết rồi, còn bài này là dành cho xenForo 2 nhé ! Bạn nào dùng xenForo 1 thì vào link này: [CLICK HERE]

1518696418210.png

Bước đầu tiên, chắc chắn là bạn sẽ phải tạo 1 custom search cho site của mình rồi. Sau khi đã tạo xong, các bạn làm như hình để vào lấy ID Custom Search

1.png

ID chính là dòng khoanh đỏ như hình dưới

2.png

Lưu đoạn mã này lại. Tiếp theo các bạn vào template search_results và thay toàn bộ bằng

HTML:
<xf:if is="$search.search_query">
    <xf:title page="{$page}">{{ phrase('search_results_for_query:') }} {$search.search_query}</xf:title>
    <xf:h1>{{ phrase('search_results_for_query:') }} <a href="{{ link('search', $search, {'searchform': '1'}) }}"><em>{$search.search_query}</em></a></xf:h1>
<xf:else />
    <xf:title page="{$page}">{{ phrase('search_results') }}</xf:title>
</xf:if>

<xf:page option="uix_mobileActiveNav">{{ phrase('search') }}</xf:page>

<xf:css src="search_results.less" />

<xf:breadcrumb href="{{ link('full:search') }}">{{ phrase('search') }}</xf:breadcrumb>

<xf:head option="robots"><meta name="robots" content="noindex" /></xf:head>

<xf:if is="$activeModType">
    <xf:js src="xf/inline_mod.js" min="1" />
</xf:if>

<div class="block" data-xf-init="{{ $activeModType ? 'inline-mod' : '' }}" data-type="{$activeModType}" data-href="{{ link('inline-mod') }}">
    <xf:if is="$search.warnings">
        <div class="block-outer">
            <ol class="listPlain blockMessage blockMessage--warning blockMessage--close">
                <xf:foreach loop="$search.warnings" value="$warning">
                    <li>{$warning}</li>
                </xf:foreach>
            </ol>
        </div>
    </xf:if>
    <xf:if is="$modTypes">
        <div class="block-outer">
            <div class="block-outer-opposite">
                <div class="buttonGroup">
                    <xf:if is="$activeModType">
                        <xf:macro template="inline_mod_macros" name="button" />
                    </xf:if>
                    <div class="buttonGroup-buttonWrapper">
                        <xf:button class="button--link menuTrigger" data-xf-click="menu" aria-expanded="false" aria-haspopup="true">{{ phrase('enable_moderation') }}</xf:button>
                        <div class="menu" data-menu="menu" aria-hidden="true">
                            <div class="menu-content">
                                <h3 class="menu-header">{{ phrase('enable_moderation') }}</h3>
                                <xf:foreach loop="$modTypes" key="$type" value="$text">
                                    <a href="{{ link('search', $search, {'mod': $type,  'page': ($page > 1 ? $page : '')}) }}" class="menu-linkRow {{ $activeModType == $type ? 'is-selected' : '' }}">{$text}</a>
                                </xf:foreach>
                                <xf:if is="$activeModType">
                                    <hr class="menu-separator" />
                                    <a href="{{ link('search', $search, {'page': ($page > 1 ? $page : '')}) }}" class="menu-linkRow">{{ phrase('disable') }}</a>
                                </xf:if>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </xf:if>

    <div class="block-container">
        <h2 class="widget-tabs block-tabHeader tabs hScroller" data-xf-init="tabs h-scroller" data-state="replace" role="tablist">
             <span class="hScroller-scroll">
                 <a href="#GoogleSearchResult"
                        class="tabs-tab is-active"
                        role="tab"
                        aria-controls="tab_googleSR">Google Search Results</a>
                 <a href="#LocalSearchResult"
                        class="tabs-tab"
                        id="tab_localSR"
                        role="tab">Local Search Results</a>
             </span>
         </h2>
       
        <ul class="tabPanes widget--tab">
            <li class="is-active" role="tabpanel" id="tab_googleSR">
                <script>
                    (function() {
                          var cx = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
                          var gcse = document.createElement('script');
                          gcse.type = 'text/javascript';
                          gcse.async = true;
                         gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
                          var s = document.getElementsByTagName('script')[0];
                          s.parentNode.insertBefore(gcse, s);
                      })();
                </script>
                <gcse:search></gcse:search>
                <gcse:searchresults></gcse:searchresults>
            </li>
           
            <li class="is-active" role="tabpanel" id="tab_localSR">
                <ol class="block-body">
                    <xf:foreach loop="$results" value="$result">
                        {{ $result.render({'mod': $activeModType})|raw }}
                    </xf:foreach>
                </ol>
                <xf:if is="{$getOlderResultsDate}">
                    <div class="block-footer">
                        <span class="block-footer-controls"><xf:button href="{{ link('search/older', $search, {'before': $getOlderResultsDate}) }}" class="button--link">
                            {{ phrase('view_older_results') }}
                        </xf:button></span>
                    </div>
                </xf:if>
            </li>
        </ul>
    </div>

    <div class="block-outer block-outer--after">
        <xf:pagenav
            page="{$page}" perpage="{$perPage}" total="{$search.result_count}"
            link="search" data="{$search}" params="{{ {'mod': $activeModType} }}"
            wrapperclass="block-outer-main" />
        <xf:showignored wrapperclass="block-outer-opposite" />
    </div>
</div>

<xf:if is="$activeModType">
    <xf:js src="xf/inline_mod.js" min="1" />
</xf:if>
Các bạn thay đoạn xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx bằng ID Custom Search của mình nhé. Và đây là kết quả

demo.png

Chúc các bạn thành công !
 
Reactions: YaPBoZ and Updater

GRV-TV

Active User
11/2/18
12
7
3
hình như có add-on mà phải ko, mà giữa add-on với thêm thằng vào cái nào dc hơn, xen1 thì thằng vô mà xen2 thì mình chưa biết
 
Reactions: datdaik000

datdaik000

A boy learn to be a man
Staff member
7/2/18
64
82
18
Nam Định
dcforo.com
hình như có add-on mà phải ko, mà giữa add-on với thêm thằng vào cái nào dc hơn, xen1 thì thằng vô mà xen2 thì mình chưa biết
Dùng cách này bạn sẽ đỡ phải tạo thêm queries trong database, tiết kiệm được chút ít dung lượng :D
 
Reactions: GRV-TV

Members online

No members online now.

Latest resources