Wix entegrasyonu#
Room Visualizer'i, site türünüze uyan Wix uzantı yüzeyi üzerinden Wix Stores ile entegre edin. Wix Editor ve Wix Studio farklı yaklaşımlar gerektirir.
Doğrulama durumu: Wix uzantı belgeleri 7 Eylül 2026 tarihinde gözden geçirildi. Müşteri Wix sitesi veya uygulama kimlik bilgileri mevcut olmadığından, bu uçtan uca sertifikalandırılmamıştır. SDK, konteyneriyle aynı mağaza vitrini DOM'ini paylaşmalıdır; bir HTML iframe'i bir ikame değildir.
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.
Doğru Wix yolunu seçin#
| Mağaza vitrini | Önerilen ekleme yolu | Sınırlama |
|---|---|---|
| Wix Editor sitesi, tek bir satıcı | Site Özel Kod ve bir ürün sayfası öğesi veya özel uygulama | Sayfa verileri hâlâ bir müşteri köprüsü gerektirir |
| Wix Editor Mağazaları için Wix uygulaması | Gömülü Betik Uzantısı ve Wix Stores yer tutucuları | Wix Stores için Gömülü Betikler Wix Studio'i desteklemez |
| Wix Studio sitesi | Wix Stores site eklentisi yuvası | Bir Wix uygulaması/uzantı projesi gerektirir |
| Headless Wix mağaza vitrini | SDK'i kendi React/Vue ön yüzünüze ekleyin | İlgili çerçeve kılavuzunu izleyin |
Wix, Mağazalar Gömülü Betiklerinin Wix Studio'de kullanılamadığını belgelemekte ve uygulamaları bir site eklentisi uzantısına yönlendirmektedir. Bir Editör gömülü betik çözümü kurup Studio kapsamı iddia etmeyin.
Ön koşullar#
Wix Stores içeren bir Wix test sitesi, özel kod veya uygulama uzantısı yayınlama izni, ideal.house Shop ID ve Publishable Key, içiçe aktarılmış bir test SKU hazırlayın. Seçilen Wix varyantının kendi SKU'sı olup olmadığını belirleyin. Tüm uygulama gizli anahtarlarını ve arka uç API anahtarlarını tarayıcı sayfasından uzak tutun.
Minimal SDK işaretleme dili#
Wix kodunuzun mağaza vitrini belgesinde çalışmasına izin verdiği yerde, desteklenen ideal.house işaretleme dili şudur:
<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çiçe aktarılmış ideal.house sku ile tam olarak eşleşmelidir.
Wix Editor: tek bir site için kurulum#
Wix panelinde, Ayarlar → Özel Kod yoluyla SDK etiketini ekleyin, body/body sonuna yerleştirin ve buna ihtiyaç duyan ürün sayfalarını seçin. Siteyi yayınlayın; üretim kontrolü için önizleme modu yeterli değildir.
Ardından, aynı üst düzey belgede konteyneri üreten bir ürün sayfası özel öğesi veya Wix Stores uzantı noktası ekleyin. Düğme için Wix HTML Gömme'den kaçının: bir iframe içinde çalıştığından, üst belgedeki bir betik konteynerini keşfedemez ve iframe'deki bir betik ürün sayfasını kontrol edemez.
Yerleştirilebilir öğe, kendi kodunuzda tek bir işlem sergilemelidir:
function setIdealhouseSku(host, sku) {
host.replaceChildren();
const code = typeof sku === 'string' ? sku.trim() : '';
if (!code) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = code;
host.append(container);
}
Yalnızca Wix, sayfanıza veya uzantınıza mevcut API üzerinden tam bir güncel ürün/varyant bildirdikten sonra çağırın. Bu, müşteri adaptörü kodudur; bilinçli olarak doğrulanmamış bir Wix sayfa olayı adlandırmaz.
Wix uygulaması: Wix Editor Mağazaları için Gömülü Betik#
Wix Stores, Gömülü Betik Uzantıları için details-placeholder ve bottom-placeholder konumları sağlar. Bir kapsayıcı öğeyi bu yer tutuculardan birine ekleyin; diğer uygulamalar paylaşabildiğinden içeriğini değiştirmeyin. SDK betiğini ayrı bir gömülü parça olarak yapılandırın veya tam src, data-shop-id ve data-publishable-key öznitelikleriyle programatik olarak oluşturun.
CLI ile oluşturulan gömülü betiklere mevcut Wix Site API, mağaza vitrini bağlamını okuyabilir. Güncel varyant SKU'i, Wix'in desteklediği Mağazalar API üzerinden çözümlen ve ardından setIdealhouseSku() köprüsünü çağırın. Tam bir SKU var olana kadar yer tutucuyu boş bırakın.
Wix Studio: site eklentisi#
Belgelenmiş bir ürün sayfası yuvasını hedefleyen bir Wix Stores site eklentisi oluşturun. Konteyneri eklenti arayüzünden oluşturun ve SDK'yi Wix-oluşturulan site belgesinde yükleyin. Eklenti, çözümlenmiş güncel varyant SKU'ini DOM konteynerine geçirmelidir. Wix Studio yuva adları ve bileşen API'leri evrilebilir; uzantıyı oluştururken bu kılavuzdan bir ad kopyalamak yerine güncel CLI/API referansından seçin.
Denetimi yalıtılmış bir iframe içinde oluşturan bir eklenti yuvası kullanmayın: SDK ve görüntüleyicisi o sınır için sertifikalandırılmamıştır. Konteyneri mağaza vitrini belgesine yerleştiren bir Wix uzantı noktası seçin veya belgesi kontrol ettiğiniz bir headless mağaza vitrini kullanın.
Ürün eşleme ve gezinme#
Wix ürün veya varyant sku'sini ideal.house sku'e eşleyin. Üretilmiş bir kimlik, bilinçli olarak içiçe aktarılmadıkça bir katalog SKU ile eşleşmeyeceğinden, sessizce Wix ürün kimliğine geri düşmeyin.
Wix ürün sayfaları, seçenek seçimi veya istemci gezinmesi sırasında içeriği değiştirebilir. Her belgelenmiş ürün/seçim geri çağrımında:
- önce oluşturulan konteyneri temizleyin;
- tam seçilen varyantı çözümlen;
- SKU ile taze bir konteyner ekleyin;
- tam veya görüntülenebilir bir SKU yoksa ana evreni boş bırakın.
Galeriler ve tekrarlayıcılar için, her öğenin kendi öğe düzeyinde SKU'süne ihtiyacı vardır. Hızlı görüntüleme ve modal ürünler, modal yuvasında aynı yaşam döngüsü köprüsünü gerektirir.
Ürünleri içe aktarın#
Wix Stores, ideal.house ile otomatik olarak senkronize edilmez. Wix ürün ve varyant alanlarını dışa aktarın, her istenen Wix SKU'ü sku olarak ayarlayın ve Ürün yükleme kullanın. ürünleri içe aktar, iş durumu, ürünleri listele, ürünleri güncelle, ürünü sil ve hatalar ve yeniden denemeler bölümlerine bakın.
Otomatik bir Wix-den-ideal.house'e senkronizasyon, uygulama kurulum akışı veya Wix webhook işleyicisi müşteriye ait bir işlemdir; bu kılavuz bunu vaat etmez.
Yayınlamadan önce doğrulayın#
- Yayımlanmış siteyi masaüstü ve mobilde gizli bir tarayıcı penceresinde test edin.
- SDK'in konteynerle aynı belgede bir kez yüklendiğini doğrulayın.
- DOM Ürün Kodunu, içiçe aktarılmış SKU ile tam olarak karşılaştırın.
- Son bir varyant seçilene kadar her seçeneği değiştirin; eski konteynerin kaldırıldığını ve yeni birinin göründüğünü doğrulayın.
- Wix istemci gezinmesini, ürün galerisi/tekrarlayıcı sayfalarını, hızlı görüntülemeyi, tarayıcı Geri/İleri'yi, onay ayarlarını ve üye/çıkış yapılmış modları test edin.
- Bilinmeyen veya boş bir SKU'in bozuk bir görüntüleyici denetimi bırakmadığını doğrulayın.
- Bir uygulama için, kurulumu, etkinleştirmeyi, devre dışı bırakmayı ve kaldırma işlemlerini, destekleniyorsa ayrı Wix Editor ve Studio test sitelerinde test edin.
Entegrasyonu kaldırın#
Wix Özel Kod girdisini silin veya devre dışı bırakın ve ürün sayfası öğesini kaldırın. Bir uygulama için, Gömülü Betiği veya site eklentisi uzantısını kaldırın ve test sitesinden kaldırın. Yayınlayın, ardından betik isteminin ve tüm data-idealhouse-* düğümlerinin yok olduğunu doğrulayın.