Shopware 6 連携#

Shopware 6 のプラグインまたは独自テーマで Room Visualizer を追加し、選択した販売チャネルの商品番号を ideal.house の商品コードとして使用します。

検証状況: 2026年9月7日 に Shopware のオンラインストア向けドキュメントを確認しました。顧客のストアは利用できませんでした。この方式は標準の Shopware 6 の Twig ストアを対象とします。ヘッドレスまたはコンポーザブルなストアには、使用するフレームワークに対応したアダプターが必要です。

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

前提条件#

開発用ストア、プラグインまたはテーマのソースへのアクセス、ステージング用販売チャネル、Shop ID、Publishable Key、インポート済みの商品番号を用意します。Storefront のコアや配布元のテーマを変更せず、プラグインまたは子テーマ内で作業してください。

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 の Store 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 としてエクスポートします。商品アップロードからインポートし、商品インポート、ジョブの状態、商品一覧、商品更新、商品削除、エラーと再試行を使用します。

Store API または管理用 API の同期、定期タスク、Flow Builder や Webhook の連携は、利用側の別のコードで実装します。

検証と削除#

親商品、可視化可能な各バリエーション、欠落または不明な商品番号、一覧、フィルター、オフキャンバスとクイックビュー、ブラウザーの戻る・進む、モバイル表示、キャッシュとプロキシの動作、関連するすべての販売チャネルとドメインをテストします。SDK のリクエストが一回で、productNumber と SKU が完全に一致することを確認します。

削除するには、プラグインを無効化またはアンインストールするか、子テーマの Twig と JavaScript を削除します。ストアのアセットを再ビルドしてキャッシュを消去し、SDK のリクエストやコンテナが残っていないことを確認します。

プラットフォームの公式リファレンス#

• Shopware: 独自の JavaScript の追加
• Shopware: テンプレートのカスタマイズ
• Shopware 開発者ポータル