Jump to content

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


Лелик
 Share

Recommended Posts

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

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

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

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

Link to comment
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.

 

Готово!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 1 year later...

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By РоманФ
      Возникли сложности с созданием нестандартной формы в конструкторе сайтов, может кто-то сталкивался с такими проблемами?
      Как решать такие проблемы в конструкторах по типу Lp Motor и Tilda(есть блок html есть куда вставить css, ну и соответственно есть возможность вставлять скрипты js), что использовать и как отправлять формы на почту в такой ситуации?
       
    • 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. и.... я тоже хочу
      пока только придумал установить в хром расширение. но это временная мера - только для этапа разработки.
    • By mightybat
      Добрый день.
      Есть форма(опросник), переменных на 200, подскажите как можно ее заполнить на компьютере1, и открыть на компьютере2 уже заполненную?
      Может быть есть человеческий способ, решения данной проблемы? 
      Вижу только вариант 1)сохранить все переменные в mysql 2)на втором компе вытащить из БД 3)воссоздать страницу HTML через echo( куча чекбоксов с oncliсk показывающими дивы, которые замучаюсь переписывать с block на none и наоборот).
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy