+38(044) 592 85 49
+38(066) 734 18 81
Главная

Статьи

Мета теги

Slider tracker (слайдер) для Views Exposed filter, синхронизация c inputs, определение максимальный цены max price

 

 
Можно использовать и Views Exposed filter больше/меньше (greater/less).
 
Demo с участием категории товаров и ubercart можно посмотреть здесь
http://ubercart.artreaktor.com/catalog/begovye-dorozhki
 
Испытывалось на системе

drupal 6.22
jquery 1.3.2 (1.3.2 минимальная версия, с 1.2.6 не будет работать)
ubercart 2.6

 

 

 

  • Есть синхронизация между inputs и сладером (tracker), то-есть при изменении значения input-а  - рычажек слайдера передвигался соответсвенно.
  • Есть определение максимальной цены категории и определение ее после применения фильтра
 
В данной статье описал метод добавления слайдера при выводе списка товаров Ubercart с помощью Views.
 
Метод замены вывода описан здесь
http://www.artreaktor.com/zamena-ubercart-s-pomoshchyu-views-vyvoda-kategorii-podkategorii-i-spiska-tovarov
 
 
Использовал для слайдера

jQuery UI 1.7.2
jQuery UI Slider 1.7.2

Скачать все файлы + css + images

Оригинальные скачать можно вот здесь jqueryui.com/download
Там версия 1.7.3 но я думаю что должно работать и с ней.
Скрипт слайдера и синхронизации брал сдесь flameweb.net.
 
в файле template.php добавляем js scripts и css стиль слайдера:

drupal_add_css('sites/default/files/slides/slider.css');
drupal_add_js('sites/default/files/slides/ui.core.js');
drupal_add_js('sites/default/files/slides/ui.slider.js');
drupal_add_js('sites/default/files/slides/jquery.minMaxSlider.js');
 
Тут  sites/default/files/slides/  лежат все файлы слайдера, также сюда же распаковываем папку с изображениями.
 
В результате состав папки будет
 
sites/default/files/slides/ :  
slider.css
ui.slider.js
ui.core.js
jquery.minMaxSlider.js
папка images ( в которой все изображения для слайдера)
 
Далее переходим к Views
 
Создаем exposed filter, например Is between
Filter identifier: slider_filter
 
После этого мы получим форму с двумя input ячейками
edit-slider-filter-min
edit-slider-filter-max
 
Далее. Немного поправил Views tpl
 
Мой View называется "pordvget"
а именно создал файлик в папке со своей темой под названием views-exposed-form--prodvget.tpl.php
 
И добавил там пару скрытых input полей для передачи данных в адресную строку.
<input type="hidden" value="" size="1" id="mapin" name="mapin">
<input type="hidden" value="" size="1" id="mipin" name="mipin">
 
и также вывод id widgetа 
<div class="views-widget" id="<?php echo $id; ?>">
 
 
Код  views-exposed-form--prodvget.tpl.php
 
<div id="allprodgetform">
<input type="hidden" value="" size="1" id="mapin" name="mapin">
<input type="hidden" value="" size="1" id="mipin" name="mipin">

<div class="views-exposed-form">
<div class="views-exposed-widgets clear-block">
<?php foreach($widgets as $id => $widget):?>
<div class="views-exposed-widget">
<?php if (!empty($widget->label)): ?>
<label for="<?php print $widget->id; ?>">
<?php print $widget->label; ?>
</label>
<?php endif; ?>
<?php if (!empty($widget->operator)): ?>
<div class="views-operator">
<?php print $widget->operator; ?>
</div>
<?php endif; ?>
<div class="views-widget" id="<?php echo $id; ?>">
<?php print $widget->widget; ?>
</div>
</div>
<?php endforeach; ?>

<div class="views-exposed-widget">
<?php print $button ?>
</div>
</div>
</div>
</div>
 
-------------------------------
 
Id widget-а моего exposed filter 
filter-sell_price_2
 
-------------------------------
 
Пишем php код  в Заголовок (Header) views:
 
<?php
 
//определяем, если мы на первой странице (ДО применения фильтра), то есть
//если максимальная цена категории товаров передалась в адрес то фильтр уже применен
 
