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

เชื่อมต่อ Room Visualizer กับร้านค้าออนไลน์ SHOPLINE ผ่านการขยายแอปธีมหรือบล็อกธีมแบบกำหนดเองที่ควบคุมได้

สถานะการตรวจสอบ: เอกสารธีม Online Store 2.x/3.0 ของ SHOPLINE ได้รับการตรวจสอบเมื่อ 7 กันยายน 2569 ไม่มีแอปพันธมิตรหรือร้านทดสอบของพ่อค้าให้ใช้งาน ไวยากรณ์เทมเพลตและประเภท ส่วนขยาย ที่รองรับแตกต่างกันไปตามรุ่นของ Online Store ดังนั้นให้ตรวจสอบกับเวอร์ชันร้านที่แน่นอน

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

เลือกพื้นผิวการเชื่อมต่อ#

สำหรับแอปสาธารณะที่นำกลับมาใช้ใหม่บน Online Store 2.0/2.1, SHOPLINE แนะนำให้ใช้ ธีม แอป ส่วนขยาย ที่มี แอป Block และ แอป Embed Block (ถ้าต้องการ)
ธีม Online Store 3.0 ให้บล็อกที่นำกลับมาใช้ใหม่พร้อมสินทรัพย์ JavaScript (ถ้าต้องการ) และ แอป Blocks
APIs ของ Script Tag/ทรัพยากร เป็นแบบ legacy หรือขึ้นกับเวอร์ชัน/ประเภทแอป; อย่าเลือกโดยไม่ตรวจสอบตารางความเข้ากันได้ของ SHOPLINE
สำหรับการปรับแต่งธีมของร้านค้าเดียว ให้ใช้โครงสร้างบล็อก/เทมเพลตและทรัพย์สินของเวอร์ชันที่ใช้งานอยู่

เตรียมร้านค้าสำหรับพัฒนา การเข้าถึงการขยาย/ธีม, Shop ID, Publishable Key และรหัสตัวแปรที่นำเข้า

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

รหัสสินค้าต้องตรงกับ sku ของแคตตาล็อก ideal.house เอกสารนี้ไม่ได้กล่าวอ้างว่ามีแอป ideal.house SHOPLINE ที่ติดตั้งได้

สร้างบล็อกธีม#

สร้าง แอป Block หรือบล็อกธีมสาธารณะที่เรนเดอร์ host บนหน้ารายละเอียดสินค้า ใช้วัตถุสินค้า/ตัวแปรสินค้าที่แน่นอนและตัวช่วย escape ที่ระบุในเอกสารสำหรับรุ่น Online Store ของคุณ HTML หน้างานสุดท้ายต้องเป็น:

html

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

ในซอร์สโค้ดเทมเพลต ให้แทนที่ CHAIR-OAK-01 ด้วยนิพจน์ SKU/รหัสของตัวแปรที่เลือกปัจจุบัน อย่าวางนิพจน์ Shopify Liquid ลงในเทมเพลต Handlebars ของ SHOPLINE 3.0; เหล่านี้เป็นภาษาและสัญญาวัตถุที่แตกต่างกัน

สำหรับ แอป Block ให้เพิ่มลงในเซกชันสินค้าใน ธีม Editor สำหรับ แอป Embed ให้ใช้เพื่อโหลด SDK ทั่วโลกโดยไม่มี UI ที่มองเห็นได้ แอป Blocks โดยปกติต้องให้พ่อค้าเปิดใช้งาน/วางหลังจากติดตั้งแล้ว

โหลด SDK เพียงครั้งเดียว#

ในทรัพย์สิน JavaScript ของการขยาย/ธีม สร้างสคริปต์พร้อมการตั้งค่าสาธารณะสองค่าก่อนเพิ่ม:

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);
}

ใช้การกำหนดค่าการขยาย/พารามิเตอร์แบบไดนามิกสำหรับข้อมูลรับรองของเมอชานต์หลายราย เปิดเผยเฉพาะ Publishable Key; เก็บความลับของแอปบนเซิร์ฟเวอร์ของคุณ

ตัวแปรที่เลือกและส่วนแบบไดนามิก#

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

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

ธีม SHOPLINE ปรับแต่งได้ ดังนั้นคู่มือนี้จึงไม่สร้างเหตุการณ์ตัวแปรสินค้าหน้างานสากล Online Store 3.0 ระบุเหตุการณ์เซกชัน/บล็อกของ ธีม-editor แต่เหตุการณ์เหล่านั้นเป็นเหตุการณ์วงจรชีวิตของเอดิเตอร์ ไม่ใช่เหตุการณ์การเลือกตัวแปรสินค้าของผู้ซื้อ

เมื่อเซกชัน, ตัวกรอง, การแบ่งหน้า, quick view หรือการดูตัวอย่าง ธีม-editor รีเรนเดอร์โหนดสินค้า ให้สร้างคอนเทนเนอร์ใหม่ ทำความสะอาดตัวรับฟังเมื่อบล็อกถูกปลดโหลดใน ธีม Editor ปุ่มบนการ์ดสินค้าต้องการ SKU ระดับรายการ; ละเว้นการควบคุมเมื่อไม่ทราบตัวแปรสินค้าสุดท้าย

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

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

การซิงค์ SHOPLINE Admin API, webhooks, OAuth ของแอป และการแจกจ่ายผ่าน แอป-store เป็นงานตัวปรับเทียบของลูกค้า

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

ทดสอบการติดตั้งและการเปิดใช้งานบล็อกของพ่อค้า, สินค้าแบบง่าย, ตัวแปรสินค้าแต่ละตัว, รหัสที่หายไป/ไม่รู้จัก, การ์ด, quick view, ตัวกรอง, การนำทางแบบ SPA, มือถือ, การยินยอม, การดูตัวอย่าง ธีม editor และเวอร์ชัน Online Store ที่รองรับทั้งหมด ตรวจสอบให้แน่ใจว่ามีคำขอ SDK หนึ่งครั้ง และการแมปรหัส/SKU ตรงกันพอดี

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