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

เพิ่ม Room Visualizer ผ่านการขยาย OpenCart 4 หรือธีมแบบกำหนดเอง และแมปรหัสสินค้าหน้าร้านที่เสถียรไปยังแคตตาล็อก ideal.house

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

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

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

เตรียมร้านแบบ สภาพแวดล้อมทดสอบก่อนเผยแพร่, สิทธิ์เข้าถึงการพัฒนา ส่วนขยาย/ธีม, Shop ID, Publishable Key และบันทึกทดสอบที่นำเข้า แกน OpenCart มักเปิดเผย model ในเทมเพลตสินค้า ในขณะที่ SKU อาจต้องการงาน controller/ส่วนขยาย ขึ้นอยู่กับเวอร์ชันและธีม เลือกค่าหนึ่งค่าและใช้มันเป็น ideal.house sku อย่างสม่ำเสมอ

อย่าแก้ไขไฟล์แคตตาล็อกแกนโดยตรง บรรจุการเปลี่ยนแปลงเป็นการขยาย OpenCart 4 หรือเก็บไว้ในธีมแบบกำหนดเองที่มีการควบคุมเวอร์ชัน

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

รหัสสินค้าต้องเท่ากับ ideal.house sku ที่นำเข้าตัวอักษรต่อตัวอักษร

เรนเดอร์คอนเทนเนอร์สินค้า#

ขยายเทมเพลตสินค้าที่ใช้งานอยู่ผ่านการขยายของคุณ หากคุณแมปฟิลด์ OpenCart model ไปยัง ideal.house sku อย่างจงใจ วางสิ่งนี้ใกล้กับการกระทำของสินค้า:

twig

{% if model %}
  <div class="idealhouse-host">
    <div
      data-idealhouse-button-container
      data-product-code="{{ model }}">
    </div>
  </div>
{% endif %}

การ autoescaping ของ Twig ขึ้นอยู่กับการตั้งค่าสภาพแวดล้อม; ตรวจสอบให้แน่ใจว่าค่าที่เลือกถูก escape ในรูปแบบ HTML-attribute หากเลือกฟิลด์ SKU จริง ให้เพิ่มค่าที่ทำความสะอาดแล้วนั้นลงในข้อมูลเทมเพลตของ controller ใน ส่วนขยาย ของคุณและเรนเดอร์แทน model

โหลด 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);
}

เก็บค่าสาธารณะสองค่าในการกำหนดค่าการขยายและเรนเดอร์อย่างปลอดภัย ห้ามวาง ideal.house Client Secret ใน JavaScript, Twig, ลอการขยาย หรือ HTML ที่ถูกแคช

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

ตัวเลือกของ OpenCart ไม่ได้แมปหนึ่งต่อหนึ่งกับตัวแปรสินค้าที่มี SKU เสมอไป หากร้านของคุณใช้ ส่วนขยาย ตัวเลือก/ตัวแปรสินค้า ให้รวมระบบกับ ฟังก์ชันเรียกกลับ ตัวแปรสินค้าที่แก้ไขแล้วและโมเดลข้อมูลที่ระบุในเอกสารของ ส่วนขยาย นั้น แทนที่ host ก็ต่อเมื่อมันให้รหัสที่เลือกมาอย่างแม่นยำ:

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

นี่คือโค้ดตัวปรับเทียบของลูกค้า; ไม่มีเหตุการณ์ตัวแปรสินค้าสากลของ OpenCart ในคู่มือนี้ สำหรับการค้นหา AJAX, ตัวกรองหมวดหมู่, ป๊อปอัป และ quick view ให้เรนเดอร์คอนเทนเนอร์ที่สะอาดในเทมเพลตของ ส่วนขยาย หรือเรียกสะพานเชื่อมจาก ฟังก์ชันเรียกกลับ การเสร็จสิ้นที่ระบุในเอกสาร ห้ามคัดลอกลูกที่ SDK สร้างขึ้น

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

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

การเรียก OpenCart Admin API, การส่งออกตามกำหนดเวลา, ตัวรับฟังเหตุการณ์ และ webhooks เป็นงานบูรณาการของลูกค้า

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

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

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