jQuery AJAX для BigCommerce REST JSON API продукта и фильтрация строк запроса - PullRequest
Новая
       14

jQuery AJAX для BigCommerce REST JSON API продукта и фильтрация строк запроса

0 голосов
/ 17 февраля 2020

Мой первый прорыв в AJAX с JQuery здесь. Я тоже jQuery новичок, но мне нужно учиться сценарию реального мира. Я пишу тему BigCommerce, и поскольку многослойная навигация по атрибутам продукта не поддерживается, мне нужно вызвать их API, а затем отобразить возвращенное содержимое.

Я создал службу REST на основе PHP, чтобы скрыть API OAuth из веб-интерфейса, и он быстро и качественно возвращает данные.

С учетом приведенного ниже я намеревался вызвать API для всех продуктов в определенной категории c, а затем создать неупорядоченный список на основе HTML для каждого элемента строки JSON. Здесь я собирался использовать еще jQuery, чтобы убрать параметры фильтра из строки запроса и отфильтровать список.

Это потому, что вы не можете запросить API BigCommerce для продуктов, отфильтрованных по атрибуту, поэтому Я решил, что самый быстрый способ и лучший UX - это получить данные категории и затем отфильтровать их в DOM. Это сумасшедшая идея? В настоящее время я просто отображаю название продукта в качестве подтверждения концепции, и все загружается быстро даже при запуске Stencil CLI на localhost.

Ниже работает, но в настоящее время он заменяет все элементы <li> на странице. вместо того, чтобы просто создавать LI в пределах указанного c DIV. Если есть способ, которым я могу сделать это, так что только определенный элемент c DIV заполняется содержимым, он будет служить своей цели на данный момент, и я могу повторно использовать код по всему сайту, когда это необходимо, где различные фильтры в соответствии с Требуются указания владельцев торговых марок.

Любые советы о том, как этого добиться, приветствуются. 

  <script>
 //jQuery to query middleware & return results via ajax.
  $('#usedBikeSearch').submit(function(event) {
    event.preventDefault();
      var post_url = $(this).attr("action"); //get form action urls
      var form_data = $(this).serialize(); //Encode form elements for submission
        $.ajax({
            url : post_url
            //data : form_data //To use once data loaded for filtering.
        }).done(function(response){
        var buffer="";
        $.each(JSON.parse(response), function(index, val) {
          for(var i=0; i < val.length; i++){
            var item = val[i];
            console.log(item.name);
            buffer+="<li><h3>"+item.name+"</h3></li>";
          }
          $('ul').html(buffer);
            });
          });
        });
</script>
...