การบูรณาการ Squarespace#

ติดตั้ง Room Visualizer บน Squarespace โดยใช้ Code Injection และวางคอนเทนเนอร์เฉพาะสินค้าในตำแหน่งที่เอดิเตอร์หน้าเพจอนุญาตให้ใส่โค้ดกำหนดเองได้

สถานะการตรวจสอบ: เอกสาร Help Center ของ Squarespace ได้รับการตรวจสอบเมื่อ 7 กันยายน 2569 ไม่มีไซต์ Squarespace ของลูกค้าให้ใช้งาน Code Injection และ JavaScript Code Blocks ต้องใช้แผนบริการที่มีสิทธิ์ โค้ดกำหนดเองอยู่นอกเหนือขอบเขตการสนับสนุนของ Squarespace และการโหลดแบบ Ajax อาจส่งผลกระทบ

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

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

เส้นทางนี้เหมาะสมที่สุดสำหรับแคตตาล็อกขนาดเล็กที่มีหน้าสินค้าคงที่ หรือไซต์ที่คุณควบคุมชั้นข้อมูลรหัสสินค้าแบบชัดเจน คุณต้องมีแผนบริการที่มีสิทธิ์ สิทธิ์เข้าถึงในฐานะเจ้าของไซต์ Shop ID, Publishable Key และ SKU ที่นำเข้า ideal.house แล้ว

Squarespace ไม่ได้ให้ส่วนขยาย ideal.house ในคู่มือนี้ ตัวแก้ไขสินค้ามาตรฐานไม่ได้การันตี API ของ JavaScript สาธารณะที่มั่นคงสำหรับ SKU ของตัวแปรสินค้าที่เลือก ดังนั้นการจับคู่ระดับตัวแปรสินค้าต้องการงานตัวปรับเทียบของลูกค้าและอาจไม่ปฏิบัติได้จริงในทุกเทมเพลต

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

รหัสสินค้า (Product Code) ต้องตรงกับ sku ในแคตตาล็อกที่นำเข้าอย่างแม่นยำ ห้ามใช้ Client Secret ใน Code Injection

ติดตั้งตัวโหลด#

เปิด Website → Pages → Custom Code → Code Injection (ป้ายชื่ออาจแตกต่างกันไปตามเวอร์ชันไซต์) วาง SDK <script> ลงใน Footer แทนที่ตัวแปรสำรองทั้งสอง และบันทึก การฉีดโค้ดใน Footer จะทำงานบนหน้าไซต์ก่อน </body>; หน้าชำระเงินไม่รองรับโค้ดที่ฉีดเข้ามา

ติดตั้งตัวโหลดเพียงครั้งเดียว หากการบูรณาการอื่นเพิ่มไว้แล้ว ให้ลบรายการซ้ำ

วางปุ่มสินค้า#

ที่ซึ่งตัวแก้ไขหน้าอนุญาตให้ใช้บล็อกโค้ดที่เปิดใช้งาน JavaScript ให้วาง:

html

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

ใช้ SKU ของสินค้านั้นโดยเฉพาะ ใน Squarespace 7.1, เลย์เอาต์ Store/Product Details อาจไม่ยอมรับบล็อกใดๆ ในพื้นที่ข้อมูลสินค้าหลัก ทางเลือกที่ใช้งานได้จริงคือหน้าเลย์เอาต์ปกติที่มี Product Block และ Code Block อยู่ข้างเคียง หนึ่งคู่ต่อสินค้าหนึ่งรายการ ตรวจสอบให้แน่ใจว่าหน้าร้านยังคงเปิดใช้งานอยู่เนื่องจาก Product Blocks ขึ้นอยู่กับหน้าดังกล่าว

สำหรับแคตตาล็อกขนาดใหญ่ นักพัฒนาสามารถฉีดคอนเทนเนอร์โดยจับคู่แมปปิ้งที่คงที่และลูกค้าเป็นเจ้าของ เช่น URL path ไปยัง SKU:

const skuByPath = {
  '/shop/oak-chair': 'CHAIR-OAK-01',
  '/shop/walnut-chair': 'CHAIR-WALNUT-01'
};

function renderForPath() {
  const host = document.querySelector('[data-idealhouse-host]');
  const sku = skuByPath[location.pathname];
  if (!host) return;
  host.replaceChildren();
  if (!sku) return;
  const container = document.createElement('div');
  container.dataset.idealhouseButtonContainer = '';
  container.dataset.productCode = sku;
  host.append(container);
}

