Главная > Блог > Web-разработка > CMS Битрикс >

Битрикс. Облако тегов

11.07.2018

Теги: CMS • Web-разработка • Битрикс • Компонент • Поиск • ШаблонКомпонента

Задача — создать облако тегов, которое будет в правой колонке, в разделе «Блог». Для начала в панели управления для статей блога создадим несколько тегов. Потом переходим на сайт, на тестовую страницу, и вызываем визуальный редактор. Нам надо получить код вызова компонента «Облако тегов», который находится в «Служебные • Поиск». В настройках изменяем количество тегов, сортировку (по имени или релевантности) и выбираем область поиска: тип инфоблока и сам инфоблок (который был создан в панели управления под публикации статей блога):

Копируем код вызова компонента и закрываем редактор без сохранения:

<?php
$APPLICATION->IncludeComponent(
    "bitrix:search.tags.cloud",
    "",
    array(
        "CACHE_TIME" => "3600",
        "CACHE_TYPE" => "A",
        "CHECK_DATES" => "N",
        "COLOR_NEW" => "3E74E6",
        "COLOR_OLD" => "C0C0C0",
        "COLOR_TYPE" => "Y",
        "FILTER_NAME" => "",
        "FONT_MAX" => "50",
        "FONT_MIN" => "10",
        "PAGE_ELEMENTS" => "10",
        "PERIOD" => "",
        "PERIOD_NEW_TAGS" => "",
        "SHOW_CHAIN" => "Y",
        "SORT" => "NAME",
        "TAGS_INHERIT" => "Y",
        "URL_SEARCH" => "/search/index.php",
        "WIDTH" => "100%",
        "arrFILTER" => array("iblock_content"),  // область поиска: тип инфобока
        "arrFILTER_iblock_content" => array("1") // область поиска: сам инфобок
    )
);
?>

В шаблоне блога local/templates/voguis_blog/footer.php комментируем HTML-код облака тегов от верстальщика и вставляем вызов компонента:

<div class="b-tag-weight">
    <h3>Tags Weight</h3>
    <ul>
        <li><a href="#">Lorem</a></li>
        <li><a href="#">consectetur</a></li>
        <li><a href="#">dolore</a></li>
        <li><a href="#">aliqua</a></li>
        <li><a href="#">sit amet</a></li>
        <li><a href="#">ipsum</a></li>
    </ul>
</div>

В принципе, облако тегов уже работает. И даже можно посмотреть результат поиска по тегу, если была создана страница результатов поиска с использованием компонента «Стандартная страница поиска»:

Осталось только скопировать шаблон компонента «Облако тегов» и изменить под наш дизайн:

Имя шаблона tags, копируем в шаблон страницы блога voguis_blog:

Удаляем весь код из скопированного шаблона local/templates/voguis_blog/components/bitrix/search.tags.cloud/tags/template.php

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
/** @var array $arParams */
/** @var array $arResult */
/** @global CMain $APPLICATION */
/** @global CUser $USER */
/** @global CDatabase $DB */
/** @var CBitrixComponentTemplate $this */
/** @var string $templateName */
/** @var string $templateFile */
/** @var string $templateFolder */
/** @var string $componentPath */
/** @var CBitrixComponent $component */
$this->setFrameMode(true);

if($arParams["SHOW_CHAIN"] != "N" && !empty($arResult["TAGS_CHAIN"])):
?>
<noindex>
    <div class="search-tags-chain" <?=$arParams["WIDTH"]?>><?
        foreach ($arResult["TAGS_CHAIN"] as $tags):
            ?><a href="<?=$tags["TAG_PATH"]?>" rel="nofollow"><?=$tags["TAG_NAME"]?></a> <?
            ?>[<a href="<?=$tags["TAG_WITHOUT"]?>" class="search-tags-link" rel="nofollow">x</a>]  <?
        endforeach;?>
    </div>
</noindex>
<?
endif;

if(is_array($arResult["SEARCH"]) && !empty($arResult["SEARCH"])):
?>
<noindex>
    <div class="search-tags-cloud" <?=$arParams["WIDTH"]?>><?
        foreach ($arResult["SEARCH"] as $key => $res)
        {
        ?><a href="<?=$res["URL"]?>" style="font-size: <?=$res["FONT_SIZE"]?>px; color: #<?=$res["COLOR"]?>;" rel="nofollow"><?=$res["NAME"]?></a> <?
        }
    ?></div>
</noindex>
<?
endif;
?>

И пишем свой код:

<?php
if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();
/** @var array $arParams */
/** @var array $arResult */
/** @global CMain $APPLICATION */
/** @global CUser $USER */
/** @global CDatabase $DB */
/** @var CBitrixComponentTemplate $this */
/** @var string $templateName */
/** @var string $templateFile */
/** @var string $templateFolder */
/** @var string $componentPath */
/** @var CBitrixComponent $component */
$this->setFrameMode(true);
?>

<?php if (is_array($arResult['SEARCH']) && !empty($arResult['SEARCH'])): ?>
<div class="b-tag-weight">
    <h3>Облако тегов</h3>
    <ul>
    <?php foreach ($arResult['SEARCH'] as $arItem): ?>
        <li><a href="<?= $arItem['URL']; ?>"><?= $arItem['NAME']; ?></a></li>
    <?php endforeach; ?>
    </ul>
</div>
<?php endif; ?>

Поиск: CMS • Web-разработка • Битрикс • Компонент • Облако тегов • Поиск • Шаблон компонента