How to make your own property in the trade offer of the product card?

Question

1C-Bitrix

I'm picking a standard solution - an online store, small business editors, stuck in product cards.
I want to make such an analogue of the filter by trade offer


. The first selection is standard, I added "Offer - OFFERS"

in the call to the "bitrix:catalog" component, stuffed this property everywhere where typical properties are called

on the screen below, the place where these "filters" are called is the
second screen - bitrix component call parameters:catalog.element
3 screen - main component call parameters - catalog



And this is killing me, I don’t understand what to do with it, and how to add my own filters
"DETAIL_PRODUCT_INFO_BLOCK_ORDER" => "sku,props",

(* and please, don't write about the fact that I'm posting the code with screenshots, here you need to focus on visual contact so that it's clear what I'm talking about)

Answer 1

in the result_modifier.php file of your catalog.element component template after the method

$arParams = $component->applyTemplateModifications();

add

if($arResult['OFFERS']) {
  $colorPropertyCode = 'COLOR_REF';
  
  foreach($arResult['OFFERS'] as $key => $offer) {
    $colors = $arResult['SKU_PROPS'][$colorPropertyCode]['VALUES'];
    $offerColorXmlId = $offer['PROPERTIES'][$colorPropertyCode]['VALUE'];
    $offerColorImage = [];
    
    foreach($colors as $color) {
      if($color['XML_ID'] == $offerColorXmlId) {
        if(is_array($color['PICT']) && $color['PICT']['SRC']) {
          $offerColorImage = $color['PICT'];
        }
        break;
      }
    }

    if($offerColorImage) {
      ++$arResult['OFFERS'][$key]['MORE_PHOTO_COUNT'];
      array_unshift($arResult['OFFERS'][$key]['MORE_PHOTO'], $offerColorImage);
      
      ++$arResult['JS_OFFERS'][$key]['SLIDER_COUNT'];
      array_unshift($arResult['JS_OFFERS'][$key]['SLIDER'], $offerColorImage);
    }
  }
}

Just change this line $colorPropertyCode = 'COLOR_REF'; COLOR_REF - character code of the trade offers infoblock color property