Squarespace entegrasyonu#
Room Visualizer'i Squarespace'da Kod Enjeksiyonu ile kurun ve sayfa düzenleyicisinin özel koda izin verdiği yerlere ürün özel kapsayıcıları yerleştirin.
Doğrulama durumu: Squarespace Yardım Merkezi dokümantasyonu 7 Eylül 2026 tarihinde incelendi. Müşteri Squarespace sitesi mevcut değildi. Kod Enjeksiyonu ve JavaScript Kod Blokları uygun planları gerektirir, özel kod Squarespace desteğinin dışındadır ve Ajax yükleme onu etkileyebilir.
SDK'i 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.
Kapsam ve ön koşullar#
Bu yol, kararlı ürün sayfalarına sahip küçük bir kataloğ için veya açık bir ürün kodu veri katmanını kontrol ettiğiniz bir site için en pratik olandır. Uygun bir plana, site sahibi erişimine, Shop ID, Publishable Key ve içe aktarılmış ideal.house SKU'larına ihtiyacınız var.
Bu kılavuzda Squarespace, bir ideal.house uzantısı sağlamaz. Standart ürün düzenleyicisi, seçilen varyant SKU için kararlı bir halka açık JavaScript API garanti etmez, bu nedenle varyant düzeyinde eşleştirme müşteri adaptörü işi gerektirir ve her şablonda pratik olmayabilir.
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>
Ürün Kodu, içe aktarılmış kataloğ sku ile tam olarak eşleşmelidir. Kod Enjeksiyonu'nda bir Client Secret kullanmayın.
Yükleyiciyi kurun#
Web sitesi → Sayfalar → Özel Kod → Kod Enjeksiyonu'nu açın (etiket site sürümüne göre değişebilir). SDK <script>'i Alt Bilgi'ye yapıştırın, her iki yer tutucuyu değiştirin ve kaydedin. Alt bilgi enjeksiyonu, </body>'den önce site sayfalarında çalışır; ödeme sayfaları enjekte edilen kodu desteklemez.
Yükleyiciyi yalnızca bir kez kurun. Başka bir entegrasyon zaten eklediyseniz, yineleneni kaldırın.
Bir ürün düğmesi yerleştirin#
Sayfa düzenleyicisinin JavaScript-etkin bir Kod Bloğu'na izin verdiği yerde şunu yerleştirin:
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>
Tam olarak o ürünün SKU'sünü kullanın. Squarespace 7.1'de, Mağaza/Ürün Ayrıntıları yerleşimleri, birincil ürün bilgi alanında rastgele blokları kabul etmeyebilir. Pratik bir yedek, bir Ürün Bloğu ve komşu bir Kod Bloğu ile normal bir yerleşim sayfasıdır, ürün başına bir çift. Ürün Blokları buna bağımlı olduğu için mağaza sayfasının etkin kaldığını doğrulayın.
Daha büyük kataloğlar için, bir geliştirici kararlı, müşteriye ait bir eşleştirme (ör. URL yolu SKU'a) eşleştirerek kapsayıcıları enjekte edebilir:
const skuByPath = {
'/shop/oak-chair': 'CHAIR-OAK-01',
'/shop/walnut-chair': 'CHAIR-WALNUT-01'
};
function renderForPath() {
const host = document.querySelector('[data-idealhouse-host]');
const sku = skuByPath[location.pathname];
if (!host) return;
host.replaceChildren();
if (!sku) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = sku;
host.append(container);
}
URL eşleştirme, kapsayıcı öğe ekleme ve gezinme geri çağırması müşteri kodudur. Özel Squarespace durumunu kazımayın veya şeklinin kararlı olduğunu varsaymayın.
Varyantlar, hızlı görüntüleme ve Ajax yükleme#
Bir Squarespace ürünün farklı ideal.house varlıklarına sahip birkaç varyantı varsa, yalnızca adaptörünüz seçilen varyant SKU'i desteklenen bir kaynaktan belirleyebildiğinde düğmeyi gösterin. Her değişiklikte eski kapsayıcıyı temiz bir tanesiyle değiştirin. Desteklenen bir seçim geri çağırması/veri kaynağı yoksa, yalnızca tüm varyantlar aynı görsel varlığını paylaşıyorsa tek bir ortak ürün düzeyi SKU kullanın veya düğmeyi atlayın.
Hızlı Görüntüleme, Ürün Blokları ve Ajax sayfa yükleme sayfa içeriğini değiştirebilir. Squarespace, Ajax yüklemenin özel kodla çelişebileceği konusunda uyarır. Kesin şablonu test edin; gerekirse Ajax yüklemeyi devre dışı bırakın veya renderForPath()'yi kendi gezinme mekanizmanızdan çağırın. Bir MutationObserver son çare bir müşteri adaptörüdür ve ürün bölgesine sınırlanmalıdır.
Ürün verisini içe aktarın#
Squarespace ürün/varyant SKU'den ideal.house sku'a bir tablo sürdürün, ardından Ürün yükleme kullanın. Tam halka açık iş akışı ürünleri içe aktar, iş durumu, ürünleri listele, ürünleri güncelle, ürünü sil ve hatalar ve yeniden denemeler altında belgelenmiştir.
Tarayıcı SDK, Squarespace ürünlerini eşitlemez. Herhangi bir Ticaret API dışa aktarma, web kancası veya planlanmış iş müşteriye aittir.
Doğrulayın ve kaldırın#
Giriş yapılmış düzenleme özel kodu bastırabileceğinden, yayımlanmış siteyi gizli bir pencerede test edin. Bir eşleştirilmiş ürünü, bir eksik SKU'yi, bir bilinmeyen SKU'i, Ürün Blokları'nı, Hızlı Görüntüleme'yi, Ajax gezinmeyi, tarayıcı Geri/İleri'yi, mobil yerleşimi, çerez onayını ve ödeme hariç tutulmasını kontrol edin. Başarılı bir SDK isteğinin ve kesin Ürün Kodu/SKU eşitliğinin doğrulayın.
Kaldırmak için, Alt Bilgi enjeksiyonunu ve tüm Kod Blokları/ana bilgisayarlar/eşleştirme betiklerini silin, kaydedin ve önbellekleri temizleyin. Yayımlanmış sayfanın SDK isteği veya data-idealhouse-* öğesi içermediğini doğrulayın.