Юрий Портнов

Делайте через отложенные функции

в footer.php в конец пишем функцию, которая в зависимости от условий производит нужные нам действия

function containerWidth() {
        global $APPLICATION;
        ob_start();

        if(strlen($APPLICATION->GetProperty('fullWidthContainer')) > 0) {
            echo 'container-fluid';
        } else {
            echo 'container';
        }
        $result = ob_get_contents();
        ob_end_clean();
        return $result;
    }

в header.php в необходимом нам месте

<div class="<?$APPLICATION->AddBufferContent("containerWidth");?>">

и на необходимых нам страницах устанавливаем свойство fullWidthContainer

в вашем случае в catalog.detail или news.detail в component_epilog.php

$APPLICATION->SetPageProperty("fullWidthContainer", "1");

Код не тестил, но смысл понятен

function splitByFirstLetter(array $arr, $key="name")
{
    $splitted = [];
    
    foreach ($arr as $element) {
        $firstLetter = mb_substr($element[$key], 0, 1);
        $splitted[$firstLetter][] = $element;
    }
    
    return $splitted;
}


$data = [
    ['id' => '1', 'name' => 'яблоко'],
    ['id' => '2', 'name' => 'банан'],
    ['id' => '3', 'name' => 'баклажан'],
    ['id' => '4', 'name' => 'арбуз'],
    ['id' => '5', 'name' => 'апельсин'],
];

$data = splitByFirstLetter($data);
ksort($data); // сортировка свежеполученного массива по алфавиту.

/* 
Output:
array(3) {
  ["а"]=>
  array(2) {
    [0]=>
    array(2) {
      ["id"]=>
      string(1) "4"
      ["name"]=>
      string(10) "арбуз"
    }
    [1]=>
    array(2) {
      ["id"]=>
      string(1) "5"
      ["name"]=>
      string(16) "апельсин"
    }
  }
  ["б"]=>
  array(2) {
    [0]=>
    array(2) {
      ["id"]=>
      string(1) "2"
      ["name"]=>
      string(10) "банан"
    }
    [1]=>
    array(2) {
      ["id"]=>
      string(1) "3"
      ["name"]=>
      string(16) "баклажан"
    }
  }
  ["я"]=>
  array(1) {
    [0]=>
    array(2) {
      ["id"]=>
      string(1) "1"
      ["name"]=>
      string(12) "яблоко"
    }
  }
}
*/

JS:

foo.onclick = function(){
	this.classList.toggle('rotate')
}

CSS:

img {
  transition: transform 1s ease;
}
.rotate {
  transform: rotate(180deg);
}

https://jsfiddle.net/t0coxu4s/

Ошибка была из за приложения Wappalyzer Chrome, отключил и стало все нормально.

А сам код синхронным не называется, это его по ошибке или для упрощения так называют. Синхронным и асинхронным называется только API ввода-вывода, т.е. операции, прерывающие исполнение кода и требующие от системы обратиться к внешнему устройству, работающему не синхронно с центральным процессором. Операции ввода-выдвода, каковые есть: работа с дисками, портами, контроллерами, периферийными устройствами, как клава, мыша, тачскрин, разные датчики, вебкамера, сетевые карты, блютузы и другие радиомодули, принтеры, видеокарты и прочее. Все они получают задание от программы, и исполняют его отдельно, своими мощностями. Потом внешние устройства присылают программе сигнал о статусе исполнения и, возможно, полученные данные. Программа все это время может ждать (если у нее синхронное API, т.е. блокирующее) или что-то делать (если асинхронное, т.е. не блокирующее). Если программа ждет, не переходит к выполнению следующего действия, то это синхронный ввод-вывод, потому, что осуществляется процесс синхронизации программы с внешним устройством. Внешне устройство посылает прерывание, которое обрабатывает операционная система и через несколько слоев драйверов оно попадает в программу, обычно в виде колбека или события. Если программа ждала, то вызов API не завершался, она все время слушала, когда придет событие о завершении операции ввода вывода, а получив его API отдает ответ и управление переходит к следующей команде, что и называется, синхронизацией с периферийным устройством. Если программа не ждала, то вызов API сразу завершается и не блокирует поток выполнения программ, это называется асинхронным API, потому, что процесс синхронизации не происходит явно, а ответы возвращаются через события.