BigCommerce'e Beden Önerisi Widget'ı Ekleme

BigCommerce, Shopify gibi sıkı olarak uygulanmış yerel bir uygulama mağazası desenine sahip değildir, bu da beden önerisi widget'ının birden fazla şekilde eklenebileceği anlamına gelir — ve yanlış yolların çoğu yalnızca alışveriş yapan kişi belirli bir tema veya cihaza ulaştığında başarısız olur. Komut dosyası yerleşimini ve sayfa hedeflemesini ilk seferinde doğru almak, bir haftayı "neden mobil cihazda görünmüyor" biletleriyle kaydetmeyi engeller.

BigCommerce mağazaları alışılmadık bir konumdadır: platform, Komut Dosyası Yöneticisi aracılığıyla ham komut dosyası enjeksiyonuna izin verecek kadar esnek olup, aynı esneklik, kurulum bilinçli değilse bir beden widget'ının her sayfada yüklenmesini, işlemeyi engellemeyi veya Stencil tema varyasyonları arasında çoğaltılmasını sağlayabilir. Bu yazı, genel "uygulamamızı yükleyin" sunuşu yerine gerçek mekaniği açıklar — komut dosyasının nereye gittiği, ürün sayfalarına nasıl kapsamı belirleneceği ve tema özelleştirmesi sonrasında nasıl hayatta kalacağı.

BigCommerce Entegrasyonu Neden "Komut Dosyası Etiketini Yapıştır" Değildir

