Картинка торгового предложения вместо иконки цвета, в выборе SKU

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

Задача: вместо не информативных иконок цветов нужно вывести детальную картинку торгового предложения. Если картинки у предложения нет - выводим иконку цвета.

картинку товара SKU вместо иконки цвета

Получаем картинки SKU через API 1С-Битрикс

Открываем на редактирование шаблон детальной карточки catalog.element (внутри шаблона вашего сайта).

Находим участок, который отвечает за вывод и выбор цветов торговых предложений. В штатном шаблоне bootstrap_v4 это, примерно, 334-ая строчка.

Внутри условия if ($skuProperty['SHOW_MODE'] === 'PICT') - кстати, можете найти участок вывода цветов по нему - добавляем:

if ($skuProperty['SHOW_MODE'] === 'PICT') {
    $dbProps = CIBlockElement::GetList(
        false,
        array(
            'IBLOCK_ID' => $arResult['OFFERS']['0']['IBLOCK_ID'],
            'PROPERTY_CML2_LINK' => $arResult['ID'],
            'PROPERTY_COLOR_REF' => $value['XML_ID']
        ),
        false,
        array('nTopCount' => '1'),
        array('DETAIL_PICTURE')
    );
    while ($arFields = $dbProps->Fetch()) {
        if (!empty($arFields["DETAIL_PICTURE"])) {
            $imgPath = CFile::GetPath($arFields["DETAIL_PICTURE"]);
        } else {
            $imgPath = $value['PICT']['SRC'];
        }
    }
    ?>
    <li
        class="product-item-scu-item-color-container"
        data-treevalue="<?= $propertyId ?>_<?= $value['ID'] ?>"
        data-onevalue="<?= $value['ID'] ?>">
        <div class="product-item-scu-item-color-block">
            <div
                class="product-item-scu-item-color"
                style="background-image: url('<?= $imgPath ?>');">
            </div>
        </div>
    </li>
     <?
     unset($imgPath);
}

Мы использовали метод CIBlockElement::GetList для получения элементов инфоблока торговых предложений с фильтром:

  • 'IBLOCK_ID' => $arResult['OFFERS']['0']['IBLOCK_ID']: в этом ключе, всегда хранится ID инфоблока с предложениями (по сути, просто ID инфоблока первого предложения, текущего товара)
  • 'PROPERTY_CML2_LINK' => $arResult['ID']: свойство SKU в котором хранится связь предложения с товаром
  • 'PROPERTY_COLOR_REF' => $value['XML_ID']: XML-ID конкретного цвета.

В отборе указали что нам нужен один элемент и от него нужна, только, детальная картинка. Дальше передали путь к картинке предложения в переменную $imgPath.

Если у предложения нет картинки, в переменной $imgPath будет путь к иконке цвета. И в самом конце, перебора предложений, отменили переменную $imgPath что бы не передавалась дальше по циклу.

Видео: как вывести картинку предложения вместе с названием, в выборе SKU

Универсальное решение, если свойств несколько

Если у вас несколько свойств SKU с выводом цветов, можно сделать универсальное решение, дабы не раздувать код. В принципе можно использовать и для одного свойства:

