Для того, чтобы разобраться в том, как будет смотреться модуль «Звёздный рейтинг» на вашем сайте, до того, как купить подписку на его использование, достаточно произвести простые действия по его установке. Если нужна помощь в его установке и настройке его отображения, можете списаться со мной, — все цены и контакты даны на Промо-сайте. Ниже будет рассмотрен пошаговый процесс установки для тех, у кого есть время на то, чтобы выполнить этот простой процесс.
Картинки модуля «Звёздный рейтинг»
Картинки:
- С облаками: https://ss.mb4.ru/ss.mb4.ru/img/bg-clouds2-tinypng.png
- С травой: https://ss.mb4.ru/ss.mb4.ru/img/grass_tile-tinypng.png
Сохраните у себя на сервере и запомните, где их сохранили. Ссылки на их расположение понадобится прописать в файл с CSS-стилями.
Файл CSS-стилей модуля «Звёздный рейтинг»
CSS код модуля «Звёздный рейтинг» берём как есть по этой ссылке и заливаем к себе на хостинг.
В двух строках с расположением картинок фона, если требуется, поменяйте путь до них (это 2-я и 4-я строки в файле):
#clouds{background:url("../img/bg-clouds2-tinypng.png") repeat-x 0 bottom #ACE6FF;
#ground{background:url("../img/grass_tile-tinypng.png") repeat-x 0 0 transparent;Данные CSS-свойства можно вставить в имеющийся файл со стилями или подключить в виде отдельного файла, правильно прописав пути до него. Подключение CSS-файлов нужно делать между тегами <head> в шаблоне сайта или HTML-документа с помощью тега:
<link href="/./css/mb4star.css" rel="stylesheet">Лучше вставлять его перед закрывающим тегом </head> или в конец имеющегося файла со стилями так, чтобы свойства классов модуля «Звёздный рейтинг» не были перепрописаны другими. Хотя я старался давать имена классам так, чтобы они не пересекались с теми, что могут быть использованы где-либо ещё.
Таким образом, стили могут быть прописаны в любой HTML-документ, в шаблон любой CMS-ки и даже в конструкторы сайтов, которыми некоторые пользуются.
Файл скриптов JavaScript для обеспечения функционала работы модуля «Звёздный рейтинг»
Файл со скриптами JavaScript, которые обеспечивают работу модуля «Звёздный рейтинг» берём по этой ссылке.
Для того, чтобы данные модуля в итоге правильно отправлялись и обрабатывались в админке, требуется правильно прописать адрес в первых двух строчках кода:
var mb4host = "https://ss.mb4.ru/{домен сайта}/mb4star.php";
var mb4hostP = "https://ss.mb4.ru/{домен сайта}/mb4starP.php";- Вместо
{домен сайта}нужно подставить доменное имя вашего сайта, служащее главным зеркалом, напримерwww.site.ruилиsite.ru.
Админка работает так, что принимает запросы только с того домена, который вы укажете. Если не знаете, какое доменное имя у вас является главным зеркалом, уточните на хостинге или закажите у меня услугу настройки редиректа на одно доменное имя. (Это важно для SEO, так что это лучше сделать при любых обстоятельствах.)
Подключение JavaScript можно осуществить вставкой кода непосредственно в HTML-код, а можно отдельным файлом. Место расположения не должно иметь значения, но разработчики поисковых машин рекомендуют подключать его перед закрывающим тегом </body>. Например так:
<script src="/./js/mb4star.js"></script>Важно правильно указать путь до файла, расположенного у вас на сервере так, чтобы JS-скрипты были найдены и подключены в работу на страницах вашего сайта.
HTML-код модуля «Звёздный рейтинг»
HTML-код модуля состоит из нескольких <div>-ов, которые появляются в зависимости от действия пользователя на странице, на которой расположен модуль «Звёздный рейтинг». Весь код, который я привожу ниже, должен быть на станице для правильной сборки и работы модуля.
HTML-код со звёздами, облаками и травкой
<div id="mb4SuperStar">
<div class="mb4SSud">Пожалуйста оцените статью:</div>
<div class="mb4SSm">
<div id="mb4wrapper">
<div id="clouds"></div>
<div id="ground"></div>
</div>
</div>
<div class="mb4SSud SSdown">в один клик!</div>
</div>
<!--- Звёзды --->
<fieldset id="SSScontainer">
<input type="radio" id="SuperStar5" name="mb4SSrating" value="5" />
<label id="SupSt5" for="star5" title="Отлично">5 звёзд</label>
<input type="radio" id="SuperStar4" name="mb4SSrating" value="4" />
<label id="SupSt4" for="star4" title="Хорошо">4 звёзды</label>
<input type="radio" id="SuperStar3" name="mb4SSrating" value="3" />
<label id="SupSt3" for="star3" title="Удовлетворительно">3 звёзды</label>
<input type="radio" id="SuperStar2" name="mb4SSrating" value="2" />
<label id="SupSt2" for="star2" title="Плохо">2 звёзды</label>
<input type="radio" id="SuperStar1" name="mb4SSrating" value="1" />
<label id="SupSt1" for="star1" title="Отвратительно">1 звезда</label>
</fieldset>Надписи можно изменить, но следите за длиной строк так, чтобы они были входили в длину поля, предназначенного для их отображения!
HTML-код с текстовым полем для обратной связи:
<div id="mb4SuperText">
<div class="mb4SSud">Спасибо за оценку!</div>
<div class="mb4SText">
<form name="mb4SuperXText">
<fieldset class="mb4STextFS">
<legend class="mb4STextLegend">Напишите нам:</legend>
<textarea name="SuperText" class="mb4STextArea" type="text" id="mb4STextArea" placeholder="Напишите нам тут"></textarea>
<br>
<input type="hidden" id="fn4" name ="filename">
<div type="submit" name ="submit" class="mb4STextSubmit" id="mb4STextSubmit">Отправить</div>
</fieldset>
</form>
</div>
<div class="mb4SSud SSdown">Спасибо за обратную связь!</div>
</div>
<div id="mb4SuperX">x</div>
<div id="mb4SuperH">?</div>
<div id="mb4SuperPrologue">
Здесь Вы можете написать мысли и свои впечатления автору.<br>
Если оставите свой e-mail, мы постараемся вам ответить.<br>
Отправленная информация останется конфиденциальной и будет использована для улудшения нашего сайта и, если это потребуется, для работы с вами, согласно вашим пожеланиям. <span style="font-weight: 900;color: #f00;text-decoration: underline #00f;">Ясно!</span>
</div>Текст, появляющийся в подсказке можно поменять. Он находится в последнем блоке <div id="mb4SuperPrologue">. Тут также важно помнить о том, что текста не должно быть больше, чем позволяет размер поля. И, если будете менять, проверяйте то, как выглядит данное сообщение не только на мониторах, но и на экранах мобильных телефонов!
Место на странице, в котором происходит срабатывание модуля «Звёздный рейтинг»
После того, как весь код (CSS, JavaScript и HTML) интегрирован на страницу вашего сайта, осталось определиться с местом срабатывания модуля «Звёздный рейтинг». Для этого на страницу нужно вставить:
<div id="mb4star"></div>Обычно (и логично) — это конец статьи. Но, вам виднее, куда вставить этот HTML-код. Этот код пользователь не видит, но когда он долистывает страницу до него, срабатывает событие JavaScript и всплывает окошко модуля с предложением оценить то, что пользователь изучил.
На самом деле, модуль всплывает чуть позже (на высоту самого модуля) так, чтобы не мешать пользователю полностью ознакомиться с предлагаемым материалом.
Резюме
На этом, собственно установка модуля «Звёздный рейтинг» завершена. Можете проверять то, как он работает у вас на сайте. Если по каким-то причинам какие-то CSS-свойства всё же оказались перепрописаны, нужно внести правки в CSS код того элемента, свойства которого "поплыли".
Если остались какие-то вопросы, можете задать их в форме ниже.
