在現代網站設計中，使網站具有良好的用戶體驗是至關重要的。自適應布局、動態效果和易于使用的功能可以顯著提高用戶滿意度。在本篇文章中，我們將介紹如何使用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樣式，以使它們在懸停和單擊時產生顏色變化和微小的動畫效果。

結論

通過本文，我們已經學習了如何使用jQuery和CSS3創建一個自適應的卡片式商品列表，并添加購物車和收藏功能，同時增加了用戶體驗的動態效果。這些技術可以應用于任何電子商務網站中，以提高用戶滿意度和購物體驗。