การเชื่อมต่อ Shopware 6#

เพิ่ม Room Visualizer ผ่านปลั๊กอิน Shopware 6 หรือธีมแบบกำหนดเอง และใช้หมายเลขสินค้าจากช่องทางการขายที่เลือกเป็นรหัสสินค้า ideal.house

สถานะการตรวจสอบ: เอกสารหน้างาน (หน้าร้านออนไลน์) ของ Shopware ได้รับการตรวจสอบเมื่อ 7 กันยายน 2569 ไม่มีร้านของลูกค้าให้ใช้งาน เส้นทางนี้มุ่งเน้นหน้างาน Twig มาตรฐานของ Shopware 6; หน้างานแบบ headless/ที่ประกอบจากส่วนย่อย ต้องใช้ตัวปรับเทียบเฉพาะเฟรมเวิร์ก

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

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

เตรียมร้านสำหรับพัฒนา, สิทธิ์เข้าถึงซอร์สโค้ดปลั๊กอิน/ธีม, ช่องขายแบบ สภาพแวดล้อมทดสอบก่อนเผยแพร่, 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>

แมป Shopware productNumber ไปยัง ideal.house sku อย่างแม่นยำ SDK ไม่สอบถาม Store API ของ Shopware

ขยายเทมเพลตสินค้า#

ในปลั๊กอินของคุณ ขยายเทมเพลต/บล็อก Twig ที่ใช้ใกล้กับวิดเจ็ตซื้อในเวอร์ชัน Shopware ที่ติดตั้งของคุณ แสดงโฮสต์โดยใช้สินค้าจากช่องทางการขายปัจจุบัน:

twig

{% sw_extends '@Storefront/storefront/component/buy-widget/buy-widget-form.html.twig' %}

{% block buy_widget_buy_container %}
    {{ parent() }}
    {% if page.product.productNumber %}
        <div class="idealhouse-host">
            <div
                data-idealhouse-button-container
                data-product-code="{{ page.product.productNumber|escape }}">
            </div>
        </div>
    {% endif %}
{% endblock %}

ชื่อบล็อกและบริบทอาจเปลี่ยนแปลงระหว่างเวอร์ชันการปล่อยและธีมของ Shopware. ตรวจสอบเทมเพลตของเวอร์ชันที่กำลังใช้งาน, เลือกบล็อกขยายที่แคบที่สุด, และยืนยันว่า page.product ใช้งานได้ที่นั่น. สำหรับการ์ดสินค้า ให้ใช้บริบทสินค้าของการ์ดนั้นแทน.

โหลด SDK#

ปลั๊กอิน Shopware สามารถเพิ่ม JavaScript ของหน้าร้านและโอเวอร์ไรด์เทมเพลต เพิ่มรายการหน้าร้านระดับท้องถิ่นที่สร้างสคริปต์ 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 = '<SHOP_ID>';
  script.dataset.publishableKey = '<PUBLISHABLE_KEY>';
  document.head.append(script);
}

คอมไพล์ทรัพย์สินของหน้าร้านและเปิดใช้งานปลั๊กอิน/ธีมโดยใช้กระบวนการสำหรับเวอร์ชัน Shopware ของคุณ ใช้ค่าการกำหนดค่าสำหรับข้อมูลรับรองในปลั๊กอินที่นำกลับมาใช้ใหม่ได้; แสดงเฉพาะ Publishable Key ที่ปลอดภัยสำหรับเบราว์เซอร์เท่านั้น

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

Shopware มักแสดงตัวแปรสินค้าที่ซื้อได้เป็นสินค้าแยกกันที่มี productNumber และ URL มาตรฐานเป็นของตัวเอง ในการนำทางเต็มรูปแบบ Twig ที่เรนเดอร์บนเซิร์ฟเวอร์จะส่งรหัสใหม่ตามธรรมชาติ หากธีมของคุณสลับตัวแปรสินค้าโดยไม่โหลดหน้าใหม่ ให้เชื่อมต่อ ฟังก์ชันเรียกกลับ การเสร็จสิ้นที่เอกสารระบุไว้กับ:

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

สะพานเชื่อมนี้เป็นของลูกค้าเนื่องจากธีมและปลั๊กอินตัวแปรสินค้าของบุคคลที่สามแตกต่างกัน รายการที่โหลดผ่านตัวกรอง/คอมโพเนนต์ off-canvas ต้องเรนเดอร์หรือสร้างคอนเทนเนอร์ใหม่ให้สะอาดหลังจาก DOM ใหม่มาถึง ห้ามโคลนลูกที่ SDK สร้างขึ้น

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

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

การซิงค์ Store API/Admin API, งานตามกำหนดเวลา หรือการรวมระบบ Flow Builder/webhook เป็นโค้ดของลูกค้าแยกต่างหาก

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

ทดสอบสินค้าแม่, ตัวแปรสินค้าแต่ละตัวที่แสดงภาพได้, หมายเลขสินค้าที่หายไปและไม่รู้จัก, รายการสินค้า, ตัวกรอง, off-canvas/quick view, ปุ่ม Back/Forward ของเบราว์เซอร์, เลย์เอาต์มือถือ, พฤติกรรมแคช/พร็อกซี และช่องขาย/โดเมนที่เกี่ยวข้องทั้งหมด ตรวจสอบให้แน่ใจว่ามีคำขอ SDK หนึ่งครั้ง และ productNumber/SKU ตรงกันพอดี

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