Dawn'ın cart-drawer.js'i Açıklanmış: Ham Dosya, Dosya Yapısı ve Nasıl Özelleştirileceği

raw.githubusercontent.com/Shopify/dawn/main/assets/cart-drawer.js adresindeki dosya, Dawn'ın kaydırılabilir sepet çekmecesini çalıştıran derlenmiş JavaScript varlığıdır. CartDrawer özel öğesini tanımlar, açılma/kapanma animasyonlarını yönetir, AJAX sepet güncellemelerini tetikler ve çekmece durumunu sayfanın geri kalanıyla senkronize tutar. Eğer bu ham URL'yi aradıysanız, neredeyse kesinlikle kaynağı okumaya, genişletmeye veya kırılan bir özelleştirmeyi hata ayıklamaya çalışıyorsunuz.

Temel Noktalar

• cart-drawer.js Dawn'ın assets/ klasöründe bulunur ve theme.liquid aracılığıyla ertelenmiş bir komut dosyası olarak yüklenir.
• CartDrawer sınıfı, Drawer'ı genişleten ve open() ile close() yöntemlerini ortaya koyan bir Web Component'dir (özel öğe).
• Çekmece kendisini DOM'u doğrudan değiştirmek yerine Shopify'ın Section Rendering API'sini çağırarak yeniden oluşturur.
• GitHub'daki Dawn'ın main dalı yayınlanmamış kod içerebilir; tüccarlarla sevk edilen kararlı sürüm Shopify Theme Store'da bulunandır.
• cart-drawer.js'i doğrudan değiştirmek sizi manuel güncelleme yoluna sokar. Mümkün olduğunda uygulama bloklarını veya ayrı bir varlık dosyasını tercih edin.

Geliştiriciler Neden Bu Ham Dosyayı Araştırır

Dawn, Shopify'ın lider ücretsiz referans temasıdır. Mart 2026 itibariyle, 268.000'den fazla aktif Shopify mağazasının onu kullanması, platformdaki en yaygın olarak dağıtılan tema haline gelmiştir. Tam kaynak kodu GitHub'da herkese açık olduğundan, geliştiriciler sık sık ham URL'yi şu amaçlarla kullanır:

• GitHub arayüzünde gezinmeden CartDrawer sınıfını okuyabilmek
• Yerel kopyalarını yukarı akış main dalına karşı karşılaştırarak tema güncellemesinden sonra değişiklikleri tespit etmek
• Belirli yöntemleri (örneğin renderContents() veya getSectionsToRender()) bir yardımcı komut dosyasına kopyalamak
• Üçüncü taraf entegrasyonlar yazılmadan önce pub/sub etkinlik sistemini anlamak

Dosya, izinli açık kaynaklı lisans altında değil, kaynağa açıktır; bu nedenle herhangi bir kısmını yeniden dağıtmadan önce her zaman Shopify'ın lisans koşullarını kontrol edin.

Dosya Nasıl Yapılandırılır

Dawn, "HTML-birinci, JavaScript-yalnızca-gerektiğinde" felsefesini takip eder ve bu da cart-drawer.js'in tam olarak nasıl yazıldığını şekillendirir. Dosyanın içinde bulacaklarınız:

1. Drawer temel sınıfı - open(), close(), odak tutmayı ve aria-expanded özniteliğini yöneten genel bir Web Component. Hem sepet çekmecesi hem de mobil menü çekmecesi bunu devralır.
2. CartDrawer sınıfı - Drawer'ı genişletir. open() çağrıldığında, renderContents()'i çağırarak Shopify'ın Section Rendering API'si aracılığıyla cart-drawer bölümünün taze bir işlemesini alır ve iç HTML'yi değiştirir. Bu nedenle çekmece, sayfa yenilenmeden her zaman mevcut sepet durumunu yansıtır.
3. CartDrawerItems sınıfı - cart.js'de tanımlanan CartItems'ı genişletir. Miktar değişiklikleri, satır öğesi kaldırma ve hata görüntülemeyi yönetir ve tam sayfa sepetin davranışını yansıtır ancak çekmecenin DOM kimliklerine kapsam atar (ön ek CartDrawer-).
4. Olay dinleyicileri - Dosya, diğer bileşenlerin (hızlı ekle, ürün formları) CartDrawer örneğine doğrudan bağlanmadan çekmece yenilemesini tetikleyebilmesi için cart-update pub/sub etkinliğini dinler.

