Головна » Блоги » InstantCMS - переваги та недоліки системи » Нагадування користувачам про аватар в instantcms 2*

Нагадування користувачам про аватар в instantcms 2*

+2
Голосів: 2
Опубліковано: 2014 / 09 / 24
Переглядів: 186
Категорія: Різне
Редагувалося: 6 раз — останній 18 березня 2015
Про бажаність унікального аватару теми піднімались не один раз.
Можна, звичайно, зробити поле "аватар" обов'язковим при реєстації. Недолік - ускладнюється сама реєстрація.
Як варіант пропоную виводити нагадування про нього.
Спробував зробити за допомогою кук.
Отже, завдання вивести нагадування про аватар зареєстрованому користувачу в якого аватар не встановлено.
Частина необхідних умов є в віджеті "аватар користувача". З ним і працюватимемо. Реалізуємо за допомогою кук. При цьому постараємося бути коректними по відношенню до користувача але все ж "дотиснути" його.
Наш об'єкт - файл шаблону віджета templates\default\controllers\users\widgets\avatar\avatar.tpl.php
1. створюємо змінну для майбутньої умови на встановлений аватар (тільки тим в кого не встановлено):
Код PHP:
  1. <?php
  2. $avatar_modal = $user->avatar;
  3. ?>
2. ставимо умову на виконання, в середині цього коду далі розмістимо наша скрипти, стиль та HTML:
Код PHP:
  1. <?php if($avatar_modal == false) { ?>
  2. <?php } ?>
  3.  
3. підключаємо jquery-cookie.js (файл вже є в "коробці"):
Код PHP:
  1. <?php $this->addJS("templates/{$this->name}/js/jquery-cookie.js"); ?>
4. за допомогою скрипта виводимо перше спливаюче вікно де пропонуємо встановити аватар:

5. якщо аватар не встановлено після цього, не раніше ніж наступного дня виведемо інше вікно, де ще раз нагадаємо про аватар, та дамо можливість користувачу відмовитись від нагадування (ми ж збиралися бути коректими laugh ):

