时间戳

首页 > 解决方案 > 使用 Ajax 和 Javascript 将数量添加到购物车中已有商品的小计的数量向上和向下按钮在点击时不起作用：)

javascript - 使用 Ajax 和 Javascript 将数量添加到购物车中已有商品的小计的数量向上和向下按钮在点击时不起作用：)

问题描述

简述问题：

点击图片数量按钮上下

数量按钮用于简单的数量增加，在添加复杂的 ajax 部分以增加购物车中已有商品的小计价值之前，现在这是按钮停止工作的地方，也没有解析数据以开始增加特定产品的数量，然后，这也会添加到购物车中产品的已计算小计价值中。

我尝试搜索其他一些解决方案，但我还没有足够的经验来尝试将它们混合在一起。但我确实检查了 Firefox 和 Chrome 中的开发工具，我目前没有显示任何错误。我尝试了一些修复并消除了所有可能的错误，但我无法找出问题所在。

我猜可能存在语法编写或嵌套顺序的问题，我想或者我完全错了。

我看了很多年的堆栈溢出，但我从未尝试过更复杂的项目，但现在我决定我想进入编程领域，所以我也想更多地参与。

希望有人可以帮助解决这种奇怪的情况。<3

这是工作版本，如果有人可以正确连接这里的逻辑，我已经留下了这个让声明和准备好的涨价声明。我在这里删除了 AJAX => 按钮现在上下工作，但显然不会影响购物车小计价格的变化。

  /* NOTE PRODUCT QTY UP AND DOWN */
  let $qty_up = $(".qty .qty-up");
  let $qty_down = $(".qty .qty-down");
  let $deal_price = ("#deal-price");
  //let $input = $(".qty .qty_input");

  /* NOTE CLICK ON QTY UP BUTTON */
  $qty_up.click(function (e) {

    let $input = $(`.qty_input[data-id='${$(this).data("id")}']`);
    let $price = $(`.product_price[data-id='${$(this).data("id")}']`);
    

          if ($input.val() >= 1 && $input.val() <= 9) {
            $input.val(function (i, oldval) {
              return ++oldval;
            });
          
            // NOTE INCREASE THE PRICE OF THE PRODUCT
            $price.text(parseInt(item_price * $input.val()).toFixed(2));

            // NOTE SET SUBTOTAL PRICE
            let subtotal = parseInt($deal_price.text()) + parseInt(item_price);
            $deal_price.text(subtotal.toFixed(2));
          
          }  
  });

  /* NOTE CLICK ON QTY DOWN BUTTON */
  $qty_down.click(function (e) {

    let $input = $(`.qty_input[data-id='${$(this).data("id")}']`);
    let $price = $(`.product_price[data-id='${$(this).data("id")}']`);

          if ($input.val() > 1 && $input.val() <= 10) {
            $input.val(function (i, oldval) {
              return --oldval;
            });
          
            // NOTE INCREASE THE PRICE OF THE PRODUCT
            $price.text(parseInt(item_price * $input.val()).toFixed(2));

            // NOTE SET SUBTOTAL PRICE
            let subtotal = parseInt($deal_price.text()) - parseInt(item_price);
            $deal_price.text(subtotal.toFixed(2));
          
          }

  });

完整的 index.js 脚本，因为它与 Owl Carousel 插件直接相关。所以这里是：这不是使用 AJAX（JQuery）单击时向上和向下按钮的工作版本！

// NOTE OWL CAROUSEL DOCUMENT READY

