Ideal House
İçeriğe atla

Shopify geliştirici entegrasyonu#

ideal.house düğmesini bir Shopify temasına ekleyin ve seçili Varyant SKU'sına eşleyin.

<!-- DASHBOARD_READINESS -->

SDK yüklenmeden önce: Dashboard → Integration sayfasını açın, mağaza vitrini kökeninizi Allowed Origins (CORS) listesine ekleyin ve Kaydet düğmesine tıklayın. Yayımlanan ana bilgisayar adını ve kullandığınız önizleme veya test ortamı kökenlerini dahil edin; birden fazla kökeni virgülle ayırın. yapılandırma adımları bölümüne bakın.

Yeni satıcılar incelemeye tabi 15 günlük ücretsiz deneme için başvurabilir. Onaylandıktan sonra Dashboard'a giriş yapın, ürünleri yükleyip yayınlayın ve SDK kurulumu için buraya dönün. Deneme sona erdiğinde herkese açık Marketplace sayfası kullanılabilir kalır; mağaza SDK’sı aboneliğe kadar duraklatılır.

1. Ön koşulları doğrulayın#

  • Canlı tema kodunu veya temanın güvenli bir kopyasını düzenleyebilirsiniz.
  • En az bir test ürünü Kataloğa içe aktarılmış ve etkin olmalıdır.
  • Seçili Varyant SKU, bu Mağaza için Kataloğun kullandığı aynı kalıcı productCode olmalıdır.

2. Düğme parçasını oluşturun#

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 ürün uygunluğunu doğrulayana kadar düğmeyi gizli tutun.

3. Düğmeyi tema yüzeylerinde görüntüleyin#

Koleksiyon ve arama kartları#

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

Yaygın dosyalar arasında snippets/card-product.liquid, snippets/product-card.liquid veya snippets/product-grid-item.liquid bulunur. card_product'i temanın kullandığı ürün değişkenine uyarlayın.

Ürün detay sayfası#

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'
-%}

Yaygın dosyalar arasında sections/main-product.liquid veya snippets/product.liquid bulunur. Yalnızca temanın ayrı yerleşimleri varsa ayrı masaüstü ve mobil görüntülemeleri yerleştirin.

4. SDK'yi yükleyin ve çeşitlilikleri senkronize edin#

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 tek bir evrensel tema varyant olayı tanımlamaz. Aşağıdaki küçük adaptörü, etkin temanın açığa çıkardığı olaya veya geri çağrıya bağlayın.

Tema olayı adaptörü örneği#

Örnek olayı, etkin tema API'i ile değiştirin. Bazı temalar window.subscribe üzerinden yayımlar; diğerleri bir DOM olayı dağıtır veya product-info günceller.

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. Tema stillerini ekleyin#

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;
}

Tema bu görsel stilleri geçersiz kılabilir.

6. Varlıkları theme.liquid içinde dahil edin#

Stilleri uygulamak ve SDK yükleyicisini etkinleştirmek için görselleştirici stil sayfasını ve betiği layout/theme.liquid içinde dahil edin.

Stil sayfasını dahil edin (<head> içinde)#

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

Stillerin temiz yüklenmesi için layout/theme.liquid'ın <head> etiketi içine yerleştirin.

Betik dahil edin (</body> öncesinde)#

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

Sayfa görüntülemesini engellememek için defer kullanın ve layout/theme.liquid içinde kapanan </body> etiketinin hemen öncesine yerleştirin.

'Odamda görüntüle' düğmesi, bu yükleyici betiği theme.liquid'ye dahil edilene kadar gizli kalır.

7. Canlı mağaza vitrininde doğrulayın#

  1. Ağ paneli, sdk.js'ün HTTP 200 ile yüklendiğini gösterir.
  2. Kendi yazdığınız düğmenin data-product-code, Kataloğ productCode'ü ile tam olarak eşleşir.
  3. Uygun ürünler bir düğme gösterir; uygun olmayan ürünler gizli tutar.
  4. Varyant değiştirme, data-product-code'ı günceller ve düğmeyi yeniden doğrular.
  5. Koleksiyon/arama, PDP masaüstü ve PDP mobil yerleşimleri, mevcut oldukları yerlerde çalışır.
  6. Düğmeye tıklamak, seçili ürünle ideal.house Viewer'ü açar.