laravel feedback component
v1.10.0
Из-за глупого нарушения авторских прав мне пришлось переименовать этот пакет.
Обратите внимание, что ничего в коде не изменилось (пространство имен осталось прежним). Изменилось только имя пакета. Пространство имен может быть изменено позже в основной версии.
laravel feedback component позволяет вам легко реализовать компонент обратной связи с клиентами на вашем веб-сайте. Он создан на VueJS, но может быть реализован в любом проекте Laravel. Вам просто нужно добавить несколько строк в макет.
Вы, вероятно, знаете множество веб-сайтов, которые используют систему чата Intercom или Crisp, Chat.io и многие другие чаты с клиентами, позволяющие вам получать отзывы от посетителей вашего сайта.
laravel feedback component — это настраиваемая альтернатива с открытым исходным кодом, использующая тот же макет. После установки вы увидите компонент на своем веб-сайте.
Для этого у нас также есть Nova Tool!
Я буду работать над реализацией системы чата в laravel feedback component , которая, вероятно, будет работать с Laravel Nova. Это запланировано на V2. На данный момент вы можете собирать отзывы только от ваших посетителей.
Компонент обратной связи laravel " data-animated-image="" style="max-width: 100%;">
Вы можете использовать Composer для установки laravel feedback component :
composer require mydnic/laravel-kustomer После установки laravel feedback component опубликуйте его ресурсы с помощью Artisan-команды kustomer:publish . После установки пакета вам также следует запустить команду миграции:
php artisan kustomer:publish
php artisan migrateЭто создаст новую таблицу отзывов .
Вы можете обновить конфигурацию компонента по своему желанию, отредактировав config/kustomer.php .
Я рекомендую вам внимательно прочитать этот файл конфигурации.
Все тексты, которые вы видите в компонентах, доступны для перевода. После публикации ресурсов вы найдете тексты в resources/lang/vendor/en/kustomer.php.
Метки отзывов также хранятся в этом файле, и массив feedbacks должен соответствовать массиву из вашего файла конфигурации.
В вашем каталоге public/ вы найдете скомпилированные файлы css и js, которые необходимо включить в ваш HTML-макет.
Включите их на страницы, на которых вы хотите, чтобы компоненты отображались:
< head >
< script src = " {{ asset ( ' vendor/kustomer/js/kustomer.js ' ) } } " defer ></ script >
</ head >
< body >
@include ( ' kustomer::kustomer ' )
</ body >Внимание! Если вы запускаете приложение VueJS, вам необходимо добавить контейнер
#kustomerвне контейнера#app. Это связано с тем, что клиент по умолчанию работает на собственном экземпляре vue. Если вы хотите это изменить, см. раздел «Включение ресурсов в свои собственные ресурсы».
При обновлении этого пакета вам следует повторно опубликовать ресурсы:
php artisan vendor:publish --tag=kustomer-assets --force Это приведет к повторной публикации скомпилированных файлов JS и CSS, а также файлов svg, расположенных в public/vendor/kustomer/assets . Если вы хотите использовать свои собственные изображения, обновите файл конфигурации.
При желании вы можете импортировать файлы .vue и .sass в свои собственные папки resources/js и resources/sass , что позволит вам в значительной степени настроить компоненты и макет компонента обратной связи.
Это также позволит вам получить в приложении только один скомпилированный файл .js и .css .
Однако вам следует быть осторожным, если вы пытаетесь обновить последнюю версию, поскольку ваши изменения могут быть потеряны.
Требуются два пакета npm:
Вы можете добавить их через npm или пряжу.
Мы используем axios для отправки HTTP-запроса для отправки обратной связи, поэтому убедитесь, что axios установлен и настроен в вашем приложении vue.
Как и в javascript каркаса Laravel, аксиомы должны быть настроены следующим образом:
window . axios = require ( 'axios' ) ;
window . axios . defaults . headers . common [ 'X-Requested-With' ] = 'XMLHttpRequest' ;
let token = document . head . querySelector ( 'meta[name="csrf-token"]' ) ;
if ( token ) {
window . axios . defaults . headers . common [ 'X-CSRF-TOKEN' ] = token . content ;
} else {
console . error ( 'CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token' ) ;
} Опубликуйте компонент VueJS:
php artisan vendor:publish --tag=kustomer-vue-componentОпубликуйте файл стиля SASS:
php artisan vendor:publish --tag=kustomer-sass-componentЗатем в вашем приложении vue:
// app.js
Vue . component ( 'kustomer' , require ( './components/Kustomer/Kustomer.vue' ) ) ; // app.scss
@import ' kustomer ' ;Обратная связь по существу имеет 4 атрибута:
Как только отзыв будет сохранен в вашей базе данных, вы сможете использовать свой собственный бэк-офис для отображения данных и управления ими.
Модель обратной связи работает так же, как и любая другая модель Eloquent, поэтому ее очень легко использовать в приложении Laravel.
Используете Laravel Nova? Без проблем !
Если вы используете Laravel Nova, вам наверняка понадобится инструмент для визуализации всех полученных вами отзывов.
Вы можете установить официальный инструмент Laravel Nova здесь.
Когда новый отзыв будет правильно сохранен, мы отправим событие Laravel.
Вы можете прослушивать это событие и запускать любые прослушиватели. Вам решать, что будет дальше! Вы можете отправить электронное письмо администратору, записать некоторые данные или сделать что угодно.
В вашем EventServiceProvider вы можете обновить свойство $listen , чтобы добавить событие.
protected $ listen = [
' MydnicKustomerEventsNewFeedback ' => [
' AppListenersYourOwnListener ' , // change this
],
// ...
];Laravel Kustomer — это программное обеспечение с открытым исходным кодом, лицензированное по лицензии MIT.
В этом проекте вы найдете несколько svg-значков, взятых из FlatIcon. Вы можете изменить их в своем проекте.
