使用Ajax添加到Sylius中的购物车

Question

I have followed the tutorial here and am able to change the redirect route. But what i want this to be completed purely with Ajax and for the cart total to be updated automatically. However im having trouble over-riding the javascript in the vendor directory in sylius. Has anyone managed to do this using purely Ajax only?

Ive followed the Sylius cookbook documentation to change the redirect after add to cart detailed here. The redirect class which is created returns a new redirect route:

$newUrl = $this->router->generate('your_new_route_name', []); 
$event->setResponse(new RedirectResponse($newUrl));

Ajax is already used to add to cart and the redirect happens afterwards. I tried changing this code to return a simple response ('Success', 200).

This however causes an error in the script in the vendor directory which handles the ajax request.

$.each(response.errors.errors, function (key, message) {
    validationMessage += message;
});

Uncaught TypeError: Cannot read property 'errors' of undefined
  at HTMLFormElement.onFailure (app.js:1363)
  at Object.fail (app.js:23)
  at i (app.js:2)
  at Object.fireWith [as rejectWith] (app.js:2)
  at app.js:23

The guide tells me to handle this on the frontend but im not entirely sure how I can access this script in the vendor directory. The script is the sylus-add-to-cart.js located in the ShopBundle.

Kind regards

Aaron

Answer 1

I implemented this by adding some custom routes to the routing.yml file.

sylius_shop_partial_cart_add_item_ajax:
    path: /add-item
    methods: [GET]
    defaults:
        _controller: sylius.controller.order_item:addAction
        _sylius:
            template: $template
            factory:
                method: createForProduct
                arguments: [expr:notFoundOnNull(service('sylius.repository.product').find($productId))]
            form:
                type: Sylius\Bundle\CoreBundle\Form\Type\Order\AddToCartType
                options:
                    product: expr:notFoundOnNull(service('sylius.repository.product').find($productId))

sylius_shop_ajax_cart_item_remove_ajax:
    path: /{id}/remove
    methods: [DELETE]
    defaults:
        _controller: sylius.controller.order_item:removeAction
        _format: json

I then added used the form selector to create an ajax request on submit and handle the response on the front end.

Hope this helps anybody.