Звездный рейтинг в комментариях Tickets

Здравствуйте! Для моей странички с отзывами понадобилось прикрутить звездный рейтинг. В для реализации данной возможности воспользовался этим решением. Только я использовал для себя плагин Star Rating.

В форму добавил

<div class="form-group">
	<label for="comment-stars">Оставьте оценку</label>
        <input id="comment-stars" name="starrating" value="[[+properties.starrating]]" class="rating">
        <span class="error"></span>
</div>

В чанке вывода

<input value="[[+properties.starrating]]" class="rating-loading">

Проблема в том, что в момент нажатия кнопки «Написать» появляется новый комментарий без звезд рейтинга с крутящимся прелоадером. Плюс сбиваются стили оформления рейтинга в самой форме. После обновления страницы, рейтинг отображается как нужно. Мне кажется, что где-то какой-то косяк в javascript, но я в нем не силен и не могу понять, где ошибка.

Может специалисты подскажут, как сделать, чтобы все заработало. Заранее спасибо!

Константин

14 января 2018, 10:49

3 989

Комментарии: 8

Андрей

14 января 2018, 14:22

Думаю что проще будет использовать — easyComm, там всё из коробки работает.

Константин

14 января 2018, 14:40

Это понятно, что проще, но мы не ищем простых путей.) На самом деле мне понравилась работа самого рейтинга, его возможности. Да и для себя было бы полезно разбираться в таких вещах.

Баха Волков

14 января 2018, 14:33

Надо повесить инициализацию плагина звёздочек после успешной отправки формы. Скорее всего js плагин повешен на событие загрузки страницы, после отправки формы плагин не знает и не работает

Баха Волков

14 января 2018, 14:38

Это в том случае когда именно Tickets нужен, а если не принципиально, то и вправду надо EasyComm использовать, там ещё учитывается/собирается рейтинг товара/ресурса, это для того чтобы потом с этими значениями что нибудь можно будет поделать, например фильтровать/сортировать

Константин

14 января 2018, 14:45

Дело в том, что изначально звездочки были не нужны. И мне сразу хватало возможностей Tickets. Просто все зашло слишком далеко. Я все оформил, а также сделал вывод отзывов на главной странице. И тут вдруг понадобились звезды.) Вот я и решил довести дело до конца, надеясь на помощь специалистов.

Баха Волков

14 января 2018, 15:22

Скопируйте файл assets/components/tickets/js/web/default.js, дайте другое название и укажите в системных настройках.

В новом файле, где-то 315-ая строка:

save: function (form, button) {
            $(form).ajaxSubmit({
                data: {action: 'comment/save'},
                url: TicketsConfig.actionUrl,
                form: form,
                button: button,
                dataType: 'json',
                beforeSubmit: function () {
                    clearInterval(window.timer);
                    $('.error', form).text('');
                    $(button).attr('disabled', 'disabled');
                    return true;
                },
                success: function (response) {
                    $(button).removeAttr('disabled');
                    $(document).trigger('tickets_comment_save', response);
                    if (response.success) {

			// Тут запустите свой плагин звездного рейтинга  <<<<<------- ВОТ ЗДЕСЬ

                        Tickets.forms.comment(false);
                        $('#comment-preview-placeholder').html('').hide();
                        $('#comment-editor', form).val('');
                        $('.ticket-comment .comment-reply a').show();

                        // autoPublish = 0
                        if (!response.data.length && response.message) {
                            Tickets.Message.info(response.message);
                        }
                        else {
                            Tickets.comment.insert(response.data.comment);
                            Tickets.utils.goto($(response.data.comment).attr('id'));
                        }

                        Tickets.comment.getlist();
                        prettyPrint();
                    }
                    else {
                        Tickets.Message.error(response.message);
                        if (response.data) {
                            var errors = [];
                            var i, field;
                            for (i in response.data) {
                                field = response.data[i];
                                var elem = $(form).find('[name="' + field.field + '"]').parent().find('.error');
                                if (!elem.length) {
                                    elem = $(form).find('#' + field.field + '-error');
                                }
                                if (elem.length) {
                                    elem.text(field.message)
                                }
                                else if (field.field && field.message) {
                                    errors.push(field.field + ': ' + field.message);
                                }
                            }
                            if (errors.length) {
                                Tickets.Message.error(errors.join('
'));
                            }
                        }
                    }
                    if (response.data.captcha) {
                        $('input[name="captcha"]', form).val('').focus();
                        $('#comment-captcha', form).text(response.data.captcha);
                    }
                }
            });
            return false;
        },

Константин

14 января 2018, 15:58

Спасибо! Сделал как Вы сказали. Но сработало только через setTimeout

setTimeout(function() { 
	$(".rating-loading").rating({
	showClear:false,
	disabled:true
});
}, 100);

Еще раз спасибо!

Еще скажите, где можно почитать, как вывести в админке Тикетов значения дополнительных полей, созданных с помощью JSON поля properties, с возможностью редактирования.

Макс

15 мая 2020, 12:11

Здравствуйте. Решил попробывать ваш способ и у меня такая же проблема крутящимся прелоадером, после перезагрузки рейтинг появляется можете пожалуйста помочь
В форму добавил

<div class="form-group">
	<label for="comment-stars">Оставьте оценку</label>
        <input id="input-4-ltr-star-md" type="number" name="input-4-ltr-star-md" value="[[+properties.input-4-ltr-star-md]]" class="kv-ltr-theme-fas-star" dir="ltr" data-size="md">
        <span class="error"></span>
</div>

В чанке вывода

<input value="[[+properties.input-4-ltr-star-md]]" class="kv-ltr-theme-fas-star rating-loading" dir="ltr" data-size="xs">

<script>
    	$('.rating-loading').rating({
        hoverOnClear: false,
        hoverEnabled: false,
        hoverChangeStars: false,
        hoverOnClear: false,
        displayOnly: 'readonly',
        theme: 'krajee-fas',
        containerClass: 'is-star',
        stars: "5",
        defaultCaption: '{rating} из 5',
        clearCaption: 'Нет оценки',
        min: 0, 
        max: 5, 
        step: 1,
        starCaptions: function (rating) {
            return rating == 1 ? '1 из 5' : rating + ' из 5';
        },
        filledStar: '<i class="fas fa-star"></i>',
        emptyStar: '<i class="far fa-star"></i>'
    });
    setTimeout(function() { 
	$(".rating-loading").rating({
	showClear:false,
	disabled:true
});
}, 100);
    </script>

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.