AppML 案例 Products 学习笔记

介绍

本篇学习笔记将介绍如何利用 AppML 中的 Products 应用程序来构建一个简单但功能强大的电商平台。我们将了解如何使用 AppML 的各种功能来创建产品列表、购物车以及结账系统。

准备工作

在开始之前，您需要先安装 AppML 并创建一个新的项目。接下来，您需要在项目中创建一个名为 Products 的应用程序并准备一些测试数据。

以下是示例数据：

jsonCopy Code
[
  {
    "id": 1,
    "name": "iPhone XR",
    "description": "Apple iPhone XR (64GB, Black) [Locked] + Carrier Subscription",
    "image": "https://cdn.pixabay.com/photo/2019/09/22/08/28/smartphone-4490727_960_720.jpg",
    "price": 749.99,
    "quantity": 10
  },
  {
    "id": 2,
    "name": "Samsung Galaxy S20",
    "description": "Samsung Galaxy S20+ Plus 128GB SM-G985F/DS Dual SIM (GSM Only, No CDMA) Factory Unlocked 4G/LTE",
    "image": "https://cdn.pixabay.com/photo/2020/03/28/15/18/samsung-4976729_960_720.jpg",
    "price": 999.99,
    "quantity": 5
  },
  {
    "id": 3,
    "name": "Amazon Echo",
    "description": "Echo Dot (3rd Gen) - Smart speaker with Alexa - Charcoal",
    "image": "https://cdn.pixabay.com/photo/2017/05/03/07/11/echo-2286547_960_720.jpg",
    "price": 59.99,
    "quantity": 20
  }
]

创建产品列表

我们将首先创建一个产品列表，以显示可用的产品及其价格和数量。

首先，在 Products 应用程序中创建一个名为 ProductList 的页面。然后，将以下代码添加到该页面的内容部分：

htmlCopy Code
<ul id="product-list">
  {% for product in products %}
    <li>
      <img src="{{ product.image }}" alt="{{ product.name }}" width="100px">
      <h3>{{ product.name }}</h3>
      <p>{{ product.price | currency }}</p>
      <button class="add-to-cart" data-id="{{ product.id }}">Add to Cart</button>
    </li>
  {% endfor %}
</ul>

此代码将循环遍历产品数据，并在页面上呈现每个产品的图像、名称、价格和加入购物车的按钮。data-id 属性将被设置为产品的唯一标识符，这有助于我们以后从购物车中识别该产品。

接下来，您需要为该页面设计样式。在 ProductList 页面中添加以下 CSS：

cssCopy Code
#product-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

#product-list li {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  padding: 10px;
}

#product-list li img {
  margin-right: 20px;
}

#product-list li h3 {
  margin: 0;
  font-size: 20px;
}

#product-list li p {
  margin: 0;
  font-size: 18px;
  color: #666;
  margin-left: auto;
}

.add-to-cart {
  background: #07c;
  border: none;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

刷新页面即可看到产品列表。

创建购物车

现在，我们需要创建一个购物车页面，以便用户可以查看他们添加到购物车中的产品、调整数量和检查商品总价。

首先，在 Products 应用程序中创建一个名为 Cart 的页面。然后添加以下代码到该页面的内容部分：

htmlCopy Code
<table id="cart">
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Quantity</th>
      <th>Total</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    {% for item in cart %}
      <tr>
        <td>{{ item.name }}</td>
        <td>{{ item.price | currency }}</td>
        <td><input type="number" min="1" value="{{ item.quantity }}" data-id="{{ item.id }}"></td>
        <td>{{ (item.quantity * item.price) | currency }}</td>
        <td><button class="remove-from-cart" data-id="{{ item.id }}">Remove</button></td>
      </tr>
    {% endfor %}
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3"></td>
      <td>Total: {{ total | currency }}</td>
      <td></td>
    </tr>
  </tfoot>
</table>

<button id="checkout">Checkout</button>

此代码将在页面上呈现购物车中的每个产品、其价格、数量和总价。还添加了一个 Remove 按钮，以便用户可以从购物车中删除产品。最后，它显示了总价格，并提供了一个 Checkout 按钮来执行结账操作。

接下来，您需要为该页面设计样式。在 Cart 页面中添加以下 CSS：

cssCopy Code
#cart {
  border-collapse: collapse;
  width: 100%;
}

#cart thead th {
  text-align: left;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

#cart tbody td {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

#cart tbody input[type="number"] {
  width: 50px;
}

#cart tfoot td {
  padding: 10px;
  text-align: right;
}

#checkout {
  background: #07c;
  border: none;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  margin-top: 20px;
  cursor: pointer;
}

刷新页面即可看到购物车。

实现结账页面

最后，我们需要创建一个结账页面，以便用户输入其联系信息并确认订单。

