>source

메신저 현재 eshop을 만들고 있습니다. 나는 쇼핑 카트를 저장하기 위해 쿠키를 사용합니다.

이것은 내 HTML 버튼입니다

<script type="text/javascript" src="{% static 'js/store/cart.js'  %}"></script>
<button data-product={{product.id}} data-action = "add" class="btn btn1 btn-primary update-cart">Add to cart</button>

그리고 사용자가이 버튼을 클릭하면 다음을 실행하고 싶습니다. Cart.js 쿠키를 생성하고 제품 ID를 쿠키 카트에 추가하는 코드입니다.

//here i set the cart cookie
function getCookie(name) {
    //split string and get all induvidual name=value pairs in array
    var cookieArr = document.cookie.split(';');
    //loop though array elements
    for (var i = 0; i < cookieArr.length; i++) {
        var cookiePair = cookieArr[i].split("=");
        //removing whitespace at the beginning of the cookie name and compare it with the given string
        if (name == cookiePair[0].trim()) {
            //decode cookie value and return
            return decodeURIComponent(cookiePair[1]);
        }
    }
    //return null if not found
    return null;
}
var cart = JSON.parse(getCookie('cart'));
if (cart == undefined) {
    cart = {}
    console.log("cart was created")
    document.cookie = "cart=" + JSON.stringify(cart) + ";domain=;path=/"
}
console.log("cart:", cart);
//and here i take action when the html button gets a click
var updateBtns = document.getElementsByClassName('update-cart')
for (var i = 0; i < updateBtns.length; i++) {
    updateBtns[i].addEventListener('click', function () {
            var productId = this.dataset.product
            var action = this.dataset.action
            console.log('product id:', productId, 'action:', action)
            addCookieItem(productId, action)
        
    })
}
function addCookieItem(productId, action) {
    console.log('Not logged in...')
    if (action == "add") {
        if (cart[productId] == undefined) {
            cart[productId] = { 'quantity': 1 }
        }
        else {
            cart[productId]['quantity'] += 1
        }
    }
    if (action == "remove") {
        cart[productId]['quantity'] -= 1
        if (cart[productId]['quantity'] <= 0) {
            console.log("remove item")
            delete cart[productId]
        }
    }
    console.log("Cart=", cart)
    location.reload()
    document.cookie = "cart=" + JSON.stringify(cart) + ";domain=;path=/"


내 문제는 버튼을 클릭해도 아무 조치도 취하지 않는다는 것입니다. 뭐가 잘못 되었 니?

  • 답변 # 1

    클릭 핸들러가 없습니다.

    <button onclick="addCookieItem(product.id,'add')" data-product={{product.id}} data-action = "add" class="btn btn1 btn-primary update-cart">Add to cart</button>
    
    

관련 자료

  • 이전 node.js - NodeJS (Express + Mongoose)의 쿼리 매개 변수에 타임 스탬프를 전달하는 방법
  • 다음 r - ggplot을 사용하여 x 축을 따라 여러 선을 플로팅합니다 그룹별로 색상이 지정되지만 분리되어 있습니다