ขั้นตอนที่ 1: รับวิดเจ็ตคีย์ Photta ของคุณ
เข้าสู่ระบบ Photta Business Dashboard ที่ business.photta.app ไปที่ Settings → API Keys และคัดลอก Publishable Key ของคุณซึ่งขึ้นต้นด้วย pk_live_ นี่คือข้อมูลประจำตัวเดียวที่คุณต้องใช้ ก่อนที่คีย์จะเริ่มทำงาน ให้เพิ่มโดเมนร้านค้า WooCommerce ของคุณ (เช่น mystore.com) ใน Settings → Allowed Domains ระบบจะตรวจสอบโดเมนในทุกคำขอการลองชุด ดังนั้นต้องตั้งค่า Allowlist ก่อนเริ่มใช้งานจริง
หากคุณกำลังทดสอบในเครื่องผ่านซับโดเมนอย่าง localhost หรือ URL สำหรับการทดสอบ (staging) ให้เพิ่มโดเมนนั้นใน Allowlist แยกต่างหาก คุณสามารถเพิ่มได้สูงสุด 10 โโดเมนในทุกแผนบริการแบบชำระเงิน บัญชีทดลองใช้งานอนุญาตได้ 1 โดเมน เมื่อโดเมนของคุณอยู่ในรายการแล้ว คำขอจากต้นทางนั้นจะได้รับการยอมรับทันที — ไม่มีการดีเลย์ในการอัปเดต
ขั้นตอนที่ 2: เลือกวิธีระหว่าง Shortcode หรือ Script Tag
WooCommerce มีเส้นทางการผสานการทำงานที่สะอาดตาให้คุณสองวิธี วิธี Shortcode ([photta_widget pk="pk_live_..."]) ช่วยให้คุณวางวิดเจ็ตในตำแหน่งเฉพาะเจาะจงภายในเทมเพลตหน้าสินค้า หรือ WooCommerce hook ที่กำหนดเอง — เหมาะอย่างยิ่งหากคุณต้องการให้ปุ่มปรากฏระหว่างแกลเลอรีรูปภาพและปุ่มเพิ่มลงตะกร้า วิธีการใช้ shortcode ให้วางลงในไฟล์เทมเพลตสินค้าของ WooCommerce โดยตรงที่ single-product/add-to-cart/simple.php หรือใช้บล็อกใน page builder
วิธี Script Tag จะแทรก SDK แบบสากลผ่านไฟล์ functions.php ของธีมโดยใช้ wp_enqueue_script เพิ่มโค้ดต่อไปนี้ลงใน functions.php ของ child theme ของคุณ: add_action('wp_footer', function() { echo '<script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>'; }); วิธีนี้จะแสดงปุ่มวิดเจ็ตในหน้าสินค้าทุกหน้าโดยอัตโนมัติ โดยไม่ต้องเปลี่ยนเทมเพลตทีละส่วน ผู้ค้าส่วนใหญ่ชอบวิธีสคริปต์แท็กเนื่องจากความเรียบง่าย
ขั้นตอนที่ 3: วางและบันทึกส่วนของโค้ดที่คุณเลือก
สำหรับวิธี Shortcode: เปิดไฟล์เทมเพลต WooCommerce ของ child theme สำหรับหน้าสินค้าเดี่ยว วาง [photta_widget pk="pk_live_..."] ในตำแหน่งแนวตั้งที่คุณต้องการให้ปุ่มปรากฏ บันทึกไฟล์ ตัวเรนเดอร์ shortcode จะได้รับการลงทะเบียนโดยตัวช่วยน้ำหนักเบาของ Photta — ไม่จำเป็นต้องมีไฟล์ปลั๊กอิน เนื่องจากตัว SDK จะลงทะเบียนตัวจัดการ shortcode เองเมื่อโหลด
สำหรับวิธี Script Tag: ไปที่ Appearance → Theme File Editor ใน WordPress admin ของคุณ เข้าไปที่ functions.php ของ child theme และเพิ่มโค้ด wp_footer ตามที่แสดงในขั้นตอนที่ 2 คลิก Update File เพื่อบันทึก ตรวจสอบว่าบันทึกสำเร็จโดยรีเฟรชหน้าแก้ไขและยืนยันว่ามีโค้ดอยู่ หากคุณใช้ปลั๊กอินแคช (WP Rocket, W3 Total Cache) ให้ล้างแคชตอนนี้เพื่อให้สคริปต์ footer ใหม่ทำงาน
ขั้นตอนที่ 4: ตรวจสอบการแสดงผลวิดเจ็ตบนร้านค้าของคุณ
เปิดหน้าสินค้าในร้านค้า WooCommerce ของคุณผ่านหน้าต่างไม่ระบุตัวตน (Private window) คุณควรเห็นปุ่ม 'ลองสวมใส่' ใกล้กับส่วนเพิ่มลงตะกร้า คลิกที่ปุ่ม อัปโหลดรูปภาพทดสอบ และตรวจสอบผลลัพธ์การลองสวมใส่ หากปุ่มไม่ปรากฏ ให้เปิดคอนโซลเบราว์เซอร์ (F12) และมองหาข้อผิดพลาดของ photta ข้อผิดพลาด 403 domain error หมายความว่าโดเมนของคุณยังไม่อยู่ในรายการ Allowed Domains
ตรวจสอบด้วยว่ามีสคริปต์ SDK ปรากฏใน source ของหน้าเว็บโดยกด Ctrl+U (View Source) และค้นหาคำว่า photta หากไม่มีแท็กแต่คุณได้เพิ่ม wp_footer hook แล้ว ให้ตรวจสอบอีกครั้งว่าธีมของคุณมีการเรียกใช้ wp_footer() ในเทมเพลตส่วนท้ายหรือไม่ — ธีมรุ่นเก่าหรือธีมที่ปรับแต่งเองมากๆ บางธีมอาจไม่มีการเรียกใช้นี้ การเพิ่ม <?php wp_footer(); ?> ก่อนปิดแท็ก </body> ในไฟล์ footer.php จะช่วยแก้ปัญหานี้ได้
ขั้นตอนที่ 5: ตั้งค่าการแสดงผลตามหมวดหมู่
โดยค่าเริ่มต้น ปุ่มวิดเจ็ตจะปรากฏในหน้าสินค้าทั้งหมด หากต้องการจำกัดเฉพาะบางหมวดหมู่ ให้เพิ่มแอตทริบิวต์ data-categories ลงในสคริปต์แท็กพร้อมรายการ slug หมวดหมู่ WooCommerce ที่คั่นด้วยเครื่องหมายจุลภาค: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-categories="womens-apparel,mens-apparel,swimwear" defer></script> ตัว SDK จะอ่านข้อมูลหมวดหมู่ WooCommerce ของหน้าปัจจุบันและซ่อนปุ่มในหน้าที่ไม่ตรงกันโดยอัตโนมัติ
สำหรับผู้ใช้ shortcode ให้วาง shortcode เฉพาะในเทมเพลตที่เกี่ยวข้องกับหมวดหมู่เป้าหมาย หรือใช้เงื่อนไข WooCommerce: ใช้ฟังก์ชัน PHP has_term() เพื่อตรวจสอบว่าสินค้าปัจจุบันอยู่ในหมวดหมู่เป้าหมายหรือไม่ก่อนจะแสดงผล shortcode รูปแบบนี้ช่วยให้คุณควบคุมการแสดงตัวเลือกการลองสวมใส่ในสินค้าบางประเภทได้อย่างแม่นยำโดยไม่ต้องสร้างเทมเพลตซ้ำซ้อน