Ideal House
ข้ามไปยังเนื้อหา

การเชื่อมต่อ WordPress#

เพิ่ม ideal.house Room Visualizer ไปยังไซต์ WordPress โดยโหลดสคริปต์เบราว์เซอร์สาธารณะหนึ่งตัวและเรนเดอร์คอนเทนเนอร์ที่มีรหัสสินค้าตรงกับ SKU ในแคตตาล็อกที่นำเข้าแล้ว

สถานะการตรวจสอบ: ตรวจสอบเอกสารเมื่อ 7 กันยายน 2569 คู่มือนี้ยังไม่ได้รับการยืนยันการทำงานตั้งแต่ต้นจนจบกับธีม WordPress ของลูกค้า ก่อนเผยแพร่ ให้ตรวจสอบกับสำเนาในสภาพแวดล้อมทดสอบของธีมและเครื่องมือสร้างหน้าเวอร์ชันที่คุณใช้จริง

ก่อนโหลด SDK: เปิด แดชบอร์ด → การตั้งค่า, เพิ่มต้นทางของหน้างานออนไลน์ของคุณไปยัง Allowed Origins (CORS) และคลิก บันทึก รวมชื่อโฮสต์ที่เผยแพร่และต้นทางใดๆ สำหรับพรีวิวหรือสเตจจิ้งที่คุณใช้; แยกต้นทางหลายรายการด้วยเครื่องหมายจุลภาค ดู ขั้นตอนการตั้งค่า

ขอบเขตและข้อกำหนดเบื้องต้น#

คู่มือนี้ออกแบบสำหรับไซต์เนื้อหา WordPress, ธีมแบบคลาสสิก, ธีมแบบบล็อก และ page builder ที่อนุญาตให้คุณเพิ่ม HTML หากไซต์ใช้ข้อมูลสินค้า WooCommerce ให้ใช้ คู่มือ WooCommerce สำหรับการเลือก variant

เตรียม:

  • สิทธิ์ผู้ดูแลระบบ และสำหรับวิธีการที่ถาวร ให้มีธีมลูก (child ธีม) หรือปลั๊กอินเฉพาะไซต์ขนาดเล็ก
  • Shop ID และ Publishable Key จากแดชบอร์ด ideal.house;
  • สินค้านำเข้า ideal.house แล้วหนึ่งรายการพร้อม sku ที่ทราบ;
  • หน้า สภาพแวดล้อมทดสอบก่อนเผยแพร่ ที่สามารถปิด cache/minification ได้ระหว่างทดสอบ

Publishable Key ออกแบบมาสำหรับ markup ในเบราว์เซอร์ ห้ามวางคีย์ Client Secret หรือ AI API ใน WordPress HTML

ยืนยันสัญญา SDK#

การติดตั้งที่รองรับขนาดเล็กที่สุดคือสคริปต์ SDK หนึ่งตัวและคอนเทนเนอร์ปุ่มที่สร้างขึ้นมาหนึ่งตัว:

html
<script
  src="https://sdk.ideal.house/sdk.js"
  data-shop-id="<SHOP_ID>"
  data-publishable-key="<PUBLISHABLE_KEY>"
  async
></script>

<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>

data-product-code ต้องเท่ากับ sku ในแคตตาล็อก รวมถึงตัวพิมพ์ใหญ่/เล็กและเครื่องหมายวรรคตอน SDK เป็นเจ้าของเนื้อหาภายในคอนเทนเนอร์ WordPress ไม่ได้ให้ปลั๊กอิน ideal.house ในคู่มือนี้

ติดตั้งสคริปต์ทั้งไซต์#

WordPress แนะนำให้โหลดสคริปต์ส่วนต่อหน้า (front-end) ผ่าน wp_enqueue_script() เพิ่มโค้ดต่อไปนี้ลงใน functions.php ของธีมลูก (child ธีม) หรือปลั๊กอินเฉพาะไซต์ ตัวกรอง (filter) นี้จะเพิ่มแอตทริบิวต์ข้อมูล (data attributes) ที่จำเป็นสองตัวให้กับแท็กที่ WordPress สร้างขึ้น

php
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script(
        'idealhouse-room-visualizer',
        'https://sdk.ideal.house/sdk.js',
        array(),
        null,
        array('strategy' => 'async', 'in_footer' => true)
    );
});

add_filter('script_loader_tag', function ($tag, $handle) {
    if ($handle !== 'idealhouse-room-visualizer') {
        return $tag;
    }

    return str_replace(
        '<script ',
        '<script data-shop-id="<SHOP_ID>" data-publishable-key="<PUBLISHABLE_KEY>" ',
        $tag
    );
}, 10, 2);

แทนที่ตัวแปรทั้งสอง WordPress เวอร์ชันก่อน 6.3 ไม่รองรับรูปแบบอาร์เรย์ของอาร์กิวเมนต์สุดท้ายของ wp_enqueue_script(); ให้ส่ง true แทน และใช้ตัวกรอง script_loader_tag เพื่อเพิ่ม async ด้วย

อย่าติดตั้ง SDK ซ้ำในบล็อก Code หรือ tag manager ใน DevTools คำสั่ง document.querySelectorAll('script[src="https://sdk.ideal.house/sdk.js"]').length ควรคืนค่าเป็น 1

วางปุ่ม#

ใน block editor ให้เพิ่มบล็อก Custom HTML ที่ตำแหน่งที่ปุ่มควรปรากฏ:

html
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>

สำหรับการ์ดที่ซ้ำกัน ให้เรนเดอร์ markup เดิมจากเทมเพลตธีม และ escape โค้ดเป็นแอตทริบิวต์ HTML:

