Избранные материалы пользователя
- Пошаговая инструкция по установке скрипта
- FAQ: Тонкая настройка скрипта
- Как увеличить количество закладок для пользователя?
- Как сократить количество символов заголовка закладки?
- Как изменить цвет иконки добавления в избранное?
- Как изменить стили для окна избранных материалов?
- Как изменить вид всплывающего окна добавления в избранное?
- Совместим ли функционал со старой версией Fancybox 2?
В эпоху огромного количества информации на сайтах пользователям часто бывает сложно удержать в памяти или быстро найти понравившиеся материалы. Закладки помогают решить эту проблему, предоставляя удобный способ сохранить интересный контент для последующего просмотра. Это особенно полезно для сайтов с большим количеством статей, товаров или других публикаций, где пользователи хотят вернуться к материалам позже.
Скрипт "Избранные материалы пользователя" — это удобный инструмент, который позволяет пользователям добавлять понравившиеся материалы на сайте в персональный список избранного. Этот функционал работает как закладки: вы можете сохранять материалы с модулей "Новости сайта", "Блог", "Каталог статей", "Каталог файлов", "Доска объявлений", "Онлайн-игры", "Видео" или "Фотоальбомы", а затем быстро найти их в личном профиле.
Вывод сохранённых материалов выполнен с использованием современной и стильной технологии FancyBox 5, которая обеспечивает удобное и привлекательное отображение контента.
С помощью этого скрипта пользователи смогут:
- Добавлять материалы в избранное одним кликом.
- Управлять списком сохранённых материалов через личный профиль.
- Возможность установки максимального количества закладок.
- Удалять одну или все добавленные закладки одновременно.
Важно! Для работы скрипта необходим пакет платных услуг, который поддерживает подключение PHP-скриптов.
Пошаговая инструкция по установке скрипта
1. Настройка доступа к PHP
Вернитесь на главную страницу панели управления вашего сайта и откройте раздел "PHP-скрипты". Здесь вы найдёте данные для подключения по PHP. Если пароль для PHP-доступа ещё не был установлен, задайте его в этом же разделе.
Далее скачайте FTP-клиент, рекомендуем бесплатный FTP клиент FileZilla. После установки программы, в верхней части вводим параметры подключения:
- Сервер: s2001.ucoz.net.
- Логин (FTP login): введите свой логин, который указан в меню "PHP детали".
- Пароль: пароль который вы ввели ранее в специальном разделе.
После заполнения полей нажмите на кнопку «Быстрое соединение».
2. Загрузка PHP-скрипта на сервер
После успешного подключения вы увидите каталог под именем "scripts" в правой части окна программы. Обязательно переходим в этот каталог двойным кликом по нему. Теперь загрузите в этот каталог папку из архива со скриптом "favorite".
Загрузить легко, просто перетащите эту папку в правый диалог (где отображаются каталоги и файлы хранящиеся на сервере).
3. Загрузка JS-скрипта в файловый менеджер
Следующим шагом необходимо в "Файловый менеджер" в папку "js" загрузить JavaScript-скрипт, который отвечает за выполнение логики работы с избранными материалами и их отображение для пользователей.
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?>
В этом же шаблоне также необходимо подключить загруженный скрипт перед закрывающим тегом <body>:
<script src="/js/favorite.js"></script>
6. Добавление CSS-стилей
Заключительным этапом настройки будет добавление CSS-стилей в шаблон "Таблица стилей (СSS)":
/* Содержимое избранных материалов */
#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;
}
/* Cтили для иконки избранного */
.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;
}
/* SVG стили */
.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. Как сократить количество символов заголовка закладки?
Для этого в PHP-скрипте favorite.php выполните следующие действия:
Откройте файл и найдите строку:
$max_tlen = 100;
Измените значение 50 на необходимое количество символов. Сохраните изменения и проверьте отображение заголовков в списке закладок и на персональной странице.
Если у заголовка будет больше символов, чем указано в вашем лимите, то он будет отображаться с тремя точками в конце.
3. Как изменить цвет иконки добавления в избранное?
Если вы хотите изменить цвет круга, выполните следующие шаги:
Перейдите во вкладку "Дизайн" - "Таблица стилей (CSS)" и найдите следующий код:
.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;
}
Измените значение background-color на желаемый цвет. Например:
background-color: #ff5722;
После сохранения изменений обновите страницу в браузере, чтобы новый цвет применился. Если стиль не изменился, убедитесь, что кеш браузера очищен.
4. Как изменить стили для окна избранных материалов?
Если вы хотите изменить стили для окна избранных материалов, выполните следующие шаги:
Перейдите в шаблон "Таблица стилей (CSS)" и найдите следующий код:
#userBookmarksList {
border-radius: 10px;
max-width: 100%;
max-height: 100%;
}
Чтобы задать другой цвет фона, добавьте свойство background. Например:
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; /* Размер шрифта */
}
Изменение текста всплывающего окна
Если необходимо изменить текст сообщения, это делается в скрипте. Найдите строчку, где вызывается функция showPopup (пример ниже):
showPopup('Материал добавлен в избранное', '/index/8');
Измените текст 'Материал добавлен в избранное' на нужный необходимый, например:
showPopup('Материал добавлен в закладки', '/index/8');
Примечание! Для изменения слова "избранное" в текст ссылки также обновите showPopup в области, где обрабатывается ссылка.
// Создаём текст с ссылкой
popup.innerHTML = link
? `${message.replace('избранное', `избранное`)}`
: message;
6. Совместим ли функционал со старой версией Fancybox 2?
Да, скрипт поддерживает как FancyBox 5, так и более старую версию Fancybox 2. Однако для лучшего отображения и оптимальной работы рекомендуется использовать новую версию FancyBox 5.