Layui를 활용하여 태그 검색을 지원하는 쇼핑몰 상품 분류 페이지를 개발하는 방법-JS 튜토리얼-php.cn

Layui를 활용하여 태그 검색을 지원하는 쇼핑몰 상품 분류 페이지를 개발하는 방법

WBOY

풀어 주다： 2023-10-27 17:57:31

원래의

903명이 탐색했습니다.

Layui를 활용하여 태그 검색을 지원하는 쇼핑몰 상품 분류 페이지를 개발하는 방법

레이이를 활용해 태그 검색을 지원하는 쇼핑몰 상품 분류 페이지를 개발하는 방법

인터넷이 발달하면서 전자상거래가 일반적인 쇼핑 방식이 되었습니다. 쇼핑몰에서는 사용자가 원하는 상품을 빠르게 찾을 수 있도록 상품을 분류하는 것이 매우 중요합니다. 상품 분류 페이지에서는 더 나은 사용자 경험을 제공하기 위해 태그 검색 기능을 지원하는 것이 좋습니다. 이번 글에서는 Layui를 활용하여 태그 검색을 지원하는 쇼핑몰 상품 분류 페이지를 개발하는 방법을 소개하고, 구체적인 코드 예시를 제공하겠습니다.

Layui는 사용하기 쉽고 시작하기 쉬운 경량 프런트 엔드 UI 프레임워크입니다. 테이블, 드롭다운 상자 등을 포함한 다양한 구성 요소를 제공합니다. Layui Developer City의 상품 분류 페이지를 이용하면 페이지의 레이아웃과 인터랙티브 효과를 빠르게 구현할 수 있습니다. 다음은 샘플 프로젝트의 디렉터리 구조입니다.

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

로그인 후 복사

먼저 index.html 파일에 Layui 관련 파일을 소개합니다.

<!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>

로그인 후 복사

category.js 파일에 제품 데이터를 동적으로 로드하고 검색하기 위한 JavaScript 로직 코드를 작성합니다.

// 商品分类数据
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();
});

로그인 후 복사

category.css 파일에 페이지 스타일 정의:

.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;
}

로그인 후 복사

위는 태그 검색을 지원하는 쇼핑몰 상품 카테고리 페이지를 개발하기 위해 Layui를 사용한 구체적인 코드 예제입니다. 이 예시를 통해 Layui를 사용하여 상품 분류 페이지의 레이아웃과 인터랙티브 효과를 빠르게 구현하고 태그 검색 기능을 지원할 수 있음을 확인할 수 있습니다.

위 내용은 Layui를 활용하여 태그 검색을 지원하는 쇼핑몰 상품 분류 페이지를 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!