BigCommerce'in Stencil tema motoru ürün sayfalarını Handlebars şablonlarından işler ve çoğu mağaza bu şablonları zamanla özelleştirir — özel alanlar ekler, satın alma kutusunu yeniden düzenler veya bir sayfa oluşturucu bölümünü değiştirir. Sabit bir DOM yapısı varsayan bir beden widget'ı (söyleyin, her zaman .productView-options'dan hemen sonra ekleme yaparak), özelleştirilmiş bir temada sessizce görünmeyebilir veya tamamen yanlış bir yerde görünebilir.

Daha güvenli yaklaşım, widget'ı iki ayrı sorun olarak ele almaktır: komut dosyasını yükleme (bir kez, genel olarak, eşzamansız olarak) ve widget Kullanıcı Arayüzünü monte etme (yalnızca ürün sayfalarında, kararlı bir seçici veya belirlenen bir kapsayıcı öğeyle hedeflenmiş). İkisini birleştirmek, "demo mağazada çalışan" ama müşterinin gerçek temasında kırılan widget'ların en yaygın nedenidir.

BigCommerce Komut Dosyası Yöneticisi Aracılığıyla Komut Dosyası Enjeksiyonu

BigCommerce'in yerleşik Komut Dosyası Yöneticisi (Kontrol Panelinde Vitrin > Komut Dosyası Yöneticisi), üçüncü taraf komut dosyaları eklemek için önerilen yoldur — tam olarak bunun için tasarlanmıştır ve tema dosyalarını doğrudan düzenlemeyi engeller, bu da komut dosyasının tema güncellemeleri sonrasında hayatta kalması anlamına gelir.

Birkaç pratik ayar önemlidir:

Komut Dosyası Yöneticisinin sayfa yerleşimi kuralları mağazanın URL yapısı için yeterince ayrıntılı değilse, komut dosyasını genel olarak yükleyin ama başlatmayı çalışma zamanı kontrolüyle erteleyin — çoğu beden widget'ı SDK'sı, if (window.location.pathname.includes('/products/')) veya Stencil şablonlarında açığa çıkarılan BigCommerce'in context.page_type nesnesi karşısında kapısız bir init() çağrısı ortaya koymaktadır.

Widget'ı Ürün Sayfasında Konumlandırma

Ürün sayfası yerleşimi, görünür arızaların çoğunun gerçekleştiği yerdir. BigCommerce Stencil temaları (Cornerstone ve onun forklama) genel olarak tutarlı bir satın alma kutusu yapısını ortaya koymaktadır, fakat "genel olarak" bir mağaza bir tema özelleştirmesi yükledikten sonra "her zaman" değildir.

İki yerleşim stratejisi güvenilir bir şekilde çalışır:

• Kararlı, tema tarafından sağlanan bir öğeye bağlanın. Cornerstone tabanlı temalar tipik olarak bir .productView-options veya .form-action-addToCart konteynerini tutarlar; Sepete Ekle düğmesinden hemen önce ekleme, widget'ı tam boşluk bağımlılığı olmadan boyutlandırma kararlarına görsel olarak bağlı tutar.
• Belirlenen bir yer tutucu div kullanın. Şablon düzenlemesinden rahat olan mağazalar için, templates/components/products/product-view.html (veya sayfa oluşturucu eşdeğeri) içinde boş bir <div id="size-widget-mount"> ekleme, komut dosyasına gelecekteki tema ayarlamalarından bağımsız olarak garantili, kararlı bir hedef sağlar. Mağaza temaları değiştirmeyi beklerse bu daha dayanıklı seçenektir.

Metin içeriğine veya nth-child konumuna dayalı seçici stratejilerinden kaçının — her ikisi de bir mağaza satın alma kutusunu yeniden sıraladığında veya yukarısına bir abonelik seçenekleri bloğu eklediğinde kırılır.

Başlatmadan Önce Temalar ve Cihazlar Arasında Test Etme

Cornerstone'un varsayılan demo temasında doğru şekilde işleyen bir komut dosyası, mağazanın canlı temasında çalıştığının kanıtı değildir. Entegrasyon tamamlandı olarak çağırmadan önce doğrulayın: gerçek üretim teması (korumalı tema değil), mağaza BigCommerce'in görsel sayfa oluşturucusunu kullanıyorsa sayfa oluşturucu tarafından düzenlenmiş ürün sayfası ve en az bir mobil görüntü alanı, çünkü Stencil'in duyarlı kesme noktaları widget'ın bağlı olduğu satın alma kutusu konteynerini gizleyebilir veya daraltabilir.

Basit bir başlatma öncesi kontrol listesi:

1. Widget, standart basit bir ürün üzerinde görünür.
2. Widget, varyantlar/seçenekli bir ürün üzerinde görünür (beden widget'ları genellikle varyant seçimi üzerine tepki vermelidir).
3. Widget, bu şekilde kapsamlıysa sepet, ödeme veya blog sayfalarında görünmez.
4. Yüklemede konsol hatası yok ve mobil cihazda Sepete Ekle düğmesini ekrandan çıkaran düzen kaydırması yok.
5. Widget, sabit yenileme ve istemci tarafı navigasyon sonrasında hala işlenir (BigCommerce'in Cornerstone, tam sayfa yükü yapmayabilecek bazı AJAX sepet/hızlı görüntüleme davranışını kullanır).

Bu son nokta şaşırtıcı bir çok hatayı yakalar — yalnızca DOMContentLoaded ile başlatılan widget'lar, hızlı görüntüleme modali veya AJAX tarafından yönlendirilen varyant değişimi sonrasında kaybolabilir, çünkü sonra tam sayfa yükü ateşlenir.

YourSizer Nereye Uyar

YourSizer'ın komut dosyası, çoğu Cornerstone tabanlı mağaza için tema dosyası düzenlemeleri olmadan BigCommerce'in Komut Dosyası Yöneticisine bırakılmak üzere tasarlanmıştır ve özelleştirilmiş satın alma kutuları olan mağazaların şablonları düzenlenmekle bağlı kalmaması için yapılandırılabilir bir seçiciye karşı monte edilir. Ağır düzeyde değiştirilmiş bir temayı çalıştıran veya sayfa oluşturucu düzenini çalıştıran mağazalar için, yukarıda açıklanan yer tutucu div yaklaşımını destekleriz, bu da monte davranışını gelecekteki tema değişiklikleri arasında kararlı tutar. Boyutlandırma mantığı istemci tarafında çalışır ve varyant seçimi üzerine tepki verir, bu nedenle widget, alışveriş yapan kişi renk veya stil değiştirdiğinde eşitlenmiş kalır — yalnızca ilk yüklemede ateşlenmek yerine — AI deneme nasıl çalışır diffusion modelleriyle açıklanmıştır hakkındaki aynı mekaniğin önerisi motoru ürün ve varyant bağlamını nasıl okuduğuna uygulanır.

Sıkça Sorulan Sorular

Bir beden widget'ı eklemek BigCommerce mağazamı yavaşlatır mı?

Komut dosyası işlemeyi engellerse veya başlıkta eşzamanlı olarak yüklenirse yapabilir. Komut Dosyası Yöneticisi aracılığıyla eşzamansız veya ertelenmiş olarak yükleme ve kapsamı yalnızca ürün sayfalarıyla sınırlama, etkiyi minimum tutar — çoğu iyi oluşturulmuş beden widget'ları birkaç yüz milisaniyenin çok altında ekler ve SEO veya dönüşüm için önemli olan Çekirdek Web Vitals ölçümlerine dokunmaz, çünkü birincil ürün içeriği zaten boyanmış olduktan sonra monte edilir.

BigCommerce'in Sayfa Oluşturucu ürün sayfalarıyla beden widget'ı çalışır mı?

Evet, ama yerleşim küçük bir ayarlama gerektirir. Sayfa Oluşturucu, mağazaların ürün sayfası bölümlerini görsel olarak yeniden düzenlemesine izin verir, bu da sabit bir CSS seçicisine bağlanan bir widget'ın beklenmeyen bir yerde sonlanabileceği veya hedefini tamamen bulamayabileceği anlamına gelir. Yer tutucu div yaklaşımı, bir mağaza bu editörü aktif olarak kullanıyorsa Sayfa Oluşturucu düzenine doğrudan belirlenen bir widget bloğunu bıraktığında, daha esnek seçenektir.

BigCommerce beden widget'ı Shopify'de uygulama yüklenmesinden farkı nedir?

BigCommerce, Shopify'nin tema uygulaması uzantısı modeli gittikçe yaptığı şekilde, yalnızca uygulama mağazası genişletilebilirliğini uygulamaz, bu nedenle Komut Dosyası Yöneticisi aracılığıyla komut dosyası enjeksiyonu tam olarak desteklenen, ilk taraf bir model yerine geçici bir çözüm değildir. Bu, widget'ın tam olarak nerede ve ne zaman yükleneceği üzerinde daha fazla kontrol sağlar, ancak entegratörü komut dosyasını doğru kapsamı belirlemek için daha fazla sorumluluk koyar — Shopify'nin uygulama bloğu modeli bazı kapsamı otomatik olarak işler.

Sonuç

BigCommerce'teki bir beden önerisi widget'ı, boyutlandırma mantığında değil, komut dosyasının nereye yükleneceği ve nereye monte edileceği ayrıntılarında başarılı veya başarısız olur. Komut Dosyası Yöneticisi aracılığıyla komut dosyası enjeksiyonunu doğru kapsamı belirleyin, widget'ı kırılgan bir seçici yerine kararlı bir hedefe bağlayın ve mağazanın gerçek teması ve mobil görüntü alanında canlı çağrısından önce test edin — geri ödeme, sonraki tema ayarlaması sonrasında çalışmaya devam eden bir widget'tır, her üç ayda bir yeniden düzeltilmesi gereken bir widget yerine.