Home >Web Front-end >JS Tutorial >How to use Layui to develop a mall product classification page that supports tag search

How to use Layui to develop a mall product classification page that supports tag search

WBOYOriginal: 2023-10-27 17:57:31917browse

With the development of the Internet, e-commerce has become a common shopping method. In a mall, it is very important to classify products, which helps users quickly find the products they want. In the product classification page, in order to provide a better user experience, it is a good choice to support the tag search function. This article will introduce how to use Layui to develop a mall product classification page that supports tag search, and provide specific code examples.

Layui is a lightweight front-end UI framework that is easy to use and easy to get started with. It provides a wealth of components, including tables, drop-down boxes, etc. Using the product classification page of the Layui Developer City, you can quickly realize the layout and interactive effects of the page. The following is the directory structure of a sample project:

- index.html
- js
  - layui.js
  - category.js
  - jquery.min.js
- css
  - layui.css
  - category.css

First, introduce Layui related files in the index.html file:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>商城商品分类页面</title>
  <link rel="stylesheet" href="css/layui.css">
</head>

<body>
  <div class="layui-container">
    <div class="layui-row">
      <div class="layui-col-md8">
        <div class="layui-collapse" lay-accordion>
          <!-- 商品分类列表 -->
          <div class="layui-colla-item">
            <h2 class="layui-colla-title">电子产品</h2>
            <div class="layui-colla-content layui-show">
              <!-- 商品列表 -->
              <div id="productList" class="layui-row"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-col-md4">
        <!-- 标签搜索 -->
        <div class="layui-card">
          <div class="layui-card-header">标签搜索</div>
          <div class="layui-card-body">
            <input type="text" id="searchTag" class="layui-input" placeholder="请输入标签">
            <button class="layui-btn layui-btn-sm" onclick="searchByTag()">搜索</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="js/jquery.min.js"></script>
  <script src="js/layui.js"></script>
  <script src="js/category.js"></script>
</body>

</html>

Write JavaScript logic code in the category.js file for Dynamically load and search product data:

// 商品分类数据
var categoryData = [
  {
    name: "手机",
    products: [
      { name: "iPhone X", tags: ["高端", "苹果"] },
      { name: "小米10", tags: ["性价比高", "小米"] },
      { name: "华为P40", tags: ["华为"] }
    ]
  },
  {
    name: "电视",
    products: [
      { name: "小米电视", tags: ["性价比高", "小米"] },
      { name: "创维电视", tags: ["创维"] },
      { name: "索尼电视", tags: ["索尼"] }
    ]
  }
];

// 根据标签搜索商品
function searchByTag() {
  var tag = $("#searchTag").val();
  var productList = "";
  
  categoryData.forEach(function(category) {
    category.products.forEach(function(product) {
      if (product.tags.indexOf(tag) !== -1) {
        productList += "<div class='layui-col-md3'>" + product.name + "</div>";
      }
    });
  });
  
  $("#productList").html(productList);
}

// 加载商品分类列表
function loadCategory() {
  categoryData.forEach(function(category) {
    var categoryItem = "<div class='layui-colla-item'>"
      + "<h2 class='layui-colla-title'>" + category.name + "</h2>"
      + "<div class='layui-colla-content'>"
      + "<div class='layui-row'>";
      
    category.products.forEach(function(product) {
      categoryItem += "<div class='layui-col-md3'>" + product.name + "</div>";
    });
    
    categoryItem += "</div></div></div>";
    $(".layui-collapse").append(categoryItem);
  });
}

$(function() {
  loadCategory();
});

Define the page style in the category.css file:

.layui-container {
  padding: 20px;
}

.layui-row {
  margin: 10px 0;
}

.layui-col-md8 {
  padding-right: 10px;
}

.layui-card {
  margin-bottom: 10px;
}

#searchTag {
  width: 200px;
  display: inline-block;
}

The above is a specific code example of using Layui to develop a mall product category page that supports tag search . Through this example, you can see that you can use Layui to quickly implement the layout and interactive effects of product classification pages, and support the tag search function.

The above is the detailed content of How to use Layui to develop a mall product classification page that supports tag search. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css layui html JS ui

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use the Layui framework to develop an online learning platform that supports instant quizzes and learning trackingNext article：How to use the Layui framework to develop an online learning platform that supports instant quizzes and learning tracking

See more

How to use Layui to develop a mall product classification page that supports tag search

Related articles