Ideal House
İçeriğe atla

SHOPLINE entegrasyonu#

Room Visualizer'ü bir SHOPLINE çevrimiçi mağaza ile tema uygulama uzantısı veya kontrollü özel tema bloğu aracılığıyla entegre edin.

Doğrulama durumu: SHOPLINE Online Store 2.x/3.0 tema belgeleri 7 Eylül 2026 tarihinde incelendi. Ortak uygulama veya satıcı test mağazası mevcut değildi. Şablon sözdizimi ve desteklenen uzantı türleri Online Store nesline göre değişir, bu nedenle tam mağaza sürümüne karşı doğrulayın.

SDK'yı 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.

Bir entegrasyon yüzeyi seçin#

  • Online Store 2.0/2.1 üzerindeki yeniden kullanılabilir halka açık bir uygulama için, SHOPLINE bir App Block ve isteğe bağlı App Embed Block içeren bir Tema Uygulama Uzantısı (Theme App Extension) önerir.
  • Online Store 3.0 temaları, isteğe bağlı JavaScript varlıkları ve App Block'lar içeren yeniden kullanılabilir bloklar sağlar.
  • Script Tag/Asset API'leri eski veya sürüm/uygulama türüne bağlıdır; SHOPLINE'ın uyumluluk tablosunu kontrol etmeden bunları seçmeyin.
  • Tek mağazalı bir tema özelleştirmesi için, aktif sürümün blok/şablon ve varlık yapısını kullanın.

Bir geliştirme mağazası, uzantı/tema erişimi, Shop ID, Publishable Key ve içe aktarılmış varyant kodları hazırlayın.

Minimal SDK sözleşmesi#

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>

Ürün Kodu, ideal.house kataloğundaki sku ile eşleşmelidir. Bu belgeler, kurulabilir bir ideal.house SHOPLINE uygulamasının var olduğunu iddia etmez.

Tema bloğunu oluşturun#

Ürün ayrıntı sayfalarında bir konak (host) görüntüleyen bir App Block veya halka açık tema bloğu oluşturun. Online Store nesliniz için belgelenen tam ürün/varyant nesnesini ve kaçış yardımcı işlevlerini kullanın. Son mağaza vitrini HTML şu şekilde olmalıdır:

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

Şablon kaynağında, CHAIR-OAK-01'yi mevcut seçili varyant SKU/kod ifadesiyle değiştirin. Bir Shopify Liquid ifadesini SHOPLINE 3.0 Handlebars şablonlarına yapıştırmayın; bunlar farklı diller ve nesne sözleşmeleridir.

Bir App Block için, onu Theme Editor'da ürün bölümüne ekleyin. Bir App Embed için, görünür bir kullanıcı arayüzü olmadan SDK'ü küresel olarak yüklemek için kullanın. App Block'lar genellikle satıcının kurulumdan sonra bunları etkinleştirmesini/yerleştirmesini gerektirir.

SDK'i bir kez yükleyin#

Uzantı/tema JavaScript varlığında, betiği eklemesinden önce iki halka açık ayarla betiği oluşturun:

js
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);
}

Çoklu satıcı kimlik bilgileri için uzantı yapılandırması/dinamik parametreler kullanın. Yalnızca Publishable Key'ü açıklayın; uygulama gizli anahtarlarını sunucunuzda tutun.

Seçili varyantlar ve dinamik bölümler#

Aktif temanın belgelenmiş ürün seçim geri çağırmasını bir müşteri adaptörüne bağlayın:

js
function setIdealhouseVariant(host, sku) {
  host.replaceChildren();
  const code = String(sku || '').trim();
  if (!code) return;
  const container = document.createElement('div');
  container.dataset.idealhouseButtonContainer = '';
  container.dataset.productCode = code;
  host.append(container);
}

SHOPLINE temaları özelleştirilebilir, bu nedenle bu kılavuz evrensel bir mağaza vitrini varyant olayı icat etmez. Online Store 3.0, tema editörü bölüm/blok olaylarını belgeler, ancak bunlar editör yaşam döngüsü olaylarıdır, alışverişçi varyant seçim olayları değildir.

Bölümler, filtreler, sayfalama, hızlı görüntüleme veya tema editörü önizlemesi bir ürün düğümünü yeniden görüntülediğinde, taze bir konteyner oluşturun. Bir blok Theme Editor'da boşaltıldığında dinleyicileri temizleyin. Ürün kartı düğmeleri öğe düzeyinde bir SKU gerektirir; son varyant bilinmiyorsa denetimi (control) atlayın.

Ürünleri içe aktarın#

SHOPLINE ürün ve varyant verilerini dışa aktarın ve seçilen mağaza vitrini kodunu ideal.house sku'e eşleyin. Ürün yükleme ve onaylanmış içe aktarma, iş durumu, listeleme, güncellemeler, silme ve yeniden deneme yönetimi kılavuzlarını kullanın.

SHOPLINE Yönetici API senkronizasyonu, webhooks, uygulama OAuth ve uygulama mağazası dağıtımı, müşteri adaptör işidir.

Doğrula ve kaldır#

Kurulumu ve satıcı blok etkinleştirmesini, basit bir ürünü, her varyantı, eksik/bilinmeyen kodları, kartları, hızlı görüntülemeyi, filtreleri, SPA-stili navigasyonu, mobil cihazları, onayı, tema editörü önizlemesini ve desteklenen her Online Store sürümünü test edin. Tek bir SDK isteği ve tam kod/SKU eşlemesini doğrulayın.

Kaldırmak için, App Block/Embed'i devre dışı bırakın ve uzantıyı kaldırın veya özel bloğu ve varlığı kaldırın. Temiz temayı yayınlayın, önbellekleri temizleyin ve SDK URL veya data-idealhouse-* işaretlemesinin (markup) kalmadığını doğrulayın.

Resmi platform referansları#