$(document).ready(function () {

  /* BANNER OWL 2 CAROUSEL */
  $("#banner-area .owl-carousel").owlCarousel({
    dots: true,
    items: 1,
  });

  /* NOTE TOP SALE OWL 2 CAROUSEL */
  $("#top-sale .owl-carousel").owlCarousel({
    loop: true,
    nav: true,
    dots: false,
    responsive: {
      0: {
        items: 1,
      },
      600: {
        items: 3,
      },
      1000: {
        items: 5,
      },
    },
  });

  /* NOTE ISOTOPE FILTER */
  var $grid = $(".grid").isotope({
    itemSelector: ".grid-item",
    layoutMode: "fitRows",
  });

  /* NOTE FILTER ITEMS ON BUTTON CLICK */
  $(".button-group").on("click", "button", function () {
    var filterValue = $(this).attr("data-filter");
    $grid.isotope({ filter: filterValue });
  });

  /* NOTE NEW PHONES OWL CAROUSEL */
  $("#new-phones .owl-carousel").owlCarousel({
    loop: true,
    nav: false,
    dots: true,
    responsive: {
      0: {
        items: 1,
      },
      600: {
        items: 3,
      },
      1000: {
        items: 5,
      },
    },
  });

  /* NOTE LATEST BLOGS ON UPCOMING NEW TECH OWL CAROUSEL */
  $("#blogs .owl-carousel").owlCarousel({
    loop: true,
    nav: false,
    dots: true,
    responsive: {
      0: {
        items: 1,
      },
      600: {
        items: 3,
      },
    },
  });

  /* NOTE PRODUCT QTY UP AND DOWN */
  let $qty_up = $(".qty .qty-up");
  let $qty_down = $(".qty .qty-down");
  let $deal_price = ("#deal-price");
  //let $input = $(".qty .qty_input");

  /* NOTE CLICK ON QTY UP BUTTON */
  $qty_up.click(function (e) {

    let $input = $(`.qty_input[data-id='${$(this).data("id")}']`);
    let $price = $(`.product_price[data-id='${$(this).data("id")}']`);

    // NOTE CHANGE PRODUCT PRICE USING AJAX CALL
    $.ajax({
      url: "./Template/ajax.php", type: 'post', data:
        { itemid: $(this).data("id") }, dataType: 'json', success: function (result) {
          let obj = JSON.parse(result);
          let item_price = obj[0]['item_price'];

          if ($input.val() >= 1 && $input.val() <= 9) {
            $input.val(function (i, oldval) {
              return ++oldval;
            });
          
            // NOTE INCREASE THE PRICE OF THE PRODUCT
            $price.text(parseInt(item_price * $input.val()).toFixed(2));

            // NOTE SET SUBTOTAL PRICE
            let subtotal = parseInt($deal_price.text()) + parseInt(item_price);
            $deal_price.text(subtotal.toFixed(2));
          
          }

        }
    }); // NOTE CLOSING AJAX REQUEST
  });

  /* NOTE CLICK ON QTY DOWN BUTTON */
  $qty_down.click(function (e) {

    let $input = $(`.qty_input[data-id='${$(this).data("id")}']`);
    let $price = $(`.product_price[data-id='${$(this).data("id")}']`);

    // NOTE CHANGE PRODUCT PRICE USING AJAX CALL
    $.ajax({
      url: "./Template/ajax.php", type: 'post', data:
        { itemid: $(this).data("id") }, dataType: 'json', success: function (result) {
          let obj = JSON.parse(result);
          let item_price = obj[0]['item_price'];

          if ($input.val() > 1 && $input.val() <= 10) {
            $input.val(function (i, oldval) {
              return --oldval;
            });
          
            // NOTE INCREASE THE PRICE OF THE PRODUCT
            $price.text(parseInt(item_price * $input.val()).toFixed(2));

            // NOTE SET SUBTOTAL PRICE
            let subtotal = parseInt($deal_price.text()) - parseInt(item_price);
            $deal_price.text(subtotal.toFixed(2));
          
          }

        }
    }); // NOTE CLOSING AJAX REQUEST
  });


});

_cart-template.php 扩展 PHP 文件到主 cart.php

<!-- NOTE SHOPPING_CART SECTION -->
<?php

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['delete-cart-submit'])) {
        $deletedRecord = $Cart->deleteCart($_POST['item_id']);
    }
}

?>

