ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Like вместо рейтинга на uCoz

Like вместо рейтинга на uCoz

Like вместо рейтинга на uCoz
Измените свою оценку материалов на uCoz с помощью кнопки "Мне нравится". Легко, быстро и эффективно. Повышайте взаимодействие с вашим контентом уже сегодня!

Это удобное решение для вашего сайта, полностью написанное на JavaScript с сохранением результатов в localStorage. Внешний вид конечно же за Вами, на скриншоте и в коде CSS представлена моя вариация дизайна данного скрипта.

Установка:

1. Вставляем этот HTML, где хотим видеть кнопку (Вид материалов и Страница материала и комментариев к нему):

Код
<?if($RATING$)?><div class="like-container" data-id="$ID$">
 <button class="like-button" type="button"></button>
 <div class="like-count">$RATED$</div>
</div><?endif?>

2. Вставляем стили в CSS (Таблица стилей):

Код
/* uLikes by SamVol */
.like-container {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: start;
 -ms-flex-pack: start;
 justify-content: start;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 cursor: pointer;
}
.like-button {
 display: block;
 width: 20px;
 height: 20px;
 background: url('/img/icon/heart.svg') no-repeat;
 margin-right: 4px;
 cursor: pointer;
 -webkit-transition: all var(--transition);
 transition: all var(--transition);
}
.like-count {
 font-size: 16px;
 font-weight: 500;
 line-height: 20px;
 color: var(--text-grey);
 -webkit-transition: all var(--transition);
 transition: all var(--transition);
}

.like-container:hover .like-button {
 background: url('/img/icon/like/heart-hover.svg') no-repeat;
}

.like-container:hover .like-count, .like-container.voted .like-count {
 color: var(--text-error);
}

.like-container.voted .like-button {
 background: url('/img/icon/heart-bold.svg') no-repeat;
}
/* ---/--- */

3. Загружаем файл likes.js и подключаем его перед </body>, в footer сайта вставляем следующий код:

Код
<script src="/js/likes.js"></script>

Вместо подключения скрипта в глобальный блок "Нижняя часть сайта", я добавлял его только на следующих страницах: Главная страница Каталога Файлов, Страница материала и комментариев к нему Каталога Файлов, Страница со списком материалов категории Каталога Файлов.

Настройка:

По умолчанию скрипт рассчитан на работу в Каталоге Файлов. Чтобы использовать его в другом модуле, нужно найти в файле likes.js этот кусок кода:
Код
 fetch('/load', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: new URLSearchParams({
   a: 65,
   mark: 1,
   mod: 'load',
   ajax: 2,
   id: id,
   _tp_: 'xml'
  })
 })

Нас интересует первая строка fetch('/load', { и седьмая - mod: 'load', где нужно будет поменять на название нужного вам модуля (например, publ).

P.S.: если что, то работоспособность я проверял только в модулях "Каталог файлов" и "Каталог статей" соответственно.

Источник: for-ucoz.my1.ru

14 Августа 2025 Загрузок: 3 Просмотров: 117 Комментариев: (7)

Поделиться в социальных сетях

Материал разместил

Комментарии: 7
-SAM-
-SAM- 24 Августа 2025 03:591
+1
По поводу подключения скрипта, то здесь всё очевидно: если уж поставить счётчик в Вид материалов, то потом подключать по шаблонам страниц выбранного модуля, где это сердечко выводится (включая шаблон "Страница поиска и рейтинга материалов").

К сожалению, для работы одного и того же скрипта в нескольких модулях, нужно будет переписать сам скрипт, вынеся переменные в var счётчика (иначе придётся для каждого модуля отдельный скрипт подключать, что не есть удобным решением). Впрочем, этот скрипт уже неоднократно был выложен на сайте, в том числе после обновления в системе uCoz (пример).
na3uTuB4uk
na3uTuB4uk 24 Августа 2025 07:522
+1
Сейчас уже мало дизайнов у которых рейтинг только "Like", в основном сейчас рейтинг идет "Like" и (или) "disLike", было бы не плохо подогнать еще на минус в общем.
-SAM-
-SAM- 24 Августа 2025 12:053
+1
Как понимаю, речь идёт про подобный скрипт. И здесь оно тоже сделано из системного функционала uCoz. Что просто ставит одну звезду (mark: 1) через системный рейтинг.

Собственно, кто будет подключать это, то необходимо включить в настройках Рейтинг и дать разрешения для разных групп производить оценку материалов (допустим, если Гостям запрещено, то не смогут этого сделать).
Vladimir_Samorok
Vladimir_Samorok 02 Сентября 2025 00:006
0
Согласен с вами)
Vladimir_Samorok
Vladimir_Samorok 01 Сентября 2025 21:364
0
Если имеет смысл, можно добавить dislike. Делал для себя, Like мне вполне хватало. Только источник немного не тот, ну да ладно, со Snoopak давно знакомы, может его сайт хоть оживёт немного)
Webmaster32
Webmaster32 01 Сентября 2025 23:245
+2
Обновлённый JS с дизлайками:

