วิธีเพิ่มแชทบอท AI Asyntai ไปยัง OpenCart

คู่มือทีละขั้นตอนสำหรับเว็บไซต์ OpenCart

แพลตฟอร์ม:

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

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

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

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

ขั้นตอนที่ 2: แก้ไขเทมเพลตส่วนท้าย (แนะนำ)

วิธีที่ตรงไปตรงมาที่สุดในการเพิ่มแชทบอทคือแก้ไขเทมเพลตส่วนท้ายของธีม:

เข้าถึงไฟล์ OpenCart ของคุณผ่าน FTP หรือตัวจัดการไฟล์
นำทางไปยังเทมเพลตส่วนท้ายของธีม:
- OpenCart 3.x/4.x: catalog/view/theme/YOUR_THEME/template/common/footer.twig
- OpenCart 2.x: catalog/view/theme/YOUR_THEME/template/common/footer.tpl
เปิดไฟล์ส่วนท้ายเพื่อแก้ไข
ค้นหาแท็กปิด </body>
วางโค้ดฝังตัว Asyntai ของคุณก่อนแท็ก </body>
บันทึกไฟล์
ล้างแคช OpenCart: Dashboard → ไอคอนเฟืองสีน้ำเงิน (มุมขวาบน) → Refresh หรือลบเนื้อหาของ system/storage/cache/

เคล็ดลับ: หากคุณใช้ธีมเริ่มต้น เส้นทางจะเป็น catalog/view/theme/default/template/common/footer.twig สร้างสำเนาสำรองก่อนแก้ไขไฟล์เทมเพลตเสมอ

ทางเลือก: การใช้ตัวเลือก Custom Code ของธีม

ธีม OpenCart สมัยใหม่หลายตัวมีตัวเลือกในตัวสำหรับโค้ดแบบกำหนดเอง:

เข้าสู่ระบบแผงควบคุม OpenCart Admin ของคุณ
ไปที่ Extensions → Themes (หรือ Extensions → Extensions → Themes)
คลิก Edit บนธีมที่ใช้งานอยู่
มองหาส่วน "Custom Code", "Footer Scripts" หรือ "Custom JavaScript"
วางโค้ดฝังตัว Asyntai ของคุณ
คลิก "Save"
ล้างแคช

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

ทางเลือก: การใช้ส่วนขยาย Custom Code

คุณสามารถติดตั้งส่วนขยายฟรีจาก OpenCart Marketplace เพื่อเพิ่มสคริปต์แบบกำหนดเอง:

ไปที่ OpenCart Marketplace
ค้นหา "Custom Script", "Header Footer Scripts" หรือ "Custom Code"
ดาวน์โหลดและติดตั้งส่วนขยายที่เหมาะสม
ในแผงควบคุมของคุณ ไปที่ Extensions → Extensions → Modules
ค้นหาและติดตั้งโมดูลโค้ดแบบกำหนดเอง
กำหนดค่าโมดูลและวางโค้ดฝังตัว Asyntai ของคุณในส่วนท้าย
บันทึกและล้างแคช

สำคัญ: แนะนำให้ใช้ส่วนขยายแทนการแก้ไขไฟล์หลัก เนื่องจากจะคงอยู่หลังการอัปเดต OpenCart ส่วนขยายยอดนิยมรวมถึง "Custom Script in Header & Footer" ที่มีอยู่บน marketplace

ทางเลือก: การใช้เมธอด addScript (สำหรับนักพัฒนา)

สำหรับนักพัฒนา OpenCart 3.x/4.x มีวิธีเชิงโปรแกรมในการเพิ่มสคริปต์:

เปิด catalog/controller/common/footer.php
เพิ่มบรรทัดต่อไปนี้ก่อน $data['scripts'] = $this->document->getScripts('footer');:
$this->document->addScript('https://asyntai.com/static/js/chat-widget.js', 'footer');
สำหรับ data attribute คุณต้องแก้ไข footer.twig เพื่อรวมมันด้วยตนเอง หรือเพิ่ม JavaScript แบบ inline หลังจากลูปสคริปต์

หมายเหตุ: เพื่อให้วิดเจ็ตทำงานได้อย่างถูกต้องกับ data attribute วิธีเทมเพลตจะง่ายกว่าเนื่องจากเมธอด addScript ไม่รองรับ custom attribute โดยตรง

ขั้นตอนที่ 3: ยืนยันการติดตั้ง

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

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