วิธีเพิ่มแชทบอท AI Asyntai ลงใน Bagisto

คู่มือทีละขั้นตอนสำหรับแพลตฟอร์มอีคอมเมิร์ซ Bagisto

แพลตฟอร์ม:

ขั้นตอนที่ 1: รับโค้ดฝังตัวของคุณ

ก่อนอื่น ไปที่แดชบอร์ด Asyntai ของคุณและเลื่อนลงไปที่ส่วน "Embed Code" คัดลอกโค้ดฝังตัวเฉพาะของคุณซึ่งจะมีลักษณะดังนี้:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

หมายเหตุ: โค้ดด้านบนเป็นเพียงตัวอย่าง คุณต้องคัดลอกโค้ดฝังตัวเฉพาะของคุณจากแดชบอร์ดเนื่องจากมี widget ID ส่วนตัวของคุณ

ขั้นตอนที่ 2: เพิ่มลงในเทมเพลต Blade Layout (แนะนำ)

Bagisto ใช้เทมเพลต Laravel Blade วิธีที่แนะนำคือเพิ่มโค้ดฝังตัวลงในไฟล์เลย์เอาต์ร้านค้าโดยตรง:

เปิดไฟล์เลย์เอาต์ร้านค้า:
- แหล่งแพ็คเกจ: packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php
- เวอร์ชันที่เผยแพร่: resources/views/vendor/shop/layouts/master.blade.php (หากคุณได้เผยแพร่ views แล้ว)
ค้นหาแท็กปิด </body>
เพิ่มโค้ดฝังตัวก่อน </body> หลังจาก @stack('scripts'):

@stack('scripts')
<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
</body>

เคล็ดลับ: หากคุณได้เผยแพร่ vendor views แล้ว ให้แก้ไขเวอร์ชันที่เผยแพร่ใน resources/views/vendor/shop/ มิฉะนั้น ให้เผยแพร่ก่อนด้วย php artisan vendor:publish --tag=shop-views เพื่อหลีกเลี่ยงการสูญเสียการเปลี่ยนแปลงระหว่างการอัปเดตแพ็คเกจ

วิธีทางเลือกที่ 1: ใช้ @push('scripts') ใน View

ในมุมมอง Blade หรือคอมโพเนนต์ใดก็ได้ คุณสามารถใช้ scripts stack เพื่อฉีดสคริปต์แชทบอท:

@push('scripts')
    <script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
@endpush

หมายเหตุ: วิธีนี้ต้องการให้ @stack('scripts') อยู่ในไฟล์เลย์เอาต์หลัก ซึ่งรวมอยู่โดยค่าเริ่มต้นในเลย์เอาต์ของ Bagisto

วิธีทางเลือกที่ 2: ใช้ Service Provider

คุณสามารถใช้ service provider เพื่อทำให้สคริปต์พร้อมใช้งานในทุก view โดยทางโปรแกรม สร้าง service provider ที่กำหนดเองหรือใช้ AppServiceProvider:

public function boot()
{
    view()->composer('shop::layouts.master', function ($view) {
        // The script will be available in the layout
    });
}

หรือสร้าง Blade component ที่แสดงแท็กสคริปต์และรวมไว้ในเลย์เอาต์ของคุณ

เคล็ดลับ: วิธี service provider มีประโยชน์หากคุณต้องการโหลดแชทบอทตามเงื่อนไขตามค่าการกำหนดค่าหรือการตั้งค่าสภาพแวดล้อม

วิธีทางเลือกที่ 3: ใช้ระบบ Event ของ Bagisto

Bagisto เรียก view events ที่จุดต่างๆ ในเลย์เอาต์ คุณสามารถ listen ที่ bagisto.shop.layout.body.after เพื่อฉีดสคริปต์แชทบอท:

Event::listen('bagisto.shop.layout.body.after', function($viewRenderEventManager) {
    $viewRenderEventManager->addTemplate('shop::partials.asyntai-widget');
});

จากนั้นสร้างเทมเพลตบางส่วนที่ packages/Webkul/Shop/src/Resources/views/partials/asyntai-widget.blade.php (หรือเทียบเท่าที่เผยแพร่แล้ว) ด้วยโค้ดฝังตัวของคุณ:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

หมายเหตุ: วิธีระบบ event ช่วยให้การเปลี่ยนแปลงของคุณเป็นโมดูลาร์และแยกจากไฟล์เลย์เอาต์หลัก ทำให้จัดการได้ง่ายขึ้นระหว่างการอัปเกรด Bagisto

ขั้นตอนที่ 3: ล้างแคชและยืนยัน

หลังจากเพิ่มโค้ดฝังตัว ล้างแคชแอปพลิเคชันเพื่อให้แน่ใจว่าการเปลี่ยนแปลงมีผล:

php artisan cache:clear && php artisan view:clear

เข้าชมร้านค้า Bagisto ของคุณในแท็บเบราว์เซอร์ใหม่หรือหน้าต่างไม่ระบุตัวตน คุณควรเห็นปุ่มวิดเจ็ตแชทที่มุมล่างขวา คลิกเพื่อให้แน่ใจว่าเปิดและทำงานได้อย่างถูกต้อง

ไม่เห็นวิดเจ็ต? ตรวจสอบให้แน่ใจว่าคุณรันทั้ง php artisan cache:clear และ php artisan view:clear ลองล้างแคชเบราว์เซอร์หรือดูในหน้าต่างไม่ระบุตัวตน หากคุณแก้ไขแหล่งแพ็คเกจโดยตรง ตรวจสอบว่าไม่มี views ที่เผยแพร่แล้วเขียนทับการเปลี่ยนแปลงของคุณ ตรวจสอบว่าโค้ดฝังตัวถูกวางอย่างถูกต้องก่อนแท็กปิด </body>