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

ใช้โมดูล PrestaShop ขนาดเล็กเพื่อโหลด Room Visualizer และเรนเดอร์ปุ่มจากรหัสอ้างอิงของสินค้าหรือคอมโบเนชันปัจจุบัน

สถานะการตรวจสอบ: เอกสารโมดูล, ฮุก และสินทรัพย์ของ PrestaShop 8/9 ได้รับการตรวจสอบเมื่อ 7 กันยายน 2569 ไม่มีร้านของพ่อค้าให้ใช้งาน ตัวอย่างใช้ ฮุก ที่ระบุในเอกสารซึ่งพบได้ทั้งใน Classic และ Hummingbird แต่ธีมของบุคคลที่สามอาจย้ายหรือละเว้น ฮุก เหล่านี้

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

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

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

สัญญา 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 ที่นำเข้าอย่างแม่นยำ ID ของ PrestaShop ไม่สามารถแลกเปลี่ยนกับรหัสอ้างอิงได้

สร้างจุดแทรกโมดูล#

ลงทะเบียน displayProductAdditionalInfo เพื่อวางเนื้อหาบนหน้าสินค้า และ actionFrontControllerSetMedia เพื่อโหลดตัวปรับเทียบท้องถิ่นของคุณ ทั้ง Classic และ Hummingbird ระบุ ฮุก การแสดงไว้ในเทมเพลตสินค้าและ มุมมองด่วน

php

public function install()
{
    return parent::install()
        && $this->registerHook('displayProductAdditionalInfo')
        && $this->registerHook('actionFrontControllerSetMedia');
}

public function hookActionFrontControllerSetMedia($params)
{
    $this->context->controller->registerJavascript(
        'module-' . $this->name . '-adapter',
        'modules/' . $this->name . '/views/js/adapter.js',
        array('position' => 'bottom', 'priority' => 200)
    );
}

ใน ฟังก์ชันเรียกกลับ ของ display-ฮุก ให้รับสินค้าที่นำเสนอ, เลือก reference ของมัน, มอบหมายให้ Smarty และเรนเดอร์เทมเพลตโมดูล ทำการ escape ค่าในเทมเพลตนั้น:

smarty

<div class="idealhouse-host">
  {if $idealhouse_product_code}
    <div
      data-idealhouse-button-container
      data-product-code="{$idealhouse_product_code|escape:'html':'UTF-8'}">
    </div>
  {/if}
</div>

อย่าคัดลอก PHP แบบย่อมาเป็นโมดูลการผลิตที่สมบูรณ์: เพิ่มเมตาดาต้าโมดูลตามปกติ ความเข้ากันได้ของเวอร์ชัน การเก็บข้อมูลการกำหนดค่า การตรวจสอบสิทธิ์ และการทำความสะอาดเมื่อถอนการติดตั้ง

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

ใน adapter.js สร้างองค์ประกอบ SDK ที่ถูกต้องหลังจากอ่านค่าสาธารณะสองค่าจากการกำหนดค่าหน้าร้านที่ทำความสะอาดแล้วของโมดูลของคุณ:

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 = window.idealhousePublicConfig.shopId;
  script.dataset.publishableKey = window.idealhousePublicConfig.publishableKey;
  document.head.append(script);
}

เปิดเผย idealhousePublicConfig ด้วยกลไกการกำหนดค่า/นิยาม JavaScript ที่ PrestaShop รองรับ ห้ามเปิดเผย Client Secret

การเปลี่ยนแปลงคอมโบเนชันและหน้าแบบไดนามิก#

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

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

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

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

แมป PrestaShop product/combination reference ไปยัง ideal.house sku ใช้ การอัปโหลดสินค้า และคู่มือสำหรับ นำเข้า, สถานะงาน, ดูรายการ, การอัปเดต, การลบ และ ข้อผิดพลาดและการลองใหม่ การส่งออก Webservice, cron หรือการซิงค์ผ่าน ฮุก ของ PrestaShop เป็นงานของลูกค้า

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

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

ถอนการติดตั้งหรือปิดใช้งานโมดูล, ตรวจสอบให้แน่ใจว่า hook/การตั้งค่า/สินทรัพย์ของมันถูกลบ, ล้างแคช Smarty และหน้างาน และตรวจสอบให้แน่ใจว่า markup ของ SDK URL และ data-idealhouse-* ไม่มีอยู่