Mengganti tampilan filter produk opencart menjadi dropdown option

Tampilan normal filter produk opencart adalah berupa pilihan checkbox, jadi nanti pilihan filter produk akan menampilkan list checkbox menurun kebawah ,semakin banyak filternya maka akan semakin panjang kebawah.

Di sini saya hanya ingin share bagaimana filter produk tampil lebih simpel dan tidak harus bentuk checkbox , yaitu menjadi tampilan dengan pilihan filter dropdwon.

Berikut langkah-langkahnya

1.Masuk ke Cpanel dan masuk folder catalog/view/theme/your_template/template/module/filter.tpl, dan temukan kode berikut :

<li><span id="filter-group<?php echo $filter_group['filter_group_id']; ?>"></span> <ul> <li> <input checked="checked" id="filter<?php echo $filter['filter_id']; ?>" type="checkbox" value="<?php echo $filter['filter_id']; ?>" /> <label for="filter<?php echo $filter['filter_id']; ?>"></label> </li> <li> <input id="filter<?php echo $filter['filter_id']; ?>" type="checkbox" value="<?php echo $filter['filter_id']; ?>" /> <label for="filter<?php echo $filter['filter_id']; ?>"></label> </li> </ul> </li> </ul>

dan ganti dengan kode dibawah ini

<ul class="box-filter" style="padding:10px 0;"> <?php foreach ($filter_groups as $filter_group) { ?> <select> <option><?php echo $filter_group['name']; ?></option> <?php foreach ($filter_group['filter'] as $filter) { ?> <?php if (in_array($filter['filter_id'], $filter_category)) { ?> <option value="<?php echo $filter['filter_id']; ?>" id="filter<?php echo $filter['filter_id']; ?>" selected> <?php echo $filter['name']; ?> </option> <?php } else { ?> <option value="<?php echo $filter['filter_id']; ?>" id="filter<?php echo $filter['filter_id']; ?>"> <?php echo $filter['name']; ?> </option> <?php } ?> <?php } ?> </select>

NB: beberapa theme mungkin memiliki sedikit perbedaan pada kode tsb

2.Langkah selajutnya cari kode ini

$('.box-filter input[type=\'checkbox\']:checked').each(function(element) {

dan ganti dengan kode dibawah ini $('.box-filter select option:selected').each(function(element) { {

3.Langkah Ketiga ,masuk ke folder catalog/view/theme/your_template/template/stylesheet/stylesheet.css

dan tambahkan kode dibawah ini didalam file stylesheet.css

.box-filter select { width: 100%; padding:10px 0; }

Posted by Numpak Gundam

Tweet