How to sort goods in Bitrix?

Question

1C-Bitrix

Hello !
The situation is this:
I have such a slider, where all folders with products and their contents from the Catalog
prntscr.com/jdpyzn
are displayed Template code:

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
/** @var array $arParams */
/** @var array $arResult */
/** @global CMain $APPLICATION */
/** @global CUser $USER */
/** @global CDatabase $DB */
/** @var CBitrixComponentTemplate $this */
/** @var string $templateName */
/** @var string $templateFile */
/** @var string $templateFolder */
/** @var string $componentPath */
/** @var CBitrixComponent $component */
$this->setFrameMode(true);
?>


<?if($arResult['ITEMS']){?>
<h3 class='title_cat_list_head'>Виды продукции</h3>
  <div class="owl-gor-item_list-carusel112 owl-carousel custom-arrow">
    <?foreach ($arResult['ITEMS'] as $key => $arItem){?>
      <?
      $this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], $strElementEdit);
      $this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], $strElementDelete, $arElementDeleteParams);
      $strMainID = $this->GetEditAreaId($arItem['ID']);

      $arItemIDs = array(
        'ID' => $strMainID,
        'PICT' => $strMainID.'_pict',
        'SECOND_PICT' => $strMainID.'_secondpict',
        'STICKER_ID' => $strMainID.'_sticker',
        'SECOND_STICKER_ID' => $strMainID.'_secondsticker',
        'QUANTITY' => $strMainID.'_quantity',
        'QUANTITY_DOWN' => $strMainID.'_quant_down',
        'QUANTITY_UP' => $strMainID.'_quant_up',
        'QUANTITY_MEASURE' => $strMainID.'_quant_measure',
        'BUY_LINK' => $strMainID.'_buy_link',
        'BASKET_ACTIONS' => $strMainID.'_basket_actions',
        'NOT_AVAILABLE_MESS' => $strMainID.'_not_avail',
        'SUBSCRIBE_LINK' => $strMainID.'_subscribe',
        'COMPARE_LINK' => $strMainID.'_compare_link',

        'PRICE' => $strMainID.'_price',
        'DSC_PERC' => $strMainID.'_dsc_perc',
        'SECOND_DSC_PERC' => $strMainID.'_second_dsc_perc',
        'PROP_DIV' => $strMainID.'_sku_tree',
        'PROP' => $strMainID.'_prop_',
        'DISPLAY_PROP_DIV' => $strMainID.'_sku_prop',
        'BASKET_PROP_DIV' => $strMainID.'_basket_prop',
      );
      ?>
      
      <?
      $strObName = 'ob'.preg_replace("/[^a-zA-Z0-9_]/", "x", $strMainID);

      $productTitle = (
        isset($arItem['IPROPERTY_VALUES']['ELEMENT_PAGE_TITLE'])&& $arItem['IPROPERTY_VALUES']['ELEMENT_PAGE_TITLE'] != ''
        ? $arItem['IPROPERTY_VALUES']['ELEMENT_PAGE_TITLE']
        : $arItem['NAME']
      );
      $imgTitle = (
        isset($arItem['IPROPERTY_VALUES']['ELEMENT_PREVIEW_PICTURE_FILE_TITLE']) && $arItem['IPROPERTY_VALUES']['ELEMENT_PREVIEW_PICTURE_FILE_TITLE'] != ''
        ? $arItem['IPROPERTY_VALUES']['ELEMENT_PREVIEW_PICTURE_FILE_TITLE']
        : $arItem['NAME']
      );
      ?>
      
      <div class='item one_item_inner'>
        <div class='inner_shadow'>

            <div style='min-height:289px; max-height:289px; display:flex;'>
              <img style='margin:auto;' alt="<? echo $imgTitle; ?>" src="<? echo $arItem['PREVIEW_PICTURE']['SRC']; ?>" />
            </div>
              
          <div class='item_list_cat_name'>
            <?$section = ($ar_res = CIBlockSection::GetByID($arItem['IBLOCK_SECTION_ID'])->GetNext())? $ar_res : array();?>
            <?=$section['NAME']?>
          </div>

          <a href='<? echo $arItem['DETAIL_PAGE_URL']; ?>' class='item_name_list_t'><?=$productTitle?></a>
        </div>
      </div>
      

    <?}?>
  </div>
<?}?>

Now the products are displayed in the slider in a random order, tell me how to make it so that first there is one category (all products one after another), then another, and so on?
Example:
We have in the slider for example "Flexible connections", it is necessary that all products with the name "Flexible connections" first go, then for example "Armature" and so on, and not scattered as it is now "Flexible connections" -> "Flexible connections" - > "Armature"->"Flexible connections"