Opencart Polska

Z tego , że openCart korzysta z biblioteki jQuery można korzystać także z różnych pluginów do niego a takim jest dość przyjemny i łatwy w instalacji quicksearch, który może filtorwać listę produktów bez przeładowania strony.

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">

w wersji 1.5.1.1 to już historia .... przydałoby się ale nie ma takiej opcji ... wszystko już inaczej wygląda ...