Вход • Регистрация

Кто знает как сделать фильтр для магазина?

  • 07 ноября 2013 г.
  • Совсем недавно познакомился с данным движком. Очень понравился шаблон магазина, но, хочется добавить некоторые удобства для посетителей интернет-магазина.
    У многих есть фильтра для выбора подходящего товара, типа как тут: http://office-prestige.com.ua/biznes-suveniri/ruchki-podarochnie.html
    Есть у кого-нибудь опыт установки такого фильтра? Посоветуйте пожалуйста.
    • 07 ноября 2013 г.
    • Да в принципе все относительно просто, берем стандартный функционал и дорабатываем под свои нужды.
      Например чтобы сделать ползунок цены (от и до) можно взять slider UI ( http://jqueryui.com/slider/ ). Чтобы сделать подбор по характеристикам - надо создать необходимые вам характеристики и настроить отображение. Ну и оформить под ваши нужды.
      При этом в 95% случаев достаточно встроенного функционала Диафана (как пример http://zemmo.su/nozhi/ )
      • 15 января 2014 г.
      • Здравствуйте, Сергей! Если возможно, поделитесь опытом как при помощи slider UI сделать ползунок цены (от и до)
        • 15 января 2014 г. , редакция: 15 января 2014 г.
        • Роман.
          Идем читать документацию, например http://jqueryui.com/slider/#range . Смотрим как все устроено.
          В диафане уже есть почти все необходимые файлы поэтому копировать их не следует, все что нам необходимо сделать:

          1) Открываем shop.view.show_search.php (или предварительно создав шаблон свой) и находим там участок кода отвечающий за вывод цены (99 строка по умолчанию) и меняем

          if (!empty($result["price"]))
          {
          echo '<div class="shop_search_price">
          <span class="infofield">'.$this->diafan->_('Цена').':</span>
          '.$this->diafan->_('от').' <input type="text" name="pr1" size="5" value="'.$result["price"]["value1"].'" class="inpnum"> '
          . $this->diafan->_('до').' <input type="text" name="pr2" size="5" value="'.$result["price"]["value2"].'" class="inpnum">
          </div>';
          }

          на

          if (!empty($result["price"]))
          {
          echo '<div class="formCost">
          <label for="minCost">
          <span class="infofield">' . $this->diafan->_('Цена') . ':</span>
          ' . $this->diafan->_('от') . '
          </label>

          <input type="text" name="pr1" size="5" id="minCost" value="0" value="' . $result["price"]["value1"] . '" class="inpnum">

          <label for="maxCost"> '. $this->diafan->_('до') . '</label>
          <input type="text" name="pr2" id="maxCost" value="12000" size="5" value="' . $result["price"]["value2"] . '" class="inpnum"></div>


          <div class="sliderCont">
          <div id="slider"></div>
          </div><br>
          ';
          }


          2) Далее открываем файл шаблона (по умолчанию shop.php) и вставляем перед </head> скрипт от slider ui

          <script type="text/javascript">jQuery(document).ready(function(){

          /* слайдер цен */

          jQuery("#slider").slider({
          min: 0,
          max: 12000,
          values: [0,12000],
          step: 100,
          animate: 1,
          range: true,
          stop: function(event, ui) {
          jQuery("input#minCost").val(jQuery("#slider").slider("values",0));
          jQuery("input#maxCost").val(jQuery("#slider").slider("values",1));

          },
          slide: function(event, ui){
          jQuery("input#minCost").val(jQuery("#slider").slider("values",0));
          jQuery("input#maxCost").val(jQuery("#slider").slider("values",1));
          }
          });

          jQuery("input#minCost").change(function(){

          var value1=jQuery("input#minCost").val();
          var value2=jQuery("input#maxCost").val();

          if(parseInt(value1) > parseInt(value2)){
          value1 = value2;
          jQuery("input#minCost").val(value1);
          }
          jQuery("#slider").slider("values",0,value1);
          });


          jQuery("input#maxCost").change(function(){

          var value1=jQuery("input#minCost").val();
          var value2=jQuery("input#maxCost").val();

          if (value2 > 12000) { value2 = 12000; jQuery("input#maxCost").val(12000)}

          if(parseInt(value1) > parseInt(value2)){
          value2 = value1;
          jQuery("input#maxCost").val(value2);
          }
          jQuery("#slider").slider("values",1,value2);
          });});</script>

          Этот скрипт можно вынести и в отдельный файл.

          Естественно в шаблоне должен быть шаблонный тег вывода поиска <insert name="show_search" module="shop">
          На рисунке 1 видно что получилось: слайдер работает, осталось только покрасить ленту - по умолчанию она белая и ее не видно. Открываем jquery-ui-1.8.18.custom.css и находим .ui-widget-header (65 строка по умоланию) - там меняем цвет на свой + оформление .ui-slider (блок начиная с 402 строки). То есть оформляем уже как нам надо. Впринципе все.
          Замечу, что я описал простой способ, когда минимальные и максимальные значения слайдера задаются вручную (в скрипте 0 и 12000). Все действия проводил на чистой системе, параллельно данному описанию, чтобы постараться дать работающий код.
          Автоматический вывод мин и макс значения по цене - это уже отдельная тема.
    • 07 ноября 2013 г.
    • Конечно если необходимо сделать что-то более серьезное, придется поработать))
      • 07 ноября 2013 г.
      • Спасибо за быстрый ответ. Нужно еще немного поработать с шаблоном. Думаю что все получится.

Новости

  • 18 июня
  • В сборке большое обновление demo-шаблона, дополнительная защита от спама, улучшение YML-импорта и еще много важного и интересного.
  • 24 апреля
  • В новой сборке совершили революцию в структурировании кастомизированной информации в шаблонах, добавили авторегистрацию пользователей, усовершенствовали защиту от спама, актуализировали накопительную скидку, а также улучшили производительность и стабильность работы системы.
  • 12 января
  • После выхода сборки 7.1 мы выпустили уже три патча, в каждом из которых улучшаем административную часть сайта. Сборка DIAFAN.CMS 7.1.3 уже доступна к установке. 

Форум