การแมป URL, การแทรก host และ ฟังก์ชันเรียกกลับ การนำทางเป็นโค้ดของลูกค้า ห้ามขูดข้อมูลสถานะส่วนตัวของ Squarespace หรือสมมติว่าโครงสร้างของมันจะคงที่

ตัวเลือกสินค้า การดูแบบด่วน และการโหลดแบบ Ajax#

หากสินค้า Squarespace รายการหนึ่งมีตัวแปรสินค้าหลายตัวที่มีสินทรัพย์ ideal.house ต่างกัน แสดงปุ่มได้ก็ต่อเมื่อตัวปรับเทียบ (adapter) ของคุณระบุ SKU ของตัวแปรสินค้าที่เลือกได้จากแหล่งข้อมูลที่รองรับได้เท่านั้น แทนที่คอนเทนเนอร์เก่าด้วยคอนเทนเนอร์ใหม่ทุกครั้งที่มีการเปลี่ยนแปลง หากไม่มี ฟังก์ชันเรียกกลับ การเลือกหรือแหล่งข้อมูลที่รองรับ ให้ใช้ SKU ระดับสินค้าร่วมกันเพียงหนึ่งรายการก็ต่อเมื่อตัวแปรสินค้าทั้งหมดใช้สินทรัพย์ภาพเดียวกัน หรือละเว้นปุ่ม

การดูแบบด่วน (Quick View), บล็อกสินค้า (Product Blocks) และการโหลดหน้าแบบ Ajax สามารถแทนที่เนื้อหาหน้าได้ Squarespace เตือนว่าการโหลดแบบ Ajax อาจขัดแย้งกับโค้ดที่กำหนดเอง ทดสอบเทมเพลตที่แน่นอน; หากจำเป็น ให้ปิดการโหลดแบบ Ajax หรือเรียก renderForPath() จากกลไกการนำทางที่คุณเป็นเจ้าของ MutationObserver เป็นตัวปรับเทียบ (adapter) ของลูกค้าที่ใช้เป็นทางเลือกสุดท้าย และควรจำกัดขอบเขตให้อยู่ในบริเวณสินค้า

นำเข้าข้อมูลสินค้า#

รักษาตาราง SKU ของสินค้า/ตัวแปรสินค้าของ Squarespace ไปยัง sku ของ ideal.house จากนั้นใช้ การอัปโหลดสินค้า. ขั้นตอนการทำงานสาธารณะทั้งหมดมีเอกสารใน นำเข้าสินค้า, สถานะงาน, ดูรายการสินค้า, อัปเดตสินค้า, ลบสินค้า, และ ข้อผิดพลาดและการลองใหม่.

SDK ในเบราว์เซอร์ไม่ซิงค์สินค้า Squarespace การส่งออก Commerce API, webhook หรืองานตามกำหนดเวลาใดๆ เป็นความรับผิดชอบของลูกค้า

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

ทดสอบเว็บไซต์ที่เผยแพร่แล้วในหน้าต่างส่วนตัว เพราะการแก้ไขแบบเข้าสู่ระบบอาจปิดกั้นโค้ดที่กำหนดเอง ตรวจสอบสินค้าที่แมปไว้หนึ่งรายการ, SKU ที่ขาดหายหนึ่งรายการ, SKU ที่ไม่รู้จักหนึ่งรายการ, บล็อกสินค้า (Product Blocks), การดูแบบด่วน (Quick View), การนำทางแบบ Ajax, ปุ่มย้อนกลับ/ไปข้างหน้า (Back/Forward) ของเบราว์เซอร์, การจัดวางบนมือถือ, การยินยอมใช้คุกกี้ และการเว้นค่าหน้าชำระเงิน ยืนยันว่ามีการขอ SDK สำเร็จหนึ่งครั้ง และรหัสสินค้า (Product Code)/SKU ตรงกันพอดี

เพื่อลบ ให้ลบการฉีดใน Footer และ Code Blocks/hosts/สคริปต์แมปปิ้งทั้งหมด บันทึก และล้างแคช ตรวจสอบให้แน่ใจว่าหน้าเพจที่เผยแพร่แล้วไม่มีคำขอ SDK หรือองค์ประกอบ data-idealhouse-*