如何在 Codeigniter 中让我的展示购物车项目计数器成为 ajax？

Question

抱歉我是新手，如果有人能指出正确的方向来解决我的问题，我将不胜感激。

我已经使用 codeigniter 3 已弃用的库创建了一个购物车系统，并且 AJAX 我能够执行通常的将商品添加到购物车、从购物车中删除商品、显示购物车中的商品数量，仅在 [=渲染数据的 39=]table.

我的问题出在 header 我有一个购物车计数器，它显示一个数字来显示购物车中的商品数量。正如我所说，它目前没有使用 AJAX，而是在刷新或重定向后显示购物车中的商品数量。我希望它 AJAX 就像它在数据 table 中的对应物一样，而不是仅在刷新后才显示正确的数字。

附件是我认为相关的代码部分

控制器

defined('BASEPATH') OR exit('No direct script access allowed');

class Products extends CI_Controller {

    function __construct() {
        parent::__construct();
        $this->load->model('products_model');
        $this->load->model('products_category_model');
        $this->load->model('products_subcategory_model');
        $this->load->model('products_price_model');
        $this->load->library('pagination');
        $this->load->database();
        $this->load->helper('url');
  }

    public function lists($slug="") {

        // $locale = $this->session->userdata('site_lang');

        $config = array();
        $config['base_url'] = base_url() . 'products';
        $config['total_rows'] = $this->products_model->get_count();
        $config['per_page'] = 3;
        $config['uri_segment'] = 2;
        $config['num_links'] = 2;
        $config['first_link'] = '<span style="letter-spacing:1px; margin-right: 20px;"> First </span>';
        $config['last_link'] = '<span style="letter-spacing:1px;"> Last </span>';
        $config['use_page_numbers'] = FALSE;
        $config['next_link'] = '<i class="fas fa-long-arrow-alt-right"></i>';
        $config['prev_link'] = '<i class="fas fa-long-arrow-alt-left"></i>';

        $this->pagination->initialize($config);

        $page = ($this->uri->segment(2))? $this->uri->segment(2) : 0;

        $data['products_count'] = count($this->products_model->getList());
        $data['links'] = $this->pagination->create_links();
        $data['records'] = $this->products_model->getActiveProductPriceList($config['per_page'], $page);
        $data['category'] = $this->products_category_model->getActiveList();
        $data['subcategory'] = $this->products_subcategory_model->getActiveList();

        $this->load->view('include/head',$data);
        $this->load->view('products', $data);
        // custom JS needed for cart functionality
        // $this->load->view('include/footer');

    }

    function add_to_cart() {

        if($this->session->userdata('site_lang') == 'en'){
            $name = $this->input->post('title_en');
        } else {
            $name = $this->input->post('title_zh');
        }

        $data = array(
            'id' => $this->input->post('id'),
            'qty' => 1,
            'price' => $this->input->post('discount_price'),
            'name' => $name,
            'thumbnail' => $this->input->post('thumbnail'),
        );
        $this->cart->insert($data);
        echo $this->show_cart();
    }

    function show_cart(){
        $output = '';
        $no = 0;
        foreach ($this->cart->contents() as $items) {
            $no++;
            $output .='
                <tr>
                    <td>'.$items['name'].'</td>
                    <td><img src="'.$items['thumbnail'].'"></td>
                    <td>'.number_format($items['price']).'</td>
                    <td>'.$items['qty'].'</td>
                    <td>'.number_format($items['subtotal']).'</td>
                    <td><button type="button" id="'.$items['rowid'].'" class="remove_cart btn btn-danger btn-sm">Cancel</button></td>
                </tr>
            ';
        }
            $output .= '
                <tr>
                    <th colspan="3">Total</th>
                    <th colspan="1">'.number_format($this->cart->total_items()).'</th>
                    <th colspan="2">'.'RM '.number_format($this->cart->total()).'</th>
                </tr>
            ';
        return $output;
    }

    function load_cart(){
        echo $this->show_cart();
    }
}

查看

<div class="col-md-4">
  <h4>Shopping Cart</h4>
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Items</th>
        <th>Thumbnail</th>
        <th>Price</th>
        <th>Qty</th>
        <th>Total</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody id="product_detail_cart"></tbody>
  </table>
</div>


<script type="text/javascript">
  $(document).ready(function(){
    $('.add_product_to_cart').click(function(){
      var id              = $(this).data("id");
      var thumbnail       = $(this).data("thumbnail")
      var title_en        = $(this).data("title_en");
      var title_zh        = $(this).data("title_zh");
      var discount_price  = $(this).data("discount_price");
      var quantity        = 1;
      $.ajax({
        url : "<?php echo base_url('products/add_to_cart');?>",
        method : "POST",
        data : {id: id, thumbnail: thumbnail, title_en: title_en, title_zh: title_zh,discount_price: discount_price, quantity: quantity},
        success: function(data){
          $('#product_detail_cart').html(data);
        }
      });
    });
    $('#product_detail_cart').load("<?php echo base_url('products/load_cart');?>");
    $(document).on('click','.remove_cart',function(){
      var row_id=$(this).attr("id");
      $.ajax({
        url : "<?php echo base_url('products/delete_cart');?>",
        method : "POST",
        data : {row_id : row_id},
        success :function(data){
          $('#product_detail_cart').html(data);
        }
      });
    });
  });
</script>

header

我怎么称呼它

<i class="fas fa-shopping-cart"></i>
<span class="count" id="product_detail_cart_count">
  <?php
    if (!empty($this->cart->contents())) {
      echo number_format($this->cart->total_items());
    } else {
      print 0;
    }
  ?>
</span>

再次感谢您

Answer 1

我发现缺少了什么，我需要做的是将 id/div 分配给我需要刷新的视图页面的特定部分，然后使用 jquery[= 刷新它11=]

$(document).on('click','.remove_cart',function(){
      var row_id=$(this).attr("id");
      $.ajax({
        url : "<?php echo base_url('products/delete_cart');?>",
        method : "POST",
        data : {row_id : row_id},
        success :function(data){
          $('#product_detail_cart').html(data);
          $('#cart-counter').load(location.href + " #cart-counter");
        }
      });
    });

#cart-counter 是我使用 load(location.href + " #cart-counter");

刷新的 id

如何在 Codeigniter 中让我的展示购物车项目计数器成为 ajax？

How do I get my show cart item counter to be ajax in Codeigniter?

ajax

codeigniter-3

shopping-cart