getSectionsToRender() yöntemi, her biri bir bölüm kimliğini çekmecenin HTML'sinde bir seçiciye eşleyen bir dizi bölüm tanımlayıcısı döndürür. AJAX yanıtı geldiğinde, Dawn bu diziyi yineler ve yalnızca ilgili DOM düğümlerini yamalanır, yeniden oluşturmaları cerrahi tutar.

GitHub'da Ham Dosya Nasıl Okunur

Kanonik konum:

https://github.com/Shopify/dawn/blob/main/assets/cart-drawer.js

curl, fetch veya bir kod editörü için uygun düz metin sürümünü almak için:

https://raw.githubusercontent.com/Shopify/dawn/main/assets/cart-drawer.js

Hareketli main dalı yerine belirli bir sürüme sabitleme için, main'i bir etiketle değiştirin, örneğin v15.4.1 (Aralık 2025 kararlı sürüm). Bu, Shopify yeni kod sevk ettiğinde değişmeyecek kararlı bir URL sağlar:

https://raw.githubusercontent.com/Shopify/dawn/v15.4.1/assets/cart-drawer.js

Not: Shopify, main dalının tüccarlar tarafından henüz yayınlanmamış özellikler için kod içerebileceğini açıkça belirtir. Canlı mağazanıza karşı karşılaştırırken, her zaman main yerine yüklü sürüminizle eşleşen etiketli sürümle karşılaştırın.

Dosyayı Üzerine Yazmadan Sepet Çekmecesi Nasıl Özelleştirilir

cart-drawer.js'i doğrudan düzenlemek en hızlı yoldur ve uzun vadede en acı verici olanıdır. Her Dawn tema güncellemesi o dosyanın yeni bir sürümünü gönderir ve manuel bir düzenleme, değişiklikleri elinizle yeniden uygulamanız veya onları kaybetmeniz anlamına gelir.

Tercih sırasına göre daha güvenli desenler:

• Ayrı bir varlık dosyasında alt sınıflandırma. assets/cart-drawer-custom.js oluşturun, theme.liquid'de cart-drawer.js'den sonra içeri aktarın ve CartDrawer sınıfını değiştirmek yerine genişletin. Kodunuz tema güncellemelerinde kalır.
• Pub/sub etkinlik sistemini kullanın. Dawn, subscribe(PUB_SUB_EVENTS.cartUpdate, callback) yardımcı programını ortaya koymaktadır. Herhangi bir komut dosyası, çekmecenin iç yöntemlerine dokunmadan sepet değişikliklerini dinleyebilir ve tepki verebilir.
• Uygulama Bloğu Kullanın. Bir Shopify uygulaması veya tekrarlanabilir bir özelleştirme oluşturuyorsanız, bir Uygulama Bloğu, tema dosyalarını hiç düzenlemeden çekmecenin alt bilgisine HTML ve komut dosyası enjekte etmenizi sağlar.
• Sepet türü için kodsuz seçenek. Shopify yöneticisinde Online Store (Çevrimiçi Mağaza) > Themes (Temalar) > Customize (Özelleştir) > Theme Settings (Tema Ayarları) > Cart'a gidin. Tek satır kod yazmadan sepet türünü Drawer, Page ve Notification arasında değiştirebilirsiniz.

Eğer cart-drawer.js'i doğrudan düzenlemek gerekiyorsa (örneğin, getSectionsToRender()'de hangi bölümlerin getirileceğini değiştirmek için), temanızı GitHub'da sürüm kontrolü altına alın ve her Dawn sürümünde ne değiştiğini görebilmek için bir diff akışı ayarlayın.

Yaygın Özelleştirmeler ve Bilinen Sorunlar

Çekmecenin programlı olarak açılması. CartDrawer web bileşeni, birçok geliştiricinin hızlı bir şekilde bulduğu basit bir CartDrawer.open() yöntemi ortaya koymaktadır. Zor olan kısım, harici bir ekle-sepete sonra çekmecenin içeriğini yenilemektir. Önerilen desen, çekmecenin iç render yöntemlerini doğrudan çağırmak yerine, /cart/add.js çağrısından sonra bir cart-update pub/sub etkinliğini göndermektir, çünkü bu iç API'ler Dawn sürümleri arasında değişir.

