laravel feedback component

เนื่องจากการละเมิดลิขสิทธิ์ที่โง่เขลา ฉันจึงต้องเปลี่ยนชื่อแพ็คเกจนี้

โปรดทราบว่าไม่มีการเปลี่ยนแปลงใดๆ ในโค้ด (ยังคงเป็นเนมสเปซเดิม) มีเพียงชื่อแพ็กเกจเท่านั้นที่มีการเปลี่ยนแปลง เนมสเปซอาจมีการเปลี่ยนแปลงในภายหลังในรุ่นหลัก

องค์ประกอบคำติชมที่ปรับแต่งได้สำหรับ Laravel

• การแนะนำ
  • ระบบแชท
• การสาธิต
• การติดตั้งและการกำหนดค่า
  • การกำหนดค่า
  • การแปล
  • แสดงส่วนประกอบ
  • กำลังอัปเดต
  • รวมสินทรัพย์เข้ากับสินทรัพย์ของคุณเอง
    • ข้อกำหนดเบื้องต้น
    • ติดตั้ง
• รับคำติชม
  • เครื่องมือโนวา
• กิจกรรม งาน การแจ้งเตือน ฯลฯ
• ใบอนุญาต

การแนะนำ

laravel feedback component ช่วยให้คุณใช้ส่วนประกอบคำติชมของลูกค้าบนเว็บไซต์ของคุณได้อย่างง่ายดาย มันสร้างด้วย VueJS แต่สามารถนำไปใช้ใน Laravel Project ทุกประเภท คุณเพียงแค่ต้องวางสองสามบรรทัดในเค้าโครงของคุณ

คุณคงรู้จักเว็บไซต์จำนวนมากที่ใช้ระบบแชทของอินเตอร์คอม หรือ 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/ คุณจะพบไฟล์ css และ js ที่คอมไพล์แล้วซึ่งจำเป็นต้องรวมไว้ในเลย์เอาต์ html ของคุณ

รวมสิ่งเหล่านี้ไว้ในหน้าที่คุณต้องการให้ส่วนประกอบปรากฏ :

< 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 ที่คอมไพล์แล้วอีกครั้ง รวมถึงไฟล์ svg ที่อยู่ใน public/vendor/kustomer/assets ด้วย หากคุณต้องการใช้รูปภาพของคุณเอง โปรดอัปเดตไฟล์การกำหนดค่า

รวมสินทรัพย์เข้ากับสินทรัพย์ของคุณเอง

อีกทางหนึ่ง คุณสามารถนำเข้าไฟล์ .vue และ .sass ลงในโฟลเดอร์ resources/js และ resources/sass ของคุณเองได้ ซึ่งช่วยให้คุณสามารถปรับแต่งส่วนประกอบและโครงร่าง Feedback Component ได้อย่างมาก

นอกจากนี้ยังช่วยให้คุณมี .js และ .css ที่คอมไพล์แล้วเพียงไฟล์เดียวในแอปของคุณ

อย่างไรก็ตาม คุณควรใช้ความระมัดระวังหากคุณพยายามอัปเดตเวอร์ชันล่าสุด เนื่องจากการเปลี่ยนแปลงของคุณอาจสูญหาย

ข้อกำหนดเบื้องต้น

จำเป็นต้องมีแพ็คเกจ npm สองแพ็คเกจ:

• axios
• html2canvas.html

คุณสามารถเพิ่มได้ผ่านทาง npm หรือเส้นด้าย

เรากำลังใช้ axios เพื่อส่งคำขอ HTTP เพื่อส่งข้อเสนอแนะ ดังนั้นตรวจสอบให้แน่ใจว่าได้ติดตั้ง axios ที่กำหนดค่าไว้ในแอป vue ของคุณแล้ว

เช่นเดียวกับในจาวาสคริปต์นั่งร้าน 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 ' ;

รับคำติชม

Feedback โดยพื้นฐานแล้วมีคุณลักษณะ 4 ประการ:

• ประเภท : แสดงถึง "หมวดหมู่" ของคำติชม (ข้อบกพร่อง การถูกใจ คำแนะนำ ฯลฯ)
• ข้อความ : ข้อความที่พิมพ์จากผู้เยี่ยมชมของคุณ
• ข้อมูลผู้ใช้ : คอลัมน์ JSON ที่มีข้อมูลทุกประเภทเกี่ยวกับคำขอของผู้ใช้
• ตรวจสอบแล้ว : คอลัมน์บูลีนที่อนุญาตให้ทำเครื่องหมายความคิดเห็นว่า "ตรวจสอบแล้ว"

เมื่อคำติชมถูกจัดเก็บไว้ในฐานข้อมูลของคุณ คุณสามารถใช้ backoffice ของคุณเองเพื่อแสดงและจัดการข้อมูลได้

โมเดล Feedback ทำงานเหมือนกับโมเดล Eloquent อื่นๆ ดังนั้นจึงใช้งานง่ายมากในแอปพลิเคชัน Laravel ของคุณ

ใช้ Laravel Nova ใช่ไหม? ไม่มีปัญหา !

ใช้กับ Laravel Nova

หากคุณใช้ Laravel Nova คุณจะต้องการเครื่องมือเพื่อแสดงภาพการตอบรับทั้งหมดที่คุณได้รับอย่างแน่นอน

คุณสามารถติดตั้งเครื่องมือ Laravel Nova อย่างเป็นทางการได้ที่นี่

กิจกรรม งาน การแจ้งเตือน ฯลฯ

เมื่อมีการจัดเก็บข้อเสนอแนะใหม่อย่างถูกต้อง เราจะส่งเหตุการณ์ Laravel

คุณสามารถฟังเหตุการณ์นี้และกระตุ้นผู้ฟังประเภทใดก็ได้ ขึ้นอยู่กับคุณแล้วว่าจะเกิดอะไรขึ้นต่อไป! คุณสามารถส่งอีเมลถึงผู้ดูแลระบบ บันทึกข้อมูลบางส่วน หรืออะไรก็ได้ที่คุณคิดได้

ใน EventServiceProvider ของคุณ คุณสามารถอัปเดตคุณสมบัติ $listen เพื่อเพิ่มกิจกรรมได้

 protected $ listen = [
    ' MydnicKustomerEventsNewFeedback ' => [
        ' AppListenersYourOwnListener ' , // change this
    ],

    // ...
];

ใบอนุญาต

Laravel Kustomer เป็นซอฟต์แวร์โอเพ่นซอร์สที่ได้รับอนุญาตภายใต้ใบอนุญาต MIT

ในโครงการนี้คุณจะพบไอคอน svg ที่มาจาก FlatIcon คุณสามารถเปลี่ยนแปลงได้ตามต้องการในโครงการของคุณเอง