laravel feedback component
v1.10.0
愚かな著作権侵害のため、このパッケージの名前を変更しなければなりませんでした。
コードは何も変わっていないことに注意してください (名前空間は同じままです)。パッケージ名のみが変更されました。名前空間は後のメジャー リリースで変更される可能性があります。
laravel feedback componentと、Webサイトに顧客フィードバックコンポーネントを簡単に実装できます。 VueJS で構築されていますが、あらゆる種類の Laravel プロジェクトで実装できます。レイアウトに数行を追加するだけです。
あなたはおそらく、Intercom のチャット システム (クリスプ、chat.io、および Web サイト訪問者からフィードバックを得ることができるその他の多くの顧客チャット) を使用する Web サイトをたくさん知っているでしょう。
laravel feedback component同じレイアウトを採用するオープンソースのカスタマイズ可能な代替コンポーネントです。インストールすると、Web サイトにコンポーネントが表示されます。
それに対応する Nova ツールもあります。
私は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をインストールした後、 kustomer:publish Artisan コマンドを使用してそのアセットを公開します。パッケージをインストールした後、移行コマンドも実行する必要があります。
php artisan kustomer:publish
php artisan migrateこれにより、新しいフィードバックテーブルが作成されます。
config/kustomer.phpを編集することで、コンポーネントの構成を必要に応じて更新できます。
この設定ファイルを注意深く読むことをお勧めします。
コンポーネント内に表示されるすべてのテキストは翻訳可能です。アセットを公開すると、 resources/lang/vendor/en/kustomer.phpにテキストが表示されます。
フィードバック ラベルもこのファイルに保存され、 feedbacks配列は構成ファイルの配列と一致する必要があります。
public/ディレクトリには、HTML レイアウトに含める必要があるコンパイル済みの CSS ファイルと JS ファイルがあります。
コンポーネントを表示したいページにこれらを含めます。
< head >
< script src = " {{ asset ( ' vendor/kustomer/js/kustomer.js ' ) } } " defer ></ script >
</ head >
< body >
@include ( ' kustomer::kustomer ' )
</ body >注意VueJS アプリケーションを実行する場合は、
#kustomerコンテナを#appコンテナの外に追加する必要があります。これは、kustomer がデフォルトで独自の vue インスタンスで実行されるためです。これを変更したい場合は、「アセットを独自のアセットに含める」を参照してください。
このパッケージを更新するときは、アセットを再公開する必要があります。
php artisan vendor:publish --tag=kustomer-assets --forceこれにより、コンパイルされた JS および CSS ファイルが再公開されますが、 public/vendor/kustomer/assetsにある svg ファイルも再公開されます。独自のイメージを使用する場合は、構成ファイルを更新してください。
オプションで、 .vueファイルと.sassファイルを独自のresources/jsとresources/sassフォルダーにインポートして、フィードバック コンポーネントのコンポーネントとレイアウトを大幅にカスタマイズできます。
これにより、アプリ内にコンパイルされた.jsと.css 1 つだけになるようにすることもできます。
ただし、最新バージョンに更新しようとする場合は、変更内容が失われる可能性があるため、注意が必要です。
2 つの npm パッケージが必要です。
npm または Yarn を介して追加できます。
axios を使用してフィードバックを送信するための HTTP リクエストを作成しているため、axios がインストールされ、vue アプリに設定されていることを確認してください。
Laravel スキャフォールディング JavaScript と同様に、axios は次のように設定する必要があります。
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-componentSASS スタイル ファイルを公開します。
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 ライセンスに基づいてライセンス供与されたオープンソース ソフトウェアです。
このプロジェクトには、FlatIcon からの SVG アイコンがいくつかあります。独自のプロジェクト内で自由に変更できます。
