Co i daje ten mod?
Mod dodaje pole input w produktach kategorii i filtruje produkty według wpisanego słowa w czasie rzeczywistym. Można szybko i w prosty sposób otrzymać listę produktów z interesującym nas słowem, ceną czy producentem.
Teraz szuka po całej tabeli produktów, czyli uwzględnia nazwę produktu, producenta i cenę (jednak można to zmienić stosując selektor).
Instalacja
1. Pobierz załącznik, rozpakuj go i skopiuj plik (quicksearch.js) do
catalog/view/javascript/
2. Edytuj
catalog/view/theme/default/stylesheet/stylesheet.css
znajdz
- Kod: Zaznacz cały
.sort {
margin-bottom: 10px;
background: #F8F8F8;
height: 30px;
width: 100%;
}
i zamień na
- Kod: Zaznacz cały
.sort {
position: relative;
margin-bottom: 10px;
background: #F8F8F8;
height: 30px;
width: 100%;
}
3. Edytuj
catalog/view/theme/default/template/product/category.tpl
znajdz
- Kod: Zaznacz cały
<table class="list">
<?php for ($i = 0; $i < sizeof($products); $i = $i + 4) { ?>
zamień na
- Kod: Zaznacz cały
<table class="list" id="product_list">
<?php for ($i = 0; $i < sizeof($products); $i = $i + 4) { ?>
znajdz w tym samym pliku
- Kod: Zaznacz cały
</div>
<?php echo $footer; ?>
zamień na
- Kod: Zaznacz cały
</div>
<script type="text/javascript" src="catalog/view/javascript/quicksearch.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("input#search_term").quicksearch("table#product_list tr td", {
'delay': 100,
loader: 'span.loading'
});
});
</script>
<?php echo $footer; ?>
oraz
- Kod: Zaznacz cały
<div class="sort">
<div class="div1">
zamień na
- Kod: Zaznacz cały
<div class="sort">
<div style="position: absolute; top: 2px; left: 9px;"><input type="text" id="search_term" /> <span class="loading"><img src="catalog/view/theme/default/image/ajax_load.gif" /></span></div>
<div class="div1">