DOM kimliği adlandırma kuralları. Dawn, çekmece'ye özgü öğe kimliklerinin önüne CartDrawer- ekler (örneğin, CartDrawer-LineItemStatus, CartDrawer-CartErrors). Tam sayfa sepetin özelleştirmesini taşıyorsanız, bu çift kimlik desenlerine dikkat edin: cart.js ve cart-drawer.js'deki JavaScript, her ikisinin getElementById('cart-errors') || getElementById('CartDrawer-CartErrors') sorgusunu yapır ve bu nedenle öğelerden birinin kaldırılması sessiz hatalara neden olabilir.

Miktar kuralı desteği. cart-drawer.js'in mevcut sürümleri item.variant.quantity_rule kısıtlamalarına (minimum sipariş miktarları, artışlar ve maksimumlar) saygı gösterir; bu, toptan ve B2B mağazaları için önemlidir. Özel miktar mantığı ekliyorsanız, varyantın quantity_rule'inin zaten işlenip işlenmediğini kendi doğrulama katmanınızı eklemeden önce kontrol edin.

CSS'e karşı JS sınıfı bağlantısı. Dawn'ın HTML'si stil oluşturma ve JavaScript kancaları için aynı sınıf adlarını kullanır. drawer__inner-empty gibi bir CSS sınıfını, karşılık gelen JavaScript seçicisini güncellemeden yeniden adlandırmak, boş sepet durumunu sessizce kıracaktır.

Çoğu Geliştirmenin Kaçırdığı Envanter Açısı

Büyüyen Shopify mağazaları için sık ortaya çıkan bir desen: sepet çekmecesi mükemmel çalışır, müşteriler öğe ekler ve ürün sepete eklenen zamanla ödeme zamanı arasında stok dışına çıkar. Çekmecenin alışveriş yapanları proaktif olarak uyarması için yerleşik bir mekanizması yoktur. Bu, tema katmanı sınırlaması, bir hata değildir.

Asıl çözüm, envanter yönetim katmanının yukarı akışında bulunur. Her SKU için satış oranını, teslim süresini ve yeniden sipariş noktasını bilmek, çekmecenin "stok dışı" hatasını ortaya koymak zorunda kalmadan en çok satılan ürünleri stoklarda tutabileceğiniz anlamına gelir. Ekibiniz şu anda yeniden sipariş kararlarını hisse esasına veya bir elektronik tabloyu izleyerek yapıyorsa, o stokluk sorunları gerçekten buradan kaynaklanır.

Stockcast: Inventory Forecast, Shopify stok seviyelerinizi günlük olarak izler, saydam, adım adım matematik (kara kutu değil) ile aciliyete göre sıralı stok dışı durumlarını tahmin eder ve ops ekibinizin müşteriler sepette bir kullanılabilirlik sorunu görmeden önce neyi yeniden sipariş etmesi gerektiğini bilmesi için günlük bir özet gönderir. 25 SKU'ya kadar ücretsiz plan, ücretli katmanlar için 14 günlük deneme.

SSS

S: cart-drawer.js Dawn'ın assets klasöründe cart.js ile aynı mıdır? Hayır. cart.js, CartItems temel sınıfını ve tam sayfa sepeti mantığını içerir. cart-drawer.js, bu temel sınıfı içeri aktarır veya genişletir ve Drawer açılma/kapanma web bileşeni ile CartDrawer- önekli kimlikler için DOM sorgularını kapsayan CartDrawerItems alt sınıfı dahil olmak üzere çekmece'ye özgü davranışı ekler.

S: Shopify mağazamın hangi sürümünü çalıştırdığını nasıl öğrenirim? Shopify yöneticinizde Online Store (Çevrimiçi Mağaza) > Themes (Temalar)'a gidin. Sürüm numarası, aktif tema adınızın altında listelenir. Daha sonra bu sürümü github.com/Shopify/dawn/releases'deki GitHub deposundaki etiketli bir sürümle eşleştirilebilir ve o kesin etiket için ham dosyayı çekebilirsiniz.

S: raw.githubusercontent.com/Shopify/dawn/main/assets/cart-drawer.js'i üretimde güvenli bir şekilde kullanabilir miyim? Hayır. main dalı, tüccarlar tarafından henüz yayınlanmamış özellikler için kod içerebilen bir geliştirme dalıdır. Üretim referansı için her zaman etiketli bir sürüm URL'si kullanın (örneğin, v15.4.1). Ham dosyayı GitHub'dan doğrudan bir tarayıcı bağlamında yüklemek, performans ve güvenilirlik nedenleriyle de tavsiye edilmez; her zaman asset_url Liquid filtresi aracılığıyla Shopify'ın CDN'sinde varlıkları sunun.