Express - 是否可以根据渲染视图中按钮的值影响对象？

Question

我是一个尝试将电子商务应用程序作为投资组合项目的初学者。用户将商品添加到购物车后，他可以点击“购物车”并前往/cart 路线，在该路线中他可以看到他购买的商品的名称、数量和小计。然后，在下方，有一个显示购买总金额的计数器。

除此之外，我想介绍一对修改交付类型的单选按钮。我希望它像这样工作： 当 button1 处于活动状态时（例如邮寄，额外 10 美元），总额增加 10 美元， 当 button2 处于活动状态时，总金额会增加 20 美元。

最后，用户继续前往/checkout，在那里他可以看到他购买的最终账单并提供凭据（如地址、姓名、姓氏等）。

我不知道该怎么做。我附上了我所想的照片以及/cart 路由和渲染的 EJS 视图的代码。

这是视图的代码：

<% layout('layouts/boilerplate') %>
<h1 class="text-center mb-5">Shopping Cart</h1>
<% if(!session.cart){%>
    <div class="row">
        <div class="col-10 offset-1 text-center">
            <p class="bolded">Your shopping cart is currently empty.</p>
            <a href="/products" class="btn btn-primary">Back to the shop</a>
        </div>
    </div>
    <% } else { %>
        <div class="row">
            <div class="col-10 offset-1 text-start">
                <div class="row">
                    <div class="col-3 text-center">TITLE</div>
                    <div class="col-2">PRICE</div>
                    <div class="col-2">AMOUNT</div>
                    <div class="col-2">SUBTOTAL</div>
                </div>
                <% for (let product of products){ %>
                    <div class="row text-start border p-2">
                        <div class="col-3 text-center">
                            <%= product.item.name %>
                        </div>
                        <div class="col-2 me-4">$<%= product.item.price %>
                        </div>
                        <div class="col-2">
                            <%= product.qty %>
                        </div>
                        <div class="col-2">
                            <% const number=product.item.price * product.qty %>
                                <%= number.toFixed(2) %>
                        </div>
                        <div class="col-1">
                            <a href="/reduce/<%= product.item._id %>"
                                class="btn btn-sm border btn-secondary bg-gradient">Remove</a>
                        </div>
                    </div>
                    <% } %>

                        <form action="" class="my-3">
                            <div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="flexRadioDefault"
                                        id="radio1">
                                    <label class="form-check-label" for="flexRadioDefault1">
                                        Delivery by post (up to 3 workdays) - $10
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="flexRadioDefault" id="radio2"
                                        checked>
                                    <label class="form-check-label" for="flexRadioDefault2">
                                        Instant delivery (24h) - $20
                                    </label>
                                </div>
                        </form>

            </div>
            <div class="text-center">
                <p class="text-center h1 mt-5">
                    <% if (totalPrice.toFixed(2)==="-0.00" ){ %>
                        Total: $0
                        <% } else { %>
                            Total: $<%= totalPrice.toFixed(2) %>
                                <% } %>
                </p>
            </div>
            <div class="text-center mt-3">
                <a href="/products" class="btn btn-primary">Back to the shop</a>
                <a href="/checkout" class="btn btn-success">Proceed to checkout</a>
            </div>
        </div>
        </div>
        <% } %>

这里是 /cart 路线的代码：

router.get('/cart', (req, res) => {
if (!req.session.cart) {
    return res.render('cart', { products: null });
};
const cart = new Cart(req.session.cart);
res.render('cart', { products: cart.generateArray(), totalPrice: cart.totalPrice });});

此功能适用于从产品数量中删除一项的“删除”按钮。

router.get('/reduce/:id', catchAsync(async (req, res) => {
const { id } = req.params;
if (!req.session.cart) {
    req.flash('error', 'Cannot delete any more items!')
    return res.redirect('/products');
};
const cart = new Cart(req.session.cart);
cart.reduceByOne(id);
req.session.cart = cart;
if (!req.session.cart.totalQty) {
    req.session.cart = false;
}
res.redirect('/cart');
}));

Answer 1

尝试将名称属性更改为“extraCost10”和“extraCost20”之类的内容。还可以通过 router.post('/cart') 访问数据槽。然后在 post 路由中做一个 if 语句来决定是否添加 10 if(extraCost10){ cost += 10} 和另一个相同。如果未选择单选按钮，则该值应为 false。如果它被选中，它会在 req.body 中显示为 true。