Hero Slider - Tam Genişlik Ana Sayfa Banner ve Video Slider, Başlık Metni ve Ken Burns Yakınlaştırma

Herkesin ilk gördüğü yer

Ana sayfanızın en üstü, sahip olduğunuz en değerli alandır. Çoğu mağaza burayı bir hero slider ile kullanır: sezonluk bir banner, bir kampanya, yeni bir koleksiyon, ne sattığınızı anlatan bir video. Bu modül dördünü birden yapar — tam genişlikte, üstelik bir görseli tıklama sebebine dönüştüren başlıklar ve düğmelerle.

Sadece görsel değil, video slaytlar

Herhangi bir slayda YouTube veya Vimeo bağlantısı yapıştırın, slayt anında bir oynat düğmesi kazansın. Video, ziyaretçiyi mağazanızdan uzaklaştırmak yerine mağazanızın üzerinde şık bir lightbox içinde açılır ve YouTube'un çerez kullanmayan gizlilik dostu oynatıcısı üzerinden yayınlanır. Alanı boş bırakırsanız slayt düz bir görsel olarak kalır.

Her slayt süslemekle kalmaz, satar

Bir slayt; başlık, bir satır metin ve kendi etiketi ile bağlantısı olan bir harekete geçirici düğme taşıyabilir — aynı sekmede veya yeni sekmede açılacak şekilde. Alttaki görsele göre yazıyı sola, ortaya veya sağa hizalayın. Hepsini boş bırakırsanız elinizde tertemiz bir banner kalır. Alternatif metin de slayt bazındadır; böylece slayt gösteriniz ekran okuyucular ve arama motorları için kör bir nokta olmaz.

Hareketin kontrolü sizde

Yumuşak geçiş için Fade, yatay kayma için Slide. Milisaniye cinsinden belirlediğiniz slayt süresiyle otomatik oynatma, sonuncudan sonra başa dönen döngü, gezinme okları, tıklanabilir noktalar ve üzerine gelince duraklatma — yazıyı okuyan ziyaretçinin sözü kesilmesin diye.

İsteğe bağlı Ken Burns efekti, aktif görsele yavaş ve sinematik bir yakınlaştırma katar. Yakınlaşacak alanı bulabilmesi için sabit bir slider yüksekliğine ihtiyaç duyar; ayarın kendisi de bunu size söyler — yüksekliği otomatik bırakırsanız yakınlaştırmanın üzerinde çalışacağı bir pay kalmaz.

Baştan sona tam genişlik, alışılmış kurnazlıklar olmadan

Tam tarayıcı genişliği, slider'ı temanızın içerik kenar boşluklarının ötesine taşır ve kaydırma çubuğunun farkındadır; bu yüzden acemi tam genişlik numaralarının yaptığı gibi hayalet bir yatay kaydırma çubuğu oluşturmaz. Üst bilgiye yapıştır seçeneği, çoğu temanın slider'ın üzerinde bıraktığı boşluğu kaldırır; böylece üstteki hero, header'ın hemen altına kusursuzca oturur.

Slider yüksekliği tamamen sizin elinizde: 0 değeri görselin oranlarını izler, sabit bir değer ise her slaydı aynı yüksekliğe kırpar; farklı ölçülerde yüklenmiş görseller sayfayı zıplatmaz.

Konumu sayfadan ayrılmadan seçin

Ana sayfa, her sayfanın üstü veya alt bilgi — hepsi doğrudan yapılandırma sayfasından açılır, Tasarım → Konumlar'a gitmeye gerek kalmaz. Ayrıca dilerseniz herhangi bir tema şablonuna elle yerleştirmek için {widget name='flexslider'} etiketi de var.

Dile özel slaytlar ya da herkes için tek slayt

Her slaydı bir dil sekmesi altına kaydedin ya da aynı slaydı her yerde göstermek için Tüm diller altına alın — böylece bir kampanya, dil başına ayrı bir slider yönetmeden yalnızca geçerli olduğu pazarlarda yayınlanır.

Herkesin kullanabilmesi için tasarlandı

Telefonlarda dokunmatik kaydırma, klavye okları ve düzgün ARIA rolleri. Sisteminde azaltılmış hareket tercihi açık olan ziyaretçilerde otomatik oynatma ve Ken Burns yakınlaştırma kendiliğinden devre dışı kalır. JavaScript kullanılamadığında ise ilk slayt ve tüm bağlantıları yine de görüntülenir — slayt gösterisi boş bir alana değil, sade bir banner'a dönüşür.

Sorun giderme sayfası yerine bir Durum paneli

Eskiden elle yapılan sorun gidermenin büyük bölümü artık sizin adınıza denetleniyor. Durum paneli yapılandırma sayfasının en üstünde durur ve slider'ın görünmesini engelleyen bir şey varsa bunu açıkça söyler — en çok işinize yarayacağı durum, modülün hiçbir konuma bağlanmamış olmasıdır; yeni yapılandırılmış bir slider'ın hiçbir yerde görünmemesinin bir numaralı sebebi budur. Panel ayrıca yazılabilir olmayan uploads klasörünü — eksik görsellerin klasik sebebi — ve PrestaShop'un kendi ps_imageslider modülünün aynı ana sayfada çalışıp çalışmadığını izler; çünkü üst üste binmiş iki hero slider, elle teşhis edilmesi can sıkıcı bir durumdur. Ortada bir sorun yoksa panel bunu da açıkça belirtir.

