Webflow entegrasyonu#
Webflow Özel Kod ve CMS/E-ticaret alanlarını kullanarak, Ürün Kodu ideal.house kataloğuyla eşleşen Room Visualizer düğmelerini işleyin.
Doğrulama durumu: Webflow Yardım Merkezi dokümantasyonu 7 Eylül 2026 tarihinde incelendi. Müşteri Webflow sitesi mevcut değildi. Özel kod önizleme/yayımlama sonrası çalışır ve Webflow bir Gömme içinde sunucu tarafı kodu çalıştırmaz, bu nedenle yayımlanmış geçici alanı test edin.
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 sınırlar#
Özel Kod veya Kod Gömme kullanma izni, bir geçici alan, Shop ID, Publishable Key ve içe aktarılmış bir kataloğ SKU'e ihtiyacınız var. Webflow plan gereksinimleri JavaScript gömmelerine uygulanır. Tarayıcıda bir Publishable Key olabilir, ancak asla bir Client Secret veya AI API anahtarı olamaz.
SDK, Webflow E-ticaret'i otomatik olarak okumaz. Şablonunuz SKU'i açığa çıkarmalıdır veya bir müşteri adaptörü bunu güvenilir bir CMS alanından türetmelidir.
Minimal SDK sözleşmesi#
<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, içe aktarılmış ideal.house sku'e tam olarak eşit olmalıdır.
Yükleyiciyi kurun#
Site ayarları → Özel kod'u açın ve SDK betik etiketini alt bilgi/gövde sonu alanına ekleyin. Yer tutucuları değiştirin, kaydedin ve yayınlayın. Site düzeyinde bir kez kurun; her CMS öğesinde tekrar etmeyin.
Webflow'ın Tasarımcı tuvali betiği çalıştırmayabilir. Önizleme veya yayımlanmış geçici bir URL üzerinde doğrulayın ve gerçek sayfa kaynakını inceleyin.
Öğe düzeyinde bir düğme ekleyin#
Örneğin Idealhouse SKU adında düz metin bir CMS alanı oluşturun. ideal.house sku olarak içe aktarılan aynı değeri doldurun. Ürün veya CMS Koleksiyonu şablonunda, düğmenin ait olduğu yere bir Kod Gömme ekleyin:
<div
data-idealhouse-button-container
data-product-code="[bind this attribute to the current item's Idealhouse SKU]"
></div>
Gömme düzenleyicisinde mevcut öğenin değerini eklemek için Webflow'ın Alan ekle denetimini kullanın; yukarıdaki köşeli parantezli talimat harfi harfine üretim işaretleme değildir. Yayımladıktan sonra DOM'i inceleyin ve örneğin şu gibi normal bir dizeye dönüştüğünü doğrulayın:
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>
Statik bir sayfa için, harfi harfine bir SKU yapıştırın. Bu kesin değer içe aktarılmış ideal.house SKU olmadıkça, sayfa slug'ını veya Webflow öğe kimliğini kullanmayın.
Varyantlar ve dinamik işleme#
Webflow'in standart Tasarımcı bağlamı, her E-ticaret yerleşiminde rastgele özel koda nihai bir varyant SKU'i açığa çıkarmayabilir. Her görsel seçenek farklı bir ideal.house varlığı gerektiriyorsa, seçilen varyantı desteklenen bir Webflow entegrasyonundan veya kendi veri katmanınızdan alan ve ardından kapsayıcıyı değiştiren bir müşteri adaptörü oluşturun:
function showIdealhouseVariant(host, sku) {
host.replaceChildren();
const code = typeof sku === 'string' ? sku.trim() : '';
if (!code) return;
const node = document.createElement('div');
node.dataset.idealhouseButtonContainer = '';
node.dataset.productCode = code;
host.append(node);
}
Bu müşteri kodudur. Gerçekten kullandığınız varyant aracındaki belgelenmiş bir geri çağrıdan çağırın. Görüntülenen seçenek metnini kazımayın veya resmi olmayan bir Webflow olayını varsaymayın.
Webflow etkileşimleri, CMS filtreleri, üçüncü taraf sayfalama ve SPA-benzeri geçişler Koleksiyon Öğeleri ekleyebilir veya değiştirebilir. Gömmeyi her öğe şablonunun içine dahil edin veya aracın belgelenmiş işleme geri çağrısından sonra köprüyü çağırın. İşlenmiş SDK işaretleme klonlamak yerine her zaman taze bir kapsayıcı oluşturun.
Kataloğ verisini içe aktarın#
Webflow Ürün/CMS alanlarınızı dışa aktarın ve Idealhouse SKU'yi sku'e eşleştirin. Ürün yükleme üzerinden yükleyin ve ürünleri içe aktar, iş durumu, ürünleri listele, ürünleri güncelle, ürünü sil ve hatalar ve yeniden denemeler bölümlerini izleyin.
Tarayıcı SDK tarafından otomatik Webflow eşitleme sağlanmaz. Herhangi bir CMS API dışa aktarma, web kancası veya otomasyon müşteriye aittir.
Doğrulayın ve kaldırın#
Geçici ortama yayınlayın ve eşleştirilmiş bir öğeyi, eksik alanı, bilinmeyen SKU'yi, Koleksiyon Listesi'ni, ürün şablonunu, filtreleri/sayfalama, modalı, mobil kırılma noktasını, onay kontrollerini ve tarayıcı Geri/İleri'yi test edin. SDK'in bir kez yüklendiğini, her işlenen kodun mevcut öğeyle eşleştiğini ve HTML içinde sunucu kimlik bilgisinin görünmediğini doğrulayın.
Kaldırmak için, site düzeyindeki SDK Özel Kod'u ve her Gömme/düğme bağlamını silin, yeniden yayınlayın ve herhangi bir vekil/CDN önbelleğini temizleyin. Betik isteğinin ve data-idealhouse-* öğelerinin yayımlanmış siteden kaybolduğunu doğrulayın.