laravel feedback component
v1.10.0
En raison d'une stupide violation du droit d'auteur, j'ai dû renommer ce paquet.
Notez que rien dans le code n'a changé (toujours le même espace de noms). Seul le nom du package a changé. L'espace de noms peut être modifié ultérieurement dans une version majeure.
laravel feedback component vous permet d'implémenter facilement un composant de commentaires clients sur votre site Web. Il est construit avec VueJS mais peut être implémenté dans n'importe quel type de projet Laravel. Il vous suffit de déposer quelques lignes dans votre mise en page.
Vous connaissez probablement de nombreux sites Web qui utilisent le système de chat par interphone, ou chat.io et bien d'autres chats clients vous permettant d'obtenir les commentaires des visiteurs de votre site Web.
laravel feedback component est une alternative open source et personnalisable qui adopte la même présentation. Une fois installé, vous verrez le composant sur votre site Web.
Nous avons également un outil Nova pour cela !
Je vais travailler sur l'implémentation d'un système de discussion dans laravel feedback component , qui fonctionnera probablement avec Laravel Nova. Ceci est prévu pour la V2. Pour l’instant, vous ne pouvez recueillir que les retours de vos visiteurs.
composant de commentaires laravel " data-animated-image="" style="max-width : 100%;">
Vous pouvez utiliser Composer pour installer laravel feedback component :
composer require mydnic/laravel-kustomer Après avoir installé laravel feedback component , publiez ses actifs à l'aide de la commande kustomer:publish Artisan. Après avoir installé le package, vous devez également exécuter la commande migrate :
php artisan kustomer:publish
php artisan migrateCela créera un nouveau tableau de commentaires .
Vous pouvez mettre à jour la configuration du composant à votre guise en éditant config/kustomer.php .
Je vous encourage à lire attentivement ce fichier de configuration.
Tous les textes que vous pouvez voir dans les composants sont traduisibles. Après avoir publié les actifs, vous trouverez les textes dans resources/lang/vendor/en/kustomer.php
Les étiquettes de feedbacks sont également stockées dans ce fichier, et le tableau feedbacks doit correspondre à celui de votre fichier de configuration.
Dans votre répertoire public/ vous trouverez les fichiers CSS et js compilés qui doivent être inclus dans votre mise en page HTML.
Incluez-les sur les pages sur lesquelles vous souhaitez que les composants apparaissent :
< head >
< script src = " {{ asset ( ' vendor/kustomer/js/kustomer.js ' ) } } " defer ></ script >
</ head >
< body >
@include ( ' kustomer::kustomer ' )
</ body >Attention Si vous exécutez une application VueJS, vous devez ajouter le conteneur
#kustomeren dehors de votre conteneur#app. En effet, kustomer s'exécute par défaut sur sa propre instance de vue. Si vous souhaitez modifier cela, consultez Inclure des actifs avec vos propres actifs.
Lors de la mise à jour de ce package, vous devez republier les ressources :
php artisan vendor:publish --tag=kustomer-assets --force Cela republiera les fichiers JS et CSS compilés, mais aussi les fichiers svg situés dans public/vendor/kustomer/assets . Si vous souhaitez utiliser vos propres images, veuillez mettre à jour le fichier de configuration.
En option, vous pouvez importer les fichiers .vue et .sass dans vos propres dossiers resources/js et resources/sass , vous permettant de personnaliser fortement les composants et la disposition du composant de rétroaction.
Cela vous permettra également de vous retrouver avec un seul .js et .css compilés dans votre application.
Cependant, vous devez être prudent si vous essayez de mettre à jour la dernière version, car vos modifications pourraient être perdues.
Deux packages npm sont requis :
Vous pouvez les ajouter via npm ou fil.
Nous utilisons axios pour effectuer la requête HTTP afin d'envoyer les commentaires, alors assurez-vous qu'axios est installé et configuré dans votre application vue.
Comme dans le javascript de l'échafaudage Laravel, axios doit être configuré comme ceci :
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' ) ;
} Publiez le composant VueJS :
php artisan vendor:publish --tag=kustomer-vue-componentPubliez le fichier de style SASS :
php artisan vendor:publish --tag=kustomer-sass-componentPuis dans votre application vue :
// app.js
Vue . component ( 'kustomer' , require ( './components/Kustomer/Kustomer.vue' ) ) ; // app.scss
@import ' kustomer ' ;Un feedback a essentiellement 4 attributs :
Une fois qu'un feedback est stocké dans votre base de données, vous pouvez utiliser votre propre backoffice pour afficher et manipuler les données.
Le modèle Feedback fonctionne comme n'importe quel autre modèle Eloquent, il est donc très facile à utiliser dans votre application Laravel.
Vous utilisez Laravel Nova ? Aucun problème !
Si vous utilisez Laravel Nova, vous aurez certainement besoin d'un outil pour visualiser tous les retours que vous avez reçus.
Vous pouvez installer l'outil officiel Laravel Nova ici.
Lorsqu'un nouveau feedback est correctement stocké, nous enverrons un événement Laravel.
Vous pouvez écouter cet événement et déclencher n’importe quel type d’auditeurs. C'est à vous de décider de la suite ! Vous pouvez envoyer un e-mail à l'administrateur, enregistrer certaines données ou tout ce à quoi vous pouvez penser.
Dans votre EventServiceProvider vous pouvez mettre à jour la propriété $listen pour ajouter l'événement.
protected $ listen = [
' MydnicKustomerEventsNewFeedback ' => [
' AppListenersYourOwnListener ' , // change this
],
// ...
];Laravel Kustomer est un logiciel open source sous licence MIT.
Dans ce projet, vous trouverez quelques icônes svg provenant de FlatIcon. Vous êtes libre de les modifier dans votre propre projet.