php
<div
  data-idealhouse-button-container
  data-product-code="<?php echo esc_attr($idealhouse_product_code); ?>"
></div>

ธีมหรือปลั๊กอินของคุณต้องให้ $idealhouse_product_code ห้ามใช้ post ID, slug หรือชื่อเรื่อง เว้นแต่ค่าดังกล่าวจะเป็น sku ของ ideal.house ที่นำเข้าแล้วด้วย

การแมปสินค้าและตัวแปร#

สร้างตารางการแมปที่ชัดเจนก่อนเปิดตัว:

ค่า WordPressค่า ideal.houseกฎ
ฟิลด์แบบกำหนดเอง เช่น idealhouse_skuskuตรงกันตามตัวอักษร
หนึ่งหน้าโดยไม่มีตัวแปรสินค้าที่นำเข้าหนึ่งรายการหนึ่งคอนเทนเนอร์
รายการคอลเลกชันจากเครื่องมือสร้างหน้าฟิลด์ SKU ระดับรายการห้ามใช้รหัสระดับคอลเลกชันซ้ำ

หากหน้าเปลี่ยนระหว่าง variant ตัว adapter ของลูกค้าต้องตั้งค่า data-product-code ใหม่ ล้างคอนเทนเนอร์เก่าก่อนแทรกคอนเทนเนอร์ใหม่ เพื่อไม่ให้สถานะ viewer ที่ล้าสมัยถูกนำกลับมาใช้ใหม่:

js
function renderIdealhouseButton(host, sku) {
  host.replaceChildren();
  if (!sku) return;

  const container = document.createElement('div');
  container.dataset.idealhouseButtonContainer = '';
  container.dataset.productCode = sku.trim();
  host.append(container);
}

นี่คือโค้ด adapter ของลูกค้า ไม่มีการเรียกใช้เมธอด ideal.house ที่ไม่มีเอกสารระบุ หรือสร้างเหตุการณ์ WordPress ขึ้นมาเอง ให้เรียกใช้จาก ฟังก์ชันเรียกกลับ ที่ระบุในเอกสารซึ่งธีมหรือ page builder ของคุณให้มา

การนำทางแบบไดนามิกและแคช#

สำหรับตัวกรอง AJAX, infinite scroll, การ์ดสินค้าแบบ modal หรือการเปลี่ยนหน้าของ page builder ให้แทรกคอนเทนเนอร์ใหม่หลังจากโหนดสินค้านั้นอยู่ใน DOM แล้ว ห้าม clone คอนเทนเนอร์ที่ SDK เติมข้อมูลแล้ว หากเครื่องมือของคุณไม่มี render ฟังก์ชันเรียกกลับ ที่เสถียร ให้เพิ่มคอนเทนเนอร์ในเทมเพลตรายการ เพื่อให้การเรนเดอร์ทุกครั้งสร้าง markup ที่สะอาด

หลังจากแก้ไขธีม ให้ล้างแคชของ WordPress, CDN และปลั๊กอินเพิ่มประสิทธิภาพ ยกเว้น https://sdk.ideal.house/sdk.js จากการเขียนใหม่แบบหน่วงเวลา (delay/defer) หากปลั๊กอินประสิทธิภาพลบแอตทริบิวต์ข้อมูลของมันหรือชะลอการโหลดจนกว่าจะเกิดปฏิสัมพันธ์

นำเข้าข้อมูลแคตตาล็อก#

เนื้อหา WordPress ไม่ซิงค์อัตโนมัติ ส่งออกฟิลด์แบบกำหนดเองที่เลือกเป็น sku และนำเข้ารายการที่ตรงกันผ่าน การอัปโหลดสินค้า ดำเนินการต่อด้วย นำเข้าสินค้า, สถานะงาน, ดูรายการสินค้า, อัปเดตสินค้า, ลบสินค้า และ ข้อผิดพลาดและการลองใหม่

ตรวจสอบก่อนเผยแพร่#

  1. เปิด สภาพแวดล้อมทดสอบก่อนเผยแพร่ ในหน้าต่างเบราว์เซอร์แบบส่วนตัว ไม่ใช่การดูตัวอย่างใน editor ของ WordPress
  2. ยืนยันว่าคำขอ SDK คืนค่าสำเร็จและเพียงครั้งเดียว
  3. ตรวจสอบคอนเทนเนอร์และเปรียบเทียบ data-product-code ทีละตัวอักษรกับ sku ที่นำเข้า
  4. ยืนยันว่า SKU ที่นำเข้าแล้วสร้าง control ของ visualizer ที่ใช้งานได้ และ SKU ที่ไม่รู้จักจะไม่แสดง control ที่เสียหาย
  5. ทดสอบการนำทางของ page builder, ตัวกรอง, การย้อนกลับ/ไปข้างหน้าของเบราว์เซอร์, เลย์เอาต์มือถือ และการตั้งค่าการยินยอม (consent)
  6. เลือกตัวแปรที่รองรับทั้งหมดและยืนยันว่าคอนเทนเนอร์ถูกสร้างใหม่พร้อม SKU ของมัน
  7. ตรวจสอบคอนโซลเบราว์เซอร์และทดสอบโดยเปิดใช้งานแคช/การย่อโค้ดอีกครั้ง

ลบการเชื่อมต่อ#

ลบฟังก์ชัน enqueue และตัวกรอง script_loader_tag จากนั้นลบบล็อกหรือส่วนเทมเพลต data-idealhouse-button-container ทั้งหมด ล้างแคชทั้งหมดและยืนยันว่า SDK URL ไม่มีอยู่ใน source ของหน้าและ Network panel

แหล่งอ้างอิงแพลตฟอร์มอย่างเป็นทางการ#