<section id="cart" class="py-3 mb-5">
    <div class="container-fluid w-75">
        <h5 class="font-roboto font-size-20">Košarica</h5>

        <!-- NOTE SHOPPING CART ITEMS -->
        <div class="row">
            <div class="col-sm-9">
                <?php
                foreach ($product->getData('cart') as $item) :
                    $cart = $product->getProduct($item['item_id']);
                    $subTotal[] = array_map(function ($item) {
                ?>
                        <!-- NOTE CART ITEM -->
                        <div class="row border-top py-3 mt-3">
                            <div class="col-sm-2">
                                <img src="<?php echo $item['item_image'] ?? "./assets/products/1.png" ?>" style="height: 120px;" alt="cart1" class="img-fluid">
                            </div>
                            <div class="col-sm-8">
                                <h5 class="font-roboto font-size-20"><?php echo $item['item_name'] ?? "Unknown"; ?></h5>
                                <small>by <?php echo $item['item_brand'] ?? "Brand"; ?></small>

                                <!-- NOTE PRODUCT RATING -->
                                <div class="d-flex">
                                    <div class="rating text-warning font-size-12">
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="far fa-star"></i></span>
                                    </div>
                                    <a href="#" class="px-2 font-rale font-size-14">20,933 ratings</a>
                                </div>
                                <!-- NOTE PRODUCT RATING -->

                                <!-- NOTE PRODUCT QTY -->
                                <div class="qty d-flex pt-2">
                                    <div class="d-flex font-rale w-25">
                                        <button data-id="<?php echo $item['item_id'] ?? '0'; ?>" class="qty-up border bg-light"><i class="fas fa-angle-up"></i>
                                        </button>
                                        <input type="text" data-id="<?php echo $item['item_id'] ?? '0'; ?>" class="qty_input border px-2 w-50 bg-light text-center" disabled value="1" placeholder="1">
                                        <button data-id="<?php echo $item['item_id'] ?? '0'; ?>" class="qty-down border bg-light"><i class="fas fa-angle-down"></i>
                                        </button>
                                    </div>

                                    <form method="post">
                                        <input type="hidden" value="<?php echo $item['item_id'] ?? 0; ?>" name="item_id">
                                        <button type="submit" name="delete-cart-submit" class="btn font-roboto text-danger px-3 border-right">Izbriši</button>
                                    </form>

                                    <button type="submit" class="btn font-roboto text-danger px-3 border-right">Shrani za poznejši nakup</button>
                                </div>
                                <!-- NOTE PRODUCT QTY -->

                            </div>

                            <!-- NOTE PRODUCT PRICE SPAN -->
                            <div class="col-sm-2 text-right">
                                <div class="font-size-20 text-danger font-roboto">
                                    $<span class="product_price" data-id="<?php echo $item['item_id'] ?? '0'; ?>"><?php echo $item['item_price'] ?? 0; ?></span>
                                </div>
                            </div>
                            <!-- NOTE PRODUCT PRICE SPAN -->

                        </div>
                        <!-- NOTE CART ITEM -->
                <?php
                        return $item['item_price'];
                    }, $cart); // NOTE CLOSING ARRAY_MAP FUNCTION
                endforeach;

                ?>
            </div>

            <!-- NOTE SUBTOTAL SECTION -->
            <div class="col-sm-3">
                <div class="sub-total border text-center mt-2">
                    <h6 class="font-size-12 font-rale text-success py-3"><i class="fas fa-check"></i>Vaše naročilo ustreza brezplačni dostavi</h6>
                    <div class="border-top py-4">
                        <h5 class="font-roboto font-size-20">Skupno (<?php echo isset($subTotal) ? count($subTotal) : 0; ?> izdelek/a/i):&nbsp;<span class="text-danger">$<span class="text-danger" id="deal-price"><?php echo isset($subTotal) ? $Cart->getSum($subTotal) : 0; ?></span></span></h5>
                        <button type="submit" class="btn btn-warning mt-3">Nadaljujte z nakupom</button>
                    </div>
                </div>
            </div>
            <!-- NOTE SUBTOTAL SECTION -->

        </div>
        <!-- NOTE SHOPPING CART ITEMS -->
    </div>
