Jump to content
  • Sign Up

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


Лелик

Recommended Posts

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

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

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

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

Link to post
Share on other sites

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

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

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.

 

Готово!

Link to post
Share on other sites

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

Link to post
Share on other sites

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

Link to post
Share on other sites
  • 1 year later...

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

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

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

  • Similar Content

    • РоманФ
      By РоманФ
      Возникли сложности с созданием нестандартной формы в конструкторе сайтов, может кто-то сталкивался с такими проблемами?
      Как решать такие проблемы в конструкторах по типу Lp Motor и Tilda(есть блок html есть куда вставить css, ну и соответственно есть возможность вставлять скрипты js), что использовать и как отправлять формы на почту в такой ситуации?
       
    • toplife
      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: [email protected]
      hh: https://spb.hh.ru/vacancy/30397980
    • Olesiy
      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(); }); })  
  • Member Statistics

    46,942
    Total Members
    1,451
    Most Online
    johnmesi
    Newest Member
    johnmesi
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Свежие Темы

  • Последние сообщения

    • johnmesi
      Здравствуйте. Меня зовут Евгений. Я занимаюсь разработкой, ведение сайтов сайтов. Работаю cms Wordpress. Разрабатываю сайты различных тематик начиная от блога заканчивая интернет магазином. Рассчитать стоимость сайта вы можете перейдя https://expweb.ru/stoimost-sayta  Детальную информацию мы сможем обсудить лично. Портфолио моих работ https://expweb.ru/portfolio  Контакты: Тел. +380668406440 Telegram @johnmesii Viber +380631496115
    • finevpn
      После создания наших тем на форумах, почти везде главным вопрос был: «Почему бесплатно?»  Думаем надо этот вопрос пояснить. Создание и обслуживание VPN серверов в пересчете на одного клиента, не стоит 5$ в месяц. То, что остальные сервисы делают такую стоимость, это на их совести. При хороший оптимизации серверов и сокращении издержек (главная из которых софт и кодеры, но об этом ниже), все выходит очень бюджетно.  Так-же, как вы может заметили, у нас [B]нет своих приложений[/B] , на это есть несколько причин:     1. В приложении проще всего встроить троян или вирус, и сделать из VPN клиента бота для DDOS атак или резиденскую прокси. Для нашего VPN вы можете использовать сторонние в том числе и Open Source решения. Поэтому мы просто технически не может вас использовать в своих целях.     2. Цена конечно же. Разработка приложения для iOS или Windows или любой другой OS, стоит достаточно дорого, и потом еще постоянное обновление приложений и поддержка их в актуальной форме. Мы не хотим делать платный сервис для обычных пользователей и не готовы на себя брать такие расходы. Да, отсутствие приложений немного усложняет работы с нашим VPN, но мы так снижаем издержки и защищаем клиентов от возможности подсадить трояна вам.  За счет того, что мы не тратим деньги на создание и обновления приложений деньги, мы можем себе позволить держать VPN только за donation.  Сейчас у нас в разработке платный продукт (VPN), но для организаций, и в какой-то степени, наш бесплатный VPN для частных лиц, является тестовым и способом пиара 🙂 таким (бесплатным) он и останется в будущем.  Может ли, что-то в жизни быть бесплатно? Многие продукты не берут плату, но монетизируются за donation или за счет работы с бизнесом: Wikipedia, Linux, Mozilla, Open Office, Android, TOR, Telegram (вообще бесплатный и без рекламы) и куча других которыми вы пользуетесь каждый день и даже не думаете об этом. 
    • Tucha
      Спецпредложение "Сколько стоит и как организовать работу сайтов на CMS WordPress, Joomla, Drupal и др. в облаке"   Друзья, если ваш сайт работает на WordPress, Joomla, Drupal, OpenCart или любой другой CMS, тогда акционное предложение от Tucha - именно для вас! Хостинг в облаках надежного провайдера поможет достичь бесперебойной работы веб-проектов и их высокой производительности.   Для сайтов с небольшими и умеренными нагрузками (например, сайта-визитки или лендинга) подойдет облачный хостинг на базе сервиса TuchaHosting. Но если проект требует большего количества выделенных вычислительных ресурсов (например, интернет-магазин или корпоративный портал с большим количеством посетителей), подойдут виртуальные серверы TuchaFlex + и TuchaBit. В специальной статье на наглядных примерах показываем, как самостоятельно посчитать ориентировочную стоимость размещения сайтов в облаках: https://tucha.ua/ru/solutions/skolko-stoit-hosting-sayta-v-oblake-i-kak-migrirovat   А для того, чтобы миграция была еще более удобной, Tucha дарит приятный бонус! До 6 октября 2020 включительно заказывайте акционные конфигурации виртуальных серверов с промокодом TD-217-0 и получайте:   - 1 месяц пользования сервисом для хранения резервных копий TuchaBackup в подарок (в объеме диска заказанного сервиса) - скидку 200 грн на оплату первого счета.   Чтобы воспользоваться предложением, звоните по телефону +380 44 583-5-583 или на электронный адрес [email protected] Обращайтесь прямо сейчас и получите качественный хостинг в облаках от Tucha и лучшую техническую поддержку 24×7!
  • Popular Contributors

    Nobody has received reputation this week.

×
×
  • Create New...