BigCommerce'e Sanal Deneme Nasıl Eklenir

BigCommerce satıcıları Shopify benzeri bir uygulama bloğunu temaya koyup işi bitmiş saymak isteyebilir — Stencil'in şablon yapısı script yerleşimi ve ürün sayfası kütüphanelerinin önemli olduğu anlamına gelir. Bağlantıyı yanlış yaparsanız, sanal deneme düğmesi ya hiç görünmez ya da en çok satılan ürün şablonunuzda bozulur. Bu kılavuz gerçek Stencil düzenlemelerini sırasıyla gösterir, böylece yayın günü bir hata ayıklama oturumuna dönüşmez.

BigCommerce'in Stencil çatısı kaygıları daha monolitik tema editörlerine alışkın takımları şaşırtan bir şekilde ayırır: Handlebars şablonları işaretlemeyi render eder, theme.js (veya özel paketin) davranışı yönetir ve Sayfa Oluşturucu widget katmanı her ikisinin üstünde oturur. Sanal deneme, bir tema güncellemesinden hayatta kalmasını istiyorsanız her üçünde de bir dayanak noktasına ihtiyaç duyar. Aşağıda BigCommerce'de YourSizer veya benzeri sanal deneme araçlarını entegre eden satıcılara önerdiğimiz sıra bulunmaktadır.

BigCommerce Entegrasyonu Neden Sadece "Bir Script Etiketi Yapıştırma" Değildir

header.html'ye atılan genel bir gömme script teknik olarak yüklenecek, ancak alışverişçinin hangi ürünü görüntülediğini, hangi görsellerin kullanılabilir olduğunu veya sanal deneme tetikleyicisini "Sepete Ekle" düğmesine göre nereye render edeceğini bilmeyecektir. BigCommerce ürün sayfaları product Handlebars bağlamı ve window.BCData global değişkeni aracılığıyla yapılandırılmış verileri iletir ve doğru şekilde bağlanan bir sanal deneme widget'ı DOM'u kazımak yerine her ikisinden de okumalıdır.

Bu önemlidir, çünkü Stencil temaları (Cornerstone ve türevleri) periyodik olarak güncellenir ve DOM-kazıma script'leri bir tema yazarı öğeleri yeniden sıraladığında sessizce bozulur. BCData.product_attributes'tan veya sayfaya gömülü ürün JSON'dan okumak daha dirençlidir. Kurulum sırasında yapılan küçük bir ek adım, tema satıcınız bir güncelleme gönderdikten üç ay sonra bir destek talebini kaydeder.

Kod'a Dokunmadan Önce Stencil Temanızı Hazırlama

Herhangi bir şey düzenlemeden önce, BigCommerce tema editöründe doğrudan düzenlemek yerine Stencil CLI (stencil pull) ile temanızın yerel bir kopyasını çekin. Bu size sürüm denetimi ve ürün sayfası şablonunu bozan bir düzenlemeyi geri alma yolu verir.

Sanal deneme entegrasyonu için en önemli iki dosya:

Mağazanızın kullandığı ürün şablonu varyantını da doğrulamak isteyeceksiniz — Cornerstone birden fazla ürün-görünüm düzeni ile sevk edilir ve özel temalar sıkça bu dosyayı çatallayacaktır. Cornerstone'un varsayılan yollarının geçerli olduğunu varsaymadan önce config.json'da etkin tema adını kontrol edin.

Script Yerleşimi: Sanal Deneme Paketi Nerede Yüklenir

Sanal deneme yükleyici script'ini templates/layout/base.html'de, kapanış </body> etiketinden hemen önce, yalnızca ürün sayfalarında yüklenecek şekilde yerleştirin:

