Избранные материалы пользователя
- Пошаговая инструкция по установке скрипта
- FAQ: Тонкая настройка скрипта
- Как увеличить количество закладок для пользователя?
- Как сократить количество символов заголовка закладки?
- Как изменить цвет иконки добавления в избранное?
- Как изменить стили для окна избранных материалов?
- Как изменить вид всплывающего окна добавления в избранное?
- Совместим ли функционал со старой версией Fancybox 2?
В эпоху информационного перегруза пользователям часто бывает сложно запомнить или быстро найти понравившиеся материалы. Функция закладок помогает решить эту проблему, предоставляя удобный способ сохранить интересный контент для последующего просмотра. Это особенно полезно для сайтов с большим количеством статей, товаров или других публикаций, к которым пользователи хотят вернуться позже.
Скрипт «Избранные материалы пользователя» — это удобный инструмент, позволяющий пользователям сохранять понравившиеся материалы в персональный список избранного. Функционал работает аналогично закладкам: можно добавлять материалы из модулей «Новости сайта», «Блог», «Каталог статей», «Каталог файлов», «Доска объявлений», «Онлайн-игры», «Видео» и «Фотоальбомы», а затем быстро находить их в личном профиле.
Для отображения сохранённых материалов используется современная технология Fancybox 5, обеспечивающая удобный и стильный интерфейс.
Пользователи смогут:
- Добавлять материалы в избранное одним кликом;
- Управлять списком сохранённых материалов через личный профиль;
- Устанавливать ограничение на количество закладок (если нужно);
- Удалять отдельные или все закладки сразу.
Пошаговая инструкция по установке скрипта
1. Настройка доступа к PHP
Перейдите на главную страницу панели управления сайтом и откройте раздел «PHP-скрипты». Здесь будут указаны данные для подключения. Если пароль ещё не задан — установите его.
Скачайте FTP-клиент. Мы рекомендуем FileZilla. После установки откройте программу и введите параметры подключения:
- Сервер: s2001.ucoz.net
- Логин: ваш логин из раздела «PHP детали»
- Пароль: заданный вами ранее
Нажмите кнопку «Быстрое соединение» для подключения к серверу.
2. Загрузка PHP-скрипта на сервер
После подключения перейдите в каталог scripts — дважды кликните по папке в правой панели FileZilla. Затем загрузите в неё папку favorite из скачанного архива.
Проще всего загрузить папку, просто перетащив её в правую часть окна FileZilla.
3. Загрузка JS-скрипта в файловый менеджер
Загрузите JavaScript-файл favorite.js в папку js через Файловый менеджер. Этот скрипт отвечает за отображение избранного и пользовательское взаимодействие с ним.
4. Установка кода на страницу материала
Перейдите в шаблон «Страница материала и комментариев к нему» нужного модуля и вставьте следующий код для отображения кнопки добавления в избранное:
<?if($USER_LOGGED_IN$)?> <div class="favorite"> <div id="favorite_icon" class="favorite-circle" data-addr="$ENTRY_URL$" data-mid="$URI_ID$" data-name="<?if($ENTRY_NAME$)?>$ENTRY_NAME$<?else?><?if($ENTRY_TITLE$)?>$ENTRY_TITLE$<?else?>$PHOTO_NAME$<?endif?><?endif?>"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-bookmark"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M18 7v14l-6 -4l-6 4v-14a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4z" /> </svg> </div> </div> <?endif?>
Чтобы вывести количество сохранённых материалов на странице, добавьте следующий код:
<?if($USER_LOGGED_IN$)?> <div class="favorite-info"> <svg xmlns="http://www.w3.org/2000/svg" data-mid="$URI_ID$" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-bookmark"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M18 7v14l-6 -4l-6 4v-14a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4z" /> </svg> <span id="favorite-count" class="favorite-count">0</span> </div> <?endif?>
Не забудьте подключить JS-скрипт перед закрывающим тегом </body> в шаблоне:
<script src="/js/favorite.js"></script>
5. Установка кода на страницу пользователя
Чтобы отобразить кнопку открытия списка избранных материалов, откройте шаблон «Персональная страница пользователя» и вставьте код в подходящее место (например, в навигационный блок):
<?if($_IS_OWN_PROFILE$)?> <a id="favorite_open" data-suid="$USER_ID$" title="Избранное" class="profile-label" style="cursor: pointer;">Избранное</a> <?endif?>
Также не забудьте подключить JS-скрипт перед закрывающим </body> в этом шаблоне:
<script src="/js/favorite.js"></script>
6. Добавление CSS-стилей
Добавьте стили в шаблон «Таблица стилей (CSS)», чтобы элементы избранного корректно отображались:
/* Стили для блока избранного */
#userBookmarksList {
border-radius: 10px;
max-width: 100%;
max-height: 100%;
}
#favorite_header {
font-size: 24px;
font-weight: bold;
margin-bottom: 15px;
}
#favorite_footer {
margin-top: 20px;
font-size: 18px;
display: flex;
justify-content: space-between;
align-items: center;
}
#favorite_list {
font-size: 18px;
overflow: auto;
scrollbar-width: thin;
}
#favorite_list a {
user-select: none;
}
#favorite_list a:focus {
outline: none;
}
.favorite_item {
display: flex;
gap: 5px;
font-size: 18px;
}
.favorite_delete {
display: flex;
align-items: center;
}
.favorite_delete:hover {
opacity: 0.7;
}
.fancybox-content [tabindex] {
outline: none;
}
/* Иконка добавления в избранное */
.favorite {
display: flex;
justify-content: end;
}
.favorite-circle {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #3367f4;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: opacity 0.3s ease;
}
.favorite-circle:hover {
opacity: 0.9;
}
.favorite-circle svg {
width: 24px;
height: 24px;
stroke: white;
}
.favorited svg {
fill: #fff;
width: 24px;
height: 24px;
}
.favorite-info {
display: flex;
align-items: center;
gap: 4px;
}
.favorite-info svg {
width: 18px;
height: 18px;
}
/* Стили всплывающего окна */
.popup-notification {
position: fixed;
right: 20px;
bottom: 20px;
background-color: #f5f5f6;
color: #191925;
padding: 25px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
font-size: 16px;
opacity: 1;
transition: opacity 0.3s ease, transform 0.3s ease;
z-index: 1000;
}
.popup-notification.hide {
opacity: 0;
transform: translateY(20px);
}
.popup-notification a {
color: #3367f4;
text-decoration: underline;
}
.popup-notification a:hover {
text-decoration: none;
}
.popup-close {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}
.popup-close svg {
width: 18px;
height: 18px;
fill: none;
stroke: #191925;
stroke-width: 2;
}
.popup-close:hover svg {
opacity: .7;
}
После добавления стилей очистите кеш браузера и проверьте отображение всех элементов интерфейса.
FAQ: Тонкая настройка скрипта
1. Как увеличить количество закладок для пользователя?
Чтобы изменить лимит закладок, выполните следующие шаги:
В PHP-скрипте:
Откройте файл favorite.php и найдите строку:
$max_col_fav = 50;
Измените значение 50 на нужное. Чтобы снять ограничение, укажите 0.
В JavaScript:
Откройте файл favorite.js и найдите строку, где задаётся ограничение:
${window.maxBookmarkCount || 50}
Замените 50 на то же значение, что в PHP-файле.
2. Как сократить количество символов заголовка закладки?
Откройте файл favorite.php и найдите строку:
$max_tlen = 100;
Измените значение на желаемое количество символов. Например, чтобы ограничить длину до 50 символов:
$max_tlen = 50;
3. Как изменить цвет иконки добавления в избранное?
Откройте шаблон «Таблица стилей (CSS)» и найдите блок стилей:
.favorite-circle {
background-color: #3367f4;
}
Замените цвет фона на нужный. Например, для ярко-оранжевого круга:
background-color: #ff5722;
4. Как изменить стили для окна избранных материалов?
Перейдите в «Таблицу стилей (CSS)» и найдите блок:
#userBookmarksList {
border-radius: 10px;
max-width: 100%;
max-height: 100%;
}
Чтобы, например, изменить цвет фона, добавьте свойство:
background: #f9f9f9;
Вы также можете изменить отступы, тени, границы и прочие параметры отображения.
5. Как изменить вид всплывающего окна добавления в избранное?
Изменение стилей окна:
Откройте «Таблицу стилей (CSS)» и найдите селектор .popup-notification. Пример:
.popup-notification {
position: fixed;
right: 20px;
bottom: 20px;
background-color: #333; /* Цвет фона */
color: #fff; /* Цвет текста */
padding: 10px 20px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
font-size: 14px;
}
Изменение текста окна:
Найдите в JavaScript-файле функцию showPopup, например:
showPopup('Материал добавлен в избранное', '/index/8');
Измените текст на нужный. Например:
showPopup('Материал добавлен в закладки', '/index/8');
Изменение слова в ссылке:
Внутри той же функции может быть участок кода:
popup.innerHTML = link
? `${message.replace('избранное', `избранное`)}`
: message;
Замените «избранное» на нужное слово, если вы хотите изменить текст ссылки.
6. Совместим ли функционал со старой версией Fancybox 2?
Да, скрипт совместим как с Fancybox 5, так и с предыдущей версией Fancybox 2.