861模板网站 > 模块建站 > 图文列表 > 自适应商品图文列表布局，并添加购物车和收藏功能

自适应商品图文列表布局，并添加购物车和收藏功能

在现代网站设计中，使网站具有良好的用户体验是至关重要的。自适应布局、动态效果和易于使用的功能可以显著提高用户满意度。在本篇文章中，我们将介绍如何使用jQuery和CSS3创建一个自适应的卡片式商品列表，并添加购物车和收藏功能。

前置知识

在开始之前，确保您熟悉以下技术：

HTML
CSS
JavaScript
jQuery

创建基础布局

我们需要创建一个基础的HTML结构和CSS样式，以便对商品进行布局。在这个例子中，我们将创建一个包含多个商品的列表，每个商品都有一张图片、一个标题、一段描述和一个价格标签。

<div class="product-list">
  <div class="product">
    <img src="product1.jpg" alt="Product 1">
    <h2>Product 1</h2>
    <p>Description of the product goes here.</p>
    <span class="price">$19.99</span>
  </div>
  <div class="product">
    <img src="product2.jpg" alt="Product 2">
    <h2>Product 2</h2>
    <p>Description of the product goes here.</p>
    <span class="price">$24.99</span>
  </div>
  <!-- more products... -->
</div>

.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.product {
  width: calc(33.33% - 20px);
  margin-bottom: 40px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  overflow: hidden;
}

.product img {
  width: 100%;
  height: auto;
}

.product h2 {
  font-size: 1.2rem;
  margin: 20px;
}

.product p {
  font-size: 0.9rem;
  margin: 0 20px 20px;
}

.product .price {
  display: block;
  font-size: 1.1rem;
  font-weight: bold;
  text-align: center;
  margin-top: 10px;
  padding: 8px 0;
  background-color: #666;
  color: #fff;
}

在上面的代码中，我们设置了一个CSS3布局，使商品列表具有自适应能力。我们使用display: flex和flex-wrap: wrap来创建一个弹性布局，并使用justify-content: space-between将每个商品之间的空间均匀地分配到容器的两侧。

每个商品都被放置在一个带有.product类的HTML元素中，并使用width属性设置其宽度为33.33%，并减去20像素的边距。这样，每行可以容纳三个商品，并且它们可以适应不同的屏幕大小。

添加购物车和收藏功能

我们将添加两个按钮来实现购物车和收藏的功能。我们将使用jQuery的事件处理程序来监听这些按钮，并在单击时执行相应的操作。

<div class="product-list">
  <div class="product">
    <img src="product1.jpg" alt="Product 1">
    <h2>Product 1</h2>
    <p>Description of the product goes here.</p>
    <span class="price">$19.99</span>
    <div class="actions">
      <button class="btn add-cart">Add to Cart</button>
      <button class="btn add-wishlist">Add to Wishlist</button>
    </div>
  </div>
  <div class="product">
    <img src="product2.jpg" alt="Product 2">
    <h2>Product 2</h2>
    <p>Description of the product goes here.</p>
    <span class="price">$24.99</span>
    <div class="actions">
		<button class="btn add-cart">Add to Cart</button>
		<button class="btn add-wishlist">Add to Wishlist</button>
	</div>
  </div>
<!-- more products... -->
</div>

我们使用一个`<div>`元素包含两个按钮，每个按钮都有一个特定的类（`.add-cart`和`.add-wishlist`）。这些类将用于在jQuery中选择和操作按钮。

我们将编写jQuery代码，为这些按钮添加单击事件处理程序。我们将使用`.on()`方法来监听单击事件，并使用`.closest()`方法找到与按钮相关联的商品元素。

$(document).ready(function() {
  $('.product-list .btn').on('click', function() {
    var $product = $(this).closest('.product');

    if ($(this).hasClass('add-cart')) {
      // Add to cart functionality
      console.log('Added to cart: ' + $product.find('h2').text());
    } else if ($(this).hasClass('add-wishlist')) {
      // Add to wishlist functionality
      console.log('Added to wishlist: ' + $product.find('h2').text());
    }
  });
});

在上面的代码中，我们使用.ready()函数等待DOM加载完成，使用.on()方法添加单击事件处理程序。当用户单击任何一个.btn按钮时，我们将执行一个函数，该函数从与按钮相关联的.product元素中提取信息。

如果按钮具有.add-cart类，则我们将执行“Add to cart”功能。否则，如果它有.add-wishlist类，则我们将执行“Add to wishlist”功能。在上面的代码中，我们只是打印了一条消息，但您可以根据自己的需求扩展这些功能。

添加动态效果

我们将添加一些动态效果来提高用户体验。具体来说，我们将使用CSS3过渡和动画效果来为商品的悬停状态和按钮点击状态添加一些视觉反馈。

.product:hover {
  transform: translateY(-5px);
}

.btn {
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.btn.add-cart {
  background-color: #666;
  color: #fff;
}

.btn.add-wishlist {
  background-color: #eee;
  color: #333;
}

.btn:hover {
  background-color: #444;
  color: #fff;
}

.btn:active {
  transform: translateY(1px);
}

在上面的代码中，我们将.product元素的悬停状态设置为向上移动5像素，从而为用户提供视觉反馈。我们还为.btn类创建了一些CSS样式，以使它们在悬停和单击时产生颜色变化和微小的动画效果。