HUSKY - Product Filter for WooCommerce

[woof_slideout]

[woof_slideout] kısa kodu, ekranın kenarından açılan bir kayar filtre paneli oluşturur. Bu, filtreyi kullanıcı ihtiyaç duyana kadar gizli tutan yerden tasarruf sağlayan bir çözümdür — mobil cihazlar, ürün arşiv sayfaları veya ekran alanının sınırlı olduğu herhangi bir düzen için idealdir.

Kayar panel, hem resim hem de metin tetikleyicilerini, yapılandırılabilir animasyonu, mobil cihazlara özgü davranışı destekler ve bilinmeyen tüm nitelikleri iç [woof] kısa koduna iletir.

Nitelikler

NitelikVarsayılanAçıklama
imageEklenti varsayılan simgesiTetikleyici resminin URL'si. Bunun yerine metin düğmesi kullanmak için null olarak ayarlayın.
image_h50Tetikleyici resminin piksel cinsinden yüksekliği
image_w50Tetikleyici resminin piksel cinsinden genişliği
actionclickTetikleyici eylemi: click veya hover
locationrightKayar çıkış konumu: left, right, top veya bottom
speed100Milisaniye cinsinden animasyon hızı
offset100pxÜstten (sol/sağ konum için) veya soldan (üst/alt konum için) ofset. px, %, em vb. destekler.
onloadslideouttruePanelin sayfa yüklendiğinde açık olup olmayacağı (true veya false)
mobile_behavior0Görünürlük kontrolü: 0 = tüm cihazlarda göster, 1 = yalnızca mobilde göster, 2 = yalnızca masaüstünde göster
widthautoPanel genişliği (örneğin, 350px, 30%, auto)
heightautoPanel yüksekliği (örneğin, 500px, auto)
textFilterimage null olarak ayarlandığında görüntülenen düğme metni. Ayrıca tutamaç etiketi olarak kullanılır.
class''Kayar konteyner için ek CSS sınıfı
redirect''Filtre uygulamasından sonra yönlendirme URL'si

Temel Kullanım


[woof_slideout]

Varsayılan ayarlarla sağ taraftan bir kayar filtre paneli oluşturur. Panel, standart [woof] filtresini içerir.

Sola Kayar


[woof_slideout location="left" speed="300" width="400px"]

300ms animasyon ve 400px panel genişliği ile sol taraftan kayar.

Resim Yerine Metin Düğmesi


[woof_slideout image="null" text="Filter Products"]

Tetikleyici tutamaç olarak bir resim yerine metin düğmesi (“Ürünleri Filtrele”) kullanır.

Yalnızca Mobil Filtre


[woof_slideout mobile_behavior="1" location="bottom" height="80%"]

Kayar panel yalnızca mobil cihazlarda, alttan görünür ve ekran yüksekliğinin %80’ini kaplar. Mobil öncelikli tasarımlar için mükemmeldir.

Yüklemede Otomatik Açılma ve Üzerine Gelme Tetikleyicisi


[woof_slideout onloadslideout="true" action="hover" speed="200"]

Panel varsayılan olarak açıktır ve üzerine gelmeye (tıklamaya değil) yanıt verir. 200ms içinde animasyon yapar.

Gelişmiş: İçinde Özel İçerik


[woof_slideout location="right" width="350px"]
  [woof taxonomies="product_cat" sid="slideout-cat"]
[/woof_slideout]

Açılış ve kapanış etiketleri arasına yerleştirilen herhangi bir içerik, kayar içerik olarak kullanılır. Bu örnekte, kategori taksonomi filtrelemesi olan belirli bir [woof] kısa kodu kayar panelin içine yerleştirilmiştir.

Nitelikleri İç [woof] Kısa Koduna İletme


[woof_slideout location="left" taxonomies="product_cat" sid="sidebar-filter" by_text="1"]

Kayar panelin kendisinin bir parçası olmayan nitelikler (taxonomies, sid, by_text, vb.) otomatik olarak iç [woof] kısa koduna iletilir. Bu, herhangi bir [woof] niteliğinin şeffaf bir şekilde çalıştığı anlamına gelir.

Ofset ile Yalnızca Masaüstü


[woof_slideout location="right" offset="200px" mobile_behavior="2" width="320px"]

Yalnızca masaüstünde görünür, sağda konumlandırılmış, üstten 200px ofset ile, 320px genişliğinde.

PHP Örneği: Kayar Şablonu Geçersiz Kılma

Kayar şablonunu aşağıdaki yola bir dosya yerleştirerek geçersiz kılabilirsiniz:


wp-content/themes/your-theme/woof/ext/slideout/views/shortcodes/woof_slideout.php

Veya kayar davranışını programlı olarak filtreleyin:


add_filter('woof_slideout_options', function($options) {
    if (is_product_category()) {
        $options['width'] = '100%';
        $options['location'] = 'bottom';
    }
    return $options;
});

Notlar

  • Kısa kodun çalışması için HUSKY eklenti ayarlarında kayar uzantısı etkinleştirilmelidir.
  • Tetikleyici olarak bir resim kullanıldığında, önerilen boyut yaklaşık 50×50 pikseldir.
  • redirect niteliği ayarlandığında, filtre değerleri seçildikten sonra sayfayı belirtilen URL'ye yönlendirir.
  • Aynı sayfada birden fazla kayar örneği desteklenir — her biri benzersiz bir anahtar alır.