Woothemes'in WooCommerce Bookings Eklentisini Genişletme – Mevcut Tarih Açılır Menüsü

Ah Woothemes'ten WooCommerce Bookings, WooCommerce için gerçekten iyi bir rezervasyon uzantısı için ne kadar bekledik ve nihayet geldiğinde hayal kırıklığına uğratmadı – sağlam, istikrarlı, çok yönlü ve tabii ki diğer tüm harika Woothemes uzantılarıyla bağlantılı.

Ancak ne yazık ki, herhangi bir WordPress eklenti geliştiricisinin WooCommerce tarafından desteklenen binlerce (şimdi milyonlarca mı?) temel işlevinde küçük değişiklikler veya özelleştirmeler için.

Neyse ki, her Woothemes eklentisinde olduğu gibi, oynayacak çok sayıda kanca var ve diğer her şey %100 WP yöntemine dahil edilmiştir, bu da bir çekirdek dosyaya dokunmak zorunda kalmadan genişletmeyi çok kolaylaştırır. ben kapatacağım

DatePicker – Kullanılabilir Tarihler Açılır Menüsü

WooCommerce Bookings eklentisi ile kutudan çıkar çıkmaz elde ettiğiniz tarih/saat seçici harikadır, ancak bazı mağazalar için bir açılır menüde uygun tarihler listesine sahip olmak daha kullanıcı dostu bir arayüzdür. İşte bunu nasıl yapabilirsiniz:

Bu kodu makalenin sonunda bir Gist bağlantısında paylaşacağım için dürüst olsam iyi olur. Bu eklentideki ilk ana amaç, bir açılır menü için veri seçici alanını değiştirmek olsa da, ilk kod satırı aslında $wswp_dates_built = false; – bu, açılır menü seçeneklerini oluşturup oluşturmadığımızı kaydetmek için global bir değişken (global ile ne demek istediğimi bilmiyorsanız Google PHP değişken kapsamı) ayarlar. Doğru hatırlıyorsam, bu, açılır menüde aynı tarihlerin birden çok setini almayı engelledi, çünkü gerçek tarih seçici alanı, rezervasyon formunda iki/üç gerçek alana bölündü.

Yani… ilk amaca geçelim – tarih seçici alanımızı type=date-picker'dan bir açılır listeye dönüştürmek ve mevcut tarihler biçimindeki seçeneklerle tamamlamak.

Dediğim gibi, tarih seçici aslında birden çok alana bölünmüş, bunlardan herhangi birine tıklamak seçiciyi filizlendiriyor ve hepsinin değerleri maliyet hesaplamalarına giriyor. Bir açılır menü sadece 1 alandır, bu yüzden yapmamız gereken orijinal alanları tutmak, onları gizlemek ve yeni açılır listemizi onların yerinde göstermek. Daha sonra, Woo Bookings'e bir fiyat vermek ve verilen blokların satın alınmasına izin vermek için ihtiyaç duyduğu şeyi vermek için açılır menüden seçimi alabilir ve anında orijinal alanlara koyabiliriz. Neyse ki tüm bunları tek bir harika filtre kullanarak yapabiliriz.

 add_filter('booking_form_fields','wswp_booking_form_fields'); function wswp_booking_form_fields($fields) { global $wswp_dates_built; $i = 0; foreach($fields as $field) { $new_fields[$i] = $field; if ($field['type'] == "date-picker" && $wswp_dates_built === false) { $s = $i; $new_fields[$s]['class'] = array('picker-hidden'); $i++; $new_fields[$i] = $field; $new_fields[$i]['type'] = "select"; $new_fields[$i]['options'] = wswp_build_options($field['availability_rules'][0]); $new_fields[$i]['class'] = array('picker-chooser'); } $i++; } return $new_fields; }

Yani… ilk önce burada ihtiyacımız olduğu gibi global $wswp_dates_built'i getiriyoruz. Ardından (orijinal dizi ilişkisel olduğundan), değerlerinde değişiklik yaparken dizi öğelerini takip etmek için kullanabileceğimiz sayısal bir sayma değişkeni başlatırız.

Ardından, filtreye $fields olarak iletilen gerçek form alanları dizisine gireriz ve geri iletilecek yeni bir alan dizisi oluştururuz – $new_fields. Öncelikle tüm alanları tuttuğumuz için her alanı $new_fields dizisine kaydederiz. Bir tarih seçici alanı olup olmadığını kontrol ediyoruz ve henüz tarihleri ​​oluşturmadıysak harekete geçiyoruz. Geçerli $i değerinde dizide depolanan orijinal alana “picker-hidden” sınıfını ekleriz ve sonra aynı alanın bir klonunu yeni diziye eklemek için $i++ ile 1'den $i'ye ekleriz. $i'nin değeri. Daha sonra, bir açılır menüye dönüştürmek için o alanda değişiklikleri yaparız.