</section>
<!-- NOTE SHOPPING_CART SECTION -->

Ajax.php 对 JSON 进行编码，然后在 Index.js 中为 QTY UP 和 DOWN 按钮调用它！

<?php

// NOTE REQUIRE MYSQLi CONNECTION
require('../database/DBController.php');

// NOTE REQUIRE PRODUCT CLASS
require('../database/Product.php');

// NOTE DBController OBJECT
$db = new DBController();

// NOTE PRODUCT OBJECT
$product = new Product($db);


if(isset($_POST['item_id'])){
    $result = $product->getProduct($_POST['item_id']);
    echo json_encode($result);
}

?>

Cart.php 数据库文件，我在其中存储、插入或删除项目

<?php
ob_start();
// NOTE PHP CART CLASS
class Cart
{
    public $db = null;

    public function __construct(DBController $db)
    {
        if(!isset($db->con)) return null;
        $this->db = $db;
    }

    // NOTE INSERT INTO THE CART TABLE
    public function insertIntoCart($parameter = null, $table = "cart"){
        if ($this->db->con != null){
            if($parameter != null){
                // NOTE "INSERT INTO CART TABLE (user_id) values(0)"
                // GET TABLE COLUMNS
                $columns = implode(',', array_keys($parameter));
                
                $values = implode(',', array_values($parameter));
                

                // NOTE CREATE SQL QUERY
                $query_string = sprintf("INSERT INTO %s(%s) VALUES(%s)", $table, $columns, $values);
                
                // NOTE EXECUTE QUERY
                $result = $this->db->con->query($query_string);
                return $result;
            }
        }
    }

    // NOTE TO GET USER_ID AND ITEM_ID AND INSERT INTO CART TABLE
    public function addToCart($userid, $itemid){
        if(isset($userid) && isset($itemid)){
           $parameter = array(
              "user_id" => $userid,
              "item_id" => $itemid
           );

           // NOTE INSERT DATA INTO CART
          $result = $this->insertIntoCart($parameter);
          if($result){
            header("Location:" .$_SERVER['PHP_SELF']);
          } 
        }
    }

    // NOTE DELETE CART ITEM USING CART ITEM ID
    public function deleteCart($item_id = null, $table = 'cart'){
        if($item_id != null){
        $result = $this->db->con->query("DELETE FROM {$table} WHERE item_id={$item_id}");
        if($result){
            header("Location:" .$_SERVER['PHP_SELF']);
        }
        return $result;
        }
    }

    // NOTE CALCULATING SUBTOTAL VALUE OF THE ITEMS IN THE CART (SUB TOTAL) !
    public function getSum($array){
        if(isset($array)){
            $sum = 0;
            foreach ($array as $item) {
                $sum += floatval($item[0]);
            }
            return sprintf('%.2f', $sum);
        }
    }

    // NOTE GET ITEM_ID OF SHOPPING CART LIST
    public function getCartId($cartArray = null, $key = "item_id"){
        if($cartArray != null){
            $cart_id = array_map(function($value) use($key){
               return $value[$key]; 
            }, $cartArray);
            return $cart_id;
        }
    }
}
?>

cart.php 主购物车 PHP 文件

<?php
ob_start();
// NOTE INCLUDE HEADER.PHP
include('header.php');
?>

<?php

// NOTE INCLUDE _CART-TEMPLATE.PHP
include('Template/_cart-template.php');
// NOTE INCLUDE _CART-TEMPLATE.PHP

// NOTE INCLUDE _NEW-PHONES.PHP
include('Template/_new-phones.php');
// NOTE INCLUDE _NEW-PHONES.PHP

?>

<?php
// NOTE INCLUDE FOOTER.PHP
include('footer.php');
?>

标签： javascriptphpjqueryajaxbootstrap-4

解决方案

推荐阅读