Ideal House
コンテンツにスキップ

Shopify 開発者向け連携#

Shopify のテーマに ideal.house ボタンを追加し、選択中のバリエーションの SKU に対応付けます。

<!-- DASHBOARD_READINESS -->

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

1. 前提条件の確認#

  • 公開中のテーマのコード、または安全なテーマの複製を編集できること。
  • 少なくとも一つのテスト商品がカタログにインポート済みで、有効になっていること。
  • 選択したバリエーションの SKU が、このストアのカタログで使用されている保存済みの productCode と同じであること。

2. ボタンのスニペットの作成#

snippets/idealhouse-view-button.liquid#

liquid
{%- comment -%}
  Renders an ideal.house authored visualizer button.

  Accepts:
  - product_code: {String} Variant SKU used by the ideal.house Catalog mapping.
  - placement: {String} "card", "pdp-desktop", or "pdp-mobile".
{%- endcomment -%}

{%- liquid
  assign button_code = product_code | strip
  assign button_placement = placement | default: 'card'
-%}

<button
  type="button"
  class="idealhouse-view-button idealhouse-view-button--{{ button_placement | escape }}"
  data-idealhouse-authored-button
  data-active="false"
  {% if button_code != blank %}
    data-product-code="{{ button_code | escape }}"
  {% else %}
    disabled
  {% endif %}
  style="visibility: hidden;"
>
  <span>View in my room</span>
</button>

SDK が商品の利用条件を確認するまで、ボタンを非表示にしておきます。

3. テーマ内へのボタンの描画#

コレクションと検索のカード#

liquid
{%- render 'idealhouse-view-button',
  product_code: card_product.selected_or_first_available_variant.sku,
  placement: 'card'
-%}

一般的なファイルには snippets/card-product.liquid、snippets/product-card.liquid、snippets/product-grid-item.liquid などがあります。card_product をテーマで使用する商品変数に合わせて調整します。

商品詳細ページ#

liquid
{%- render 'idealhouse-view-button',
  product_code: product.selected_or_first_available_variant.sku,
  placement: 'pdp-desktop'
-%}

{%- render 'idealhouse-view-button',
  product_code: product.selected_or_first_available_variant.sku,
  placement: 'pdp-mobile'
-%}

一般的なファイルには sections/main-product.liquid や snippets/product.liquid などがあります。テーマのレイアウトが分かれている場合に限り、デスクトップ用とモバイル用を別々に描画します。

4. SDK の読み込みとバリエーションの同期#

assets/idealhouse-room-visualizer.js#

js
(function () {
  'use strict';

  var buttonSelector = '[data-idealhouse-authored-button]';
  var sdkRequested = false;
  var buttonObserver = null;

  function resetButton(button) {
    button.dataset.active = 'false';
    button.style.visibility = 'hidden';
    delete button.dataset.rvProductCode;
    delete button.dataset.rvProductType;
    delete button.dataset.rvProductId;
    delete button.dataset.rvProductIds;
  }

  function syncButton(button, productCode) {
    if (!button) return false;
    var code = typeof productCode === 'string' ? productCode.trim() : '';
    resetButton(button);
    delete button.dataset.productCode;

    if (!code) {
      button.disabled = true;
      return false;
    }

    button.disabled = false;
    button.dataset.productCode = code;
    return true;
  }

  function syncButtons(container, productCode) {
    (container || document).querySelectorAll(buttonSelector).forEach(function (button) {
      syncButton(button, productCode);
    });
  }

  function loadSdk() {
    if (sdkRequested || !document.querySelector(buttonSelector)) return false;
    sdkRequested = true;
    if (buttonObserver) buttonObserver.disconnect();

    var 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>';
    script.dataset.authoredButtonSelector = buttonSelector;
    document.head.appendChild(script);
    return true;
  }

  function startSdkLoader() {
    if (loadSdk() || typeof MutationObserver === 'undefined') return;
    buttonObserver = new MutationObserver(loadSdk);
    buttonObserver.observe(document.documentElement, { childList: true, subtree: true });
  }

  // Dispatch this event from your theme's variant-change callback.
  document.addEventListener('idealhouse:variant-change', function (event) {
    var detail = event.detail || {};
    syncButtons(detail.container || document, event.detail && event.detail.sku);
  });

  window.IdealhouseShopify = {
    syncButton: syncButton,
    syncButtons: syncButtons
  };

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', startSdkLoader);
  } else {
    startSdkLoader();
  }
}());

Shopify では、すべてのテーマに共通するバリエーションイベントを定義していません。以下の小さなアダプターを、使用中のテーマが公開するイベントまたはコールバックに接続します。

テーマのイベントアダプターの例#

サンプルのイベントを、使用中のテーマの API に置き換えます。window.subscribe で通知するテーマもあれば、DOM イベントを発行したり product-info を更新したりするテーマもあります。

js
// Example only: replace "variant:change" with your theme's event.
document.addEventListener('variant:change', function (event) {
  var variant = event.detail && event.detail.variant;
  var productContainer = event.target.closest('product-info') || document;

  document.dispatchEvent(new CustomEvent('idealhouse:variant-change', {
    detail: {
      container: productContainer,
      sku: variant && variant.sku
    }
  }));
});

5. テーマのスタイルの追加#

assets/idealhouse-room-visualizer.css#

css
.idealhouse-view-button {
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 0.75rem 1rem;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.idealhouse-view-button[data-active="true"] {
  display: inline-flex;
  visibility: visible;
}

.idealhouse-view-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

テーマによってこれらの表示スタイルが上書きされる場合があります。

6. theme.liquid へのアセットの追加#

layout/theme.liquid に可視化用のスタイルシートとスクリプトを追加し、スタイルを適用して SDK ローダーを有効にします。

スタイルシートの追加（<head> 内）#

liquid
{{ 'idealhouse-room-visualizer.css' | asset_url | stylesheet_tag }}

スタイルが適切に読み込まれるよう、layout/theme.liquid の <head> タグ内に配置します。

スクリプトの追加（</body> の前）#

liquid
<script src="{{ 'idealhouse-room-visualizer.js' | asset_url }}" defer="defer"></script>

ページの描画を妨げないよう defer を使用し、layout/theme.liquid の閉じ </body> タグの直前に配置します。

このローダースクリプトを theme.liquid に追加するまで、「自分の部屋で見る」ボタンは非表示のままです。

7. 公開中のオンラインストアでの検証#

  1. ネットワークパネルで、sdk.js が HTTP 200 で読み込まれていることを確認します。
  2. 独自ボタンの data-product-code がカタログの productCode と完全に一致することを確認します。
  3. 利用可能な商品ではボタンが表示され、利用できない商品では非表示のままであることを確認します。
  4. バリエーションを切り替えると data-product-code が更新され、ボタンが再検証されることを確認します。
  5. コレクションと検索、デスクトップの商品詳細ページ、モバイルの商品詳細ページの配置箇所が、存在するそれぞれの画面で動作することを確認します。
  6. ボタンをクリックすると、選択した商品で ideal.house Viewer が開くことを確認します。