Jump to content

Нужен фильтр товаров на 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

Выпадающих списков там нет. Категория выводится элементарно тем, что публикуется на странице ли, в меню ли соответствующий код для вывода. Потому что движка у магазина нет. Не знаю, что такое  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), что использовать и как отправлять формы на почту в такой ситуации?
       
    • 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(); }); })  
  • Member Statistics

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

    No registered users viewing this page.

  • Свежие Темы

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

    • Вы удивитесь, но многих вебмастеров от освоения англоязычного сегмента рынка останавливает именно незнание языка. Как коммуницировать с клиентами? Где искать англоязычных авторов? Кто проверит написанный на английском текст? Став клиентом компании Seoreef, вы не будете забивать себе голову этими вопросами, поскольку мы возьмем на себя все задачи по контенту. Вам останется лишь наблюдать, как стремительно растёт трафик на сайте. Интересно? Тогда пишите нам в телеграм или скайп.
    • TuchaKube — сервис предоставления контейнерной инфраструктуры и автоматизации CI/CD-процессов TuchaKube — это платформа на базе кластеров Kubernetes для автоматизации CI/CD-процессов, хостинга приложений и их данных в облаке контейнеров. Платформа создана для разработки программных продуктов и строительства высоконагруженных информационных систем. Сервис обеспечивает автоматический запуск таких процессов, как сборка, компиляция, тестирование, упаковка, контейнеризация и публикация приложения как в тестовой, так и в производственной средах. Среди возможностей работы — сбор и хранение статистических данных, мониторинг, кластеризация, горизонтальное масштабирование и многое другое. А одна из главных особенностей сервиса — автоматизация CI/CD-процессов при помощи DevOps-инженеров Tucha. Приглашаем оценить возможности мощной платформы TuchaKube! Для реальных веб-проектов готовы предоставить бесплатный тестовый период. Узнать подробнее о сервисе можно на нашем сайте: https://tucha.ua/ru/services/tuchakube. А если у вас появились вопросы, звоните нам по номеру +380 44 583-5-583 или пишите на электронную почту: sales@tucha.ua.  
    • По слухам, в Android 12, Google хочет внедрить по умолчанию протокол VPN WireGuard (источник https://www.techradar.com/news/google-quietly-adds-revolutionary-vpn-protocol-to-next-android-os ) Что говорит о его надежности и качестве. Мы со своей стороны уже сейчас усиленно работаем, для того, чтобы дать WireGuard VPN всем нашим пользователям.  Некоторым клиентам мы давали тестовые доступы, и отзывы великолепные, и сами тестируем данный протокол, все прям очень и очень хорошо 😉 По срокам, говорить пока не могу 😒 серверов много, и не так легко внедрить новый протокол везде, но мы работаем над этим.  Пока же у нас доступно подключение по Open VPN, L2TP и не менее известный и качественный чем WireGuard Softether VPN.  Все это бесплатно и без ограничений на https://finevpn.org/ или в телеграм боте: https://t.me/FineVPNbot P.S. 29.08.2020 мы обновили кошелек для Donation на сайте, сегодня 16.10.2020, нам поступило 27 переводов на общую сумму 1 830,43 $. Всем большое спасибо.  Скриншот: https://take.ms/sLAGm6   URL: https://www.blockchain.com/btc/address/36K6svHZBbQ4NL6vouu9o9n6jZhJR3Byrp?page=1 Постараемся делать такие отчеты ежемесячно. 
  • Popular Contributors

    Nobody has received reputation this week.

×
×
  • Create New...