{{#if type "product"}}
  <script src="https://cdn.yoursizer.com/widget/loader.js" defer></script>
{{/if}}

Bunu defer özniteliği ile mağaza genelinde yüklemek de genellikle iyidir — script ayak izi küçüktür ve global yük, widget'ın daha sonra kategori ızgaralarından "hızlı sanal deneme" önizlemesi eklerseniz koleksiyon sayfalarında da bir dayanak noktasına sahip olması anlamına gelir. Ancak Core Web Vitals'ı agresif bir şekilde optimize ediyorsanız, koşullu {{#if type "product"}} kapı, şeyleri gerçekte kullanıldığı yere kapsamlandırır.

Script açıkça async, render engellemeyen yükleme için oluşturulmadığı sürece script'i <head>'de yerleştirmeyin — ürün sayfasında <head>'deki senkron bir script etiketi, En Büyük İçerik Boyası'nda gecikmeli olarak ortaya çıkmanın yaygın bir nedenidir; BigCommerce'in kendi Sayfa Oluşturucu performans raporları bu sorunu işaret edecektir.

Widget'ı Ürün Sayfası Şablonuna Bağlama

Bu, çoğu entegrasyonun yanlış yaptığı adımdır: tetikleyici düğmenin sayfanın üstünde veya altında kayan şekilde değil, boyut/varyant seçicilerin yakınına oturması gerekir. product-view.html'de product.options veya "Sepete Ekle" formunu render eden bloğu bulun ve hemen sonrasına bir konteyner div'i ekleyin:

<div id="yoursizer-tryon-root"
     data-product-id="{{product.id}}"
     data-product-images="{{product.images}}">
</div>

Daha sonra product-details.js'de, widget'ın montaj çağrısını alışverişçi varyant/renk seçeneklerini değiştirdiğinde sayfayı güncellemek için BigCommerce'in kullandığı aynı yaşam döngüsüne bağlayın — tipik olarak ProductDetails görünümünün updateProductAttributes veya eşdeğer olayı. Bu kritiktir: alışverişçi "Kırmızı"dan "Mavi"ye geçerse, sanal deneme önizlemesi yeni ürün görsellerine sahip olarak yeniden render edilmesi gerekir, eski rengi göstermeyi değil. Bu adımı atlamak, erken entegrasyon denemelerinde gördüğümüz tek en yaygın hatadır — widget sayfa yüklemede çalışır, ardından varyant değişikliğinden sonra sessizce yanlış kıyafeti gösterir.

Üretim'e Dokunmadan Önce Hazırlık Ortamında QA

BigCommerce, tema değişikliklerini yayınlamadan önce hazırlık URL'sinde önizlemenizi sağlar ve bu adım sanal deneme entegrasyonu için isteğe bağlı değildir — yukarıdaki varyant-senkronizasyon hatası ve mobil düzen sorunlarını yakaladığınız yerdir. Hazırlık ortamında bu kontrol listesini çalıştırın:

• Birden fazla renk/boyut varyantına sahip bir ürün yükleyin ve varyant değişikliğinde sanal deneme önizlemesinin güncellendiğini doğrulayın.
• Gerçek bir mobil cihazda test edin, sadece yeniden boyutlandırılmış bir masaüstü tarayıcı değil — Stencil'in mobil ürün şablonu yapısal olarak masaüstünden farklı olabilir.
• Widget'ın daha küçük ekranlarda "Sepete Ekle" düğmesini sayfanın altına kaydırmadığını doğrulayın.
• Hiç varyantı olmayan ve resimleri olmayan bir ürünü kontrol edin, widget'ın bir konsol hatası atmak yerine zarif bir şekilde başarısız olduğundan emin olmak için.
• Script yükün Sayfa Oluşturucu performans puanınızı geriletemediğini doğrulayın.

Ancak bunların geçmesinden sonra tema düzeltmesini canlı mağazanızda yayınlamalısınız. Stencil tabanlı düzenlemeler bir uygulamayı değiştirebilen bir uygulama yüklemesi yerine dosya seviyesi olduğundan, kötü bir dağıtımı geri almak önceki tema sürümünü yeniden yayınlamak anlamına gelir — hazırlık QA bu nedenle gerçek güvenlik ağıdır, hızlı bir üretim hotfix değildir.

YourSizer Nereye Uyuyor

YourSizer'ın BigCommerce entegrasyonu, render edilen HTML'i kazımak yerine doğrudan Stencil ürün bağlamından ürün ve varyant verileri okumak için oluşturulmuştur; bu, yukarıda açıklanan dirençlilik boşluğudur. Yükleyici script, product-view.html'ye yerleştirdiğiniz konteyner div'ine monte olur ve widget, BigCommerce'in yerel olarak ateşlediği aynı varyant değişiklik olaylarını dinler; renk ve boyut değişiklikleri özel olay bağlantısı olmadan eşitlenmiş kalır. Sanal deneme yerine beden önerisi katmanını da isteyebilecek takımlar için, her ikisi de aynı script ve konteynırdan çalışır — aynı ürün kataloğu için beden önerisi çözümünü nasıl seçeceğiniz değerlendiriyorsanız yararlı bağlam. Kurulum kendisi tam bir tema yeniden yapılandırması gerektirmez; çoğu satıcı yukarıda açıklanan şablon düzeltmesi ve hazırlık QA geçişini bir öğleden sonrada tamamlarlar.

Sıkça Sorulan Sorular

BigCommerce'e sanal deneme eklemek özel bir uygulama mı gerektirir, yoksa sadece tema düzenlemesiyle mi yapılabilir?

İki yaklaşım da mevcut. Yukarıda anlatıldığı gibi product-view.html ve base.html'i doğrudan düzenleyen tema seviyesi entegrasyon, yerleşim üzerinde en fazla kontrolü verir ve Stencil'e hakim çoğu ekibin lansman için kullandığı yöntemdir. Bazı sanal deneme sağlayıcıları ayrıca OAuth ile kurulan ve script'i otomatik olarak enjekte eden bir BigCommerce App Marketplace listesi de sunar; bu, biraz yerleşim kontrolünü kod düzenlemesi olmadan daha hızlı bir kuruluma karşı takas eder. Ekibiniz zaten özel bir Stencil temayı sürüyorsa, manuel yol genellikle tasarım sisteminizle uyumlu tutmak için daha kolaydır.

Sanal deneme BigCommerce ürün sayfalarımı yavaşlatır mı?

Script <head> içinde senkron yüklenirse veya bundle lazy loading için optimize edilmemişse, evet yavaşlatabilir. Script'i defer ile yüklemek ve yukarıda gösterildiği gibi ürün sayfası şablonlarına sınırlamak etkiyi minimumda tutar — genellikle bir sohbet widget'i veya bir yorum eklentisi eklemekle benzer. Entegrasyon canlıya çıkmadan önce ve sonra Page Builder veya Core Web Vitals raporunuzu kontrol etmeye değer, çünkü BigCommerce bu veriyi doğal olarak sunuyor ve hiçbir şeyin geri gitmediğini doğrulamanın en güvenilir yolu bu.

Sanal deneme, bir BigCommerce ürün sayfasındaki standart bir beden tablosundan nasıl farklıdır?

Beden tablosu, alıcının kendi ölçülerine göre yorumlaması gereken statik bir referans tablosudur; sanal deneme ise belirli bir giysin bir vücut veya avatar üzerinde nasıl göründüğünün görsel bir önizlemesini üretir. Örtüşen ama farklı sorunları çözerler — biri "bu bana olur mu"yu, diğeri "bu üzerimde iyi durur mu"yu ele alır — ve çoğu mağaza birini diğerinin yerine koymak yerine ikisini yan yana çalıştırır. Sınırlı bir geliştirme bütçesinde hangisine önce öncelik vereceğinizi tartıyorsanız, sanal deneme mi beden önerisi mi bu takası daha derinlemesine ele alıyor.

Sonuç

BigCommerce'te sanal denemeyi doğru yapmak, Stencil'in bir ürün sayfasını gerçekte nasıl render ettiğine ve güncellediğine saygı göstermekle ilgilidir — script yerleşimi, varyant değişim bağlantıları ve gerçek bir staging geçişi, hangi sanal deneme sağlayıcısını seçtiğinizden daha önemlidir. Şablon bağlantısını bir kere doğru yapın, tema güncellemeleri ve katalog değişiklikleri boyunca tekrarlayan bakım işine dönüşmeden ayakta kalır; staging QA adımını atlarsanız, muhtemelen varyant senkron hatasını bir test koşusundan değil bir müşteriden öğrenirsiniz.