Question

对于在线购物网站，我有很多产品，其中每个产品都包含一个添加到购物车按钮，我想知道点击了哪个按钮以了解哪个产品与该按钮相关。我是 Django 和前端的新手，所以我认为它很常见，但我不知道它是做什么的，应该是 javascript 吗？

<div class="row">
    {% for product in products %}
        <div class="col-lg-4">
        <img alt="" class="thumbnail" src="{{ product.images.all.0.image.url }}">
            <div class="box-element product">
                <h5><strong>{{ product.name }}</strong></h5>
                <hr>
                <button class="btn btn-outline-secondary add-btn"> Add to cart</button>
                <a class="btn btn-outline-success" href="{% url 'detail' %}"> View</a>
                <h4 style=" float: right"><strong>{{ product.price }}</strong></h4>
            </div>
        </div>
    {% endfor %}
</div>

Answer 1

每个模型（在这种情况下为产品）都有一个唯一的 id 字段与之相关，如果您没有明确提到模型上的主键，Django 会在模型迁移时自动创建该字段。在这种情况下，您将需要 javascript 和事件处理程序来侦听“添加到购物车”按钮单击事件。以下是您可以实现此目的的一些步骤，我知道这些是一些繁琐的事情，但请尝试一下。

1.创建一个 javascript car.js：这将添加事件监听器到每个添加到购物车按钮的点击事件。

var updateBtns = document.getElementsByClassName('update-cart') //get all add to cart button with class update-cart

for (i = 0; i < updateBtns.length; i++) { //iterate all add button to add eventlistener
    updateBtns[i].addEventListener('click', function(){ //add eventlistener click for each button and set a function which will be executed on click
        var productId = this.dataset.product //get product id from attribute product set in html
        var action = this.dataset.action    //get action based on which you can handle remove or add to cart conditions
        console.log('productId:', productId, 'Action:', action)
        updateUserOrder(productId, action) // this function will be called and will pass product id and action in body to your view for further processing.
    })
}


function updateUserOrder(productId, action){ // this function will actually be called when someone click on add to cart button and view will be invoked
        var url = '/update_item/' // setting the url to be called

        fetch(url, {      //here we are using post request to post id of product and other details to our view
            method:'POST',
            headers:{
                'Content-Type':'application/json',
                'X-CSRFToken':csrftoken,
            }, 
            body:JSON.stringify({'productId':productId, 'action':action})
        })
        .then((response) => {
           return response.json();
        })
        .then((data) => {
            location.reload()
        });
}

2.在您的 html 中包含 javascript：

<script type="text/javascript" src="{% static 'js/cart.js' %}"></script>

3. 将 Eventhandler 添加到您的 htm 中的 add_to_cart 按钮，因此无论何时单击它，您都必须执行添加功能。为此，您需要做的第一件事是添加一个类“update-cart”来添加按钮，我们将通过它来识别页面上的添加按钮那么您需要通过设置数据来获得一些自定义属性 - 在这种情况下，它将是产品的值将是特定产品的 id，如 data-product="{{product.id}}" 并添加一个 action 属性让我们知道这个按钮何时单击后，我们需要将产品添加到购物车，例如 data-action="add"。所以现在html中的按钮代码看起来像这样：

<button data-product="{{product.id}}" data-action="add" class="update-cart">Add to Cart</button>

4.创建一个相应的视图名称'update_item'，每当点击添加按钮时，它就会从javascript调用并将项目添加到购物车

def updateItem(request):
    data = json.loads(request.body)
    productId = data['productId']
    action = data['action']
    print('Action:', action)
    print('Product:', productId)
    product = Product.objects.get(id=productId) # get product with selected id from database 
    #rest here add your logic for adding specific product to cart

5.创建一个路由到名为 update_item 的 updateItem 视图：

path('update_item/', views.updateItem, name="update_item"),

如果我有很多按钮，Django 如何知道点击了哪个按钮？

1 个答案: