Мы в твиттере Наша страничка на FaceBook! Сообщество вебмастеров в VK Мы в телеграме!

PW — всё для вебмастера » Всё для uCoz » uCoz хаки » Расширенные комментарии v2 для uCoz


Расширенные комментарии v2 для uCoz

Данный материал предоставлен сайтом ProWebber.ru исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Скачать бесплатно Расширенные комментарии v2 для uCoz.

Расширенные комментарии v2 для uCoz


Описание
Встречали в интернет-магазинах комментарии (в идеале отзывы), с возможностью указать достоинства и недостатки товара?
Теперь тоже самое Вы можете сделать и у себя!

Установка:

Зайдите в ПУ > Управление дизайном > Форма добавления комментариев и замените код на этот:

<div class="comment-add">
<div class="ca-top">Оставить комментарий</div>
<div class="ca-form">
<div class="caf-extra-block">
<div class="caf-extra">
<label for="caf-plus">Достоинства</label>
<textarea id="caf_plus"></textarea>
</div>
<div class="caf-extra">
<label for="caf-minus">Недостатки</label>
<textarea id="caf_minus"></textarea>
</div>
</div>
<div class="caf-main">
<label for="caf-comm">Комментарий</label>
<textarea id="caf_comm"></textarea>
</div>
<div class="caf-default">
<textarea name="message" id="message"></textarea>
</div>
<?if($SECURITY_CODE$)?>$SECURITY_CODE$<?endif?>
<div class="ca-bottom">
<div class="cab-submit">
<input id="addcBut" type="submit" name="submit" value="Отправить">
</div>
<div class="cab-error">$ERROR$</div>
<div class="cab-select-extra">
<input id="change_extra" type="button" value="Расширенный" title="Изменить тип комментария">
</div>
</div>
</div>

<script>
$('#caf_plus, #caf_minus, #caf_comm').bind('keyup keydown', function(){
let valComm = $('#caf_comm').val(), isActive = $('.comment-add .caf-extra-block').hasClass('caf-active');
if(isActive){
let valPlus = $('#caf_plus').val(), valMinus = $('#caf_minus').val();
valPlus = (valPlus ? '[b]Достоинства:[/b]\n'+valPlus+'\n\n' : '');
valMinus = (valMinus ? '[b]Недостатки:[/b]\n'+valMinus+'\n\n' : '');
valComm = (valComm ? '[b]Комментарий:[/b]\n'+valComm : '');
$('#message').val((valPlus+valMinus+valComm));
} else $('#message').val(valComm);
});

$('#change_extra').on('click', function(){
let thisVal = $(this).val();
$(this).val(thisVal == 'Расширенный' ? 'Обычный':'Расширенный');
$('.comment-add .caf-extra-block').toggleClass('caf-active');
$('.comment-add textarea').val('');
});
</script>



Далее перейдите в ПУ > Управление дизайном > Таблица стилей (CSS) и добавьте вниз:

.comment-add {display: block; width: 100%; background: #fff; color: #333; padding: 10px; box-sizing: border-box;}
.comment-add label {display: block;}
.comment-add textarea {font-weight: inherit; font-famaly: inherit; font-size: inherit; color: inherit; box-sizing: border-box; overflow: hidden auto;}
.comment-add .ca-top {display: block; width: 100%; font-size: 1rem; font-size: bold; margin-bottom: 10px;}
.comment-add .ca-form {display: block; width: 100%; margin-bottom: 10px;}
.comment-add .ca-form textarea {width: 100%; height: 80px; padding: 5px; border: 1px solid #aaa; border-radius: 5px; resize: none;}
.comment-add .ca-form textarea:hover {border-color: #999;}
.comment-add .ca-form textarea:focus {border-color: #07f;}
.comment-add .ca-form .caf-extra-block {display: none; width: 100%; margin-bottom: 5px;}
.comment-add .ca-form .caf-extra-block.caf-active {display: block;}
.comment-add .ca-form .caf-extra-block .caf-extra {display: inline-block; float: left;}
.comment-add .ca-form .caf-extra-block .caf-extra::after {content: ''; display: block; clear: both;}
.comment-add .ca-form .caf-extra-block .caf-extra:first-child {width: calc(50% - 10px); margin-right: 10px;}
.comment-add .ca-form .caf-extra-block .caf-extra:last-child {width: 50%;}
.comment-add .ca-form .caf-main {display: block; width: 100%; margin-bottom: 10px;}
.comment-add .ca-form .caf-main textarea {width: 100%; min-height: 80px; height: 80px; max-height: 300px; resize: vertical;}
.comment-add .ca-form .caf-default {display: none;}
.comment-add .ca-form .recaptcha-wrapper {margin-bottom: 10px;}
.comment-add .ca-bottom {display: block; width: 100%;}
.comment-add .ca-bottom::after {content: ''; display: block; clear: both;}
.comment-add .ca-bottom input {display: block; height: 30px; border-radius: 5px; background: #ddd; color: #333; border: 1px solid #ddd; box-sizing: border-box; cursor: pointer;}
.comment-add .ca-bottom input:hover {border-color: #07f;}
.comment-add .ca-bottom .cab-submit,
.comment-add .ca-bottom .cab-error,
.comment-add .ca-bottom .cab-select-extra {display: inline-block; float: left; height: 30px;}
.comment-add .ca-bottom .cab-submit,
.comment-add .ca-buttom .cab-submit input {width: 90px;}
.comment-add .ca-bottom .cab-error {width: calc(100% - 215px); margin: 0 5px; line-height: 30px;}
.comment-add .ca-bottom .cab-error .commError {text-align: left;}
.comment-add .ca-bottom .cab-select-extra,
.comment-add .ca-bottom .cab-select-extra input {width: 115px;}




Дополнительные ссылки на скачивание ТОЛЬКО для зарегистрированных


+2


Просмотры: 605 :: Комментарии (3) :: :: Нужна помощь? Задайте вопрос на форуме ::
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

#1Tesessssss

  • 11 октября 2019 18:31
  • Регистрация: 30.01.2010
  • ICQ: --
  • Комментариев: 52
он еще живой что ли?)

+1

#2Otaku-First

  • 7 ноября 2019 11:08
  • Регистрация: 10.10.2019
  • ICQ: --
  • Комментариев: 51
Tesessssss, Вполне. Сейчас пользователи уламуют создатилей чтоб они добавили систиму плагинов

0

#3kinouser

  • 1 декабря 2019 12:57
  • Регистрация: 1.12.2019
  • ICQ: --
  • Комментариев: 1
Otaku-First,
интересное решение , спасибо, есть просьба), подскажи как сделать, чтобы по умолчанию подгружалось именно - расширенное комментирование?

0
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.

Prowebber VK - сообщество ВКонтакте
Prowebber.ru - всё для настоящего вебмастера

Онлайн ТВ и Радио, Cмотрите абсолютно бесплатно!
http://uzon.tv

Скачать БЕСПЛАТНО Премиум Темы и Плагины с переводом на РУССКИЙ!

заходи и испробуй что то типа ютуб https://luckyx.online/

сервис сокращения URL-адресов https://luckyx.ru/

Наши баннеры
Скрипты, cms, шаблоны, статьи по раскрутке

Опросы

Каких материалов НЕ хватает на сайте?

Шаблонов
Скриптов
Программ
Графики
Уроков и курсов

Архив новостей
Апрель 2021 (476)
Март 2021 (522)
Февраль 2021 (183)
Январь 2021 (107)
Декабрь 2020 (118)
Ноябрь 2020 (82)

Последние комментарии:

Искать людей

Ваши переписки