PrestaShop 連携#

小さな PrestaShop モジュールで Room Visualizer を読み込み、現在の商品または組み合わせの参照コードからボタンを描画します。

検証状況: 2026年9月7日に PrestaShop 8/9 のモジュール、フック、アセットのドキュメントを確認しました。マーチャントのストアは利用できませんでした。この例では Classic と Hummingbird に共通する公開フックを使用しますが、外部テーマでは移動または省略される場合があります。

SDK を読み込む前に: ダッシュボード → 設定を開き、オンラインストアのオリジンを Allowed Origins (CORS) に追加して保存をクリックします。公開サイトのホスト名と、利用するプレビューまたはステージングのオリジンを含めます。複数のオリジンはカンマで区切ってください。設定手順を参照してください。

前提条件と対応付け#

ステージング用ストア、モジュール開発権限、Shop ID、Publishable Key、インポート済みの SKUs を用意します。ideal.house のコードとして基本商品の 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 と完全に一致する必要があります。PrestaShop の ID と参照コードは同じものとして扱えません。

モジュールの挿入箇所の作成#

商品ページへのコンテンツ配置用に 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)
    );
}

表示フックのコールバックで、表示用の商品を取得し、その参照コードを選んで Smarty に割り当て、モジュールのテンプレートを描画します。テンプレート内では値をエスケープしてください。

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 の Webservice エクスポート、cron、フックによる同期は利用側で実装します。

検証と削除#

シンプル商品、すべての組み合わせ、欠落または重複した参照コード、ideal.house の不明な SKU、クイックビュー、一覧、絞り込みによる画面遷移、ブラウザー履歴、モバイル、言語や通貨ごとの販売設定、同意管理、本番用キャッシュをテストします。SDK のリクエストが一回で、参照コードと SKU が完全に一致することを確認します。

モジュールをアンインストールまたは無効化し、フック、設定、アセットが削除されていることを確認します。Smarty とオンラインストアのキャッシュを消去し、SDK の URL と data-idealhouse-* のマークアップがないことを検証します。