if (empty($_GET["mapin"]))
{
$view = views_get_current_view();
foreach ($view->result as $result)
{
$prices[] =$result->uc_products_sell_price;
}

$maxprice = max($prices);
$minprice = min($prices);
 
//далее
//  document.getElementById - прописываем скриптом значения спрятанным инпутам, чтобы они дальше передались после выполнения формы и также начальные значения инпутам мин/макс exposed filter
//   $("#filter-sell_price_2").before("<div id=\'slidediv\'></div>"); - этой строкой мы добавляем div slidediv  ПЕРЕД нашей формой фильтра. И дальше уже прописываем параметры слайдера, который покажется в диве  slidediv

echo '<script>

$(function()
{
document.getElementById("mapin").value='.$maxprice.';
document.getElementById("mipin").value='.$minprice.';
document.getElementById("edit-slider-filter-min").value='.$minprice.';
document.getElementById("edit-slider-filter-max").value='.$maxprice.';

$("#filter-sell_price_2").before("<div id=\'slidediv\'></div>");

$("#slidediv").minMaxSlider
(
{
"min_input" : "#edit-slider-filter-min",
"max_input": "#edit-slider-filter-max",
"min_size": '.$minprice.',
"max_size": '.$maxprice.',
"sync_inputs":true
}

);

});
</script>';

}

//определяем, если мы на ВТОРОЙ странице (ПОСЛЕ применения фильтра), то есть  переменные считываются с адреса

if (!empty($_GET["mapin"]))
{
 
//  document.getElementById снова прописываем значения скрытым input-ам  чтобы после выполнения формы они передались опять в адресную строку

echo '<script>
$(function()
{
document.getElementById("mapin").value='.$_GET["mapin"].';
document.getElementById("mipin").value='.$_GET["mipin"].';


$("#filter-sell_price_2").before("<div id=\'slidediv\'></div>");

$("#slidediv").minMaxSlider
(
{
"min_input" : "#edit-slider-filter-min",
"max_input": "#edit-slider-filter-max",
"min_size": '.$_GET["mipin"].',
"max_size": '.$_GET["mapin"].',
"sync_inputs":true
}

);


});

</script>';
}

?>
 
 
Задача выполнена.
Надеюсь, это сэкономит кому то время!

 

Индивидуальный дизайн сайтаИндивидуальный дизайн

Разработка индивидуального дизайна сайта, логотипов, баннеров, иконок...

Стилизация сайтов, создание стилевых шаблонов (Новый Год, 8 марта...), брендирование сайтов, Flash-анимация.

 Сайт любого уровня сложностиНикаких ограничений!

Современный, быстрый и надежный движок сайта, позволяющий наращивать функциональность. Регулярное обновление ядра и модулей. Разработка новых модулей, позволяющих решать индивидуальные задачи клиента

Оптимизация производительности сайтаТехническая оптимизация

Оптимизация компонентов сайта позволяет добиться стабильной и быстрой работы, а также экономит ресурсы системы.
В достижении этой цели нам помогают:
• современные методы программирования
• профессиональная верстка
• оптимизация изображений

 Автоматизация сайтаАвтоматизация сайта

Максимальный уровень автоматизации для облегчения наполнения и обслуживания сайта!
Автоматическая обработка изображений, обновление карты сайта для быстрой индексации поисковиками, автоматическая проверка обновлений и другие полезные функции.
Поисковая оПоисковая оптимизацияптимизация

Начальная поисковая оптимизация уже включена в любой создаваемый нами сайт! Автоматическая карта сайта для Google, Yandex, Bing, а также панель Google analytics входит в стоимость всех наших сайтов.		 Простое и удобное администрированиеАдминистративная часть сайта

Удобная и интуитивная админка. Создание и правка контента прямо с административной страницы. Простой и добный редактор (похож на MS Word). Разграничение прав доступа пользователей, возможность оперативно менять дизайн сайта (темы оформления) и др.
Техническая поддержка сайтаПоддержка сайтов

Оперативное устрание неполадок, консультация пользователей, техническое обслуживание и контент менеджмент. Мы можем взять все заботы о вашем сайте на себя.
 		 ГаранГарантия качестватия качества

Мы гарантируем стабильность и надежность созданных нами сайтов. Полную гарантию работоспособности мы предоставляем лишь при условии использования нашего хостинга.

 

Украина онлайн Rambler's Top100