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

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

แพลตฟอร์ม:

The Easy Way: Install the Asyntai Extension

We publish a free extension on the OpenCart Marketplace. It puts the chatbot on your storefront and connects your account, and there is no code to copy and no template to edit. It works on OpenCart 3.x and 4.x.

Download Asyntai - AI Chatbot from the OpenCart Marketplace
In your admin panel, go to Extensions → Installer and upload the ZIP file
Go to Extensions → Extensions, choose Modules in the list, find Asyntai AI Chatbot and press the green install button
Press edit, then press Connect to Asyntai. A window opens where you sign in or create an account.

That is all. The chatbot is live on your storefront when the window closes.

Your products, prices and stock

When you connect, the extension also lets Asyntai read your catalogue. Your assistant then answers with the price you charge today and tells shoppers what is in stock, instead of repeating whatever your pages said when they were last read.

Asyntai reads your products through a read-only address on your own store. Every request is signed, and the reply carries the prices a shopper would actually pay, with your tax rules already applied. You can switch this off at any time on the extension's settings screen.

Updating from version 1.0.0? OpenCart clears a module's settings when you uninstall it, so press Connect to Asyntai once after the update. From this version on, updates keep your connection.

Or Add the Code Yourself

Prefer not to install an extension? The rest of this page shows how to add the chatbot by hand. You will not get the catalogue reading this way.

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

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

<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 ส่วนตัวของคุณ

Step 2: Edit Footer Template

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

เข้าถึงไฟล์ 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 เพื่อเพิ่มสคริปต์แบบกำหนดเอง:

Go to the 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 แล้ว ไปที่แผงควบคุม คลิกไอคอนเฟืองสีน้ำเงินที่มุมขวาบน และคลิกปุ่มรีเฟรช ลองล้างแคชเบราว์เซอร์หรือดูในหน้าต่างไม่ระบุตัวตน หากคุณแก้ไขไฟล์เทมเพลตผิด ให้ตรวจสอบว่าธีมของคุณใช้ไฟล์ที่คุณแก้ไข

เอกสาร