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

Question

I am using session array as a cart in my store. So everytime I add new product to the cart I also update my total value of the cart that looks like: <a class="navbar-brand px-3" href="{{path('checkout')}}" id="cart">Cart{{total}}€</a>

The problem is that the pages is reloaded every time i add a new product, because of return $this->redirectToRoute('eshop'); in my add_product function.

I want to add products and update the total value, without reloading the whole page. How can I implement jQuery and AJAX in this situation? And what changes should be done in add_product function?

I tried this but the product is not declared variable.

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

My products looks like this.

{% for product in products %}    

              <div class="col-lg-2">
                 <div class="card mb-3">
                    <img src="{{asset(product.image)}}" class="img-fluid" alt="{{product.name}}">
                    <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 %}

And also my add_product method in Symfony:

 /**
 * @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');
}

Answer 1

A small example with your codebase.

First remove the Html Form and add a data field for your product id to the button.

{% for product in products %}
    <div class="col-lg-2">
        <div class="card mb-3">
            <img src="{{asset(product.image)}}" class="img-fluid" alt="{{product.name}}">
            <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 %}

Then change your controller class to get the right datatype to work with javascript and add a default value for 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]);
}

Add a span tag around your total value to set it with javascript.

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

Bind the button to the ajax call and change the total field on success.

    $(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);
                }
            });
        });
    });

thats all;)

If you need both behaviours (default url with an redirect response and a json response for ajax calls), you can check if the request ist an ajax request.

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

    // ..... your stuff


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