แสดงคำแนะนำสินค้าบนหน้าสินค้า
หน้านี้พิมพ์ขึ้นเมื่อ Mar 29, 2024 หากต้องการเวอร์ชันปัจจุบัน โปรดไปที่ https://help.shopify.com/th/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-recommendations
บทแนะนำการใช้งานนี้จะอธิบายวิธีเพิ่มคำแนะนำสินค้าไปยังหน้าสินค้าของคุณในธีม Debut หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานของคำแนะนำสินค้า ให้ดูที่การแสดงคำแนะนำสินค้าบนหน้าสินค้า
ขั้นตอนที่ 1: สร้างส่วน product-recommendations.liquid
- ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีส่วน ให้คลิก “เพิ่มส่วนใหม่”
- ตั้งชื่อส่วนใหม่
product-recommendations
แล้วคลิกที่ “สร้างส่วน”
- แทนที่เนื้อหาทั้งหมดด้วยโค้ดด้านล่าง:
- คลิกที่ “บันทึก”
เมื่อแสดงส่วนพร้อมกับหน้าสินค้า ระบบจะแสดง recommendations.performed
เป็น false
จากนั้น HTML ที่สร้างขึ้นจะแสดงภาพเคลื่อนไหวการโหลด:
หากคุณไม่ต้องการแสดงภาพเคลื่อนไหวการโหลด ให้ใช้โค้ดนี้แทน:
เมื่อแสดงส่วนด้านบนพร้อมกับหน้าสินค้าของคุณ HTML ที่สร้างขึ้นจะเป็นองค์ประกอบ div
ที่ไม่มีเนื้อหา:
หากผู้ใช้ใช้ภาษาท้องถิ่นอื่น ภาษานั้นจะรวมอยู่ใน data-base-url
ของ div ตัวอย่างเช่น /fr/recommendations/products
- จากแอป Shopify ให้แตะที่ปุ่ม …
- ในส่วนช่องทางการขาย ให้แตะที่ร้านค้าออนไลน์
- แตะจัดการธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีส่วน ให้คลิก “เพิ่มส่วนใหม่”
- ตั้งชื่อส่วนใหม่
product-recommendations
แล้วคลิกที่ “สร้างส่วน”
- แทนที่เนื้อหาทั้งหมดด้วยโค้ดด้านล่าง:
- คลิกที่ “บันทึก”
เมื่อแสดงส่วนพร้อมกับหน้าสินค้า ระบบจะแสดง recommendations.performed
เป็น false
จากนั้น HTML ที่สร้างขึ้นจะแสดงภาพเคลื่อนไหวการโหลด:
หากคุณไม่ต้องการแสดงภาพเคลื่อนไหวการโหลด ให้ใช้โค้ดนี้แทน:
เมื่อแสดงส่วนด้านบนพร้อมกับหน้าสินค้าของคุณ HTML ที่สร้างขึ้นจะเป็นองค์ประกอบ div
ที่ไม่มีเนื้อหา:
หากผู้ใช้ใช้ภาษาท้องถิ่นอื่น ภาษานั้นจะรวมอยู่ใน data-base-url
ของ div ตัวอย่างเช่น /fr/recommendations/products
- จากแอป Shopify ให้แตะที่ปุ่ม …
- ในส่วนช่องทางการขาย ให้แตะที่ร้านค้าออนไลน์
- แตะจัดการธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีส่วน ให้คลิก “เพิ่มส่วนใหม่”
- ตั้งชื่อส่วนใหม่
product-recommendations
แล้วคลิกที่ “สร้างส่วน”
- แทนที่เนื้อหาทั้งหมดด้วยโค้ดด้านล่าง:
- คลิกที่ “บันทึก”
เมื่อแสดงส่วนพร้อมกับหน้าสินค้า ระบบจะแสดง recommendations.performed
เป็น false
จากนั้น HTML ที่สร้างขึ้นจะแสดงภาพเคลื่อนไหวการโหลด:
หากคุณไม่ต้องการแสดงภาพเคลื่อนไหวการโหลด ให้ใช้โค้ดนี้แทน:
เมื่อแสดงส่วนด้านบนพร้อมกับหน้าสินค้าของคุณ HTML ที่สร้างขึ้นจะเป็นองค์ประกอบ div
ที่ไม่มีเนื้อหา:
หากผู้ใช้ใช้ภาษาท้องถิ่นอื่น ภาษานั้นจะรวมอยู่ใน data-base-url
ของ div ตัวอย่างเช่น /fr/recommendations/products
ขั้นตอนที่ 2: ใส่ส่วนในเทมเพลต product.liquid
ของคุณ
หากต้องการแสดงคำแนะนำสินค้าที่ด้านล่างของหน้าสินค้า ให้ใส่ส่วนที่ด้านล่างของไฟล์ templates/product.liquid
- ในไดเรกทอรีเทมเพลต ให้เปิดไฟล์ product.liquid
- เพิ่มโค้ดต่อไปนี้ที่ด้านล่างของไฟล์:
- คลิกที่ “บันทึก”
ขั้นตอนที่ 3: แก้ไขไฟล์ theme.js
ของคุณเพื่อโหลดคำแนะนำแบบอะซิงโครนัส
คุณต้องโหลดคำแนะนำลงในคอนเทนเนอร์เปล่าที่ส่วนได้สร้างในหน้าสินค้า ใช้ JavaScript เพื่อส่งคำขอ HTTP GET <base_url>?section_id=<section_id>&product_id=<product_id>
- ในไดเรกทอรีองค์ประกอบ ให้เปิดไฟล์ theme.js
- ค้นหาบรรทัดนี้ของโค้ด:
- ด้านล่างบรรทัดนั้น ให้เพิ่มโค้ดนี้:
- เพิ่มโค้ดต่อไปนี้ที่ด้านล่างของไฟล์:
- คลิกที่ “บันทึก”
ขั้นตอนที่ 4: แก้ไขไฟล์ theme.scss.liquid
ของคุณเพื่อสร้างภาพเคลื่อนไหวการโหลด (ไม่บังคับ)
หากคุณใช้ส่วนย่อยที่แสดงภาพเคลื่อนไหวการโหลดภายในส่วนคำแนะนำสินค้าของคุณ ให้เพิ่มโค้ดต่อไปนี้ที่ด้านล่างไฟล์ assets/theme.scss.liquid
- ในไดเรกทอรีองค์ประกอบ ให้เปิดไฟล์ theme.scss.liquid
- เพิ่มโค้ดนี้ที่ด้านล่างของไฟล์:
- คลิกที่ “บันทึก”