現在的網上購物越來越便捷，一些開源的前端框架和庫使得設計購物車也變得更加容易。其中最流行的前端庫之一是jQuery，它提供了一整套方便的購物車頁面代碼。

<div class="cart">
<table>
<thead>
<tr>
<th>商品</th>
<th>數量</th>
<th>單價</th>
<th>小計</th>
</tr>
</thead>
<tbody id="cart-items"></tbody>
<tfoot>
<tr>
<td colspan="4">合計：<span id="total-price">0</span>元</td>
</tr>
</tfoot>
</table>
<button id="clear-cart">清空購物車</button>
</div>

上面的代碼創建了一個購物車頁面，其中使用了一個div元素來包含整個購物車，以及一個表格來展示購物車中的商品列表。以上述代碼為基礎，我們可以使用jQuery來實現購物車的功能。

$(document).ready(function() {
// 添加商品到購物車
$('.add-to-cart').click(function() {
var item = $(this).data('item');
var price = $(this).data('price');
var $existingItem = $('#cart-items tr[data-item="' + item + '"]');
if ($existingItem.length) {
var qty = $existingItem.find('.qty').val() * 1;
$existingItem.find('.qty').val(qty + 1);
$existingItem.find('.subtotal').text((qty + 1) * price);
} else {
$('#cart-items').append('<tr data-item="' + item + '"><td>' + item + '</td><td><input type="number" class="qty" value="1"></td><td>' + price + '</td><td class="subtotal">' + price + '</td></tr>');
}
calculateTotal();
});
// 修改數量或刪除商品
$('#cart-items').on('change', '.qty', calculateTotal);
$('#cart-items').on('click', 'button.delete-item', function() {
$(this).closest('tr').remove();
calculateTotal();
});
// 清空購物車
$('#clear-cart').click(function() {
$('#cart-items').empty();
calculateTotal();
});
// 計算總價
function calculateTotal() {
var total = 0;
$('#cart-items tr').each(function() {
var qty = $(this).find('.qty').val() * 1;
var price = $(this).find('.subtotal').text() * 1;
$(this).find('.subtotal').text(price.toFixed(2));
total += qty * price;
});
$('#total-price').text(total.toFixed(2));
}
});

以上代碼實現了購物車的基本功能：可以添加商品到購物車，可以修改數量或刪除商品，可以清空購物車，最后還會顯示購物車中所有商品的總價。

綜上所述，使用jQuery實現購物車頁面代碼非常簡單，只需要熟悉jQuery的基本用法即可。當然，這只是最基本的代碼，可以根據實際需求進行更多的定制和改進。