Ну і власне необхідний код (вставте в файл: templates\default\controllers\users\widgets\avatar\avatar.tpl.php нижче коду який там вже є (все відкоментував, можете змінити параметри, якщо порахуєте за необхідне)):
Код PHP:
  1. <?php
  2. $avatar_modal = $user->avatar;
  3. ?>
  4.  
  5. <?php if($avatar_modal == false) { ?>
  6. <!--Скрипты и стиль всплывающего окна для загрузки аватара -->
  7. <?php $this->addJS("templates/{$this->name}/js/jquery-cookie.js", '', false); ?>
  8.  
  9. <script type="text/javascript">//<![CDATA[
  10. $(document).ready(function(){
  11. var today = new Date(),
  12. dd = today.getDate(),
  13. mm = today.getMonth()+1, //Январь = 0!
  14. yyyy = today.getFullYear();
  15.  
  16. //создаем куки и записываем в нее её же дату
  17. if ( $.cookie('popup') == null ){
  18. $("#setCookie").click(function () {
  19. $.cookie("popup", today, {expires: 365, path: '/'});//записываем дату, устанавливаем куку на год
  20. $("#parent_popup").hide();
  21. });
  22. $("#setCookie_then").click(function () {
  23. $.cookie("popup", today, {expires: 365, path: '/'} );//записываем дату, устанавливаем куку на год
  24. $("#parent_popup").hide();
  25. });
  26. //выводим окно с задержкой в 5 секунд
  27. if ( $.cookie("popup") == null ){
  28. setTimeout(function(){
  29. $("#parent_popup").show();
  30. }, 5000)//время задержки появления окна в милисекундах
  31. }
  32. else { $("#parent_popup").hide();
  33. };
  34. } else {
  35. //если обещал установить или просил напомнить (первая кука установлена)
  36. //1. Узнаем текущую дату
  37. var date_added = new Date($.cookie('popup')),
  38. added_dd = date_added.getDate(),
  39. added_mm = date_added.getMonth()+1, //January is 0!
  40. added_yyyy = date_added.getFullYear();
  41.  
  42. var now = dd+'/'+mm+'/'+yyyy; //Текущая дата
  43. var was = added_dd+'/'+added_mm+'/'+added_yyyy; //Дата установки первой куки
  44.  
  45. //2. Сравниваем значения текущей даты и даты установки первой куки
  46. if ( now != was ) {//День не совпадает, можно выводить второе окно
  47. $("#setCookie_new").click(function () {
  48. $.cookie("popup_new", "second", {expires: 1, path: '/'} );//на один день
  49. $("#parent_popup_new").hide();
  50. });
  51. $("#setCookie_new_full").click(function () {
  52. $.cookie("popup_new", "forever", {expires: 365, path: '/'} );//на год
  53. $("#parent_popup_new").hide();
  54. });
  55. //выводим втророе окно с задержкой в 5 секунд
  56. if ( $.cookie("popup_new") == null ){
  57. setTimeout(function(){
  58. $("#parent_popup_new").show();
  59. }, 5000)//время задержки появления окна в милисекундах
  60. }
  61. else { $("#parent_popup_new").hide();
  62. }
  63. }
  64. }
  65. });//]]>
  66.  
  67. </script>
  68.  
  69. <style>
  70. #parent_popup, #parent_popup_new {
  71. background-color: rgba(0, 0, 0, 0.8);
  72. display: none;
  73. position: fixed;
  74. z-index: 99999;
  75. top: 0;
  76. right: 0;
  77. bottom: 0;
  78. left: 0;
  79. }
  80.  
  81. #popup, #popup_new {
  82. background: #fff;
  83. width: 520px;
  84. margin: 10% auto;
  85. padding: 5px 20px 40px;
  86. border: 10px solid #ddd;
  87. position: relative;
  88. -webkit-box-shadow: 0px 0px 20px #000;
  89. -moz-box-shadow: 0px 0px 20px #000;
  90. box-shadow: 0px 0px 20px #000;
  91. -webkit-border-radius: 10px;
  92. -moz-border-radius: 10px;
  93. border-radius: 10px;
  94. }
  95. .yes{
  96. cursor:pointer;
  97. text-decoration:underline;
  98. color:green;
  99. display:block;
  100. float:left;
  101. margin-left:50px
  102. }
  103. .no{
  104. color:red;
  105. display:block;
  106. float:right;
  107. margin-right:50px;
  108. cursor:pointer;
  109. text-decoration:underline
  110. }
  111. .anonsik{
  112. color:grey;
  113. font-weight:400;
  114. font-style:italic
  115. }
  116. </style>
  117. <!--Скрипты и стиль всплывающего окна для загрузки аватара окончено-->
  118.  
  119. <!--Всплывающие для загрузки аватара (html)-->
  120. <noindex>
  121. <div id="parent_popup">
  122. <div id="popup">
  123. <h2>Установите, пожалуйста, аватар!</h2>
  124. <p class="anonsik">Вы станете узнаваемым и будет вам хорошо...</p>
  125. <p>
  126. <a class="yes" id="setCookie" href="<?php echo href_to('users', $user->id); ?>/edit" onclick="document.getElementById('parent_popup').style.display='none';">Ок, сейчас установлю</a>
  127. <a class="no" id="setCookie_then" href="#" onclick="document.getElementById('parent_popup').style.display='none';">Напомнить позже</a>
  128. </p>
  129. </div>
  130. </div>
  131. <div id="parent_popup_new">
  132. <div id="popup_new">
  133. <h2>Вы ж обещали аватар заполнить!</h2>
  134. <p class="anonsik">С аватаром ну очень хорошо: все узнают и дружат...</p>
  135. <p>
  136. <a class="yes" id="setCookie_new" href="<?php echo href_to('users', $user->id); ?>/edit" onclick="document.getElementById('parent_popup_new').style.display='none';">Лан, уговорили</a>
  137. <a class="no" id="setCookie_new_full" onclick="document.getElementById('parent_popup_new').style.display='none';">Отвали со своим аватаром!</a>
  138. </p>
  139. </div>
  140. </div>
  141. </noindex>
  142. <!--Всплывающее для загрузки аватара (html) окончено-->
  143. <?php } ?>
Миру вам!

Читайте також:

  • "Резиновий" шаблон для InstantCMS
    "Резиновий" шаблон для InstantCMS

    Вітаю! Запрошую всіх зацікавлених до тестування "резинового" шаблону для InstantCMS. Шаблон є варіантом дефолтного; передбачена можливість розміщення модулів в блоки, які закриваються та відкривают...

  • Адаптивний шаблон для instantcms 1.10.3 - 1.10.6
    Адаптивний шаблон для instantcms 1.10.3 - 1.10.6

    Підтримуються роздільні здатності від 320 рх. Велика кількість позицій (в т.ч. - взаємозамінні) Додатковий функціонал модулів (в т.ч. власні шаблони ), таби з автоскролом, плаваючий блок реклами, с...

  • Адаптивна гумова розмітка
    Адаптивна гумова розмітка

    Вітаю! Цей запис для тих, хто як і я ніяк не може підібрати гарну адаптивну розмітку. Перебрав, препробував більше десятка. На жаль, всі мали для мене якісь недоліки. Кінець-кінцем зробив свою. Отж...

  • Віджет "Аватар користувача" 2.1.2 з вибором шаблону та treeview
    Віджет "Аватар користувача" 2.1.2 з вибором шаблону та treeview

    Вітаю! Невеличкий хак дозволить призначати віджету "Аватар користувача" інший шаблон. Для прикладу - виводити костувальницьке меню у вигляді дерева. Пару слів пропро роботу меню: клік по...

Коментарі (0)

Немає коментарів. Ваш буде першим!