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

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

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

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

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

เตรียมร้านค้า Shoplazza สำหรับพัฒนา/เมอชานต์ การเข้าถึงซอร์สโค้ดธีมหรือแอป-การขยาย, Shop ID, Publishable Key และบันทึกที่นำเข้าสำหรับ SKU ตัวแปรที่รองรับ คัดลอกธีมของเมอชานต์ก่อนปรับแต่ง

ธีม แอป ส่วนขยาย เป็นเส้นทางที่บำรุงรักษาและนำกลับมาใช้ใหม่ได้ แอป Block จะแทรก UI ที่มองเห็นได้และต้องถูกเพิ่มโดยผู้ค้าไปยังส่วนสินค้าที่เข้ากันได้ ส่วน แอป Embed สามารถโหลดพฤติกรรมระดับสากลได้

สัญญา 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>

Shoplazza มีเอกสารระบุ variant.sku; ใช้สตริงนั้นอย่างแม่นยำเป็น ideal.house sku

เพิ่ม แอป Block#

สร้าง แอป Block สำหรับส่วนขยายธีมในส่วนสินค้า บล็อก Shoplazza Liquid ในบริบทสินค้าสามารถเข้าถึง product ได้ เริ่มจากโฮสต์ที่ว่างเปล่า จากนั้นใช้สถานะแบบฟอร์มสินค้าของธีมที่ใช้งานอยู่เพื่อป้อนข้อมูลตัวแปรสินค้าที่เลือก:

liquid

<div class="idealhouse-host"></div>

{% schema %}
{
  "name": { "en-US": "Room Visualizer", "zh-CN": "房间可视化" },
  "target": "section",
  "javascript": ["idealhouse.js"],
  "settings": []
}
{% endschema %}

สำหรับสินค้าที่มีตัวแปรเดียว บล็อก JavaScript สามารถอ่านรายการที่เอกสารระบุไว้เพียงรายการเดียวใน product.variants จากข้อมูลที่ธีมซีเรียไลซ์อย่างปลอดภัย สำหรับหลายตัวแปร ให้คงโฮสต์ว่างไว้จนกว่าฟอร์มสินค้าที่มีอยู่ของธีมจะแก้ไขการเลือก สิ่งนี้หลีกเลี่ยงการพึ่งพาคุณสมบัติตัวแปรที่เลือกที่ Liquid ซึ่งไม่มีเอกสารระบุ

โหลด SDK#

ใน idealhouse.js ให้โหลด SDK เพียงครั้งเดียว สำหรับแอปที่นำกลับมาใช้ใหม่ ให้ป้อน Shop ID และ Publishable Key ผ่านการกำหนดค่าบล็อก/ฝังสาธารณะที่ผ่านการทำความสะอาดแล้ว แทนที่จะเขียนตายตัวสำหรับผู้ค้ารายเดียว:

if (!document.querySelector('script[src="https://sdk.ideal.house/sdk.js"]')) {
  const script = document.createElement('script');
  script.src = 'https://sdk.ideal.house/sdk.js';
  script.async = true;
  script.dataset.shopId = '<SHOP_ID>';
  script.dataset.publishableKey = '<PUBLISHABLE_KEY>';
  document.head.append(script);
}

ห้ามเปิดเผยความลับของแอปหรือ ideal.house Client Secret

รักษาตัวแปรที่เลือกให้ซิงค์กัน#

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

function renderIdealhouseVariant(host, variant) {
  host.replaceChildren();
  const code = String(variant && variant.sku || '').trim();
  if (!code) return;
  const container = document.createElement('div');
  container.dataset.idealhouseButtonContainer = '';
  container.dataset.productCode = code;
  host.append(container);
}

ออบเจกต์ตัวแปรสินค้าของ Shoplazza ระบุ sku ไว้ แต่ธีมสามารถนำไปใช้การเลือกได้แตกต่างกัน การเชื่อมต่อ ฟังก์ชันเรียกกลับ เป็นงานของตัวปรับเทียบลูกค้า สร้างคอนเทนเนอร์ใหม่หลังมีการเลือกใหม่ อย่าแก้ไขเฉพาะมาร์กอัปที่ SDK เติมข้อมูลไว้เท่านั้น

สำหรับการ์ดคอลเลกชัน การดูแบบด่วน ตัวกรองการค้นหา และส่วนที่เรนเดอร์โดยไคลเอนต์ ให้เพิ่มโฮสต์ระดับรายการและรันบริดจ์หลังจาก ฟังก์ชันเรียกกลับ การเรนเดอร์ที่เอกสารระบุไว้ของธีม หากไม่ทราบตัวแปรสินค้าสุดท้ายบนการ์ด ให้ละเว้นปุ่มหรือลิงก์ไปยังหน้าสินค้า

นำเข้าสินค้า#

ส่งออก variant.sku ทุกตัวที่รองรับและนำเข้าเป็น ideal.house sku ผ่าน การอัปโหลดสินค้า ดู นำเข้าสินค้า, สถานะงาน, ดูรายการสินค้า, อัปเดตสินค้า, ลบสินค้า และ ข้อผิดพลาดและการลองใหม่

การส่งออก API สำหรับแอดมิน, webhooks, การซิงค์ตามตารางเวลา, OAuth และการแจกจ่ายส่วนขยาย เป็นหน้าที่ของลูกค้าในการนำไปใช้

ตรวจสอบและลบออก#

ทดสอบการวาง แอป Block การเปิดใช้งาน Embed สินค้าที่มีตัวแปรเดียว ตัวเลือกตัวแปรหลายตัวทั้งหมด SKU ที่ว่างเปล่า/ซ้ำ/ไม่รู้จัก การ์ดคอลเลกชัน การดูแบบด่วน ตัวกรอง ประวัติเบราว์เซอร์ โมบาย การกำหนดภาษา/สกุลเงิน การยินยอม และโหมดพรีวิว/ไลฟ์ของธีม ยืนยันคำขอ SDK หนึ่งครั้งและการแมป SKU ของตัวแปรสินค้าที่ถูกต้อง

เพื่อลบ ให้ปิดใช้งานและถอนการติดตั้ง ธีม แอป ส่วนขยาย หรือลบ Liquid/JavaScript แบบกำหนดเอง เผยแพร่ธีมที่สะอาด ล้างแคชของหน้าร้าน และตรวจสอบว่า SDK และโหนด data-idealhouse-* ทั้งหมดหายไป