How to make a link for each SKU in Bitrix?

Question

PHP

When uploading the catalog to Yandex, an error occurred that for each SKU you need a unique link, when you click on it, the trade offer will immediately be active. Because the template is individual, then the solutions that are on the Bitrix forum do not help. There is a link for example shop.ru/car but this car has properties (red, green, blue) and each property has its own id. I need Bitrix experts to understand me when I click on the link store.ru/machine/?pid=111. I found a piece of code that is responsible for all these actions, but nothing happens. Here is a piece of module code

<div class="offers">
      <ul class="offer-list">
      <? foreach ($arResult['OFFERS'] as $iKey => $arOffer): ?>
         <li data-id="<?= $arOffer['ID']; ?>"<?= ($iKey == 0) ? ' class="active"' : ''; ?>>
         <? if ($arOffer['PRICES'][$sPriceCode]['CAN_BUY'] == 'Y' && $arOffer['CATALOG_AVAILABLE'] == 'Y'): ?>
             <span><?= $arOffer['PRICES'][$sPriceCode]['PRINT_DISCOUNT_VALUE']; ?></span>
      <? endif; ?>
       <?= $arOffer['NAME']; ?>
        </li>
       <? endforeach; ?>
         </ul>
       </div>
       <?$this->setFrameMode(true);?>
                    </div>

Here is a piece of js script code that is responsible for choosing the SKU

var offers = $('.b-element .offer-list li');

    offers.on('click', function(){
        var element = $(this).closest('.b-buy'),
            id = $(this).data('id');

        offers.removeClass('active');
        $(this).addClass('active');
        $('.offer', element).hide().removeClass('active');
        $('.offer-' + id, element).show();
    });
});

Tried to do something like this

var offers = $('.b-element .offer-list li');

    offers.on('click', function(){
        var element = $(this).closest('.b-buy'),
            id = $(this).data('id');

        offers.removeClass('active');
        $(this).addClass('active');
        loc = '?pid=' + this.offers[this.offerNum].ID;
        history.pushState({}, '', loc);
        $('.offer', element).hide().removeClass('active');
        $('.offer-' + id, element).show();
    });
});

But nothing comes out, there are solutions for the standard template on the Bitrix forum and it looks like this

{
   var i = 0,
      j = 0,
      strName = '',
      arShowValues = false,
      arCanBuyValues = [],
      arFilter = {},
      tmpFilter = [],
      current = this.offers[this.offerNum].TREE,
   //CUSTOM START
      paramsUrl = window.location.search,
      pidRegExp = new RegExp(/[?&]pid=(\d+)/),
      pid = pidRegExp.exec(paramsUrl);
      

   if (pid && pid[1]) {
      for (i = 0; i < this.offers.length; i++)
      {
         if (this.offers[i].ID == pid[1]) {
            current = this.offers[i].TREE;
         }
      }  
   }
   //CUSTOM END

But how to rewrite it for my needs is not enough knowledge, maybe someone will tell me I will be very grateful.

Answer 1

And what about js? Your choice of a trade offer should already take place on the server.
What component are you using? Judging by the code of the catalog.element template (catalog complex)
So in $arResult there is a key $arResult["SELECTED_OFFER"] (or something like that). It is usually 0.
And there is also a list of suggestions:

$arResult['OFFERS'] = array(
0=>array(...),
1=>array(...),
2=>array(...),
 и т.д.
);

To solve the problem, you need to take into account 2 problems:
1. Component caching.
2. Selecting an active trade offer.
When calling the catalog component, you add the $_GET["pid"] variable to the component settings - thus, you will have your own cache for each trade offer.
For example:

<?$APPLICATION->IncludeComponent(
    "bitrix:catalog",
    "",
Array(
        "TEMPLATE_THEME" => "blue",
        "IBLOCK_TYPE" => "catalog",
        "IBLOCK_ID" => "2",
"SELECTED_OFFER_ID"=>(isset($_GET["pid"]) && intval($_GET["pid"]) > 0 ?$_GET["pid"]:0),
.............

And then in the template in the element.php file:

<?$APPLICATION->IncludeComponent(
    "bitrix:catalog.element",
    "",
    Array(
        "SELECTED_OFFER_ID" => $arParams["SELECTED_OFFER_ID"],

in the bitrix:catalog.element template, create the result_modifier file, run through all $arResult['OFFERS'] there - and if the ID matches - make the key the selected trade offer:

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
foreach($arResult['OFFERS'] as $offer_key=>$arOffer){
   if(intval($arParams["SELECTED_OFFER_ID"]) == intval($arOffer['ID'])){
      $arResult["SELECTED_OFFER"] = $offer_key;
      break;
   }
}

in template:

<ul class="offer-list">
      <? foreach ($arResult['OFFERS'] as $iKey => $arOffer): ?>
         <li data-id="<?= $arOffer['ID']; ?>"<?= ($iKey == $arResult["SELECTED_OFFER"]) ? ' class="active"' : ''; ?>>
         <? if ($arOffer['PRICES'][$sPriceCode]['CAN_BUY'] == 'Y' && $arOffer['CATALOG_AVAILABLE'] == 'Y'): ?>
             <span><?= $arOffer['PRICES'][$sPriceCode]['PRINT_DISCOUNT_VALUE']; ?></span>
      <? endif; ?>
       <?= $arOffer['NAME']; ?>
        </li>
       <? endforeach; ?>
         </ul>