Лелик

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

Recommended Posts

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites
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.

 

Готово!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

euro-truck-simulator-2-multiplayer.php?i...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By toplife
      Интернет-маркетинговое агентство Top-Life. Мы ищем в команду Junior Web разработчика.
       
      Что мы ожидаем от кандидата:
      Навыки HTML5, CSS3, JavaScript; Знания PHP5-7‚ MySQL‚ jQuery, ajax; Опыт в верстке; Наличие опыта разработки и знание различных CMS (1С Битрикс, UMI, ModX, WordPress и другие) будет плюсом; Опыт работы и наличие портфолио приветствуется; Умение и желание работать в команде; Аккуратность (осмысленность) в работе.  
      Задачи, которые вам предстоит решать:
      Современная адаптивная кроссбраузерная верстка (HTML5+CSS3); Применение готовой верстки к CMS (1С-Битрикс, Wordpress);  
      Условия:
      Оформление по ТК РФ Заработная плата: от 20 000 до 40 000 руб;  График работы: 5/2 с 10.00–19.00, обед с 14.00–15.00; На территории работодателя; Молодой‚ профессиональный коллектив; Корпоративные мероприятия; Чай, кофе и печеньки с нас; Мы даем возможность не просто работать‚ а создавать и развиваться. Для связи:
      Антон
      тел: 8(981)897-42-46
      mail: a.majstrenko@top-life.su
      hh: https://spb.hh.ru/vacancy/30397980
    • By Olesiy
      Здравствуйте дорогие форумчане! Сделала всплывающую форму обратной связи на своем сайте, все работает,нормально, вот только после отправки письма форма не закрывается, нужно нажимать на крестик для закрытия. Как сделать так , что бы после успешной отправки форма сама закрывалась.Если кому не трудно подскажите ПОЖАЛУЙСТА. P.S в js не буб бум.
      Вот форма:
      <div class="popup"> <div class="popup-dialog">  <div class="popup-content">  <button class="popup-close"> &times;</button> <form  class="top" action="smart.php" method="POST"> <h4>Submit your application</h4> <label for="name"> Your  name<input type="text" name="name" value="" placeholder="name"></label> <label for="emeil"> Your e-meil<input type="text" name="e-meil" value="" placeholder="emeil" required></label> <label for="phone">Your Phone<input type="text" name="phone"  id="phone" value="" placeholder="phone"></label> <textarea name="comment" id="comment-field"  rows="4">comment</textarea> <button class="button-block button-btn" type="submit">  to order</button> </form> </div> </div> </div>  
      Вот скрипт отправки:
      $('form').submit(function(event) { event.preventDefault(); var th = $(this); $.ajax({ type: "POST", url: "smart.php", data:$(this).serialize() }).done(function() { $(this).find("input").val(""); alert("Спасибо за заявку!"); $("form").trigger("reset"); }); return false; }); И на всякий случай скрипт всплытия окна
      $(document).ready(function() { $('.popup-btn').on('click', function (event) { $('.popup').fadeIn();// к тому что нужно показать, fadeIn с анимацией }); $('.popup-close').on('click', function (event) { event.preventDefault(); $('.popup').fadeOut(); }); })  
    • By cyklop77
      подскажите пожалуйста, что нужно сделать чтобы получить возможность использовать базу городов от КЛАДР? она выложена в общий доступ, но обратиться через ajax к ней невозможно потому что браузеры не разрешают кроссдоменные запросы
      когда бэкенд пишешь сам, то сам же и настраиваешь отдающий сервер в соответствии с CORS, но здесь не тот случай. однако, думаю, большинство разработчиков тянут данные из КЛАДР при помощи ajax. и.... я тоже хочу
      пока только придумал установить в хром расширение. но это временная мера - только для этапа разработки.
  • Member Statistics

    46,439
    Total Members
    3,128
    Most Online
    Talomir
    Newest Member
    Talomir
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.