Shoplazza entegrasyonu#
Room Visualizer'ü bir Tema Uygulama Uzantısı (Theme App Extension) veya özel Liquid teması ile Shoplazza'e ekleyin ve seçilen varyant SKU'ı ideal.house Ürün Kodu olarak görüntüleyin.
Doğrulama durumu: Shoplazza tema, uzantı, ürün ve varyant belgeleri 7 Eylül 2026 tarihinde incelendi. Ortak uygulama veya satıcı test mağazası mevcut değildi, bu nedenle kurulum ve varyant değiştirme bir geliştirme mağazasında doğrulanmalıdır.
SDK'yi yüklemeden önce: Panel → Ayarlar sayfasını açın, mağaza vitrininizdeki kökeni (origin) Allowed Origins (CORS) listesine ekleyin ve Kaydet düğmesine tıklayın. Yayımlanan ana bilgisayar adını ve kullandığınız önizleme veya ön üretim (staging) kökenlerini dahil edin; birden fazla kökeni virgülle ayırın. yapılandırma adımları bölümüne bakın.
Ön koşullar#
Bir Shoplazza geliştirme/satıcı mağazası, tema veya uygulama uzantısı kaynak erişimi, Shop ID, Publishable Key ve desteklenen varyant SKU'ları için içe aktarılmış kayıtlar hazırlayın. Özelleştirmeden önce satıcı temasını çoğaltın.
Bir Tema Uygulama Uzantısı, sürdürülebilir yeniden kullanılabilir yoldur. Bir App Block görünür kullanıcı arayüzü enjekte eder ve satıcı tarafından uyumlu bir ürün bölümüne eklenmelidir; bir App Embed küresel davranışı yükleyebilir.
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>
Shoplazza, variant.sku'ü belgeler; bu tam dizeyi ideal.house sku olarak kullanın.
Bir App Block ekleyin#
Ürün bölümü için bir tema uzantısı App Block'u oluşturun. Ürün bağlamındaki Shoplazza Liquid blokları product'e erişebilir. Boş bir konakla başlayın, ardından aktif temanın ürün formu durumunu seçilen varyantı sağlamak için kullanın:
<div class="idealhouse-host"></div>
{% schema %}
{
"name": { "en-US": "Room Visualizer", "zh-CN": "房间可视化" },
"target": "section",
"javascript": ["idealhouse.js"],
"settings": []
}
{% endschema %}
Tek varyantlı bir ürün için, blok JavaScript, temanın güvenli bir şekilde seri hale getirdiği verilerden product.variants içindeki tek belgelenmiş girdiyi okuyabilir. Birden fazla varyant için, temanın mevcut ürün formu bir seçim çözülene kadar konak öğesini boş tutun. Bu, belgelenmemiş bir seçili varyant Liquid özelliğine güvenmekten kaçınır.
SDK'ü yükleyin#
idealhouse.js içinde, SDK'ü bir kez yükleyin. Yeniden kullanılabilir bir uygulama için, tek bir satıcıyı sabit kodlamak yerine Shop ID ve Publishable Key'yi temizlenmiş halka açık blok/embed yapılandırması aracılığıyla sağlayın:
if (!document.querySelector('script[src="https://sdk.ideal.house/sdk.js"]')) {
const 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.append(script);
}
Asla uygulama gizli anahtarını veya ideal.house Client Secret'yi açıklamayın.
Seçili varyantı senkronize tutun#
Temanın belgelenmiş ürün formu geri çağırmasını bu adaptöre bağlayın:
function renderIdealhouseVariant(host, variant) {
host.replaceChildren();
const code = String(variant && variant.sku || '').trim();
if (!code) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = code;
host.append(container);
}
Shoplazza'in varyant nesnesi sku'ü belgeler, ancak temalar seçimi farklı şekilde uygulayabilir. Geri çağırma bağlantıları müşteri adaptör işidir. Yeni bir seçimden sonra konteyneri yeniden oluşturun; yalnızca SDK-dolu işaretlemeyi (markup) değiştirmeyin.
Koleksiyon kartları, hızlı görüntüleme, arama filtreleri ve istemci tarafında işlenen bölümler için, öğe düzeyinde bir konak ekleyin ve köprüyü temanın belgelenmiş görüntüleme geri çağırmasından sonra çalıştırın. Bir kartta son varyant bilinmiyorsa, düğmeyi atlayın veya ürün sayfasına bağlantı sunun.
Ürünleri içe aktarın#
Desteklenen her variant.sku'i dışa aktarın ve Ürün yükleme yoluyla ideal.house sku olarak 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 bölümlerine bakın.
Yönetici API dışa aktarmaları, webhooks, zamanlanmış senkronizasyon, OAuth ve uzantı dağıtımı, müşteri uygulamasıdır.
Doğrula ve kaldır#
App Block yerleşimini, Embed etkinleştirmesini, tek varyantlı bir ürünü, tüm çok varyantlı seçimleri, boş/yinelenen/bilinmeyen SKU'ları, koleksiyon kartlarını, hızlı görüntülemeyi, filtreleri, tarayıcı geçmişini, mobil cihazları, yerelleştirme/para birimini, onayı ve tema önizleme/canlı modlarını test edin. Tek bir SDK isteği ve tam varyant SKU eşlemesini doğrulayın.
Kaldırmak için, Tema Uygulama Uzantısını devre dışı bırakın ve kaldırın veya özel Liquid/JavaScript'ü kaldırın, temiz temayı yayınlayın, mağaza vitrini önbelleklerini temizleyin ve SDK'in ve tüm data-idealhouse-* düğümlerinin bulunmadığını doğrulayın.