Нужен фильтр товаров на ajax без БД

[Лелик]

Очень нужен фильтр товаров на ajax без БД. В интернете нашла подходящий пример. Могу провести всю рутинную работу (коей очень много) по наполнению фильтра. Есть проблемы:

1. не знаю, как проверить его на ошибки, и

2. не знаю, как встроить в сайт

Прошу провести эти две работы. Для заинтересованного программиста пришлю более подробное описание ТЗ

[klierik]

1. А какие ошибки возникают и в работе чего?

2. Скорее всего требуется подключить скрипт в шапке сайта и выполнись его инициализацию

[DivMan]

Ну и где этот пример? 

[Лелик]

21 час назад, klierik сказал:

1. А какие ошибки возникают и в работе чего?

2. Скорее всего требуется подключить скрипт в шапке сайта и выполнись его инициализацию

То что может создать проблему: Есть файл, обновляемый оффером, с ним манипуляций сделать нельзя - он ведь обновляется со стороны. Для работы создается подобный файл и размещается в КАСТОМНОЙ папке. Вот отсюда и надо подцепить его, и вытянуть в фильтр необходимые параметры.

1. Как указать в фильтре на место расположения файла в папке custom и его имя shop.xml?

2. Как подцепить из него параметры и в каком формате. Приведенный пример  

<option data-connection="phoneSelect" value="Phones">Телефоны</option>

<option data-connection="notebookSelect" value="Notebooks">Ноутбуки</option> ,

фактические данные shop.xml <product code="snvt-500">
    <bytov>бытовой электротехники </bytov>    
    <tele>телевизоров </tele>
    <muzik>музыкальных центров </muzik>
    <kino>домашних кинотеатров </kino>    
     </product>

3. Ошибки с большой вероятностью будут, как же без них.

19 часов назад, DivMan сказал:

Ну и где этот пример? 

Примет однозначно работать не будет, потому что есть файл, обновляемый оффером, с ним манипуляций сделать нельзя - он ведь обновляется со стороны. Для работы создается подобный файл и размещается в КАСТОМНОЙ папке. Проблема подцепить его, и вытянуть в фильтр необходимые параметры.

Нужно в фильтре указать на место расположения файла в папке custom и его имя shop.xml, и подцепить из него параметры и в каком формате. Приведенный пример  

<option data-connection="phoneSelect" value="Phones">Телефоны</option>

<option data-connection="notebookSelect" value="Notebooks">Ноутбуки</option> ,

фактические данные shop.xml <product code="snvt-500">
    <bytov>бытовой электротехники </bytov>    
    <tele>телевизоров </tele>
    <muzik>музыкальных центров </muzik>
    <kino>домашних кинотеатров </kino>    
     </product>

Весь пример (он точно без БД), который нашла в интернет, выглядит так 

ПОСЛЕДОВАТЕЛЬНЫЙ ВЫБОР С ИСПОЛЬЗОВАНИЕМ AJAX, JQUERY И PHP

В данном уроке мы построим набор элементов для последовательного выбора. Выбор опции будет приводить к обновлению страницы, показывая пользователю дополнительные опции для уточнения выбора. Опции выбора описаны на серверной стороне с помощью PHP, поэтому будет просто переделать пример на использование базы данных.

Разметка HTML

Элемент выбора имеет заголовок, который описывает выбираемый параметр. Заголовок и элемент выбора заключены в элемент LI.

При добавлении вопросов дополнительные элементы LI создается кодом jQuery. Все они располагаются в неупорядоченном списке #questions. Заголовок и опции данных пунктов обрабатываются как JSON, что будет видно в части PHP. вот какая разметка генерируется для пункта li:

index.html – генерируемый код

<ul id="questions">

      <!-- Генерируется кодом jQuery -->

      <li>

            <p>Что желаете купить?</p>

            <select data-placeholder="Выберите категорию продукта">

                  <option data-connection="phoneSelect" value="Phones">Телефоны</option>

                  <option data-connection="notebookSelect" value="Notebooks">Ноутбуки</option>

                  <option data-connection="tabletSelect" value="Tablets">Планшеты</option>

            </select>

      </li>

      <!-- Следующая секция вставляется в зависимости от выбора -->

</ul>

Демонстрационная страница не использует элемент браузера. Потому что мы подключаем плагин jQueryChosen для преобразования нашего элемента в стильный виджет, который вы видите на экране. Нужно просто вызвать метод chosen()  для элемента select, а все остальное сделает плагин.

 

Код jQuery