Код
  /*     
  *  uLikes - новая система рейтинга
  *  by SamVol
  *  codestore.my1.ru
  *  Шаблоны, Скрипты и многое другое
  *  Версия с дизлайками от Webmaster32
  */

document.addEventListener('DOMContentLoaded', () => {
  // Получаем все контейнеры
  const ratingContainers = document.querySelectorAll('.rating-container');

  if (ratingContainers.length === 0) {
  console.error('Нет контейнеров с классом ".rating-container" на странице!');
  return;  // Если нет контейнеров, прекращаем выполнение
  }

  ratingContainers.forEach(container => {
  const id = container.dataset.id;
  const likeBtn = container.querySelector('.like-button');
  const dislikeBtn = container.querySelector('.dislike-button');
  const likeCountEl = container.querySelector('.like-count');
  const dislikeCountEl = container.querySelector('.dislike-count');

  // Проверяем предыдущие голоса
  const voted = getVoted(id);
  if (voted) {
  container.classList.add('voted');
  if (voted === 'like') {
  container.classList.add('voted-like');
  } else if (voted === 'dislike') {
  container.classList.add('voted-dislike');
  }
  }

  // Обработчик лайка
  likeBtn.addEventListener('click', () => {
  handleVote(container, id, 'like', likeCountEl, dislikeCountEl);
  });

  // Обработчик дизлайка
  dislikeBtn.addEventListener('click', () => {
  handleVote(container, id, 'dislike', dislikeCountEl, likeCountEl);
  });
  });
});

function handleVote(container, id, voteType, currentCountEl, oppositeCountEl) {
  const previousVote = getVoted(id);
      
  // Если уже голосовал таким же типом голоса
  if (previousVote === voteType) {
  uAlert.open('voteAlready', 'error', 'Вы уже оценивали данный материал!', 3000);
  return;
  }

  const mark = voteType === 'like' ? 1 : -1;

  fetch('/load', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: new URLSearchParams({
  a: 65,
  mark: mark,
  mod: 'load',
  ajax: 2,
  id: id,
  _tp_: 'xml'
  })
  })
  .then(response => response.text())
  .then(text => {
  if (text.indexOf('уже оценивали') > -1) {
  uAlert.open('voteAlready', 'error', 'Вы уже оценивали данный материал!', 3000);
  container.classList.add('voted');
  saveVoted(id, voteType);
  } else {
  uAlert.open('voteSuccess', 'success', `Вы успешно ${voteType === 'like' ? 'лайкнули' : 'дизлайкнули'}!`, 3000);
      
  // Обновляем счетчики
  let currentCount = parseInt(currentCountEl.textContent) || 0;
  currentCountEl.textContent = currentCount + 1;

  // Если ранее голосовал противоположным голосом, уменьшаем его счетчик
  if (previousVote && previousVote !== voteType) {
  let oppositeCount = parseInt(oppositeCountEl.textContent) || 0;
  if (oppositeCount > 0) {
  oppositeCountEl.textContent = oppositeCount - 1;
  }
  }

  // Обновляем классы
  container.classList.remove('voted-like', 'voted-dislike');
  container.classList.add('voted', `voted-${voteType}`);
      
  saveVoted(id, voteType);
  }
  })
  .catch(err => {
  uAlert.open('voteError', 'error', 'Ошибка при голосовании: ' + err.message, 3000);
  });
}

function saveVoted(id, voteType) {
  let votedItems = JSON.parse(localStorage.getItem('votedItems') || '{}');
  votedItems[id] = voteType;
  localStorage.setItem('votedItems', JSON.stringify(votedItems));
}

function getVoted(id) {
  let votedItems = JSON.parse(localStorage.getItem('votedItems') || '{}');
  return votedItems[id] || null;
}
Vladimir_Samorok
Vladimir_Samorok 02 Сентября 2025 00:017
0
Круто, так быстро)

Оставь свой отзыв

avatar