Добавление в избранное из 97 строк кода на PHP и чистом JavaScript для 1С-Битрикс

<style>
  .fav_icon:not(.active) svg circle {
    display: none;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    let favorites = document.querySelectorAll('.favorite'),
    favicons = document.querySelectorAll('.fav_icon');
    favorites.forEach(function(favorite) {
      favorite.addEventListener('click', function () {
        let id = favorite.getAttribute('data-id');
        if (favorite.classList.contains('active')) {
          addFavorite(id, 'delete');
        } else {
          addFavorite(id, 'add');
        }
      });
    });
    function addFavorite(id, action) {
      let xhr = new XMLHttpRequest();
      xhr.open('POST', '/favorite.php', true);
      xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
      let data = {
        id: id,
        action: action
      };
      xhr.send(JSON.stringify(data));
      xhr.onload = function () {
        let response = JSON.parse(xhr.response);
        // console.log(response.count);
        if (response.status == 1) {
          document.querySelector('.favorite[data-id="'+id+'"]').classList.add('active');
        } else {
          document.querySelector('.favorite[data-id="'+id+'"]').classList.remove('active');
        }
        if (response.count > 0) {
          favicons.forEach(function(favicon) {
            favicon.classList.add('active');
          });
        } else {
          favicons.forEach(function(favicon) {
            favicon.classList.remove('active');
          });
        }
      };
    }
  });
</script>

<? // favorite.php
require_once($_SERVER['DOCUMENT_ROOT'] . '/bitrix/modules/main/include/prolog_before.php');
$post = json_decode(file_get_contents('php://input'), true);
// print_r($post);
if ($post) {
  $arFavorites = unserialize($_COOKIE['favorites']);
  if (!in_array($post['id'], (array) $arFavorites)) {
    $arFavorites[] = $post['id'];
    $result = ['status' => 1, 'count' => count($arFavorites)];
  } else {
    $key = array_search($post['id'], $arFavorites);
    unset($arFavorites[$key]);
    $result = ['status' => 2, 'count' => count($arFavorites)];
  }
  if (empty($arFavorites)) {
    setcookie('favorites', '', time() - 1, '/', $_SERVER['SERVER_NAME'], false);
  } else {
    setcookie('favorites', serialize($arFavorites), time() + 60*60*24*60, '/', $_SERVER['SERVER_NAME'], false);
  }
}
echo json_encode($result);
die();
?>

<? // template.php
$favorites = unserialize($_COOKIE["favorites"]);
if (in_array($item['ID'], (array) $favorites)) {
  $favorite = true;
} else {
  $favorite = false;
}
?>
<div class="favorite<?= $favorite ? ' active' : ''; ?>" data-id="<?= $item['ID']; ?>">
  <svg xmlns="http://www.w3.org/2000/svg" height="28" width="28" viewBox="0 0 512 512">
    <path d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z" fill="#8E8E8D"/>
  </svg>
</div>

<? // header.php
$favorites = unserialize($_COOKIE["favorites"]);
?>
<div class="fav_icon<?= $favorites ? ' active' : ''; ?>">
  <a href="/wishlist/">
    <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M23.9732 5.2963C21.2998 5.2963 18.9591 6.43911 17.5 8.37083C16.0409 6.43911 13.7002 5.2963 11.0268 5.2963C8.89869 5.29868 6.85844 6.1401 5.35364 7.63596C3.84885 9.13182 3.0024 11.16 3 13.2754C3 22.2841 16.4371 29.576 17.0093 29.8771C17.1602 29.9578 17.3287 30 17.5 30C17.6713 30 17.8398 29.9578 17.9907 29.8771C18.5629 29.576 32 22.2841 32 13.2754C31.9976 11.16 31.1512 9.13182 29.6464 7.63596C28.1416 6.1401 26.1013 5.29868 23.9732 5.2963ZM17.5 27.7923C15.136 26.4229 5.07143 20.1851 5.07143 13.2754C5.07348 11.706 5.70158 10.2014 6.81798 9.0916C7.93438 7.98183 9.44796 7.35747 11.0268 7.35542C13.5449 7.35542 15.659 8.68871 16.542 10.8302C16.62 11.019 16.7527 11.1805 16.9233 11.2942C17.0939 11.4079 17.2946 11.4686 17.5 11.4686C17.7054 11.4686 17.9061 11.4079 18.0767 11.2942C18.2473 11.1805 18.38 11.019 18.458 10.8302C19.341 8.68485 21.4551 7.35542 23.9732 7.35542C25.552 7.35747 27.0656 7.98183 28.182 9.0916C29.2984 10.2014 29.9265 11.706 29.9286 13.2754C29.9286 20.1748 19.8614 26.4217 17.5 27.7923Z" fill="#8E8E8D"/>
      <path d="M7.29627 21.4074C7.29627 21.9444 16.9629 28.3889 17.5 28.9259L18.574 27.8518C19.1111 27.3148 21.2592 26.2407 21.2592 25.7037C21.2592 25.1667 23.4074 24.6296 24.4815 24.0926C25.5555 23.5556 25.5555 21.9444 26.6296 20.3333C27.7037 18.7222 27.7037 19.7963 28.7778 18.1852C29.8518 16.5741 29.8518 16.5741 29.8518 14.963V12.2778C29.8518 11.2037 29.3148 9.59259 29.3148 9.05555C29.3148 8.62592 28.2407 7.80247 27.7037 7.44444L25.5555 6.90741C24.3024 6.90741 21.6889 7.01481 21.2592 7.44444C20.8296 7.87407 19.2901 8.3395 18.574 8.51852L18.037 10.6667L16.4259 10.1296C16.0679 9.59259 15.3518 8.41111 15.3518 7.98148C15.3518 7.55185 13.5617 7.44444 12.6666 7.44444H8.90738L5.14812 9.59259L4.61108 13.3519C5.50615 15.858 7.29627 20.9778 7.29627 21.4074Z" fill="#8E8E8D" stroke="#8E8E8D"/>
      <circle cx="29" cy="9" r="6" fill="#FF6D00"/>
    </svg>
  </a>
</div>