Как показывать только доступные SKU битрикс при выборе?

Question

[Павел Сидоров]

кастомный catalog.element

$haveOffers = !empty($arResult['OFFERS']);
$showOffersBlock = $haveOffers && !empty($arResult['OFFERS_PROP']);

$arJS_SKUS = [];
foreach ($arResult['OFFERS'] as $sku) {
	$arJS_SKUS[] = [
		'ID' => $sku['ID'],
		'NAME' => $sku['NAME'],
		'ARTICLE' => $sku['PROPERTIES']["CML2_ARTICLE"]["VALUE"],
		'PAR' => $sku['PROPERTIES']["PAR"]["VALUE"],
		'TSVET' => $sku['PROPERTIES']['TSVET']['VALUE'],
		'RAZMERKPB' => $sku['PROPERTIES']['RAZMERKPB']['VALUE'],
		'RASTSVETKA' => $sku['PROPERTIES']['RASTSVETKA']['VALUE'],
		'RAZMERPODUSHKI' => $sku['PROPERTIES']['RAZMERPODUSHKI']['VALUE'],
		'RAZMER' => $sku['PROPERTIES']['RAZMERPODUSHKI']['VALUE'],
		'PRICE' => $sku['PRICE']['PRINT_PRICE'],
		'IMG' => $sku['PROPERTIES']['LINK_TO_FOTO_AVITO']['VALUE'],
		'SKU_DESCRIPTION' => $sku['PROPERTIES']['full_descr']['VALUE'],
		'SKU_SIZE' => $sku['PROPERTIES']['SIZE']['VALUE'],
	];
}

<!--OFFERS-->
						<div class="catalog-element-offers">
							<?if($haveOffers):?>
								<?foreach($arResult['SKU_PROPS'] as $skuProperty):
									if (!isset($arResult['OFFERS_PROP'][$skuProperty['CODE']]))
									continue;
	
									$propertyId = $skuProperty['ID'];
									$skuProps[] = array(
										'ID' => $skuProperty['ID'],
										'VALUES' => $skuProperty['VALUES'],
									);
								?>
								<div class="sku-group" data-entity="sku-line-block" data-property="<?=$skuProperty["CODE"]?>">
									<div class="product-detail-scu-container-title"><?=htmlspecialcharsEx($skuProperty['NAME'])?></div>
									<div class="product-detail-scu-container">
										<div class="product-detail-scu-block">
											<div class="product-detail-scu-list">
												<ul class="product-detail-scu-item-list">
													<?
														$i = 0;
														foreach($skuProperty['VALUES'] as $key => &$value):
															$value['NAME'] = htmlspecialcharsbx($value['NAME']);
															if ($value['NAME'] != '-') { 
													?>
														<li class="product-detail-scu-item-text-container <?=($i == 0 ? " selected" : "")?>" title="<?=$value['NAME']?>"
															data-treevalue="<?=$propertyId?>_<?=$value['ID']?>"
															data-onevalue="<?=$value['ID']?>"
															data-key="<?=$key;?>"
															data-value="<?=$value['NAME']?>">
															<div class="product-detail-scu-item-text-block">
																<div class="product-detail-scu-item-text change_click"><?=$value['NAME']?></div>
															</div>
														</li>
													<?
														$i++;
														}
														endforeach;?>
												</ul>
											</div>
										</div>
									</div>
								</div>
								<?endforeach;?>
							<?endif;?>
						</div>

<script>
  const skus = <?=CUtil::PhpToJSObject($arJS_SKUS)?>;
</script>

$(function(){

	//console.log(skus);

	let skuSwiper = new Swiper('.sku-swiper', {
		loop: true,
		pagination: {
			el: '.swiper-pagination',
			clickable: true,
		},
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},
	});

	const selected = {
		TSVET: null,
		RAZMERKPB: null,
		RAZMERPODUSHKI: null,
		RAZMER: null,
	};


	$('.sku-group li').on('click', function () {

		const prop = $(this).closest('.sku-group').data('property');
		const value = $(this).data('value');

		selected[prop] = value;

		// Отмечаем активную кнопку
		$(this).siblings().removeClass('selected');
		$(this).addClass('selected');

		// Фильтрация SKU
		const match = skus.find(sku => {
			return Object.keys(selected).every(key => !selected[key] || sku[key] === selected[key]);
		});

		const swiperWrapper = document.querySelector('#sku-swiper-wrapper');

		skuSwiper.removeAllSlides();

		// Создаем новые слайды
		const newSlides = match.IMG.map(photoUrl => {
			const slide = document.createElement('div');
			slide.className = 'swiper-slide img-detail';
			slide.innerHTML = '<a data-fancybox="gallery" href="'+photoUrl+'"><img class="photo_gg" src="'+photoUrl+'" title="'+match.NAME+'" alt="'+match.NAME+'"/></a>';
			//`<img src="${photoUrl}" alt="Фото товара" />;`
			return slide;
		});

		// Добавляем новые слайды в Swiper
		skuSwiper.appendSlide(newSlides);

		// Обновляем Swiper
		skuSwiper.update();

		// Прокручиваем к первому слайду
		skuSwiper.slideTo(1);

		// Обновить цену, фото, кнопку "Купить" и т.д.
		$('#product-name').text(match.NAME);
		$('#product-description').html('<p>'+match.SKU_DESCRIPTION+'</p>');
		$('#product-size').html('<p>'+match.SKU_SIZE+'</p>');
		$('.CML2_ARTICLE > span.product-item-detail-properties-value').text(match.ARTICLE);

		// Устанавливаем ID на кнопку "Купить"
		//$('#sku-buy').data('id', match.ID).prop('disabled', false);
	});
});

Все работает правильно, но есть НЮАНС, как мне фильтровать SKU , допустим
TSVET всегда 1 вариант
RAZMERKPB много вариантов например (1.5, 2, евро, семейный)
RAZMERPODUSHKI всегда 2 варианта (50*70 , 70*70)

при этом 1.5 есть 50*70 и 70*70,
2 есть только 50*70, где 70*70 должен быть деактивен и тд

если знаете , просто подскажите, как сделать понятно, не мучайте