Shopware 6 연동#
Shopware 6 플러그인 또는 사용자 정의 테마로 Room Visualizer를 추가하고 선택한 판매 채널 상품 번호를 ideal.house 상품 코드로 사용하세요.
검증 상태: 2026년 9월 7일에 Shopware 스토어 문서를 검토했습니다. 고객 스토어는 사용할 수 없었습니다. 이 방식은 표준 Shopware 6 Twig 스토어를 대상으로 합니다. 헤드리스/컴포저블 스토어에는 해당 프레임워크 전용 어댑터가 필요합니다.
SDK를 불러오기 전에: Dashboard → Settings를 열고 **Allowed Origins (CORS)**에 스토어 출처를 추가한 다음 저장을 클릭하세요. 배포된 호스트 이름과 사용 중인 미리보기 또는 스테이징 출처를 포함하고, 여러 출처는 쉼표로 구분하세요. 설정 절차를 참고하세요.
사전 준비#
개발 스토어, 플러그인/테마 소스 접근 권한, 스테이징 판매 채널, Shop ID, Publishable Key 및 가져온 상품 번호를 준비하세요. 스토어 핵심 코드나 공급업체 테마를 변경하지 말고 플러그인 또는 자식 테마에서 작업하세요.
최소 SDK 연동 규약#
<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는 Shopware의 스토어 API를 조회하지 않습니다.
상품 템플릿 확장#
플러그인에서 설치된 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);
}
테마와 타사 상품 옵션 플러그인이 서로 다르므로 이 연결 코드는 고객이 관리해야 합니다. 필터/오프캔버스 컴포넌트로 불러오는 목록은 새 DOM이 도착한 후 새로운 컨테이너를 렌더링하거나 다시 만들어야 합니다. SDK가 생성한 하위 요소를 복제하지 마세요.
상품 가져오기#
각 Shopware 상품/상품 옵션의 productNumber를 ideal.house sku로 내보내세요. 상품 업로드로 가져온 다음 상품 가져오기, 작업 상태, 상품 목록 조회, 상품 수정, 상품 삭제 및 오류와 재시도를 사용하세요.
스토어 API/관리 API 동기화, 예약 작업 또는 Flow Builder/웹훅 연동은 별도의 고객 측 코드입니다.
검증 및 제거#
부모 상품, 시각화 가능한 각 상품 옵션, 누락되거나 알 수 없는 상품 번호, 목록, 필터, 오프캔버스/빠른 보기, 브라우저 뒤로 가기/앞으로 가기, 모바일 레이아웃, 캐시/프록시 동작 및 관련된 모든 판매 채널/도메인을 테스트하세요. SDK 요청이 한 번만 실행되고 productNumber/SKU가 정확히 일치하는지 확인하세요.
제거하려면 플러그인을 비활성화/삭제하거나 자식 테마의 Twig와 JavaScript를 제거하고 스토어 자산을 다시 빌드한 다음 캐시를 비우세요. SDK 요청 또는 컨테이너가 남아 있지 않은지 검증하세요.