foreach ($skuProperty['VALUES'] as &$value) {
    $value['NAME'] = htmlspecialcharsbx($value['NAME']);

    if ($skuProperty['SHOW_MODE'] === 'PICT') {
        $dbProps = CIBlockElement::GetList(
            false,
            array(
                'IBLOCK_ID' => $arResult['OFFERS']['0']['IBLOCK_ID'],
                'PROPERTY_CML2_LINK' => $arResult['ID'],
                'PROPERTY_'.$skuProperty['CODE'] => $value['XML_ID']
            ),
            false,
            array('nTopCount' => '1'),
            array('DETAIL_PICTURE', 'NAME')
        );
        while ($arFields = $dbProps->Fetch()) {
            if (!empty($arFields["DETAIL_PICTURE"])) {
                $imgPath = CFile::GetPath($arFields["DETAIL_PICTURE"]);
            } else {
                $imgPath = $value['PICT']['SRC'];
            }
        }
        ?>
    <li
        class="product-item-scu-item-color-container"
        data-treevalue="<?= $propertyId ?>_<?= $value['ID'] ?>"
        data-onevalue="<?= $value['ID'] ?>">
            <div
                class="product-item-scu-item-color"
                style="background-image: url('<?= $imgPath ?>');">
            </div>
    </li>
     <?
     unset($imgPath);
}

Здесь используем ключ массива $skuProperty['CODE'], в котором находится код свойства, для использования в фильтре с CIBlockElement::GetList

Михаил Базаров 12.11.2022
Тоже самое, на D7
CIBlockElement::GetList аналог на D7
Код
$dbOffers = \Bitrix\Iblock\Elements\ElementCatalogTable::getList([
         'select' => ['DETAIL_PICTURE'],
         'filter' => [
               '=IBLOCK_ID' => $arResult['OFFERS']['0']['IBLOCK_ID'],
               '=PROPERTY_CML2_LINK' => $arResult['ID'],
               '=PROPERTY_TSVET' => $value['XML_ID']
          ],
 ])->fetchAll();
foreach ($dbOffers as $dbOffer) {
    if (!empty($dbOffer["DETAIL_PICTURE"])) {
            $imgPath = CFile::GetPath($arFields["DETAIL_PICTURE"]);
    } else {
            $imgPath = $value['PICT']['SRC'];
     }
 }

Если картинки ТП достаточно большие, что бы не перегружать страницу, можно использовать ресайз картинок в нужный размер
Код
$imgPath = CFile::ResizeImageGet(
            $dbOffer["DETAIL_PICTURE"],
            array(
                 'width'=>100, 
                 'height'=>100
           ), 
           BX_RESIZE_IMAGE_PROPORTIONAL_ALT, true
);
Гость 06.02.2023
а возможно свойства для выбора торговых предложений сделать множественными? Чтобы не один цвет - один товар, а два (три, четыре) цвета (сочетания черный и белый и т.п.) - одно торговое предложение, - один товар черно-белого цвета (и любых других всевозможных сочетаний)?
Максим Верещинский 03.05.2023
Сначала ничего не отображалось, и как были указаны цвета через свойство справочник, так они и отображались, потом поковырявшись немного, установил детальную картинку для всех торг предложений, и вроде как это помогло, еще главное в этой строчке не потерять ";"

<span style="background-image: url(<?=$imgPath?>);"></span>
<span><?=$value['NAME']?></span>

Добавлю еще, что настройка отображения картинок ТП в общем каталоге (скриншот 4) должна производится отдельно, видимо так как это другой компонент. Мало ли кому то поможет.

Дополню как сверстаю до конца.
Максим Верещинский 03.05.2023
Цитата
Максим Верещинский написал:
                   Сначала ничего не отображалось, и как были указаны цвета через свойство справочник, так они и отображались, потом поковырявшись немного, установил детальную картинку для всех торг предложений, и вроде как это помогло, еще главное в  этой  строчке не потерять " ; "

 <span style="background-image: url(<?=$imgPath?>);"></span>  
 <span><?=$value['NAME']?></span>  

Добавлю еще, что настройка отображения картинок ТП в общем каталоге (скриншот 4) должна производится отдельно, видимо так как это другой компонент. Мало ли кому то поможет.

Дополню как сверстаю до конца.                
Добавил тестовые картинки с надписями где DET_PHOTO означает DETAIL_PHOTO (детальная картинка), а BROWN - цвет, из чего собственно и вытекает проблема.
Должно быть: DET_PHOTO BROWN, DET_PHOTO GRAY, DET_PHOTO BLACK
Гость 03.05.2023
Цитата
Максим Верещинский написал:
Цитата
Максим Верещинский написал:
Сначала ничего не отображалось, и как были указаны цвета через свойство справочник, так они и отображались, потом поковырявшись немного, установил детальную картинку для всех торг предложений, и вроде как это помогло, еще главное в  этой  строчке не потерять " ; "

<span style="background-image: url(<?=$imgPath?>);"></span>  
<span><?=$value['NAME']?></span>  

Добавлю еще, что настройка отображения картинок ТП в общем каталоге (скриншот 4) должна производится отдельно, видимо так как это другой компонент. Мало ли кому то поможет.

Дополню как сверстаю до конца.
Добавил тестовые картинки с надписями где DET_PHOTO означает DETAIL_PHOTO (детальная картинка), а BROWN - цвет, из чего собственно и вытекает проблема.
Должно быть:  DET_PHOTO BROWN, DET_PHOTO GRAY, DET_PHOTO BLACK
Подытоживая все что я написал выше - заметил такую интересную последовательность.

array('nTopCount' => '2'), определяет какое изображение будет выводится с картинкой ТП, прикрепляю скриншоты для наглядности.
Михаил Базаров 04.05.2023
Немного плохо понял мысль:
Вы хотите выводить не детальную картинку ТП, а первую из картинок дополнительных фотографий?
Гость 05.05.2023
Цитата
написал:
Немного плохо понял мысль:
Вы хотите выводить не детальную картинку ТП, а первую из картинок дополнительных фотографий?
Нет, просто отмечаю, что в свойстве цвет выводится не детальная картинка закрепленная каждая на своим ТП, а только одна определенная картинка.
Михаил Базаров 05.05.2023
Все, понял:
В конце перебора нужно добавить
Код
unset($imgPath);

Чтобы обнулить (точнее грохнуть полностью) переменную с путем к картинке, дабы она не передевалась дальше по циклу.
В заметку добавил. Спасибо что написали )