Перейти к содержимому
BXWiki

Картинки торговых предложений - смена при выборе варианта

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

Решение

Смотрим, что есть у самого предложения:

$res = CIBlockElement::GetList([], ['IBLOCK_ID' => 6, 'ID' => $offerId], false, false,
    ['ID', 'NAME', 'DETAIL_PICTURE', 'PREVIEW_PICTURE', 'PROPERTY_MORE_PHOTO']);
$row = $res->Fetch();
printf("детальная=%s доп=%s\n", $row['DETAIL_PICTURE'] ?: '-',
    implode(',', (array)$row['PROPERTY_MORE_PHOTO_VALUE']));

Картинки варианта лежат у самого предложения, а вовсе не у товара. Инфоблок предложений устроен как обычный: те же поля изображений и то же множественное свойство под галерею.

Отдаём картинки вариантов в шаблон:

$APPLICATION->IncludeComponent('bitrix:catalog.element', '', [
    'OFFERS_FIELD_CODE'    => ['NAME', 'DETAIL_PICTURE'],   // поля вариантов
    'OFFERS_PROPERTY_CODE' => ['COLOR', 'MORE_PHOTO'],      // и их свойства
]);

Компонент отдаёт в шаблон только перечисленные в параметрах поля вариантов. Забытое поле картинки - первая причина того, что при выборе цвета меняется цена, а изображение остаётся прежним.

Задаём запасной вариант:

$picture = $offer['DETAIL_PICTURE'] ?: $product['DETAIL_PICTURE'];
$img = CFile::ResizeImageGet($picture, ['width' => 600, 'height' => 600],
    BX_RESIZE_IMAGE_PROPORTIONAL, true);
// у варианта без своей картинки берут изображение товара-владельца

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

Проверяем смену переключением варианта:

// в шаблоне: карта «идентификатор варианта - адрес картинки»
$map = [];
foreach ($arResult['OFFERS'] as $offer) {
        $map[$offer['ID']] = $offer['DETAIL_PICTURE']['SRC'] ?? $arResult['DETAIL_PICTURE']['SRC'];
}
// картинка товара идёт запасной: у части вариантов своей может не быть

Смену картинки проверяют переключением варианта в карточке, а не чтением настроек. Карта «вариант - изображение» собирается на сервере, и браузеру остаётся подменить адрес, не запрашивая страницу заново.

Картинки предложений приезжают из учётной системы отдельно от товарных. Если обмен настроен только на товары, у вариантов изображений не будет вовсе, и карточка везде покажет запасной вариант.

Фотографировать стоит именно то, что покупатель на витрине действительно выбирает глазами. Цвет и фактура требуют своих снимков, а размер и объём памяти не требуют ничего, кроме понятной подписи в карточке.

Уменьшенные копии для вариантов удваивают место на диске. Каталог с пятью вариантами у каждого товара и тремя размерами копий - это пятнадцать файлов на позицию, и на десяти тысячах позиций разница ощутима.

Типичные проблемы

При выборе цвета картинка не меняется.

Поле изображения не перечислено в полях вариантов компонента. Компонент отдаёт в шаблон только явно указанные поля.

У части вариантов пустое место вместо фото.

У этих предложений нет собственной картинки. Для них берут изображение товара-владельца как запасное.

Картинки вариантов не приехали из обмена.

Выгрузка настроена только на сами товары. Изображения предложений передаются отдельной частью выгрузки.

Галерея показывает фото другого варианта.

Карта «вариант - изображения» собрана неверно либо не обновляется при переключении варианта. Её строят на сервере по идентификаторам самих вариантов.

Папка загрузок выросла вдвое.

Уменьшенные копии создаются отдельно для каждого варианта. Число размеров в шаблонах сокращают до действительно нужных.

Частые вопросы

Обязательно ли грузить фото каждому варианту?

Нет, только там, где вариант выглядит иначе. Для размеров одежды хватает картинок товара.

Как показать галерею выбранного варианта?

Множественным свойством у предложения и подменой галереи при переключении. Данные готовят на сервере, а не запрашивают на каждый клик.

Что показывать в списке каталога?

Картинку товара или первого доступного варианта. Показ всех вариантов в списке перегружает страницу.

Почему картинка меняется с задержкой?

Браузер грузит изображение в момент переключения. Помогает предзагрузка картинок вариантов после открытия карточки.

Смежное

Первоисточник