Телеграм: @bazarow_ru Почта: mihail@bazarow.ru

Уникальная СЕО информация для каждого торгового предложения в каталоге 1С-Битрикс

Просмотров: 320

Задача: реализовать уникальную мета-информацию для каждого SKU в каталоге. У каждого ТП должны быть свои: заголовок h1, ключевые слова, описание страницы, заголовок окна браузера и канонический адрес.

Это продолжение заметки Уникальный URL для торговых предложений.

Смена заголовка h1 при выборе SKU

Для начала реализуем смену заголовка товара для пользователя. Чтобы при выборе конкретного SKU в h1 подставлялось название предложения, вместо названия основного товара.

Модифицируем функцию переключения SKU selectOfferProp: function () до вот такого вида.

selectOfferProp: function () {
    var i = 0,
        strTreeValue = '',
        arTreeItem = [],
        rowItems = null,
        target = BX.proxy_context,
        smallCardItem;

    if (target && target.hasAttribute('data-treevalue')) {
        if (BX.hasClass(target, 'selected'))
            return;

        if (typeof document.activeElement === 'object') {
            document.activeElement.blur();
        }

        // start CUSTOM
        var skuId = this.offers[this.offerNum]['ID'];
        // end CUSTOM

        strTreeValue = target.getAttribute('data-treevalue');
        arTreeItem = strTreeValue.split('_');
        this.searchOfferPropIndex(arTreeItem[0], arTreeItem[1]);

        rowItems = BX.findChildren(target.parentNode, {
            tagName: 'li'
        }, false);

        if (rowItems && rowItems.length) {
            for (i = 0; i < rowItems.length; i++) {
                BX.removeClass(rowItems[i], 'selected');
            }
            // start CUSTOM
            var currentUrl = window.location.href;
            var newUrl = currentUrl.replace('?offer=' + skuId, '');
            window.history.replaceState(null, null, newUrl);
            // end CUSTOM
        }

        BX.addClass(target, 'selected');

        // start CUSTOM
        var skuId = this.offers[this.offerNum]['ID'];
        var newUrl = window.location.pathname + '?offer=' + skuId;
        window.history.pushState('', '', newUrl);

        // console.log(JSON.stringify(this.offers[this.offerNum]['DESCRIPTION']))
        // Смена h1
        document.getElementById("pagetitle").innerHTML = this.offers[this.offerNum]['NAME'];
        // end CUSTOM

        if (this.smallCardNodes.panel) {
            smallCardItem = this.smallCardNodes.panel.querySelector('[data-treevalue="' + strTreeValue + '"]');
            if (smallCardItem) {
                rowItems = this.smallCardNodes.panel.querySelectorAll('[data-sku-line="' + smallCardItem.getAttribute('data-sku-line') + '"]');
                for (i = 0; i < rowItems.length; i++) {
                    rowItems[i].style.display = 'none';
                }

                smallCardItem.style.display = '';
            }
        }

        if (
            this.isFacebookConversionCustomizeProductEventEnabled &&
            BX.Type.isArrayFilled(this.offers) &&
            BX.Type.isObject(this.offers[this.offerNum])
        ) {
            BX.ajax.runAction(
                'sale.facebookconversion.customizeProduct', {
                    data: {
                        offerId: this.offers[this.offerNum]['ID']
                    }
                }
            );
        }
    }
}

Относительно первой заметки здесь изменения:

  • Вместо подмены ссылки, на SKU, вида ССЫЛКА_НА_ТОВАР/ID-SKU/ сделали ССЫЛКА_НА_ТОВАР/?offer=ID-SKU
  • С помощью innerHTML заменяем содержимое тега h1, зная его id. В типовом магазине этот id=pagetitle

Меняем SEO параметры страницы при переходе по прямой ссылке на SKU

Теперь нужно подменять всю нужную информацию, при прямом переходе по ссылке торгового предложения. При этом, нужно оставить функционал штатной установки мета-информации, если открыт основной товар или у товара нет SKU.

В element.php комплексного шаблона компонента, до вывода bitrix:catalog.element, вносим вот такое условие:

if (empty($_REQUEST['offer'])) {
    $arParams['SET_TITLE'] = $arParams['SET_TITLE'];
    $arParams['SET_BROWSER_TITLE'] = $arParams['SET_BROWSER_TITLE'];
    $arParams['SET_META_KEYWORDS'] = $arParams['SET_META_KEYWORDS'];
    $arParams['SET_META_DESCRIPTION'] = $arParams['SET_META_DESCRIPTION'];
} else {
    $arParams['SET_TITLE'] = 'N';
    $arParams['SET_BROWSER_TITLE'] = 'N';
    $arParams['SET_META_KEYWORDS'] = 'N';
    $arParams['SET_META_DESCRIPTION'] = 'N';
}

Данное условие проверит имеется ли в URL параметр с торговым предложением и отменит настройки комплексного компонента по установке SEO информации.

В component_epilog.php детальной карточки товара вносим условие, которое получит нужные данные от конкретного SKU:

if (!empty($_REQUEST['offer'])) {
    $dbOfferData = CIBlockElement::GetList(
        false,
        array(
            '=ID' => $_REQUEST['offer']
        ),
        false,
        array(
            'nTopCount' => 1
        ),
        array(
            'NAME',
            'IBLOCK_ID',
            'CANONICAL_PAGE_URL'
        )
    )->GetNext();
    $dbOfferSeoProps = new \Bitrix\Iblock\InheritedProperty\ElementValues(
        $dbOfferData['IBLOCK_ID'], // ID инфоблока с ТП
        $_REQUEST['offer'] // ID элемента
    );
    $arOfferSeoProps = $dbOfferSeoProps->getValues();

    $APPLICATION->SetTitle($dbOfferData['NAME']);
    $APPLICATION->SetPageProperty("title", $arOfferSeoProps['ELEMENT_META_TITLE']);
    $APPLICATION->SetPageProperty("keywords", $arOfferSeoProps['ELEMENT_META_KEYWORDS']);
    $APPLICATION->SetPageProperty("description", $arOfferSeoProps['ELEMENT_META_DESCRIPTION']);
    $APPLICATION->SetPageProperty("canonical", $dbOfferData['CANONICAL_PAGE_URL']);
}
  • С помощью CIBlockElement::GetList получили название и канонический URL выбранного ТП
  • С помощью Bitrix\Iblock\InheritedProperty\ElementValues получили SEO параметры этого ТП
  • C помощью $APPLICATION->SetPageProperty установили все нужные SEO параметры для страницы и заголовок h1.

В настройках инфоблока торговых предложений устанавливаем настройки для URL (включая канонический).

Уникальная СЕО информация для каждого торгового предложения в каталоге 1С-Битрикс

Видео: СЕО информация для каждого торгового предложения

Полная версия видео на моем Boosty канале

Михаил Базаров 29.04.2023
Для компонента bitrix:catalog.element в element.php, не забудте устновить параметры
Код
 
"SET_TITLE" => $arParams['SET_TITLE'],
"SET_BROWSER_TITLE" => $arParams['SET_BROWSER_TITLE'],
"SET_META_KEYWORDS" => $arParams['SET_META_KEYWORDS'],
"SET_META_DESCRIPTION" => $arParams['SET_META_DESCRIPTION'],