Ideal House
İçeriğe atla

WordPress entegrasyonu#

Bir WordPress sitesine ideal.house Room Visualizer eklemek için tek bir herkese açık tarayıcı betiği yükleyin ve içiçe geçmiş bir konteyneri, içiçe geçmiş bir katalog SKU ile eşleşen ürün koduna sahip olacak şekilde oluşturun.

Doğrulama durumu: Belge 7 Eylül 2026 tarihinde gözden geçirildi. Bu kılavuz, bir müşteri WordPress teması üzerinde uçtan uca sertifikalandırılmamıştır. Yayınlamadan önce, kullandığınız tema ve sayfa oluşturucu sürümlerinin ön üretim ortamındaki bir kopyasında doğrulayın.

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

Kapsam ve ön koşullar#

Bu kılavuz, WordPress içerik siteleri, klasik temalar, blok temalar ve HTML eklemenize izin veren sayfa oluşturucuları kapsar. Site WooCommerce ürün verilerini kullanıyorsa, varyant seçimi için WooCommerce kılavuzuna bakın.

Hazırlık:

  • yönetici erişimi ve kalıcı yöntem için bir alt tema veya küçük siteye özel bir eklenti;
  • ideal.house Panelinden Shop ID ve Publishable Key;
  • bilinen bir sku ile ideal.house'e zaten içiçe geçmiş bir ürün;
  • test sırasında önbellek/azaltma devre dışı bırakılabilen bir geçici sayfa.

Publishable Key tarayıcı işaretleme dili içindir. Asla bir Client Secret veya AI API anahtarını WordPress HTML içinde yerleştirme.

SDK sözleşmesini doğrulayın#

Desteklenen en küçük kurulum, tam olarak bir SDK betiği ve bir üretilmiş düğme konteyneridir:

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>

data-product-code, büyük/küçük harf ve noktalama işaretleri dahil olmak üzere katalog sku ile eşleşmelidir. SDK, konteynerin içeriğinden sorumludur. Bu kılavuzda WordPress, bir ideal.house eklentisi sağlamaz.

Betik site genelinde kurun#

WordPress, ön yüz betiklerini wp_enqueue_script() üzerinden yüklemeyi önerir. Aşağıdakileri bir alt tema functions.php'sına veya siteye özel bir eklentiye ekleyin. Filtre, WordPress'nin ürettiği etikete gerekli iki veri özniteliğini ekler.

php
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script(
        'idealhouse-room-visualizer',
        'https://sdk.ideal.house/sdk.js',
        array(),
        null,
        array('strategy' => 'async', 'in_footer' => true)
    );
});

add_filter('script_loader_tag', function ($tag, $handle) {
    if ($handle !== 'idealhouse-room-visualizer') {
        return $tag;
    }

    return str_replace(
        '<script ',
        '<script data-shop-id="<SHOP_ID>" data-publishable-key="<PUBLISHABLE_KEY>" ',
        $tag
    );
}, 10, 2);

Her iki yer tutucuyu değiştirin. 6.3'ten önceki WordPress sürümleri, son wp_enqueue_script() argümanının dizi biçimini kabul etmez; bunun yerine true geçirin ve async'i de eklemek için script_loader_tag filtresini kullanın.

SDK'ü bir Kod bloğunda veya etiket yöneticisinde tekrar kurmayın. DevTools'ta document.querySelectorAll('script[src="https://sdk.ideal.house/sdk.js"]').length, 1 döndürmelidir.

Bir düğme yerleştirin#

Blok düzenleyicide, düğmenin görünmesi gereken yere bir Özel HTML bloğu ekleyin:

html
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>

Tekrarlanan kartlar için, aynı işaretleme dilini tema şablonundan oluşturun ve kodu bir HTML özniteliği olarak kaçış yapın:

php
<div
  data-idealhouse-button-container
  data-product-code="<?php echo esc_attr($idealhouse_product_code); ?>"
></div>

