PrestaShop 연동#
소규모 PrestaShop 모듈로 Room Visualizer를 불러오고 현재 상품 또는 조합의 참조 코드를 사용하여 버튼을 렌더링하세요.
검증 상태: 2026년 9월 7일에 PrestaShop 8/9 모듈, 훅 및 자산 문서를 검토했습니다. 판매자 스토어는 사용할 수 없었습니다. 예제는 Classic과 Hummingbird에 공통으로 문서화된 훅을 사용하지만 타사 테마는 이를 이동하거나 생략할 수 있습니다.
SDK를 불러오기 전에: Dashboard → Settings를 열고 **Allowed Origins (CORS)**에 스토어 출처를 추가한 다음 저장을 클릭하세요. 배포된 호스트 이름과 사용 중인 미리보기 또는 스테이징 출처를 포함하고, 여러 출처는 쉼표로 구분하세요. 설정 절차를 참고하세요.
사전 준비 및 매핑#
스테이징 스토어, 모듈 개발 권한, Shop ID, Publishable Key 및 가져온 SKU를 준비하세요. ideal.house 코드로 기본 상품의 reference를 사용할지 선택한 조합의 reference를 사용할지 결정하세요. 시각화할 각 조합에는 비어 있지 않은 고유 참조 코드가 있어야 합니다.
최소 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>
상품 코드는 가져온 ideal.house sku와 정확히 일치해야 합니다. PrestaShop ID와 참조 코드는 서로 대체할 수 없습니다.
모듈 삽입 지점 생성#
상품 페이지에 콘텐츠를 배치하려면 displayProductAdditionalInfo를, 로컬 어댑터를 불러오려면 actionFrontControllerSetMedia를 등록하세요. Classic과 Hummingbird 모두 상품 및 빠른 보기 템플릿에서 해당 표시 훅을 문서화하고 있습니다.
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)
);
}
표시 훅 콜백에서 표시용 상품 데이터를 가져와 참조 코드를 선택하고 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);
}
PrestaShop이 지원하는 JavaScript 정의/설정 메커니즘으로 idealhousePublicConfig를 제공하세요. 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);
}
표시된 라벨로 추측하지 마세요. 문서화된 훅 위치에는 빠른 보기도 포함되지만 활성 테마가 실제로 훅을 렌더링하는지 검증하세요. AJAX 필터 또는 새로 고친 상품 조각에서는 훅이 새 마운트 요소를 생성하도록 하거나 테마의 문서화된 갱신 콜백 후 연결 함수를 호출하세요.
상품 데이터 가져오기#
PrestaShop 상품/조합의 reference를 ideal.house sku에 매핑하세요. 상품 업로드와 가져오기, 작업 상태, 목록 조회, 수정, 삭제, 오류/재시도 가이드를 사용하세요. PrestaShop 웹서비스 내보내기, cron 또는 훅 기반 동기화는 고객이 구현해야 합니다.
검증 및 제거#
단순 상품, 모든 조합, 누락/중복 참조 코드, 알 수 없는 ideal.house SKU, 빠른 보기, 목록, 패싯 탐색, 브라우저 이력, 모바일, 언어/통화별 판매 환경, 동의 및 운영 캐시를 테스트하세요. SDK 요청이 한 번만 실행되고 참조 코드/SKU가 정확히 같은지 확인하세요.
모듈을 삭제하거나 비활성화하고 관련 훅/설정/자산이 제거되었는지 확인하세요. Smarty 및 스토어 캐시를 비우고 SDK URL과 data-idealhouse-* 마크업이 없는지 검증하세요.