Вот что делает наш код jQuery - он  получает информацию для элемента выбора в виде JSON с сервера, генерирует разметку HTML и устанавливает обработчики событий для отслеживания изменений. Если элемент выбора меняется, то процесс повторяется с новыми пунктами.

В коде используется две функции JavaScript:

refreshSelects запускает плагин Chosen и привязывает обработчики событий каждый раз, когда новый пункт добавляется на страницу;

fetchSelect запрашивает фид JSON с сервера и генерирует разметку для ответа.

assets/js/script.js

$(function(){

     

      var questions = $('#questions');

     

      function refreshSelects(){

            var selects = questions.find('select');

           

            // Улучшаем элемент selects с помощью плагина Chose

            selects.chosen();

           

            // Ждем изменений

            selects.unbind('change').bind('change',function(){

                 

                  // Выбранная опция

                  var selected = $(this).find('option').eq(this.selectedIndex);

                  // Ищем атрибут data-connection

                  var connection = selected.data('connection');

                 

                 

                  // Удаляем следующий контейнер li (к=если есть)

                  selected.closest('#questions li').nextAll().remove();

                 

                  if(connection){

                        fetchSelect(connection);

                  }

 

            });

      }

     

      var working = false;

       

      function fetchSelect(val){

           

            if(working){

                  return false;

            }

            working = true;

           

            $.getJSON('ajax.php',{key:val},function(r){

                 

                  var connection, options = '';

                 

                  $.each(r.items,function(k,v){

                        connection = '';

                        if(v){

                               connection = 'data-connection="'+v+'"';

                        }

                       

                        options+= '<option value="'+k+'" '+connection+'>'+k+'</option>';

                  });

                 

                  if(r.defaultText){

                       

                        // Плагин Chose требует, чтобы был добавлен пустой элемент опции

                        // если нужно выводить текст "Пожалуйста, выберите"

                       

                        options = '<option></option>'+options;

                  }

                 

                  // Строим разметку для раздела select

                 

                  $('<li>\

                        <p>'+r.title+'</p>\

                        <select data-placeholder="'+r.defaultText+'">\

                               '+ options +'\

                        </select>\

                        <span class="divider"></span>\

                  </li>').appendTo(questions);

                 

                  refreshSelects();

                 

                  working = false;

            });

           

      }

     

      $('#preloader').ajaxStart(function(){

            $(this).show();

      }).ajaxStop(function(){

            $(this).hide();

      });

     

      // В начале загружаем выбор продукта

      fetchSelect('productSelect');

});

Отлично! Теперь осталось сделать генерацию фида JSON. Обратите внимание, что функция fetchSelectполучает в качестве аргумента строку. Это ключ, который передается в код PHP, обозначающий, какой набор пунктов нам требуется.

Вот как выглядит простой ответ из нашего скрипта PHP:

{

    "items": {

        "Телефоны": "phoneSelect",

        "Ноутбуки": "notebookSelect",

        "Планшеты": ""

    },

    "title": "Что желаете купить?",

    "defaultText": "Выберите категорию продукта"

}

Функция fetchSelect проходит циклом все пункты и использует ключи как содержание элементов опций, а значения - как указатели на следующие пункты. Выбор пунктов "Телефоны" и "Ноутбуки" в данном примере будет приводить к генерации новых элементов выбора, а пункта "Планшеты" - нет.

 

PHP

Нам нужно где-то хранить информацию о элементах выбора, опциях, которые в них содержатся, и взаимосвязях между ними. В базе данных для решения задачи может использоваться набор строк. Но в нашем примере мы храним данные в статических объектах. Для решения мы определяем простой класс, который будет содержать информацию об элементе выбора.

ajax.php / 1

// Будем использовать данный класс для определения каждого элемента select

 

class SelectBox{

      public $items = array();

      public $defaultText = '';

      public $title = '';

     

      public function __construct($title, $default){

            $this->defaultText = $default;

            $this->title = $title;

      }

     

      public function addItem($name, $connection = NULL){

            $this->items[$name] = $connection;

            return $this;

      }

     

      public function toJSON(){

            return json_encode($this);

      }

}

Теперь нам нужно только создать экземпляр данного класса для каждого элемента выбора и вызвать методaddItem() для добавления опций. Данный  метод имеет опциональный параметр $connection, который содержит имя зависимого элемента выбора.

ajax.php / 2

/* конфигурация элементов select */

 

// Продукт

 

$productSelect = new SelectBox('Что желаете купить?','Выберите категорию продукта');

$productSelect->addItem('Телефоны','phoneSelect')

                    ->addItem('Ноутбуки','notebookSelect')

                    ->addItem('Планшеты','tabletSelect');

 

// Типы телефонов

 

$phoneSelect = new SelectBox('Какой тип телефона вы хотите?', 'Выберите тип телефона');

$phoneSelect->addItem('Смартфон','smartphoneSelect')

                  ->addItem('Обычныйтелефон','featurephoneSelect');

 

// Смартфоны

 

$smartphoneSelect = new SelectBox('Какой смартфон вамнужен?','Выберите модель смартфона');

$smartphoneSelect->addItem('Samsung Galaxy Nexus')

                         ->addItem('iPhone 4S','iphoneSelect')

                         ->addItem('Samsung Galaxy S2')

                         ->addItem('HTC Sensation');

 

// Обычные телефоны

 

$featurephoneSelect = new SelectBox('Какой телефон вам нужен?','Выберите модель телефона');

$featurephoneSelect->addItem('Nokia N34')

                           ->addItem('Sony Ericsson 334')

                           ->addItem('Motorola');

 

// Цвет iPhone

 

$iphoneSelect = new SelectBox('Какой цвет аппарата вам нравится?','Выберите цвет');

$iphoneSelect->addItem('Белый')->addItem('Черный');

 

// Выбор ноутбука

 

$notebookSelect = new SelectBox('Какой ноутбук вы хотите купить?', 'Выберите модель ноутбука');

$notebookSelect->addItem('Asus Zenbook','caseSelect')

                     ->addItem('Macbook Air','caseSelect')

                     ->addItem('Acer Aspire','caseSelect')

                     ->addItem('Lenovo Thinkpad','caseSelect')

                     ->addItem('Dell Inspiron','caseSelect');

 

// Планшет

 

$tabletSelect = new SelectBox('Какой планшет является предметом вашей мечты?', 'Выберите модель планшета');

$tabletSelect->addItem('Asus Transformer','caseSelect')

                   ->addItem('Samsung Galaxy Tab','caseSelect')

                   ->addItem('iPad 16GB','caseSelect')

                   ->addItem('iPad 32GB','caseSelect')

                   ->addItem('Acer Iconia Tab','caseSelect');

 

// Сумка

 

$caseSelect = new SelectBox('Возьмёте защитный чехол к вашемуаппарату?','');

$caseSelect->addItem('Да')->addItem('Нет');

 

 

// Регистрируем все пункты выбора в массиве

 

$selects = array(

      'productSelect'                => $productSelect,

      'phoneSelect'                  => $phoneSelect,

      'smartphoneSelect'      => $smartphoneSelect,

      'featurephoneSelect'    => $featurephoneSelect,

      'iphoneSelect'                 => $iphoneSelect,

      'notebookSelect'        => $notebookSelect,

      'tabletSelect'                 => $tabletSelect,

      'caseSelect'            => $caseSelect

);

Выше приведенный код определяет несколько элементов выбора и размещает их в массиве $selects. Когда скрипт получает запрос AJAX, он просматривает данный массив и возвращает ответ:

ajax.php / 3

// Будем просматривать данный массив и возвращать выбранный объект в зависимости

// от парметра $_GET['key'] передаваемого jQuery

 

// Вы можете модифицировать код для выбора результата из таблицы

 

if(array_key_exists($_GET['key'],$selects)){

      header('Content-type: application/json');

      echo $selects[$_GET['key']]->toJSON();

}

else{

      header("HTTP/1.0 404 Not Found");

      header('Status: 404 Not Found');

}

Вызывая метод toJSON() мы выводим все данные для элементов выбора в формате JSON, который используется клиентской частью jQuery.

 

Готово!

[DivMan]

Категории находятся в выпадающим списке? При выборе категории, должны загрузиться нужные товары из jsona? 

[Лелик]

Выпадающих списков там нет. Категория выводится элементарно тем, что публикуется на странице ли, в меню ли соответствующий код для вывода. Потому что движка у магазина нет. Не знаю, что такое  json, неграмотна :). Вручную создается кастомный файл и выводить уже надо оттуда. Разработчика нашла, через недели две вопрос будет решен. Решение проблемы в виде кода конечно не раскрою (потому как для меня решение платное), но если Вам интересно будет увидеть результат работы сайта, то напишите. Сообщу Вам, когда всё заработает. 

[GalinGew]

Видел пару примеров реализации у конкурентов с помощью схемы орг где рейтинг товара звёздочками отображается. Добавил себе на сайт.
Зашел в веб-мастер в разделе структурированные данные - разметкаAggregateRating есть и без ошибок, но в выдаче все по прежнему. Вот думаю то ли подождать то ли я что-то не сделал.

...