javascript - Symfony2 需要一些关于购物车的清晰度和指导(关于数量)

Question

所以我有一个购物车。我可以添加、删除和查看购物车中的产品。现在的问题是增加和减少数量。例如，如果用户想要购买不止一种相同的产品。

背景:

有两种方法可以增加数量:

每次从其详细信息页面添加产品时，您都可以增加它。这部分有效，我在这里这样做:

if( isset($cart[$id]) ) {

            $qtyAvailable = $product->getStock();

                if ( $qtyAvailable > $cart[ $id ]) {
                    $cart[ $id ] = $cart[ $id ] + 1;
                } else {

                return $this->redirect($this->generateUrl('cart'));
            }


        } else {
            // if it doesnt make it 1
            $cart = $session->get('cart', array());
            $cart[$id] = 1;
        }

这里的$cart是什么？

如您所见，我正在检查购物车中是否已存在产品 ID。如果确实如此，则增加其值(value)。我的数组购物车只有一个键，它是产品的 ID，每次添加相同的产品时，我都会增加 ID 值。

另一种方法是使用按钮 +、- 增加购物车中的数量。我卡在这部分了。

我猜有两种方法可以增加这里的数量，要么使用 javascript，要么像顶部那样编写类似的函数(我更喜欢这个)。因为我不习惯 javascript，所以我认为我能做到这一点的唯一方法是写这个:

<div class="input-append"><input class="span1" style="max-width:34px" placeholder="{{ key }}" id="appendedInputButtons" size="16" type="text">
<button class="btn" type="button" name="add" onclick='javascript: document.getElementById("appendedInputButtons").value++;'><i class="icon-minus"></i></button>
<button class="btn" type="button" name='subtract' onclick='javascript: document.getElementById("appendedInputButtons").value--;'><i class="icon-plus"></i></button>

然而，这只会改变屏幕上的数字，它不会增加或减少数组本身。也许有一种方法可以使用 javascript 更改数组值？

更新

好的，我正在尝试理解一位 StackOverflow 用户提供的代码，但是我遇到了一些问题。

所以我在我的 Twig 上做了这个:

<div class="input-append"><input class="span1" style="max-width:34px" name="quantity" placeholder="{{ key }}" id="appendedInputButtons" size="16" type="text" data-id="12">
                    <button class="btn" type="submit" value="increase"><a href="javascript:void(0)" class="plus"><i class="icon-minus"></i></button>
                    <button class="btn" type="button"><i class="icon-plus"></i></button>

然后在我的 Controller 中，我像示例中那样做了:

/**
 * @Route("/cart/update", name="cart_update")
 */
public function cartUpdateAction( Request $request )
    {
        $response = new JsonResponse();
    $requestData = $request->request->all();
    $productid     = $requestData['product'];/** first put all validations not empty/ is numeric and exists in your db etc*/
    $quantity = $requestData['quantity'];/** first put all validations not empty/ is numeric etc */
    /** if all is good then put your logic*/
    $product = $em->getRepository('MpShopBundle:Product')->find($productid);
    $qtyAvailable = $product->getStock();
    $session = $this->getRequest()->getSession();
    $cart = $session->get('cart', array());

     if ( $qtyAvailable > $cart[ $productid ] ) {
        $cart[ $productid ] = $cart[ $productid ] + 1;
        $response->setData(array('success'=>true,'message'=>'Qunatity increased'));
    } else {
        $response->setData(array('success'=>false,'message'=>'Out of stock'));
    }
    return $response;
}

现在我遇到了问题，我必须在哪里编写 javascript 代码？我读到你必须创建一个新的 .js 文件并使用 assetic 添加它，所以我这样做了:

我已将 jquery 库和我的 ajax 脚本文件添加到我的 base.twig.html 文件中的 Assets 中，如下所示:

{% block javascripts %}

            {# Le Javascript #}         
                {% javascripts 


                    'bundles/mpFrontend/assets/js/jquery-1.11.2.min.js'         
                    'Mp/ShopBundle/Resources/js/scripts.js'   
                    %}      
                    <script src="{{ asset_url }}"></script>       
                {% endjavascripts %}

然后我在要使用 ajax 的 Twig 中扩展 base.html.twig。 但是当我按下按钮时没有任何反应。所以可能是 ajax 代码添加错误？

Answer 1

您可以使用 jQuery和 Ajax要选择值并将值发布到服务器，您必须首先包含库才能使用。

样本标记将是每个项目都有自己的容器一个输入文本或隐藏如果您使用任何 js 效果来增加数量确保此输入在用户执行的每次增量或减量操作时得到更新

<div class="item">
    <input type="text" data-id="product id here" />
    <a href="javascript:void(0)" class="plus">+</a>
    <a href="javascript:void(0)">-</a>
</div>
<div class="item">...</div>
<div class="item">...</div>

使用类 plus 为 anchor 初始化点击处理程序，以便您可以将值发布到服务器以更新您的购物车数组

$('.plus').on('click', function (e) {
    $this = $(this);
    $.ajax({
        type: 'POST',
        url: 'server side action url here',// /cart/update 
        async: false,
        dataType: 'JSON',
        data: {product: $this.parent('.item').find('input').data('id'),quantity: $this.parent('.item').find('input').val()},
        success: function (data) {
          if(data.success == false){
           alert('error')
          }
        }
    });
});

在你的服务器端操作只是一个增加数量的示例代码，如果你知道你可以为减少场景实现相同的想法

use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\HttpFoundation\Request; /** At the top of your controller*/
/**
 * @Route("/cart/update", name="cart_update")
 */
public function cartUpdateAction( Request $request ) {
    $response = new JsonResponse();
    $requestData = $request->request->all();
    $productid     = $requestData['product'];/** first put all validations not empty/ is numeric and exists in your db etc*/
    $quantity = $requestData['quantity'];/** first put all validations not empty/ is numeric etc */
    /** if all is good then put your logic*/
    $product = $em->getRepository('MpShopBundle:Product')->find($productid);
    $qtyAvailable = $product->getStock();
    $session = $this->getRequest()->getSession();
    $cart = $session->get('cart', array());
    if ( $qtyAvailable > $cart[ $productid ] ) {
        $cart[ $productid ] = $cart[ $productid ] + 1;
        $response->setData(array('success'=>true,'message'=>'Qunatity increased'));
    } else {
        $response->setData(array('success'=>false,'message'=>'Out of stock'));
    }
    return $response;
}