Post Detail

Di Kesempatan kali ini saya akan menjelaskan tentang cara melakukan advance filter di laravel dengan di kombinasi dengan javascript, memang advance search ini jarang orang mempraktekannya karena sedikit jelimet. Namun advance filter ini sangat dibutuhkan oleh user mengingat user ingin mencari tau collection seperti product ada beberapa kriteria yang biasanya user filter.

1. User filter bisa berdasarkan rating produk terbagus.

2. User filter bisa berdasarkan ketersediaan Pengiriman.

3. User Filter produk berdasarkan kota terdekat dan lain sebagainya.

Di laravel saya filter menggunakan eloquent dengan menggunakan fungsi request->input.

if($request->ajax())
{
    $data = Product::with('category);
    if($request->input('q'))
    {
        $sql->where(DB::raw('upper(nama_product)'), 'like', '%' . Str::upper($request->input('q')) . '%');
    }
    if($request->input('categoy_id))
    {
        $sql->where('categoy_id', $request->input('category_id'));
    }
    $products = $data->paginate(16);
    return view('product.item');
}

Nah dengan script diatas maka kita sedikit melakukan advance filter dimana jika tidak ada inputan maka tidak akan di filter sesuai key filternya. Contoh disini key filter yaitu q dan category_id. Jika ada inputan di urlnya key q dan key category_id maka secara otomatis akan terfilter sesuai yang di inginkan, nah namun disini saya di bantu dengan metode ajax biar proses requestnya dikerjakan setelah page terload.

Untuk di frontendnya kalian buat satu fungsi contoh disini saya membuat sebuah fungsi dengan nama fungsinya getKatalog() lihat contoh.

function queryString(queryString = '', value = '')
{
    let currentUrl = window.location.href;
        if(currentUrl.indexOf("?page=1") > -1)
        {
            if(currentUrl.indexOf(queryString) > -1)
            {
                var parameters = new URLSearchParams(window.location.search);
                let val = parameters.get(queryString) //1
                if(value === '')
                {
                    var searchParams = new URLSearchParams(window.location.search);
                    var newUrl = removeParam(queryString, currentUrl);
                    window.history.pushState({}, '', newUrl);
                    getKatalog(newUrl);
                }else {
                    if(val !== value)
                    {
                        var searchParams = new URLSearchParams(window.location.search);
                        searchParams.set(queryString, value);
                        var newUrl = '?'+searchParams.toString();
                        window.history.pushState({}, '', newUrl)
                        getKatalog(newUrl);
                    }
                }
            }else {
                let newUrl = currentUrl+'&'+queryString+'='+value;
                window.history.pushState({}, '', newUrl);
                getKatalog(newUrl);
            }
        }else {
            if(value === '')
            {
                getKatalog(currentUrl);
            }else {
                let newUrl = currentUrl+'?page=1&'+queryString+'='+value;
                window.history.pushState({}, '', newUrl);
                getKatalog(newUrl);
            }
        }
}

function removeParam(key, sourceURL) {
    var rtn = sourceURL.split("?")[0],
        param,
        params_arr = [],
        queryString = (sourceURL.indexOf("?") !== -1) ? sourceURL.split("?")[1] : "";
    if (queryString !== "") {
        params_arr = queryString.split("&");
        for (var i = params_arr.length - 1; i >= 0; i -= 1) {
            param = params_arr[i].split("=")[0];
            if (param === key) {
                params_arr.splice(i, 1);
            }
        }
        if (params_arr.length) rtn = rtn + "?" + params_arr.join("&");
    }
    return rtn;
}

function resetPage()
{
    var searchParams = new URLSearchParams(window.location.search);
    searchParams.set(`page`, '1');
    var newUrl = '?'+searchParams.toString();
    window.history.pushState({}, '', newUrl);
}

function getKatalog(newUrl = '')
{
    $.ajax({
        url: newUrl,
        method: "GET",
        success: function(data)
        {
            $('#productList').html(data);
        }
    });
}

Dengan fungsi yang saya buat diatas maka kalian bisa memfilter sesuai event yang kalian inginkan contoh disini saya akan memfilter ketika klick tombol pagination maka kalian cukup tambah event on klick paginate aja.

$(document).on('click', '.paginate', function(e){
    e.preventDefault();
    resetPage();
    let valpage = $(this).data('page');
    let page = `page`;
    queryString(page, valpage);
});

Nah jika kalian ingin tetap active di current urlnya kalian cukup baca aja urlnya. di Tokopedia kan ketika kita sudah ceklist filter maka akan otomatis posisi filter masih keceklist walaupun di refresh, nah itu karena dia membaca dari URL nya, kalo kalian ingin biar current url nya active tambahkan di filternya menjadi seperti ini.

category_id == $row->id ? '' : 'checked' }}>

Nah selesai lah artikelnya, ini saya berbagi pengalaman aja bagi kalian yang belum mengerti boleh di tanyakan. Terimakasih semoga bermanfaat.