Temanız veya eklentiniz $idealhouse_product_code sağlamalıdır. Bu tam değer içe aktarılmış ideal.house sku değilse, bir gönderi kimliği, slug veya başlık kullanmayın.

Ürün ve varyant eşleme#

Başlamadan önce açık bir eşleme tablosu oluşturun:

WordPress değeriideal.house değeriKural
idealhouse_sku gibi özel bir alanskutam dize eşleşmesi
varyantı olmayan tek bir sayfaiçiçe geçmiş tek bir ürüntek bir konteyner
sayfa oluşturucu koleksiyon öğesiöğe düzeyinde SKU alanıkoleksiyon genelindeki kodu asla yeniden kullanmayın

Sayfa varyantlar arasında değişiyorsa, müşteri adaptörü yeni data-product-code'yi ayarlamalıdır. Eski görüntüleyici durumunun yeniden kullanılamaması için yeni konteyneri eklemeden önce eski konteyneri temizleyin:

js
function renderIdealhouseButton(host, sku) {
  host.replaceChildren();
  if (!sku) return;

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

Bu, müşteri adaptörü kodudur. Belgelenmemiş bir ideal.house yöntemini çağırmaz veya uydurma bir WordPress olayı oluşturmaz; temanızın veya sayfa oluşturucusunun sağladığı belgelenmiş geri çağrımdan çağırmalısınız.

Dinamik gezinme ve önbellekler#

AJAX filtreleri, sonsuz kaydırma, modal ürün kartları veya sayfa oluşturucu geçişleri için, yeni ürün düğümü DOM'a girdikten sonra taze bir konteyner ekleyin. SDK'in zaten doldurduğu bir konteyneri klonlamayın. Araçınız kararlı bir oluşturma geri çağrımı sağlamıyorsa, her oluşturma temiz işaretleme dili oluşturacak şekilde konteyneri öğe şablonuna ekleyin.

Bir tema düzenlemesinden sonra WordPress, CDN ve optimizasyon eklentisi önbelleklerini temizleyin. Bir performans eklentisi veri özniteliklerini kaldırıyor veya etkileşimden sonrasına kadar erteliyorsa, https://sdk.ideal.house/sdk.js'i gecikme/erteleme yeniden yazımından hariç tutun.

Katalog verisi içe aktarın#

WordPress içeriği otomatik olarak senkronize edilmez. Seçilen özel alanı sku olarak dışa aktarın ve eşleşen kayıtları Ürün yükleme yoluyla içe aktarın. ürünleri içe aktar, iş durumu, ürünleri listele, ürünleri güncelle, ürünü sil ve hatalar ve yeniden denemeler ile devam edin.

Yayınlamadan önce doğrulayın#

  1. Geçici ortamı, WordPress düzenleyici önizlemesi yerine gizli bir tarayıcı penceresinde açın.
  2. SDK isteminin başarıyla ve yalnızca bir kez döndüğünü doğrulayın.
  3. Konteyneri inceleyin ve data-product-code'ü karakter karakter içiçe aktarılmış sku ile karşılaştırın.
  4. İçe aktarılmış bir SKU'ın kullanılabilir bir görüntüleyici denetimi ürettiğini ve bilinmeyen bir SKU'in bozuk bir denetim sergilemediğini doğrulayın.
  5. Sayfa oluşturucu gezinmesini, filtreleri, tarayıcı Geri/İleri'yi, mobil düzeni ve onay ayarlarını test edin.
  6. Desteklenen her varyantı seçin ve konteynerin SKU ile yeniden oluşturulduğunu doğrulayın.
  7. Tarayıcı konsolunu kontrol edin ve önbellek/azaltma etkinleştirilerek tekrar test edin.

Entegrasyonu kaldırın#

Yükleme işlevini ve script_loader_tag filtresini kaldırın, ardından her data-idealhouse-button-container bloğunu veya şablon parçasını silin. Tüm önbellekleri temizleyin ve SDK URL'ın sayfa kaynağından ve Ağ panelinden yok olduğunu doğrulayın.

Resmi platform referansları#