Ideal House
İçeriğe atla

Adobe Commerce / Magento Open Source entegrasyonu#

Room Visualizer'i bir Magento modülü veya özel tema aracılığıyla kurun ve görüntülenen basit ürün SKU'ü ideal.house kataloğuna eşleştirin.

Doğrulama durumu: Adobe Commerce ön yüz dokümantasyonu 7 Eylül 2026 tarihinde incelendi. Satıcı kurulumu mevcut değildi. Luma/Blank temaları, Hyvä ve PWA Studio farklı JavaScript yığınları kullanır; aşağıdaki somut örnek standart RequireJS mağaza vitrinini hedefler.

SDK'u yüklemadan önce: Panel → Ayarlar açın, mağaza vitrininiz kökenini Allowed Origins (CORS)'e ekleyin ve Kaydet'e tıklayın. Yayımlanan ana bilgisayar adını ve kullandığınız önizleme veya geçici kökenleri dahil edin; birden fazla kökeni virgüllerle ayırın. yapılandırma adımları bölümüne bakın.

Ön koşullar ve kapsam#

Bir geliştirme örneği, özel bir modül veya alt tema, dağıtım erişimi, Shop ID, Publishable Key ve içe aktarılmış test SKU'ları hazırlayın. Asla vendor/ altındaki dosyaları veya bir temel temayı değiştirmeyin. Hyvä ve PWA Studio kendi Alpine/React adaptörlerini gerektirir ve RequireJS kodunu körü körüne kopyalamamalıdır.

Minimal SDK sözleşmesi#

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>

Ürün Kodu, içe aktarılmış kesin sku'tür, Magento'in sayısal varlık kimliği değildir.

Bir ürün sayfası bloğu ekleyin#

catalog_product_view için küçük bir modül veya tema yerleşim güncellemesi oluşturun. Bir bloğu, ürün eylemlerinin yakınında konumlandırılmış bir .phtml şablonuna yönlendirin. Şablon, ilk ürün SKU'ü güvenle işleyebilir:

php
<?php
/** @var \Magento\Catalog\Block\Product\View $block */
$product = $block->getProduct();
$sku = $product ? trim((string) $product->getSku()) : '';
?>

<div class="idealhouse-host">
  <?php if ($sku !== ''): ?>
    <div
      data-idealhouse-button-container
      data-product-code="<?= $block->escapeHtmlAttr($sku) ?>"
    ></div>
  <?php endif; ?>
</div>

Yapılandırılabilir bir ürün için, sayfanın ilk SKU'ü genellikle ana SKU'dir. ideal.house varlıkları alt basit ürünlere aitse, kapsayıcı öğeyi başlangıçta boş bırakın ve yalnızca seçilen basit ürün çözüldükten sonra doldurun.

SDK'yi bir kez yükleyin#

Modülünüzde veya temanızda yerel bir RequireJS başlatıcı ekleyin. Başlatıcı, harici betiği oluşturur ve eklemesinden önce gerekli tüm veri özniteliklerini uygular:

js
define([], function () {
  'use strict';

  return function () {
    if (document.querySelector('script[src="https://sdk.ideal.house/sdk.js"]')) return;

    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>';
    document.head.appendChild(script);
  };
});

Adobe'un önerdiği text/x-magento-init mekanizmasını izleyerek şablondan beyan ederek başlatın:

html
<script type="text/x-magento-init">
{
  "*": {
    "Vendor_Module/js/idealhouse-loader": {}
  }
}
</script>

Bu, kimlik bilgilerini bir RequireJS URL'ye yerleştirmeden, minimal sözleşmeyle aynı SDK öğesini üretir. Mağaza vitrini kodunda yalnızca Publishable Key kullanın.

Seçilen yapılandırılabilir SKU#

Standart yapılandırılabilir ürün widget'ı, seçim durumunu Magento'ın kendi bileşeni aracılığıyla açığa çıkarır, ancak tema geçersiz kılma işlemleri şeklini değiştirir. Temanın bir basit ürün kimliğini çözdüğü noktada modülünüz içinde bir RequireJS karışımı veya dinleyici uygulayın, bu kimliği sunucu tarafından sağlanan JSON'den SKU'ine eşleştirin ve ana bilgisayarı değiştirin:

js
function renderIdealhouseSku(host, sku) {
  host.replaceChildren();
  if (!sku || !sku.trim()) return;

  var container = document.createElement('div');
  container.dataset.idealhouseButtonContainer = '';
  container.dataset.productCode = sku.trim();
  host.appendChild(container);
}

Bu karışım ve kimlikten-SKU'e veri, müşteri adaptörü işidir. Alt SKU'ü seçenek etiketlerinden çıkarmayın ve halka açık SDK sözleşmesinin parçası olmayan bir ideal.house olayını veya yöntemini belgelemeyin.

Dinamik içerik ve önbellekler#

Renk veya doku örneği seçimlerindeki değişiklikler, AJAX ile yüklenen öneriler, hızlı görüntüleme veya müşteriye özel içerik kapsayıcı öğeyi değiştirdiğinde kapsayıcıyı yeniden oluşturun. Magento'ın contentUpdated olayı, enjekte edilen içerikteki Magento bileşenlerini başlatır; ancak tek başına seçili bir SKU sağlamaz, bu nedenle adaptörünüz yine de doğru kodu çözmeli ve işlemelidir.

Kod değişikliklerinden sonra, ortama uygun dağıtım adımlarını çalıştırın, yerleşim/tam sayfa/blok önbelleklerini temizleyin ve statik içeriği yeniden dağıtın. Üretim paketleme/azaltma ve Varnish/CDN etkinleştirilerek test edin.

Ürün verisini içe aktarın#

Basit ve alt ürün SKU'larını ideal.house sku'a eşleştirin. Ürün yükleme kullanın, bu içe aktarma, iş durumu, listeleme, güncellemeler, silme ve yeniden deneme kılavuzu içerir. Magento dışa aktarmaları, Yönetici API çağrıları, cron işleri ve web kancaları müşteri adaptörleridir.

Doğrulayın ve kaldırın#

Basit, yapılandırılabilir, eksik-SKU, devre dışı-alt ve bilinmeyen-SKU durumlarını test edin. Tek bir SDK isteğinin, her örnek/seçenek değişikliğinden sonra kesin SKU eşlemesinin, hızlı görüntüleme ve önerilerde temiz davranışın, mobil yerleşimin, önbellek isabetlerinin, müşteri grubu sayfalarının ve onay kontrollerinin doğrulayın. Gizli bir kimlik bilgisinin kaynakta veya statik varlıklarda görünmediğini doğrulayın.

Kaldırmak için, özel modülü devre dışı bırakın/kaldırın veya alt-tema yerleşim/şablon/RequireJS dosyalarını kaldırın, statik içeriği yeniden dağıtın, önbellekleri temizleyin ve SDK URL ile kapsayıcıların bulunmadığını doğrulayın.

Resmi platform referansları#