# Shopify

เพิ่ม DailyPlay ในร้าน Shopify เพื่อให้ลูกค้าเล่นเกมโดยไม่ต้องออกจากหน้าร้าน

## ตัวเลือกการฝัง

| วิธี | ประเภท | สถานะ |
| ---- | ------ | ----- |
| **Custom Liquid** | ปุ่มเล่นแบบลอย | พร้อมใช้งาน |
| **iframe ธรรมดา** | เกม inline ในหน้า | พร้อมใช้งาน — ดู[ฝังในเว็บไซต์](/th/sharing/embed) |
| **แอป Shopify** | App embed ในตัวปรับแต่งธีม | เร็วๆ นี้ |

---

## ปุ่มเล่นแบบลอย (Custom Liquid)

วิธีที่แนะนำสำหรับ Shopify ปุ่ม **Play** แบบลอยจะแสดงในทุกหน้าที่เพิ่ม snippet คลิกแล้วเปิดเกมในโอเวอร์เลย์เต็มหน้าจอ

### ขั้นตอนที่ 1 — รับโค้ดฝัง

1. ใน DailyPlay เปิดเกมที่เผยแพร่แล้ว
2. คลิก **แชร์/ฝัง** → **ฝัง**
3. เลือก **ปุ่มเล่นแบบลอย**
4. เลือก **Shopify**
5. ตรวจสอบว่าเลือก **Custom HTML** (ตัวเลือกแอป/ปลั๊กอินยังไม่พร้อม)
6. ปรับข้อความและสีปุ่มตามต้องการ
7. คัดลอก snippet

### ขั้นตอนที่ 2 — เพิ่มในธีม

1. ใน Shopify admin ไปที่ **Online Store** → **Themes**
2. คลิก **Customize** บนธีม live หรือ draft
3. ไปที่เทมเพลตที่ต้องการเกม (เช่น **Home page** สำหรับทั้งไซต์ หรือเทมเพลตหน้าเฉพาะ)
4. คลิก **Add section** → **Custom Liquid**
5. วาง Liquid snippet ที่คัดลอก
6. คลิก **Save**

โค้ดที่สร้างใช้ตัวแปร Shopify Liquid ดังนั้น origin ร้านจะตั้งอัตโนมัติ:

```liquid
{%- assign dp_origin = request.origin | default: shop.url | url_param_escape -%}
```

ไม่ต้องแทนที่ URL origin ด้วยตนเอง — Shopify กรอกตอน render

### snippet ประกอบด้วย

- `<link>` ไปยัง CSS วิดเจ็ตลอยของ DailyPlay
- โหลด `dailyplay-widget.js` แบบ defer
- ปุ่ม Play แบบลอย (มุมล่างขวา)
- โมดัลซ่อนพร้อม iframe เกมชี้ไป `/embed/[game-id]/widget?origin=...`

---

## ทั้งไซต์ vs หน้าเดียว

| เป้าหมาย | ที่เพิ่ม Custom Liquid |
| -------- | ---------------------- |
| ปุ่มทุกหน้า | กลุ่ม **footer** ของธีม หรือส่วนที่รวมใน layout เริ่มต้น |
| ปุ่มหน้าเดียว | เทมเพลตหน้านั้นในตัวแก้ไขธีม |
| เกม inline ในหน้า | ใช้[ฝัง iframe](/th/sharing/embed) ใน HTML editor ของหน้าแทน |

---

## iframe ธรรมดาในหน้าหรือสินค้า

สำหรับเกมฝังตรงในเนื้อหาหน้า (ไม่ลอย):

1. ใน DailyPlay เลือก **Simple iframe** ในแผงฝัง
2. คัดลอกโค้ด iframe
3. ใน Shopify admin แก้ไขหน้าหรือสินค้า
4. คลิก **Show HTML** ใน rich text editor
5. วางโค้ด iframe
6. บันทึก

ดู[ฝังในเว็บไซต์](/th/sharing/embed) สำหรับขนาดและเลย์เอาต์ responsive

---

## แอป Shopify (เร็วๆ นี้)

กำลังพัฒนาแอป DailyPlay สำหรับ Shopify พร้อมบล็อก **App embed** เมื่อพร้อม:

1. ติดตั้งแอป DailyPlay จาก Shopify App Store
2. ไปที่ **Online Store** → **Themes** → **Customize**
3. เปิด **App embeds**
4. เปิด **DailyPlay Floating Widget**
5. ตั้งค่า game ID, ข้อความปุ่ม และสีในการตั้งค่า embed

จนกว่าแอปจะเผยแพร่ ใช้ **Custom Liquid** ตามด้านบน

---

## แก้ปัญหา

### Liquid snippet แสดงเป็นข้อความธรรมดา

- ยืนยันว่าเพิ่มส่วน **Custom Liquid** ไม่ใช่บล็อกข้อความหรือ HTML ธรรมดา
- Custom Liquid รับเฉพาะ Liquid + HTML — อย่าห่อ snippet ด้วย `<script>` เพิ่มจากธีม

### เกมโหลดแต่ analytics แสดงโดเมนผิด

- เทมเพลต Liquid ใช้ `request.origin` — ตรวจสอบว่า URL ร้านใน Shopify ตรงกับโดเมนสาธารณะ
- หากใช้โดเมนกำหนดเอง ตรวจสอบว่าตั้งเป็น primary domain

### ปุ่มถูกบังโดยองค์ประกอบธีม

- วิดเจ็ตใช้ `z-index` สูง (2147483000) หากยังถูกบัง ตรวจสอบ header ติดหรือ chat widget ที่มี stacking สูงกว่า

### Content Security Policy

ธีม Shopify Online Store 2.0 โดยทั่วไปอนุญาตสคริปต์บุคคลที่สามใน Custom Liquid หากธีมหรือแอปบังคับ CSP ให้เพิ่ม `https://app.dailyplay.ai` ใน `script-src`, `style-src` และ `frame-src`

---

## ขั้นตอนถัดไป

- [ภาพรวมปุ่มเล่นแบบลอย](/th/sharing/floating-play-button)
- [ฝังในเว็บไซต์](/th/sharing/embed)
- [ติดตามการวิเคราะห์](/th/sharing/analytics)