OpenCart: Ürün Filtreleme Sayfasında Enter Tuşu ile Filtreleme Nasıl Yapılır?

OpenCart, popüler bir e-ticaret platformudur ve kullanıcı dostu yönetim paneli ile dikkat çeker. Ancak, bazı özellikler varsayılan olarak beklenmedik davranışlar sergileyebilir. Bunlardan biri de, ürünler sayfasındaki filtreleme alanlarında Enter tuşunun çalışmamasıdır.

Birçok kullanıcı, filtreleme yapmak için filtreleme kriterlerini girdikten sonra Enter tuşunu kullanmak ister. Ancak, OpenCart yönetici panelinde Enter tuşuna basıldığında herhangi bir işlem yapılmaz. Bunun yerine, fareyle “Filtrele” butonuna tıklamak gerekir. Bu durum, özellikle hızlı veri girişi yapanlar için zaman kaybına yol açabilir.

Bu yazıda, OpenCart 4.0.2.3 versiyonunda Enter tuşu ile filtreleme yapmayı nasıl aktif hale getirebileceğinizi adım adım anlatacağım.

Çözüm: Enter Tuşunu Aktif Hale Getirme

Bize göre, Enter tuşunun aktif hale getirilmesi basit bir JavaScript kodu ile çözülebilir. Bu çözüm, sadece ürün ismi değil, tüm filtreleme alanlarında Enter tuşunun aktif olmasını sağlar.

Adım Adım Çözüm:

Aşağıda sunacağım çözüm 4.0.2.3 versiyonunda test edilmiştir. Diğer versiyonlarda da kullanabilirsiniz.

1. Header.twig Dosyasını Düzenleme: JavaScript kodunu OpenCart temanızın header.twig dosyasına eklemeniz gerekir. Bu dosya, sayfanın başlık kısmındaki önemli tüm yapılandırmaları barındırır.
   • OpenCart yönetici paneline giriş yapın.Açık tema dizini yolunu takip edin: catalog/view/theme/default/template/common/header.twig.</body> etiketinden hemen önce aşağıdaki kodu ekleyin:

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        // Tüm input, select ve textarea elemanlarını seç
        var inputs = document.querySelectorAll('input[type="text"], select, textarea');
        inputs.forEach(function(input) {
            input.addEventListener('keydown', function(e) {
                // Enter tuşuna basıldığında filtreleme butonuna tıklanacak
                if (e.key === 'Enter') {
                    e.preventDefault();  // Enter tuşunun varsayılan davranışını engelle
                    document.querySelector('#button-filter').click();  // Filtreleme butonuna tıklama simülasyonu yap
                }
            });
        });
    });
</script>

1. Kodu Açıklama: Bu JavaScript kodu, sayfa tamamen yüklendikten sonra tüm input, select ve textarea elemanları için keydown (tuşa basma) olayı ekler. Enter tuşuna basıldığında, Filtrele butonuna tıklama işlemi simüle edilir. Bu, filtreleme işlemini hızlandırır ve kullanıcı deneyimini iyileştirir.
2. Sonuç: Bu küçük JavaScript kodu, Enter tuşunun aktif hale gelmesini sağlar. Artık filtreleme yapmak için her bir filtre alanına tek tek tıklamak zorunda kalmazsınız; sadece Enter tuşuna basarak işleminizi hızlıca tamamlayabilirsiniz.

Neden Bu Çözümü Kullanalım?

• Zaman Kazandırır: Fareyi kullanmak yerine Enter tuşuyla filtreleme yapmak, çok daha hızlı bir işlem sağlar.
• Kullanıcı Dostu: Hızlı alışveriş yapan müşteriler için çok önemli bir özellik.
• Kolay Uygulama: Bu değişiklik, sadece birkaç satır JavaScript ile yapılabiliyor ve OpenCart’ın mevcut yapılarına dokunmadan çalışıyor.

Sonuç

Eğer siz de OpenCart kullanıyorsanız ve filtreleme alanlarında Enter tuşu ile filtreleme yapabilmek istiyorsanız, yukarıdaki çözümü kolayca uygulayabilirsiniz. Bu çözüm, kullanıcı deneyimini önemli ölçüde iyileştirecek ve işlemleri hızlandıracaktır.

Eğer başka bir konuda yardımcı olmamı isterseniz, yorumlarda sorularınızı paylaşabilirsiniz. Her zaman yardımcı olmaktan mutluluk duyarım!

Not: Eğer daha fazla bilgiye veya OpenCart ile ilgili ipuçlarına ihtiyacınız varsa, blogumuzu takip etmeye devam edin! Yeni yazılar ve güncellemelerle size yardımcı olacağım.