Я сделал функцию "добавить в корзину" для своего сайта, но js не работает

Я сделал функцию добавления в корзину для своего сайта. Итак, в product-detail.html:

        <div class="button">
          <input type="hidden" value="{{p.id}}" class="product-id" name="">
          <input type="hidden" value="{{p.title}}" class="product-title" name="">
          <a href="#" class="btn" id="add-to-cart-btn">Add to cart</a>
          <a href="#" class="btn">Buy Now</a>
        </div>

и я также создал js-файл для этого. Итак, в function.js:

$("#add-to-cart-btn").on("click",function(){
    let quantity=$("#product-quantity").val()
    let product_title=$(".product-title").val()
    let product_id=$(".product-id").val()
    let product_price = $("#current-product-price").text()
    let this_val=$(this)


    console.log("Quantity:", quantity);
    console.log("Id:", product_id);
    console.log("Title:", product_title);
    console.log("Price:", product_price);
    console.log("Current Element:", this_val);

    $.ajax({
        url: '/add-to-cart',
        data: {
            'id': product_id,
            'qty': quantity,
            'title': product_title,
            'price': product_price,
        },
        dataType: 'json',
        beforeSend: function(){
            console.log("Adding products to cart");
        },
        success: function(res){
            this_val.html("Item added to cart")
            console.log("Added products to cart");
        }
    })
})

В этом коде что-то не так с этой частью

dataType: 'json',
        beforeSend: function(){
            console.log("Adding products to cart");
        },
        success: function(res){
            this_val.html("Item added to cart")
            console.log("Added products to cart");
        }

Другая вещь работает отлично, потому что в консоли не отображается Adding products to cart и Item added to cart

Пожалуйста, помогите мне с этой проблемой... Ошибка: Console error here

Я не знаю, где проблема, но эта вещь работает в Duckduckgo браузере, но не в google chrome мой хром обновлен

поместите функцию-обработчик события внутрь $(document).ready(function(){...}). теперь она будет работать также добавьте preventDefault() для ограничения обновления страницы. попробуйте этот код, работает ли он на вашем устройстве? 

$(document).ready(function() {

$("#add-to-cart-btn").on("click",function(){
    let quantity=$("#product-quantity").val()
    let product_title=$(".product-title").val()
    let product_id=$(".product-id").val()
    let product_price = $("#current-product-price").text()
    let this_val=$(this)


    console.log("Quantity:", quantity);
    console.log("Id:", product_id);
    console.log("Title:", product_title);
    console.log("Price:", product_price);
    console.log("Current Element:", this_val);

    $.ajax({
        url: '/add-to-cart',
        data: {
            'id': product_id,
            'qty': quantity,
            'title': product_title,
            'price': product_price,
        },
        dataType: 'json',
        beforeSend: function(){
            console.log("Adding products to cart");
        },
        success: function(res){
            this_val.html("Item added to cart")
            console.log("Added products to cart");
        }
e.preventDefault()
    })
})
}

}

Это из комментариев. Спасибо 👍 @Milind Anantwar.

У вас ошибка в строке 43 функции js. $.ajex должно быть $.ajax.

Измените код.

Сохраните файл.

Полностью перезапустите сервер, если это необходимо.

При необходимости нажмите ctrl+F в браузере.

Часть 1)

Мое предположение заключается в том, что вы используете ограниченную версию jquery. Которая не включает в себя ajax. Зайдите на сайт jquery. Скачайте полную версию. Замените свой jquery.

Часть 2)

success: function(res){
            this_val.html("Item added to cart")
            console.log("Added products to cart");
        }

Всегда заканчивайте код javascript символом ;. Строка this_val.html("Item added to cart") не заканчивается на ;.

Поэтому измените ее следующим образом. this_val.html("Item added to cart");

Вернуться на верх