将产品添加到购物车 jQuery/Ajax/Symfony/Twig

Posted 2023-02-16

【中文标题】将产品添加到购物车 jQuery/Ajax/Symfony/Twig

【英文标题】：Add products to the cart jQuery/Ajax/Symfony/Twig

【发布时间】：2021-04-27 04:51:16

【问题描述】：

我在商店中使用会话数组作为购物车。因此，每次我将新产品添加到购物车时，我都会更新购物车的总价值，如下所示：<a class="navbar-brand px-3" href="path('checkout')" id="cart">Carttotal€</a>

问题是每次我添加新产品时页面都会重新加载，因为我的 add_product 函数中有return $this->redirectToRoute('eshop');。

我想添加产品并更新总价值，而不是重新加载整个页面。在这种情况下如何实现 jQuery 和 AJAX？以及add_product函数需要做哪些改动？

我试过了，但产品没有声明为变量。

<script>
  $(document).ready(function() 
     $('#btnAddProduct').click(function() 
        var pos = $('product.id').val();
       
       
        $.ajax(
           url: "path('add_product', 'id' : 'id') ",
           type: "POST",
           data: ,
           success: function() 
            
           
        );
     );
  );

我的产品看起来像这样。

% for product in products %    

              <div class="col-lg-2">
                 <div class="card mb-3">
                    <img src="asset(product.image)" class="img-fluid" >
                    <h5 class="text-center" >product.name</h5>
                    <p class="text-center" >€product.price</p>
                    <form action="path('add_product', 'id' : product.id) " method="post">
                       <button id="btnAddProduct" class="btn btn-primary btn-block" type="submit" >Add product</button>
                    </form>
                 </div>
              </div>
             
% endfor %

还有我在 Symfony 中的 add_product 方法：

 /**
 * @Route("/eshop/add_product/id", name="add_product")
 */
public function add_product($id,Request $request)
    
    $product = $this->eshop_model->get_product($id);
    $total= $this->session->get('total');

    $basket = $this->session->get('basket');
    $check = 0;
    foreach($basket as $k => $v)
            if($v['id'] == $product['id'])
                $basket[$k]['quantity']++;
                $basket[$k]['subtotal'] += $product['price'];
                $check = 1;
                break;          
                
    
        
        if($check == 0)
            $a = array('id' => $product['id'], 'quantity' => 1, 'subtotal' => $product['price'], 'price' => $product['price'], 'name' => $product['name']);
            array_push($basket,$a);
        
                 
        $total= $total+ $product['price'];
        $this->session->set('total',$total);
        
        $this->session->set('basket',$basket);

    return $this->redirectToRoute('eshop');

【参考方案1】：

你的代码库的一个小例子。

首先删除 html 表单，并为您的产品 ID 添加一个数据字段到按钮。

% for product in products %
    <div class="col-lg-2">
        <div class="card mb-3">
            <img src="asset(product.image)" class="img-fluid" >
            <h5 class="text-center" >product.name</h5>
            <p class="text-center" >€product.price</p>
            <button id="btnAddProduct" class="btn btn-primary btn-block" type="button" data-id=" product.id ">Add product</button>
        </div>
    </div>
% endfor %

然后更改您的控制器类以获取正确的数据类型以使用 javascript 并为 id 添加默认值。

// Set id default value to get the route without id
/**
 * @Route("/eshop/add_product/id", name="add_product")
 */
public function add_product(Request $request, $id = null): Response


    // ..... your stuff

    // remove 
    return $this->redirectToRoute('eshop');

    // and add 
    return $this->json(['total' => $total]);

在您的总值周围添加一个跨度标签以使用 javascript 进行设置。

<a class="navbar-brand px-3" href="path('checkout')" id="cart">Cart <span id="total"> total </span>€</a>

将按钮绑定到 ajax 调用并在成功时更改总字段。

    $(document).ready(function() 
        $('#btnAddProduct').click(function() 
            $.ajax(
                url: " path('add_product') /" + $(this).data('id'),
                type: "GET",
                success: function(response) 
                    // Change #total text
                    $('#total').text(response.total);
                
            );
        );
    );

就是这样;)

如果您需要这两种行为（带有重定向响应的默认 url 和 ajax 调用的 json 响应），您可以检查请求是否是 ajax 请求。

public function add_product(Request $request, $id = null): Response


    // ..... your stuff


    if ($request->isXmlHttpRequest()) 
        return $this->json(['total' => $total]);
    
    
    return $this->redirectToRoute('eshop');