Onclick event checkbox : Opencart Filter Module

Discussion in 'OpenCart' started by Fahmi, Jun 8, 2014.

  1. Fahmi

    Fahmi Newbie

    Joined:
    Dec 5, 2012
    Messages:
    1,719
    Likes Received:
    159
    Trophy Points:
    63
    Google+:
    Opencart v.1.5.xx mempunyai module bawaan yang sangat bagus, yaitu Filter module.. cara kerja module ini adalah untuk filter kategori berdasarkan sesuatu, misal dalam elektronik itu spesifikasi nya, filter by ram, storage, brand, ukuran layar nya dll.

    Untuk bawaan default nya checkbox daripada filter ini harus menggunakan button untuk eksekusi nya di paling bawah filter nya, nah menurut saya untuk membuat user friendly sebaiknya digunakan semacam Onclick event jika checkbox terpilih, jadi langsung ganti url tanpa harus klik button nya, berikut contoh nya:

    Buka file module filter ini di catalog > view > theme > yourtheme > template > module > filter.tpl
    Didalam nya ada code javascript, lalu rubah menjadi :
    Code:
    <script type="text/javascript">
    $(document).ready(function() {
        // hide the "submit" button - Sembunyikan tombol button
        $('#button-filter').hide();
    
        // bind onChange event to the checkboxes
        $('.tm-hide').live('change', function() {
            filter = [];
    
            $('.box-filter input[type=\'checkbox\']:checked').each(function(element) {
                filter.push(this.value);
            });
    
            window.location = '<?php echo $action; ?>&filter=' + filter.join(',');
        });
    });
    //--></script>
    Keterangan : .tm-hide merupakan class yang akan di eksekusi, gunakan class tersebut pada input checkbox nya, misal kamu ingin menggunakan class lain :)

    contoh :

    Code:
    <li>
      <input class="tm-hide" type="checkbox" value="<?php echo $filter['filter_id']; ?>" id="filter<?php echo $filter['filter_id']; ?>" checked="checked" />
      <label for="filter<?php echo $filter['filter_id']; ?>"><?php echo $filter['name']; ?></label>
    </li>
    <?php } else { ?>
    <li>
      <input class="tm-hide" type="checkbox" value="<?php echo $filter['filter_id']; ?>" id="filter<?php echo $filter['filter_id']; ?>" />
      <label for="filter<?php echo $filter['filter_id']; ?>"><?php echo $filter['name']; ?></label>
    </li>
    Untuk demo bisa dilihat disini http://www.teknologs.com/Gadget-c18.php , silahkan klik checkbox yang ada di filter nya sebelah kiri :D

    Resource: http://stackoverflow.com/questions/...dd-onclick-event-to-replace-the-submit-button

    Semoga bermanfaat :)
     
  2. Ardilas

    Ardilas Super Level

    Joined:
    Feb 18, 2013
    Messages:
    4,245
    Likes Received:
    317
    Trophy Points:
    83
    Google+:
    Situsnya ringan kayak gak berasa load.
     
  3. Fahmi

    Fahmi Newbie

    Joined:
    Dec 5, 2012
    Messages:
    1,719
    Likes Received:
    159
    Trophy Points:
    63
    Google+:
    Iya padahal lumayan banyak script nya dan css, mungkin karena cache :)
     
  4. Andi Liryk

    Andi Liryk Member

    Joined:
    Jun 4, 2014
    Messages:
    154
    Likes Received:
    6
    Trophy Points:
    18
    Betul mas , simple dan enak di pandang situsnya .
     
  5. rafa04

    rafa04 New Member

    Joined:
    Jul 17, 2014
    Messages:
    20
    Likes Received:
    0
    Trophy Points:
    6
    Wah canggih gan filter modulenya. bisa buat refrensi nih buat modul lain yang bisa menggunakan filter semacam ini. Makasih gan untuk share filter modulenya.
     

Share This Page