Sürüm 2.0 iki gerçek güvenlik açığını kapattı

Bu, herhangi bir özellikten daha önemli. Sürüm 1.x, Tools::getValue() çıktısını doğrudan INSERT ve UPDATE sorgularına ekliyordu — SQL enjeksiyonu — ve yüklenen dosya adını unlink() ile rename() fonksiyonlarına geçiriyordu — dizin geçişi (path traversal). Sürüm 2.0 her slaydı, PrestaShop çekirdeği tarafından bağlanan ve kaçışlanan bir ObjectModel üzerinden saklar ve yalnızca kendi ürettiği görsel adlarıyla çalışır.

Bu yeniden yazım aynı zamanda pakete gömülü jQuery FlexSlider kütüphanesini, ikon fontunu ve yaklaşık elli adet yönetici sprite görselini kaldırdı; yerlerine bağımlılıksız tek bir küçük betik ile bir stil dosyası geldi. <head> içine kod basan eski hookHeader ve slider'ı section#wrapper önüne sürükleyen JavaScript kodu da tarihe karıştı; yerlerini standart WidgetInterface ve actionFrontControllerSetMedia aldı.

1.3.x'ten yükseltme kendi kendini halleder

Yükseltme yeni tabloyu oluşturur, her slaydı ve ayarı yeni yapıya taşır ve slayt görsellerinizi bulundukları yerde bırakır. Eski genel çoklu dil anahtarı silinmez, eşlenir: kapalıysa varsayılan dildeki slaytlarınız Tüm diller slaytlarına dönüşür ve herkese görünmeye devam eder; açıksa her dil kendi setini korur. Animasyon, döngü ve gezinme tercihleriniz aynen aktarılır, slider 1.x ile aynı kalsın diye tam genişlikte kalır ve otomatik oynatma açılır. Eski tablolar, jQuery kütüphanesi, ikon fontu ve sprite görselleri tamamen kaldırılır. Elle yapılacak hiçbir işlem yok — yalnızca özgün dosya adında sıra dışı karakterler bulunan bir slaydın yeniden yüklenmesi gerekebilir.

Uyumluluk

PrestaShop 1.7, 8 ve 9 ile sekiz dilde kullanılabilir: Almanca, Felemenkçe, Fransızca, İngilizce, İspanyolca, İtalyanca, Lehçe ve Türkçe. jQuery yok, üçüncü taraf slider kütüphanesi yok — çapraz geçiş ve Ken Burns efektleri saf CSS ile yapılır. Her temayla çalışır. Kaldırdığınızda modül, ayarları, tablosu ve yüklenmiş slayt görselleri de temizlenir.

Sık sorulan sorular

Bir slayt video olabilir mi?

Evet. Bir YouTube veya Vimeo bağlantısı yapıştırdığınızda slayt bir oynat düğmesi kazanır; video, ziyaretçiyi başka yere göndermek yerine mağazanızın üzerindeki bir lightbox içinde açılır.

jQuery gerekiyor mu?

Hayır. Ne jQuery ne de pakete gömülü bir slider kütüphanesi var — yalnızca küçük bir betik ve bir stil dosyası; geçiş ve yakınlaştırma efektleri saf CSS ile yapılıyor.

Farklı dillerde farklı slaytlar gösterebilir miyim?

Evet. Her slayt bir dil sekmesi altında yer alır ya da her yerde görünmesi için Tüm diller altına alınır.

Nereye yerleştirebilirim?

Ana sayfaya, her sayfanın üstüne veya alt bilgiye — hepsi doğrudan yapılandırma sayfasından seçilir. Bir şablonun içine kendiniz yerleştirmeyi tercih ederseniz {widget name='flexslider'} etiketi de kullanılabilir.

Ken Burns yakınlaştırmam hiçbir şey yapmıyor.

Yakınlaşabilmek için sabit bir slider yüksekliğine ihtiyacı var. Yüksekliği 0 (görselin oranını izle) olarak bırakırsanız efektin üzerinde çalışacağı bir pay kalmaz ve hiçbir şey olmuyormuş gibi görünür — piksel cinsinden bir yükseklik verin, efektin hareket alanı olsun.

Ana sayfamda iki slider var.

PrestaShop kendi ps_imageslider modülüyle gelir ve büyük ihtimalle hâlâ etkin. İkisinden birini kapatın — ikisi birden aktifken Durum paneli sizi uyarır.

Görsellerim görünmüyor.

Neredeyse her zaman klasör izinleri: modülün uploads klasörü ve içindeki thumbs alt klasörü yazılabilir olmalı. Durum paneli bunu sizin için denetler.

Ziyaretçinin JavaScript desteği kapalıysa ne olur?

İlk slayt ve tüm bağlantıları yine de görüntülenir, yani o alan hiçbir zaman boş kalmaz.