How to implement product list with jquery

With the continuous development of the Internet, the e-commerce industry is becoming more and more popular. In this industry, product listings are very important. The product list allows users to browse and purchase products more quickly. In order to better implement the product list function, we can use jquery, an excellent front-end framework.

1. Understand jquery

jQuery is a JavaScript library for users to interact on web pages. It simplifies the operation between HTML and JavaScript. The purpose of jQuery's design is "write less, do more", which means writing less code and doing more things. Using jQuery, developers can easily complete many tasks such as DOM manipulation, event handling, animation effects, and more.

2. How to implement the product list through jquery

1. Use Ajax to obtain data

Before implementing the product list, we need to prepare some data. Generally, you can Provide product data interface on the server side. In order to obtain data faster, we can use Ajax to obtain data asynchronously.

$.ajax({
  url: 'http://www.example.com/api/goods',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    console.log(data);
  },
  error: function(err) {
    console.log(err);
  }
});

2. Generate product list through loop

After obtaining the data, we can loop through each product and then render the product data into the page. The following is a simple example:

$.ajax({
  url: 'http://www.example.com/api/goods',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    var $list = $('#goods-list');
    var html = '';

    $.each(data, function(index, item) {
      html += '<li>';
      html += '<img src="&#39; + item.image + &#39;">';
      html += '<h3>' + item.title + '</h3>';
      html += '<p>' + item.price + '</p>';
      html += '</li>';
    });

    $list.html(html);
  },
  error: function(err) {
    console.log(err);
  }
});

3. Add interactive effects

In addition to a simple product list, we can also add some interactive effects to the product list to enhance users experience. For example, when a user hovers the mouse over an item, the item will darken or display more information. The following is a simple example:

$('#goods-list').on('mouseenter', 'li', function() {
  $(this).css('opacity', 0.8);
}).on('mouseleave', 'li', function() {
  $(this).css('opacity', 1);
});

4. Implementing the search function

In practical applications, the product list is generally very long, so we also need to add a search function to it . Through jquery, when the user enters a keyword, we can filter out all products containing the keyword in real time. The following is a simple example:

$('#search-input').on('input', function() {
  var keyword = $(this).val().trim();
  var $list = $('#goods-list');
  var $items = $list.find('li');

  $items.each(function(index, item) {
    var title = $(item).find('h3').text();
    if (title.indexOf(keyword) !== -1) {
      $(item).show();
    } else {
      $(item).hide();
    }
  });
});

5. Paging implementation

Finally, we also need to implement paging for the product list. In the example above, we simply render all the products into the page. However, when there are a large number of items, users may need to browse in pages. Here is a simple example:

var $list = $('#goods-list');
var PAGE_SIZE = 10;

function renderList(data, page) {
  var html = '';
  var start = (page - 1) * PAGE_SIZE;
  var end = start + PAGE_SIZE;
  var pageData = data.slice(start, end);

  $.each(pageData, function(index, item) {
    html += '<li>';
    html += '<img src="&#39; + item.image + &#39;">';
    html += '<h3>' + item.title + '</h3>';
    html += '<p>' + item.price + '</p>';
    html += '</li>';
  });

  $list.html(html);
}

$.ajax({
  url: 'http://www.example.com/api/goods',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    renderList(data, 1);
  },
  error: function(err) {
    console.log(err);
  }
});

$('#prev').on('click', function() {
  var page = parseInt($('#current-page').text());

  if (page > 1) {
    page -= 1;
    $('#current-page').text(page);
    renderList(data, page);
  }
});

$('#next').on('click', function() {
  var page = parseInt($('#current-page').text());
  var totalPage = Math.ceil(data.length / PAGE_SIZE);

  if (page < totalPage) {
    page += 1;
    $('#current-page').text(page);
    renderList(data, page);
  }
});

The above is a simple tutorial on implementing a product list through jquery. Through this article, I believe you can already master the method of implementing product list with jquery. Hope this article is helpful to everyone.

The above is the detailed content of How to implement product list with jquery. For more information, please follow other related articles on the PHP Chinese website!