Türü “seç” olarak değiştiriyoruz, DOM (Belge Nesne Modeli) içinde hedeflemek için sınıf seçici seçiciyi ekliyoruz ve ayrıca alana bir 'seçenek' öğesi ekliyoruz, burada tarihlerimizi saklıyoruz. bir işlev ve açılır menü için seçenekleri oluşturun – Size bir sonraki işlevi göstereceğim. Bu kodun geri kalanı basitçe $i üzerinde yinelenir ve kalan alanlar için döngüyü tekrarlar ve şimdi rezervasyon formunuzu oluşturan alanlar kümesi olarak $new_fields değerini döndürür.

Şimdi, orijinal seçici alanı için kullanılabilirlik kurallarını geçtiğimiz wswp_built_options kodunun menteşe pimi olan işlev. Müsaitlik kurallarını merak ediyorsanız, rezerve edilebilir ürün oluşturulurken kullanılan ayarlardan oluşturulan çok karmaşık bir kurallar dizisidir. Fonksiyonumuzda mevcut tarihleri ​​almak için bu diziyi ayrıştırıyoruz.

 function wswp_build_options($rules,$building = false) { global $wswp_dates_built; $dates = array(); foreach($rules as $dateset) { if ($dateset[0] == "custom") { $year = reset(array_keys($dateset[1])); $month = reset(array_keys($dateset[1][$year])); $day = reset(array_keys($dateset[1][$year][$month])); $dtime = strtotime($year."-".$month."-".$day); $dates[$dtime] = date("d/m/Y",$dtime); } } ksort($dates); foreach($dates as $key => $date) { $dates[date("Ymd",$key)] = $date; unset($dates[$key]); } $wswp_dates_built = true; return $dates; }

Bu fonksiyonda sizi satır satır sıkmayacağım çünkü o zaman dizinin yapısına girmem gerekecek. Google'ın işlevleri hakkında daha fazla bilgi edinmek isteyenler için, yorumlarda sorun ve $rules değişkeninde print_r ile oynayın.

Şimdi son olarak, açılır listemizi DOM'da doğru yere taşımamız ve açılır listedeki change olayına bir olay işleyici eklememiz gerekiyor, böylece bir tarih seçildiğinde orijinal seçici alanlarını gerekli değerlerle doldurur. Oldukça kısa bir javascript parçası olduğu için wp_footer kancasını kullanarak onu altbilgiye yerleştirmeye karar verdim:

 add_action('wp_footer','wswp_css_js'); function wswp_css_js() { //adding in footer as not enough to justify new stylesheet and js file ?><style type="text/css"> .picker-hidden .picker,.picker-hidden legend { display:none; } </style> <script type='text/javascript'> jQuery(function($) { //Move .picker chooser up in the DOM $(".picker-chooser").insertBefore('.wc-bookings-date-picker-date-fields'); //Attach handler to insert chosen date into picker fields $("select#wc_bookings_field_start_date").on('change', function() { var selectedDate = $(this).val() var selectedDateBreakdown = selectedDate.split("-"); $( "input[name*='wc_bookings_field_start_date_year']" ).val( selectedDateBreakdown[0] ); $( "input[name*='wc_bookings_field_start_date_month']" ).val( selectedDateBreakdown[1] ); $( "input[name*='wc_bookings_field_start_date_day']" ).val( selectedDateBreakdown[2] ); }); }); </script> <?php }

Ve işte – şimdi herhangi bir rezerve edilebilir ürünün sayfasını yükleyin ve bir zamanlar seçici alanlarını gördüğünüz yerde şimdi güzel bir açılır menü göreceksiniz.

Burada söz verildiği gibi, bunun özü şudur: https://Gist.github.com/LiamBailey/417e8bf233c7cd7c0fb8 – ve Kaynaklar'ı yani kurslar vb. için farklı konumlara sahip olmak için kullanıyorsanız, bu komut dosyasında bulabileceğiniz bir güncelleme yaptım. burada: https://Gist.github.com/LiamBailey/a33dcf9fedac2229fcdb.

Not: Benden bir sonraki gönderiyi, Yahoo Miva (mağaza platformu) ürünlerini xlsx dışa aktarma dosyalarından WP All Import kullanarak WooCommerce'e içe aktarma konusunda bir kılavuz olmasını bekleyenler için, bununla ilgili bazı sorunlar oldu ve eğer çözebilirsem bu sorun çözülecektir. daha sonraki bir tarihte ele alınacaktır.