어리석은 저작권 침해로 인해 이 패키지의 이름을 바꿔야 했습니다.
코드에는 아무것도 변경되지 않았습니다(여전히 동일한 네임스페이스). 패키지 이름만 변경되었습니다. 네임스페이스는 나중에 주요 릴리스에서 변경될 수 있습니다.
laravel feedback component 사용하면 웹 사이트에 고객 피드백 구성 요소를 쉽게 구현할 수 있습니다. VueJS로 빌드되었지만 모든 종류의 Laravel 프로젝트에서 구현될 수 있습니다. 레이아웃에 몇 줄만 추가하면 됩니다.
아마도 인터콤 채팅 시스템이나 선명한 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 설치한 후 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 애플리케이션을 실행하는 경우
#app
컨테이너 외부에#kustomer
컨테이너를 추가해야 합니다. 이는 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
만 남게 됩니다.
그러나 최신 버전을 업데이트하려는 경우 변경 사항이 손실될 수 있으므로 주의해야 합니다.
두 개의 npm 패키지가 필요합니다.
npm이나 Yarn을 통해 추가할 수 있습니다.
우리는 피드백을 보내기 위해 HTTP 요청을 하기 위해 axios를 사용하고 있으므로 vue 앱에 axios가 구성되어 설치되어 있는지 확인하세요.
Laravel 스캐폴딩 자바스크립트에서와 같이 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-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가지 속성이 있습니다.
피드백이 데이터베이스에 저장되면 자체 백오피스를 사용하여 데이터를 표시하고 조작할 수 있습니다.
Feedback 모델은 다른 Eloquent 모델처럼 작동하므로 Laravel 애플리케이션에서 사용하기가 매우 쉽습니다.
라라벨 노바(Laravel Nova)를 사용하시나요? 괜찮아요 !
Laravel Nova를 사용하고 계시다면 받은 모든 피드백을 시각화하는 도구가 필요할 것입니다.
여기에서 공식 Laravel Nova 도구를 설치할 수 있습니다.
새로운 피드백이 올바르게 저장되면 Laravel 이벤트가 전달됩니다.
이 이벤트를 수신하고 모든 종류의 리스너를 트리거할 수 있습니다. 다음에 무슨 일이 일어날지 결정하는 것은 당신에게 달려 있습니다! 관리자에게 이메일을 보내거나, 일부 데이터를 기록하거나, 무엇이든 생각할 수 있습니다.
EventServiceProvider
에서 $listen
속성을 업데이트하여 이벤트를 추가할 수 있습니다.
protected $ listen = [
' MydnicKustomerEventsNewFeedback ' => [
' AppListenersYourOwnListener ' , // change this
],
// ...
];
Laravel Kustomer는 MIT 라이선스에 따라 라이선스가 부여된 오픈 소스 소프트웨어입니다.
이 프로젝트에서는 FlatIcon에서 가져온 일부 svg 아이콘을 찾을 수 있습니다. 자신의 프로젝트에서 자유롭게 변경할 수 있습니다.