Улучшаем механизм переключения торговых предложений

В этой статье вы узнаете, как изменить кнопки переключения торговых предложений в Битриксе. Например, вставить вместо текста картинки.

Автор . Дата: 08.12.2014

В одном проекте из 1С-ки выгружались товары и торговые предложения. Сами торговые предложения использовались для возможности покупки товара в различных цветах. Битрикс хорошо понимал это, и предоставил механизм переключения торговых предложений в виде вот таких кнопок:

Но это было не очень красиво. Было решено переделать. Сначала хотел сделать так, чтобы вместо названия отображался сам цвет, но потом, как оказалось, это свойство содержит название различных видов материалов и цветов, которые использовались в этом товаре. Думаю вы сами представляете, как выглядит Каттхилт-Лайм. Поэтому было решено отображать там просто превьюшки SKU.

Итак, нам потребуется шаблон компонента catalog.element. Находим там следующий код:

if (isset($arResult['OFFERS']) && !empty($arResult['OFFERS']) && !empty($arResult['OFFERS_PROP']))
{
    $arSkuProps = array();
?>
<div class="item_info_section" id="<? echo $arItemIDs['PROP_DIV']; ?>">
<? 
    foreach ($arResult['SKU_PROPS'] as &$arProp)
    {
        if (!isset($arResult['OFFERS_PROP'][$arProp['CODE']]))
            continue;

        $arSkuProps[] = array(
            'ID' => $arProp['ID'],
            'SHOW_MODE' => $arProp['SHOW_MODE'],
            'VALUES_COUNT' => $arProp['VALUES_COUNT']
        );

Поскольку у нас будет не текстовое отображение, а графическое, то нам нужно изменить тип элемент массива $arProp['SHOW_MODE'] на PICT:

        $arProp['SHOW_MODE'] = 'PICT';

        $arSkuProps[] = array(
            'ID' => $arProp['ID'],
            'SHOW_MODE' => $arProp['SHOW_MODE'],
            'VALUES_COUNT' => $arProp['VALUES_COUNT']
        );

Теперь перейдем к условию:

elseif ('PICT' == $arProp['SHOW_MODE'])

Найдем там цикл:

foreach ($arProp['VALUES'] as $arOneValue)

и добавим в его начало:

                                $findOffer = null;
                                foreach ($arResult['OFFERS'] as $offer)
                                {
                                    foreach ($offer["TREE"] as $tree)
                                    {
                                        if ($tree == $arOneValue['ID'])
                                            $findOffer = $offer;
                                    }
                                }

Далее найдем:

                                    <span class="cnt"><span class="cnt_item cnt_item_element"
                                        style="background-image:url('<? echo $arOneValue['PICT']['SRC']; ?>');"
                                        data-title="<? echo htmlspecialcharsbx($arOneValue['NAME']); ?>"></span></span>

и преобразуем к виду:

                                    <span class="cnt"><span class="cnt_item cnt_item_element"
                                        style="background-image:url('<? echo $findOffer['DETAIL_PICTURE']['SRC'] ?>');"
                                        data-title="<? echo htmlspecialcharsbx($arOneValue['NAME']); ?>"></span></span>

Вот и все. Сбрасываем кеш, и получим примерно следующее:


comments powered by HyperComments