首先，在 Products 应用程序中创建一个名为 Checkout 的页面。然后，添加以下代码到该页面的内容部分：

htmlCopy Code
<form id="checkout-form">
  <label for="name">Name</label>
  <input type="text" name="name" required>

  <label for="email">Email</label>
  <input type="email" name="email" required>

  <label for="address">Address</label>
  <textarea name="address" required></textarea>

  <button>Place Order</button>
</form>

此代码将呈现一个表单，要求用户输入其姓名、电子邮件地址和地址。完成后，用户可以单击“Place Order”按钮，提交订单。

接下来，您需要为该页面设计样式。在 Checkout 页面中添加以下 CSS：

cssCopy Code
#checkout-form {
  max-width: 500px;
  margin: 0 auto;
}

#checkout-form label {
  display: block;
  margin-top: 20px;
}

#checkout-form input,
#checkout-form textarea {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

#checkout-form button {
  background: #07c;
  border: none;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  margin-top: 20px;
  cursor: pointer;
}

刷新页面即可看到结账页面。

举例

现在，我们可以在页面中添加一些 JavaScript，以实现购物车和结账系统的逻辑。例如，以下代码将添加一个单击事件处理程序，当用户单击产品列表中的“Add to Cart”按钮时，它将添加该产品到购物车中：

javascriptCopy Code
document.querySelectorAll('.add-to-cart').forEach(function(button) {
  button.addEventListener('click', function(event) {
    var productId = event.target.getAttribute('data-id');
    var product = products.find(function(item) {
      return item.id == productId;
    });

    if (product) {
      addToCart(product);
    }
  });
});

function addToCart(product) {
  var item = cart.find(function(item) {
    return item.id == product.id;
  });

  if (item) {
    item.quantity += 1;
  } else {
    cart.push({
      id: product.id,
      name: product.name,
      price: product.price,
      quantity: 1
    });
  }

  renderCart();
}

当用户更改购物车中某个产品的数量时，以下代码将更新购物车页面上的数量和总价：

javascriptCopy Code
document.querySelectorAll('#cart input[type="number"]').forEach(function(input) {
  input.addEventListener('change', function(event) {
    var productId = event.target.getAttribute('data-id');
    var item = cart.find(function(item) {
      return item.id == productId;
    });

    if (item) {
      item.quantity = parseInt(event.target.value);
      renderCart();
    }
  });
});

function getCartTotal() {
  return cart.reduce(function(total, item) {
    return total + (item.quantity * item.price);
  }, 0);
}

function renderCart() {
  var tableBody = document.querySelector('#cart tbody');
  tableBody.innerHTML = '';

  cart.forEach(function(item) {
    var row = document.createElement('tr');

    var nameCell = document.createElement('td');
    nameCell.textContent = item.name;
    row.appendChild(nameCell);

    var priceCell = document.createElement('td');
    priceCell.textContent = item.price.toFixed(2);
    row.appendChild(priceCell);

    var quantityCell = document.createElement('td');
    var quantityInput = document.createElement('input');
    quantityInput.type = 'number';
    quantityInput.min = 1;
    quantityInput.value = item.quantity.toString();
    quantityInput.setAttribute('data-id', item.id);
    quantityCell.appendChild(quantityInput);
    row.appendChild(quantityCell);

    var totalCell = document.createElement('td');
    totalCell.textContent = (item.quantity * item.price).toFixed(2);
    row.appendChild(totalCell);

    var removeCell = document.createElement('td');
    var removeButton = document.createElement('button');
    removeButton.className = 'remove-from-cart';
    removeButton.setAttribute('data-id', item.id);
    removeButton.textContent = 'Remove';
    removeCell.appendChild(removeButton);
    row.appendChild(removeCell);

    tableBody.appendChild(row);
  });

  var tableFoot = document.querySelector('#cart tfoot td');
  tableFoot.textContent = 'Total: ' + getCartTotal().toFixed(2);
}

最后，以下代码将添加一个单击事件处理程序，当用户单击结账页面上的“Place Order”按钮时，它将提交订单并重定向到订单确认页面：

javascriptCopy Code
document.querySelector('#checkout-form').addEventListener('submit', function(event) {
  event.preventDefault();

  var formData = new FormData(event.target);

  var order = {
    name: formData.get('name'),
    email: formData.get('email'),
    address: formData.get('address'),
    cart: cart
  };

  placeOrder(order);
});

function placeOrder(order) {
  // 发送订单数据到服务器
  // ...

  // 清空购物车
  cart = [];
  renderCart();

  // 重定向到订单确认页面
  window.location.href = '/confirmation.html';
}

以上就是 AppML 案例 Products 的学习笔记。希望本文能够帮助您了解如何利用 AppML 创建一个简单而功能强大的电子商务平台。