Как сделать избранное на сайте
В этой статье вы узнаете, как дать возможность неопытному посетителю не потерять ваш сайт, если он ему понравился и дать возможность читателю вернуться к вам еще раз.
Возможности интернета каждый осваивает с разной скоростью. Кто-то уже давно знает, как искать необходимую информацию и знает, что делать, чтобы ее не потерять. А кто-то все еще теряется при виде разных мигающих кнопок, реклам и баннеров, и с удовольствием пришел бы на сайт еще раз, но, увы, не знает, как это делать.
Для этого установите на сайте маленький скрипт, написанный на javascript. С помощью этого скрипта вы сможете помочь посетителю быстро добавить в закладки ваш проект.
Можно вывести кнопку, можно вывести картинку или текст с намеком о том, что он может на нее нажать.
Ближе к делу. Вот такой результат будет, если вы установите скрипт, который я вам предлагаю:
Кроссбраузерное добавление страницы в закладки реализуется с использованием JavaScript. Для добавления страницы в Избранное браузеров Internet Explorer и браузеров, работающих на движке IE, вызывается стандартный метод AddFavorite . Однако здесь есть одна важная деталь. Если страница IE открыта как embedded-объект в другом приложении, например в плагинах или при использовании компонентов для работы с html, то объект window.external присутствует, но его метод AddFavorite не срабатывает. Это наиболее частая ошибка разработчиков, которые просто копируют код друг у друга без его понимания и тестирования. Также большой ошибкой будет использование на своем сайте только одного этого способа.
Браузеры на движке Gecko, такие как Firefox, Netscape, K-Meleon и другие, имеют объект window.sidebar и метод для добавления addPanel . Третий параметр метода недокументирован и является необязательным, поэтому в скрипте заменяется просто пустой строкой. Обратите внимание, что по умолчанию ссылка добавляется не совсем в закладки, а в боковую панель браузера. Для добавления страницы в нужную папку закладок выберите ее в выпадающем меню.
Теперь, когда у нас есть все исходные данные, можно написать кроссбраузерный скрипт для добавления страницы в закладки. У меня получился вот такой:
Пример ссылки "Добавить в Избранное" для этого скрипта:
Рабочий пример реализации вы можете увидеть прямо на этой странице. Использование конструкций try-catch позволяет скрипту правильно отрабатывать в любых нестандартных ситуациях, например в окне IE Tab, открытом в браузере Firefox. Также скрипт корректно работает в различных экзотических браузерах, которые нельзя однозначно определить через UserAgent или DOM-свойства . Всякие хваленые коммерческие поделки типа DLE в этой ситуации молча обламываются.
Ищется документация по движку WebKit (браузеры Safari, Chrome) в части добавления страницы в закладки. Кто найдет — большая просьба поделиться.
На сайте добавлена возможность помечать статьи, комментарии, темы и ответы на форуме как избранное. При этом пометка в качестве избранного не предусматривает перезагрузку страницы, поскольку для этих действий используется механизм AJAX-запросов.
Для того, чтобы реализовать систему закладок, необходимо:
- Добавить таблицу, которая реализует отношение Many-to-Many между пользователем и статьёй или комментарием.
- Добавить view, который будет обрабатывать данный запрос.
- Добавить url для обработки запроса на добавление или исключение объекта из избранного.
- Написать html-код, который будет отвечать за отображение счётчика добавленного в закладки.
- Добавить javascript обработчик, который будет вызывать AJAX-запрос.
На данном сайте в качестве иконки счётчика используется иконка звезды из Bootstrap.
- 1. Many-to-Many таблица для закладок
- 2. views.py
- 3. urls.py
- 4. html
- 5. javascript
- 1. Настройка AJAX на использование CSRF токена
- 2. Обработчики добавления в закладки и их подключение
Many-to-Many таблица для закладок
Сделаем возможность добавления закладок для статей и комментариев. Для этого сделаем общую абстрактную модель , от которой будем наследоваться для конкретного типа контента на сайте. В абстрактной модели создадим поле пользователя, которое будет единым для всех моделей закладок.
Далее наследуемся от этой модели, чтобы создать две отдельных модели данных для комментариев и статей.
Здесь добавим поле obj , которое будет отвечать за внешний ключ на таблицу контента: Article или Comment. Важно, чтобы поле называлось одинаково в обеих моделях. Тогда можно будет написать один view для всех таблиц закладок.
views.py
Для обработки запроса на добавление в закладки или удаление из закладок создадим view, которое сможет работать с любой таблицей закладок, которая будет удовлетворять общему виду, представленному выше.
Заметьте, что в данном коде использовалось сравнение obj_id=pk , что означает, что мы пытаемся найти запись в таблице закладок по id объекта. Поскольку во всех моделях - это поле одинаковое, то проблем возникнуть не должно с подобным синтаксисом.
urls.py
А теперь посмотрим, как будут выглядеть url для обработки запросов на добавление контента в закладки.
Чтобы выполнить этот запрос пользователь должен быть авторизован, за что отвечает декоратор login_required .
URL в данном случае определяет, какой тип контента добавляется в закладки, также определяет pk, этого контента, а также действие, которое необходимо совершить. Ведь помимо добавления в закладки, можно добавить систему лайков, репостов и т.д. по тому же самому принципу.
В моём случае html-код выглядит так:
Здесь имеется несколько кастомных атрибутов:
- data-id - отвечает за pk контента, который можно добавлять в закладки.
- data-type - тип контента, это же название фигурирует и в url.
- data-action - действие, которое нужно совершить, в данном случае добавление в закладки
- data-count - счётчик, показывающий сколько пользователей добавили контент в закладки
Что касается следующего кода like_obj.get_bookmark_count, то это тоже единообразный метод, которая добавляется в модели контента, например для статей будет выглядеть следующим образом:
javascript
AJAX-запросы для данного функционала создаются с помощью библиотеки jQuery .
При работе с AJAX необходимо учитывать несколько нюансов:
- Если у вас мультиязычный сайт, у которого различаются url по текущему языку, то лучше сделать отдельное api для AJAX, которое будет независимо от языка, иначе нужно будет учитывать язык в url при создании AJAX-запроса. Если не учитывать язык, то будет производится редирект AJAX-запроса на текущий url с учётом языка, и запрос не будет срабатывать. То есть редиректов быть не должно.
- Django не примет AJAX-запрос, если он не будет настроен на использование CSRF токена, который служит для борьбы с подделкой межсайтовых запросов. При каждом запросе страницы Django подмешивает CSRF токен в Cookies, оттуда его и можно будет взять.
Настройка AJAX на использование CSRF токена
Следующий код можно включить в скрипт на каждой странице сайта, где нужно использоваться AJAX. Он автоматически будет настраивать AJAX на использование CSRF Токена.
Обработчики добавления в закладки и их подключение
В ниже следующем коде формируется AJAX-запрос на вызов добавления или удаления из закладок контента. В данном случае код будет универсален как для статей, так и для комментариев.
В url запроса можно наблюдать следующую строку "/api/" + type + "/" + pk + "/" + action + "/", которая означает, что модуль для AJAX запросах висит на префиксе /api/ , то есть на этот url он подключён в основном urls.py файле проекта, далее идёт тип контента, его первичный ключ и действие которое нужно совершить. Поскольку все эти данные забираются из атрибутов data, то итоговый url будет выглядеть следующим образом:
- /api/article/112/bookmark/ - для статей
- /api/comment/14/bookmark/ - для комментариев
В обработчике успешного результата можно добавить подсвечивание звёздочки закладки для текущего пользователя и т.д.
Для Django рекомендую VDS-сервера хостера Timeweb .
![Рекомендуем хостинг TIMEWEB]()
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.
Чтобы ваш сайт добавляли в закладки необходимо создать действительно качественный ресурс, и дополнить его функционалом автоматического добавления сайта в закладки. Таким образом, вы сможете собрать массу прямых переходов, и чем больше людей добавят сайт в закладки, тем будет лучше для вас.
В интернете можно найти массу решений по добавлению кнопки добавляющей сайт в закладки, но не все из них созданы с учетом кроссбраузерности. Кроссбраузерность, это корректное отображение данных во всех браузерах, а как нам известно, каждый браузер использует свой алгоритм для работы.Исходя из этого, скрипт должен определять браузер пользователя и соответственно выводить нужную кнопку, которая будет добавлять сайт в закладки.
Скрипты которые массово распространяются в сети, предназначены для определенных браузеров и собрать их в один большой и качественный программный код может быть очень сложно.
Далее, чтобы скрипт заработал, вставляем где у вас будет сама кнопка такую ссылку:
Данный скрипт способен определять все известные браузеры, единственный его недостаток, это вместо добавления в избранное в Google Chrome пользователям будет выводиться информация о нажатии клавиш быстрого доступа.
Другими словами, будет выводиться окно, в котором будет написано, что необходимо нажать сочетание клавиш Ctrl+D, это вызывает неудобства, но с другой стороны, при помощи данного функционала, вы всё же сможете повлиять на решение посетителей о добавлении сайта в закладки.
Использование данного функционала не обязательно, но в то же время может повлиять на качество площадки. Воспользуйтесь данным скриптом и сделайте свой сайт ещё лучше.
Читайте также:
