javascript - 在 Sylius 中使用 Ajax 添加到购物车

Question

我已按照教程 here 进行操作并且能够更改重定向路线。但我希望这完全通过 Ajax 完成，并且购物车总数能够自动更新。但是，我无法覆盖 sylius 中 vendor 目录中的 javascript。有没有人成功地仅使用 Ajax 来做到这一点？

我按照 Sylius 食谱文档更改了添加到购物车后的重定向，详情请参见此处。创建的重定向类返回一个新的重定向路由:

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

Ajax 已用于添加到购物车，随后会发生重定向。我尝试更改此代码以返回一个简单的响应(“成功”，200)。

但这会导致处理 ajax 请求的 vendor 目录中的脚本出现错误。

$.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

指南告诉我在前端处理这个问题，但我不完全确定如何在 vendor 目录中访问这个脚本。该脚本是位于 ShopBundle 中的 sylus-add-to-cart.js。

亲切的问候

亚伦

Answer 1

我通过向routing.yml 文件添加一些自定义路由来实现这一点。

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

然后我添加了使用表单选择器在提交时创建 ajax 请求并在前端处理响应。

希望这对任何人都有帮助。