Question

我正在尝试使用python flask和flask-sqlalchemy创建AddtoCart和Checkout功能。我认为自己通常是Web开发的初学者。如何拿取产品项并使用按钮将其作为购物车项添加到购物车？我还想计算购物车的总价。

到目前为止，我已经创建了两个模型（ProductItem，CartItem）。我成功创建了2个ProductItems（虚拟数据），并能够使用带有jinja2模板的for循环在视图中显示它们。我试图创建一个功能来选择产品并将其添加到购物车，但我不知道如何使“添加到购物车”按钮功能起作用。

提前谢谢！

class ProductItem(db.Model):
     __tablename__='products'
    id = db.Column(db.Integer,primary_key=True)
    name = db.Column(db.String(64),unique=True)
    descr = db.Column(db.Text,unique=True,nullable=True)
    price = db.Column(db.Float,nullable=False)
    img = db.Column(db.String(64),unique=True)
    cartitems = db.relationship('CartItem', backref='Product')
    def __repr__(self):
        return '<ProductName %r>' % self.name

class CartItem(db.Model):
    __tablename__='cartitems'
    id = db.Column(db.Integer,primary_key=True)
    # adding the foreign key
    product_id = db.Column(db.Integer, db.ForeignKey('products.id'))

@app.route('/')
def index():
    products = Product.query.all()
    return render_template('home.html',products=products)
def getproductitem():
    itemid = product.id
    productname = product.name
    productname = CartItem(product_id=itemid)
    db.session.add(product)
    db.session.commit()

----------------html jinja----------
{% for product in products %}
    <div class="product-item">
        <h3>{{ product.name }}</h3> 
        <img src="static/img/products/{{ product.img }}" alt="" width="200px" height="200px">
        <p> {{ product.price }}</p>
        <button onclick="getproductitem()" type="button" class="btn btn-primary">Add to Cart</button>
     </div>           
{% endfor %}

Answer 1

修改

意识到我没有回答有关按钮的问题。似乎您正在尝试从html调用python函数（除非前端模板中也有javascript函数）。

您的python位于服务器上，而html / javascript将位于客户端浏览器上-您需要通过从页面向服务器发送HTTP请求来使它们进行通信，而不能直接调用函数。

服务器：

@app.route('/cart/<int:product_id>', methods=['POST'])
def add_to_cart(product_id):

    product = Product.query.filter(Product.id == product_id)
    cart_item = CartItem(product=product)
    db.session.add(cart_item)
    db.session.commit()

    return render_tempate('home.html', product=products)

添加到您的html中：

<script>
function addToCart(productId) {
    fetch('[your.local.host.]/cart/productId', 
        {method: 'POST'}
    )
}
</script>

更改按钮：

<button onclick="addToCart({{product.id}})" type="button" class="btn btn-primary">Add to Cart</button>

或类似的东西。您的页面需要通过HTTP请求与服务器对话。

有关购物车的原始答案

除非您真的希望用户在跨设备登录时能够访问同一购物车，否则您可能不必将购物车保留在数据库中，或者您预计他们将需要将其长期保存在其中。

>

持久化将在用户请求中添加不必要的时间（在您添加/检索它们时），并且CartItem表将继续变得越来越大，并且大多数行将变得多余（不太可能人们希望在查看过他们的旧购物车后查看它们）购买的产品）。一种解决方案是将购物车也链接到User表，这样每位用户只有一个购物车（前提是您的用户在购物时已登录），或确保在购物车购买后或购买后将其删除。一定时间段。

但是，如果您不需要长期保存，请考虑将产品ID 存储在任一

中

烧瓶session。本质上，这是服务器上与用户链接的轻量级内存存储，可以在请求处理期间进行访问。请参阅有关会话here的教程。
在cookie中。 Cookie存储在浏览器（而非服务器）中，通常使用密钥进行签名。这不能保证它们的安全性-这只是意味着您可以确定在服务器上检索到其内容时，没有人对其内容进行过修改。请参阅教程here。

This article讨论了这两种方法的一些缺点/优点。

将项目添加到购物车Python烧瓶

1 个答案: